From fe9e975e82b4c148fc8d9adf0f770315685d47f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=86=E3=82=AF=E3=83=8B=E3=82=AB=E3=83=AB=E8=AB=8F?=
 =?UTF-8?q?=E8=A8=AA=E5=AD=90?= <d@076.ne.jp>
Date: Wed, 27 May 2020 13:17:36 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=83=AA=E7=AB=AF=E6=9C=AB=E3=82=92Vu?=
 =?UTF-8?q?e=E3=81=A7=E5=86=8D=E9=96=8B=E7=99=BA=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   4 +-
 public/mix-manifest.json                 | 245 +----------------------
 resources/js/bootstrap.js                |   5 +
 resources/js/components/bash.vue         | 202 +++++++++++++++++++
 resources/views/layouts/bash.blade.php   | 202 -------------------
 resources/views/layouts/site.blade.php   |  66 +-----
 resources/views/pages/bash/cli.blade.php |  21 +-
 7 files changed, 214 insertions(+), 531 deletions(-)
 create mode 100644 resources/js/components/bash.vue

diff --git a/package.json b/package.json
index fd564e7..9ede3d0 100644
--- a/package.json
+++ b/package.json
@@ -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"
     }
 }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index d17d53f..5bfa117 100755
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -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"
 }
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 6922577..0d118ea 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -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
diff --git a/resources/js/components/bash.vue b/resources/js/components/bash.vue
new file mode 100644
index 0000000..f27d217
--- /dev/null
+++ b/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>
diff --git a/resources/views/layouts/bash.blade.php b/resources/views/layouts/bash.blade.php
index 1493b98..0b16e1e 100644
--- a/resources/views/layouts/bash.blade.php
+++ b/resources/views/layouts/bash.blade.php
@@ -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>
diff --git a/resources/views/layouts/site.blade.php b/resources/views/layouts/site.blade.php
index b85395b..d4a7724 100644
--- a/resources/views/layouts/site.blade.php
+++ b/resources/views/layouts/site.blade.php
@@ -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>
diff --git a/resources/views/pages/bash/cli.blade.php b/resources/views/pages/bash/cli.blade.php
index 18536fa..976c652 100644
--- a/resources/views/pages/bash/cli.blade.php
+++ b/resources/views/pages/bash/cli.blade.php
@@ -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