ロリ端末をVueで再開発した

このコミットが含まれているのは:
テクニカル諏訪子 2020-05-27 13:17:36 +09:00
コミット fe9e975e82
7個のファイルの変更214行の追加531行の削除

ファイルの表示

@ -23,6 +23,8 @@
},
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1"
"jquery": "^3.5.1",
"vue": "^2.6.11",
"vue-draggable-resizable": "^2.2.0"
}
}

ファイルの表示

@ -25,248 +25,5 @@
"/img/bash/top_min.png": "/img/bash/top_min.png",
"/img/bash/top_right_hover.png": "/img/bash/top_right_hover.png",
"/img/bash/top_right.png": "/img/bash/top_right.png",
"/img/bash/user_bg.png": "/img/bash/user_bg.png",
"/img/flags/Afghanistan.png": "/img/flags/Afghanistan.png",
"/img/flags/African Union(OAS).png": "/img/flags/African Union(OAS).png",
"/img/flags/Albania.png": "/img/flags/Albania.png",
"/img/flags/Algeria.png": "/img/flags/Algeria.png",
"/img/flags/American Samoa.png": "/img/flags/American Samoa.png",
"/img/flags/Andorra.png": "/img/flags/Andorra.png",
"/img/flags/Angola.png": "/img/flags/Angola.png",
"/img/flags/Anguilla.png": "/img/flags/Anguilla.png",
"/img/flags/Antarctica.png": "/img/flags/Antarctica.png",
"/img/flags/Antigua & Barbuda.png": "/img/flags/Antigua & Barbuda.png",
"/img/flags/Arab League.png": "/img/flags/Arab League.png",
"/img/flags/Argentina.png": "/img/flags/Argentina.png",
"/img/flags/Armenia.png": "/img/flags/Armenia.png",
"/img/flags/Aruba.png": "/img/flags/Aruba.png",
"/img/flags/ASEAN.png": "/img/flags/ASEAN.png",
"/img/flags/Australia.png": "/img/flags/Australia.png",
"/img/flags/Austria.png": "/img/flags/Austria.png",
"/img/flags/Azerbaijan.png": "/img/flags/Azerbaijan.png",
"/img/flags/Bahamas.png": "/img/flags/Bahamas.png",
"/img/flags/Bahrain.png": "/img/flags/Bahrain.png",
"/img/flags/Bangladesh.png": "/img/flags/Bangladesh.png",
"/img/flags/Barbados.png": "/img/flags/Barbados.png",
"/img/flags/Belarus.png": "/img/flags/Belarus.png",
"/img/flags/Belgium.png": "/img/flags/Belgium.png",
"/img/flags/Belize.png": "/img/flags/Belize.png",
"/img/flags/Benin.png": "/img/flags/Benin.png",
"/img/flags/Bermuda.png": "/img/flags/Bermuda.png",
"/img/flags/Bhutan.png": "/img/flags/Bhutan.png",
"/img/flags/Bolivia.png": "/img/flags/Bolivia.png",
"/img/flags/Bosnia & Herzegovina.png": "/img/flags/Bosnia & Herzegovina.png",
"/img/flags/Botswana.png": "/img/flags/Botswana.png",
"/img/flags/Brazil.png": "/img/flags/Brazil.png",
"/img/flags/Brunei.png": "/img/flags/Brunei.png",
"/img/flags/Bulgaria.png": "/img/flags/Bulgaria.png",
"/img/flags/Burkina Faso.png": "/img/flags/Burkina Faso.png",
"/img/flags/Burundi.png": "/img/flags/Burundi.png",
"/img/flags/Cambodja.png": "/img/flags/Cambodja.png",
"/img/flags/Cameroon.png": "/img/flags/Cameroon.png",
"/img/flags/Canada.png": "/img/flags/Canada.png",
"/img/flags/Cape Verde.png": "/img/flags/Cape Verde.png",
"/img/flags/CARICOM.png": "/img/flags/CARICOM.png",
"/img/flags/Cayman Islands.png": "/img/flags/Cayman Islands.png",
"/img/flags/Central African Republic.png": "/img/flags/Central African Republic.png",
"/img/flags/Chad.png": "/img/flags/Chad.png",
"/img/flags/Chile.png": "/img/flags/Chile.png",
"/img/flags/China.png": "/img/flags/China.png",
"/img/flags/CIS.png": "/img/flags/CIS.png",
"/img/flags/Colombia.png": "/img/flags/Colombia.png",
"/img/flags/Commonwealth.png": "/img/flags/Commonwealth.png",
"/img/flags/Comoros.png": "/img/flags/Comoros.png",
"/img/flags/Congo-Brazzaville.png": "/img/flags/Congo-Brazzaville.png",
"/img/flags/Congo-Kinshasa(Zaire).png": "/img/flags/Congo-Kinshasa(Zaire).png",
"/img/flags/Cook Islands.png": "/img/flags/Cook Islands.png",
"/img/flags/Costa Rica.png": "/img/flags/Costa Rica.png",
"/img/flags/Cote d'Ivoire.png": "/img/flags/Cote d'Ivoire.png",
"/img/flags/Croatia.png": "/img/flags/Croatia.png",
"/img/flags/Cuba.png": "/img/flags/Cuba.png",
"/img/flags/Cyprus.png": "/img/flags/Cyprus.png",
"/img/flags/Czech Republic.png": "/img/flags/Czech Republic.png",
"/img/flags/Denmark.png": "/img/flags/Denmark.png",
"/img/flags/Djibouti.png": "/img/flags/Djibouti.png",
"/img/flags/Dominica.png": "/img/flags/Dominica.png",
"/img/flags/Dominican Republic.png": "/img/flags/Dominican Republic.png",
"/img/flags/Ecuador.png": "/img/flags/Ecuador.png",
"/img/flags/Egypt.png": "/img/flags/Egypt.png",
"/img/flags/El Salvador.png": "/img/flags/El Salvador.png",
"/img/flags/England.png": "/img/flags/England.png",
"/img/flags/Equatorial Guinea.png": "/img/flags/Equatorial Guinea.png",
"/img/flags/Eritrea.png": "/img/flags/Eritrea.png",
"/img/flags/Estonia.png": "/img/flags/Estonia.png",
"/img/flags/Ethiopia.png": "/img/flags/Ethiopia.png",
"/img/flags/European Union.png": "/img/flags/European Union.png",
"/img/flags/Faroes.png": "/img/flags/Faroes.png",
"/img/flags/Fiji.png": "/img/flags/Fiji.png",
"/img/flags/Finland.png": "/img/flags/Finland.png",
"/img/flags/France.png": "/img/flags/France.png",
"/img/flags/Gabon.png": "/img/flags/Gabon.png",
"/img/flags/Gambia.png": "/img/flags/Gambia.png",
"/img/flags/Georgia.png": "/img/flags/Georgia.png",
"/img/flags/Germany.png": "/img/flags/Germany.png",
"/img/flags/Ghana.png": "/img/flags/Ghana.png",
"/img/flags/Gibraltar.png": "/img/flags/Gibraltar.png",
"/img/flags/Greece.png": "/img/flags/Greece.png",
"/img/flags/Greenland.png": "/img/flags/Greenland.png",
"/img/flags/Grenada.png": "/img/flags/Grenada.png",
"/img/flags/Guadeloupe.png": "/img/flags/Guadeloupe.png",
"/img/flags/Guam.png": "/img/flags/Guam.png",
"/img/flags/Guatemala.png": "/img/flags/Guatemala.png",
"/img/flags/Guernsey.png": "/img/flags/Guernsey.png",
"/img/flags/Guinea-Bissau.png": "/img/flags/Guinea-Bissau.png",
"/img/flags/Guinea.png": "/img/flags/Guinea.png",
"/img/flags/Guyana.png": "/img/flags/Guyana.png",
"/img/flags/Haiti.png": "/img/flags/Haiti.png",
"/img/flags/Honduras.png": "/img/flags/Honduras.png",
"/img/flags/Hong Kong.png": "/img/flags/Hong Kong.png",
"/img/flags/Hungary.png": "/img/flags/Hungary.png",
"/img/flags/Iceland.png": "/img/flags/Iceland.png",
"/img/flags/India.png": "/img/flags/India.png",
"/img/flags/Indonesia.png": "/img/flags/Indonesia.png",
"/img/flags/Iran.png": "/img/flags/Iran.png",
"/img/flags/Iraq.png": "/img/flags/Iraq.png",
"/img/flags/Ireland.png": "/img/flags/Ireland.png",
"/img/flags/Islamic Conference.png": "/img/flags/Islamic Conference.png",
"/img/flags/Isle of Man.png": "/img/flags/Isle of Man.png",
"/img/flags/Israel.png": "/img/flags/Israel.png",
"/img/flags/Italy.png": "/img/flags/Italy.png",
"/img/flags/Jamaica.png": "/img/flags/Jamaica.png",
"/img/flags/Japan.png": "/img/flags/Japan.png",
"/img/flags/Jersey.png": "/img/flags/Jersey.png",
"/img/flags/Jordan.png": "/img/flags/Jordan.png",
"/img/flags/Kazakhstan.png": "/img/flags/Kazakhstan.png",
"/img/flags/Kenya.png": "/img/flags/Kenya.png",
"/img/flags/Kiribati.png": "/img/flags/Kiribati.png",
"/img/flags/Kosovo.png": "/img/flags/Kosovo.png",
"/img/flags/Kuwait.png": "/img/flags/Kuwait.png",
"/img/flags/Kyrgyzstan.png": "/img/flags/Kyrgyzstan.png",
"/img/flags/Laos.png": "/img/flags/Laos.png",
"/img/flags/Latvia.png": "/img/flags/Latvia.png",
"/img/flags/Lebanon.png": "/img/flags/Lebanon.png",
"/img/flags/Lesotho.png": "/img/flags/Lesotho.png",
"/img/flags/Liberia.png": "/img/flags/Liberia.png",
"/img/flags/Libya.png": "/img/flags/Libya.png",
"/img/flags/Liechtenstein.png": "/img/flags/Liechtenstein.png",
"/img/flags/LIthuania.png": "/img/flags/LIthuania.png",
"/img/flags/Luxembourg.png": "/img/flags/Luxembourg.png",
"/img/flags/Macao.png": "/img/flags/Macao.png",
"/img/flags/Macedonia.png": "/img/flags/Macedonia.png",
"/img/flags/Madagascar.png": "/img/flags/Madagascar.png",
"/img/flags/Malawi.png": "/img/flags/Malawi.png",
"/img/flags/Malaysia.png": "/img/flags/Malaysia.png",
"/img/flags/Maldives.png": "/img/flags/Maldives.png",
"/img/flags/Mali.png": "/img/flags/Mali.png",
"/img/flags/Malta.png": "/img/flags/Malta.png",
"/img/flags/Marshall Islands.png": "/img/flags/Marshall Islands.png",
"/img/flags/Martinique.png": "/img/flags/Martinique.png",
"/img/flags/Mauritania.png": "/img/flags/Mauritania.png",
"/img/flags/Mauritius.png": "/img/flags/Mauritius.png",
"/img/flags/Mexico.png": "/img/flags/Mexico.png",
"/img/flags/Micronesia.png": "/img/flags/Micronesia.png",
"/img/flags/Moldova.png": "/img/flags/Moldova.png",
"/img/flags/Monaco.png": "/img/flags/Monaco.png",
"/img/flags/Mongolia.png": "/img/flags/Mongolia.png",
"/img/flags/Montenegro.png": "/img/flags/Montenegro.png",
"/img/flags/Montserrat.png": "/img/flags/Montserrat.png",
"/img/flags/Morocco.png": "/img/flags/Morocco.png",
"/img/flags/Mozambique.png": "/img/flags/Mozambique.png",
"/img/flags/Myanmar(Burma).png": "/img/flags/Myanmar(Burma).png",
"/img/flags/Namibia.png": "/img/flags/Namibia.png",
"/img/flags/NATO.png": "/img/flags/NATO.png",
"/img/flags/Nauru.png": "/img/flags/Nauru.png",
"/img/flags/Nepal.png": "/img/flags/Nepal.png",
"/img/flags/Netherlands Antilles.png": "/img/flags/Netherlands Antilles.png",
"/img/flags/Netherlands.png": "/img/flags/Netherlands.png",
"/img/flags/New Caledonia.png": "/img/flags/New Caledonia.png",
"/img/flags/New Zealand.png": "/img/flags/New Zealand.png",
"/img/flags/Nicaragua.png": "/img/flags/Nicaragua.png",
"/img/flags/Niger.png": "/img/flags/Niger.png",
"/img/flags/Nigeria.png": "/img/flags/Nigeria.png",
"/img/flags/North Korea.png": "/img/flags/North Korea.png",
"/img/flags/Northern Cyprus.png": "/img/flags/Northern Cyprus.png",
"/img/flags/Northern Ireland.png": "/img/flags/Northern Ireland.png",
"/img/flags/Norway.png": "/img/flags/Norway.png",
"/img/flags/Olimpic Movement.png": "/img/flags/Olimpic Movement.png",
"/img/flags/Oman.png": "/img/flags/Oman.png",
"/img/flags/OPEC.png": "/img/flags/OPEC.png",
"/img/flags/Pakistan.png": "/img/flags/Pakistan.png",
"/img/flags/Palau.png": "/img/flags/Palau.png",
"/img/flags/Palestine.png": "/img/flags/Palestine.png",
"/img/flags/Panama.png": "/img/flags/Panama.png",
"/img/flags/Papua New Guinea.png": "/img/flags/Papua New Guinea.png",
"/img/flags/Paraguay.png": "/img/flags/Paraguay.png",
"/img/flags/Peru.png": "/img/flags/Peru.png",
"/img/flags/Philippines.png": "/img/flags/Philippines.png",
"/img/flags/Poland.png": "/img/flags/Poland.png",
"/img/flags/Portugal.png": "/img/flags/Portugal.png",
"/img/flags/Puerto Rico.png": "/img/flags/Puerto Rico.png",
"/img/flags/Qatar.png": "/img/flags/Qatar.png",
"/img/flags/Red Cross.png": "/img/flags/Red Cross.png",
"/img/flags/Reunion.png": "/img/flags/Reunion.png",
"/img/flags/Romania.png": "/img/flags/Romania.png",
"/img/flags/Russian Federation.png": "/img/flags/Russian Federation.png",
"/img/flags/Rwanda.png": "/img/flags/Rwanda.png",
"/img/flags/Saint Lucia.png": "/img/flags/Saint Lucia.png",
"/img/flags/Samoa.png": "/img/flags/Samoa.png",
"/img/flags/San Marino.png": "/img/flags/San Marino.png",
"/img/flags/Sao Tome & Principe.png": "/img/flags/Sao Tome & Principe.png",
"/img/flags/Saudi Arabia.png": "/img/flags/Saudi Arabia.png",
"/img/flags/Scotland.png": "/img/flags/Scotland.png",
"/img/flags/Senegal.png": "/img/flags/Senegal.png",
"/img/flags/Serbia(Yugoslavia).png": "/img/flags/Serbia(Yugoslavia).png",
"/img/flags/Seychelles.png": "/img/flags/Seychelles.png",
"/img/flags/Sierra Leone.png": "/img/flags/Sierra Leone.png",
"/img/flags/Singapore.png": "/img/flags/Singapore.png",
"/img/flags/Slovakia.png": "/img/flags/Slovakia.png",
"/img/flags/Slovenia.png": "/img/flags/Slovenia.png",
"/img/flags/Solomon Islands.png": "/img/flags/Solomon Islands.png",
"/img/flags/Somalia.png": "/img/flags/Somalia.png",
"/img/flags/Somaliland.png": "/img/flags/Somaliland.png",
"/img/flags/South Africa.png": "/img/flags/South Africa.png",
"/img/flags/South Korea.png": "/img/flags/South Korea.png",
"/img/flags/Spain.png": "/img/flags/Spain.png",
"/img/flags/Sri Lanka.png": "/img/flags/Sri Lanka.png",
"/img/flags/St Kitts & Nevis.png": "/img/flags/St Kitts & Nevis.png",
"/img/flags/St Vincent & the Grenadines.png": "/img/flags/St Vincent & the Grenadines.png",
"/img/flags/Sudan.png": "/img/flags/Sudan.png",
"/img/flags/Suriname.png": "/img/flags/Suriname.png",
"/img/flags/Swaziland.png": "/img/flags/Swaziland.png",
"/img/flags/Sweden.png": "/img/flags/Sweden.png",
"/img/flags/Switzerland.png": "/img/flags/Switzerland.png",
"/img/flags/Syria.png": "/img/flags/Syria.png",
"/img/flags/Tahiti(French Polinesia).png": "/img/flags/Tahiti(French Polinesia).png",
"/img/flags/Taiwan.png": "/img/flags/Taiwan.png",
"/img/flags/Tajikistan.png": "/img/flags/Tajikistan.png",
"/img/flags/Tanzania.png": "/img/flags/Tanzania.png",
"/img/flags/Thailand.png": "/img/flags/Thailand.png",
"/img/flags/Timor-Leste.png": "/img/flags/Timor-Leste.png",
"/img/flags/Togo.png": "/img/flags/Togo.png",
"/img/flags/Tonga.png": "/img/flags/Tonga.png",
"/img/flags/Trinidad & Tobago.png": "/img/flags/Trinidad & Tobago.png",
"/img/flags/Tunisia.png": "/img/flags/Tunisia.png",
"/img/flags/Turkey.png": "/img/flags/Turkey.png",
"/img/flags/Turkmenistan.png": "/img/flags/Turkmenistan.png",
"/img/flags/Turks and Caicos Islands.png": "/img/flags/Turks and Caicos Islands.png",
"/img/flags/Tuvalu.png": "/img/flags/Tuvalu.png",
"/img/flags/Uganda.png": "/img/flags/Uganda.png",
"/img/flags/Ukraine.png": "/img/flags/Ukraine.png",
"/img/flags/United Arab Emirates.png": "/img/flags/United Arab Emirates.png",
"/img/flags/United Kingdom(Great Britain).png": "/img/flags/United Kingdom(Great Britain).png",
"/img/flags/United Nations.png": "/img/flags/United Nations.png",
"/img/flags/United States of America (USA).png": "/img/flags/United States of America (USA).png",
"/img/flags/Uruguay.png": "/img/flags/Uruguay.png",
"/img/flags/Uzbekistan.png": "/img/flags/Uzbekistan.png",
"/img/flags/Vanutau.png": "/img/flags/Vanutau.png",
"/img/flags/Vatican City.png": "/img/flags/Vatican City.png",
"/img/flags/Venezuela.png": "/img/flags/Venezuela.png",
"/img/flags/Viet Nam.png": "/img/flags/Viet Nam.png",
"/img/flags/Virgin Islands British.png": "/img/flags/Virgin Islands British.png",
"/img/flags/Virgin Islands US.png": "/img/flags/Virgin Islands US.png",
"/img/flags/Wales.png": "/img/flags/Wales.png",
"/img/flags/Western Sahara.png": "/img/flags/Western Sahara.png",
"/img/flags/Yemen.png": "/img/flags/Yemen.png",
"/img/flags/Zambia.png": "/img/flags/Zambia.png",
"/img/flags/Zimbabwe.png": "/img/flags/Zimbabwe.png"
"/img/bash/user_bg.png": "/img/bash/user_bg.png"
}

ファイルの表示

@ -6,10 +6,15 @@ window._ = require('lodash');
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Vue.component('bash', require('./components/bash.vue').default);
const app = new Vue({ el: '#app' });
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting

202
resources/js/components/bash.vue ノーマルファイル
ファイルの表示

@ -0,0 +1,202 @@
<template>
<span>
<a href="#" @click="show = true"><img src="/img/bash/app_icon.png" width="50" /></a>
<span v-if="show">
<vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="konsoleuser" :x="50" :y="10" :z="99999999">
<div style="width: 100%; position: relative;">
<div class="drag-handle-left"></div>
<div class="drag-handle">ロリ端末</div>
<div class="drag-handle-min"></div>
<div class="drag-handle-max"></div>
<div class="drag-handle-right" @click="show = false"></div>
</div>
<div class="konsole_left"></div>
<div style="padding: 5px;">
ロリコマンドラインですね<br />
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;"></span>
</div>
<div class="konsole_right"></div>
<div class="konsole_bottom_left"></div>
<div class="konsole_bottom"></div>
<div class="konsole_bottom_right"></div>
</vue-draggable-resizable>
</span>
</span>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
Vue.component('vue-draggable-resizable', VueDraggableResizable);
export default {
data: function () {
return {
show: false,
width: 0,
height: 0,
x: 0,
y: 0
}
},
methods: {
onResize: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function (x, y) {
this.x = x
this.y = y
}
}
}
</script>
<style scoped>
#dragger {
position: absolute;
z-index: 9;
}
#draggerheader {
cursor: move;
z-index: 10;
}
.konsole {
width: 600px;
height: 358px;
margin: auto;
color: #fcfcfc;
}
.drag-handle-left {
height: 30px;
width: 30px;
background: url('/img/bash/top_left.png') no-repeat;
position: absolute;
top: 0;
left: 0;
}
.drag-handle {
height: 30px;
background: url('/img/bash/top_bg.png') repeat-x;
width: auto;
margin-left: 30px;
margin-right: 74px;
padding-top: 7px;
padding-right: 30px;
text-align: center;
font-weight: bold;
}
.drag-handle-right {
height: 30px;
width: 28px;
background: url('/img/bash/top_right.png') no-repeat;
position: absolute;
top: 0;
right: 0;
}
.drag-handle-right:hover {
background: url('/img/bash/top_right_hover.png') no-repeat;
cursor: default;
}
.drag-handle-max {
height: 30px;
width: 23px;
background: url('/img/bash/top_max.png') no-repeat;
position: absolute;
top: 0;
right: 28px;
}
.drag-handle-max:hover {
background: url('/img/bash/top_max_hover.png') no-repeat;
cursor: default;
}
.drag-handle-min {
height: 30px;
width: 23px;
background: url('/img/bash/top_min.png') no-repeat;
position: absolute;
top: 0;
right: 51px;
}
.drag-handle-min:hover {
background: url('/img/bash/top_min_hover.png') no-repeat;
cursor: default;
}
.konsole_left {
width: 2px;
background: url('/img/bash/left_bg.png') repeat-y;
position: absolute;
top: 30px;
left: 0;
height: 325px;
}
.konsoleuser { background: url('/img/bash/user_bg.png') repeat; }
.konsoleroot { background: url('/img/bash/root_bg.png') repeat; }
.vdr {
background-size: cover;
backdrop-filter: blur(17px);
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
font-size: 12px;
/* white-space: pre; */
color: #fcfcfc;
overflow: hidden;
position: absolute;
top: 30px;
left: 2px;
height: 316px !important;
width: 586px !important;
padding: 0;
}
.resize-handle-mr {
width: 2px;
background: url('/img/bash/right_bg.png') repeat-y;
position: absolute;
height: 325px;
top: 30px;
right: 0;
}
.konsole_bottom_left {
width: 3px;
height: 3px;
background: url('/img/bash/bottom_left.png') no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
.konsole_bottom {
height: 2px;
background: url('/img/bash/bottom_bg.png') repeat-x;
position: absolute;
bottom: 0;
left: 2px;
width: 595px;
}
.konsole_bottom_right {
height: 3px;
width: 3px;
background: url('/img/bash/bottom_right.png') no-repeat;
position: absolute;
right: 0;
bottom: 0;
}
</style>

ファイルの表示

@ -15,151 +15,6 @@
background: url('/img/bash/81004208_p0.jpg') no-repeat;
background-position: center 25%;
}
#dragger {
position: absolute;
z-index: 9;
}
#draggerheader {
cursor: move;
z-index: 10;
}
.konsole {
width: 600px;
height: 358px;
margin: auto;
color: #fcfcfc;
}
.konsole_top_left {
height: 30px;
width: 30px;
background: url('/img/bash/top_left.png') no-repeat;
position: absolute;
top: 0;
left: 0;
}
.konsole_top {
height: 30px;
background: url('/img/bash/top_bg.png') repeat-x;
position: absolute;
top: 0;
left: 30px;
width: 466px;
padding-top: 7px;
padding-right: 30px;
text-align: center;
font-weight: bold;
}
.konsole_top_right {
height: 30px;
width: 28px;
background: url('/img/bash/top_right.png') no-repeat;
position: absolute;
top: 0;
right: 0;
}
.konsole_top_right:hover {
background: url('/img/bash/top_right_hover.png') no-repeat;
cursor: default;
}
.konsole_top_max {
height: 30px;
width: 23px;
background: url('/img/bash/top_max.png') no-repeat;
position: absolute;
top: 0;
right: 28px;
}
.konsole_top_max:hover {
background: url('/img/bash/top_max_hover.png') no-repeat;
cursor: default;
}
.konsole_top_min {
height: 30px;
width: 23px;
background: url('/img/bash/top_min.png') no-repeat;
position: absolute;
top: 0;
right: 51px;
}
.konsole_top_min:hover {
background: url('/img/bash/top_min_hover.png') no-repeat;
cursor: default;
}
.konsole_left {
width: 2px;
background: url('/img/bash/left_bg.png') repeat-y;
position: absolute;
top: 30px;
left: 0;
height: 325px;
}
.konsoleuser { background: url('/img/bash/user_bg.png') repeat; }
.konsoleroot { background: url('/img/bash/root_bg.png') repeat; }
.konsoleuser, .konsoleroot {
background-size: cover;
backdrop-filter: blur(17px);
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
font-size: 12px;
/* white-space: pre; */
color: #fcfcfc;
overflow: auto;
position: absolute;
top: 30px;
left: 2px;
height: 316px;
width: 586px;
padding: 5px;
}
.konsole_right {
width: 2px;
background: url('/img/bash/right_bg.png') repeat-y;
position: absolute;
height: 325px;
top: 30px;
right: 0;
}
.konsole_bottom_left {
width: 3px;
height: 3px;
background: url('/img/bash/bottom_left.png') no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
.konsole_bottom {
height: 2px;
background: url('/img/bash/bottom_bg.png') repeat-x;
position: absolute;
bottom: 0;
left: 2px;
width: 595px;
}
.konsole_bottom_right {
height: 3px;
width: 3px;
background: url('/img/bash/bottom_right.png') no-repeat;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
@ -167,62 +22,5 @@
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
// Make the DIV element draggable:
dragElement(document.getElementById("dragger"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
function showdiv (id) {
if (showdiv.div) showdiv.div.style.display = 'none';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'block';
}
function hidediv (id) {
if (showdiv.div) showdiv.div.style.display = 'block';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'none';
}
</script>
</body>
</html>

ファイルの表示

@ -91,25 +91,7 @@
<div class="row">
<div class="col-md" style="padding-bottom: 32px;">
<div class="within">
<a href="#" onclick="showdiv('dragger');"><img src="/img/bash/app_icon.png" width="50" /></a>
</div>
<div class="konsole" id="dragger">
<div class="draggerheader">
<div class="konsole_top_left"></div>
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
<div class="konsole_top_min"></div>
<div class="konsole_top_max"></div>
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
</div>
<div class="konsole_left"></div>
<div class="konsoleuser">
ロリコマンドラインですね〜♡<br />
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;"></span>
</div>
<div class="konsole_right"></div>
<div class="konsole_bottom_left"></div>
<div class="konsole_bottom"></div>
<div class="konsole_bottom_right"></div>
<bash />
</div>
</div>
</div>
@ -136,51 +118,5 @@
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
dragElement(document.getElementById("dragger"));
function dragElement (elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
else elmnt.onmousedown = dragMouseDown;
function dragMouseDown (e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag (e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement () {
document.onmouseup = null;
document.onmousemove = null;
}
}
function showdiv (id) {
if (showdiv.div) showdiv.div.style.display = 'none';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'block';
}
function hidediv (id) {
if (showdiv.div) showdiv.div.style.display = 'block';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'none';
}
</script>
</body>
</html>

ファイルの表示

@ -2,24 +2,7 @@
@section('content')
<a href="#" onclick="showdiv('dragger');"><img src="/img/bash/app_icon.png" width="50" /></a>
<div class="konsole" id="dragger">
<div id="draggerheader">
<div class="konsole_top_left"></div>
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
<div class="konsole_top_min"></div>
<div class="konsole_top_max"></div>
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
</div>
<div class="konsole_left"></div>
<div class="konsoleuser">
ロリコマンドラインですね〜♡<br />
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;"></span>
</div>
<div class="konsole_right"></div>
<div class="konsole_bottom_left"></div>
<div class="konsole_bottom"></div>
<div class="konsole_bottom_right"></div>
<div id="app">
<bash />
</div>
@endsection