From 1eb40503f5b1ba494716c6a75ee70349942d766c 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: Sat, 2 May 2020 02:47:04 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B3=E3=83=9E=E3=83=B3=E3=83=89=E3=83=A9?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/bash/cli-bckp.vue    | 238 +++++++++++++++
 .../assets/js/components/bash/cli-old.vue     | 128 ++++++++
 resources/assets/js/components/bash/cli.vue   | 277 +++++++++++-------
 resources/assets/sass/app.scss                | 146 +++++++++
 resources/views/layouts/bash.blade.php        |  20 +-
 resources/views/layouts/site.blade.php        |  71 +++++
 resources/views/pages/bash/cli.blade.php      |   4 +-
 7 files changed, 765 insertions(+), 119 deletions(-)
 create mode 100644 resources/assets/js/components/bash/cli-bckp.vue
 create mode 100644 resources/assets/js/components/bash/cli-old.vue

diff --git a/resources/assets/js/components/bash/cli-bckp.vue b/resources/assets/js/components/bash/cli-bckp.vue
new file mode 100644
index 0000000..446d338
--- /dev/null
+++ b/resources/assets/js/components/bash/cli-bckp.vue
@@ -0,0 +1,238 @@
+<template>
+  <span>
+    <img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
+    <vue-resizable
+      class="resizable"
+      ref="resizableComponent"
+      :dragSelector="dragSelector"
+      :active="handlers"
+      :fit-parent="fit"
+      :max-width="maxW | checkEmpty"
+      :max-height="maxH | checkEmpty"
+      :min-width="minW | checkEmpty"
+      :min-height="minH | checkEmpty"
+      :width="width"
+      :height="height"
+      :top="top"
+      :left="left"
+      v-show="openterm"
+      fit-parent
+      @mount="eHandler"
+      @resize:move="eHandler"
+      @resize:start="eHandler"
+      @resize:end="eHandler"
+      @drag:move="eHandler"
+      @drag:start="eHandler"
+      @drag:end="eHandler"
+    >
+      <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" @click="openterm = false"></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>
+    </vue-resizable>
+  </span>
+</template>
+
+<script>
+  import VueResizable from 'vue-resizable';
+
+  export default {
+    components: { VueResizable },
+    data: function () {
+      const tW = 600;
+      const tH = 300;
+      return {
+        openterm: false,
+        handlers: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
+        left: `calc(50% - ${tW / 2}px)`,
+        top: `calc(50% - ${tH / 2}px)`,
+        height: tH,
+        width: tW,
+        maxW: 600,
+        maxH: 300,
+        minW: 600,
+        minH: 300,
+        fit: true,
+        event: "",
+        dragSelector: ".draggerheader"
+      }
+    },
+    created: function () {
+    },
+    methods: {
+      eHandler (data) {
+        console.log(data);
+        this.width = data.width;
+        this.height = data.height;
+        this.left = data.left;
+        this.top = data.top;
+        this.event = data.eventName;
+      }
+    },
+    filters: {
+      checkEmpty (value) {
+        return typeof value !== "number" ? 0 : value;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  #dragger {
+    position: absolute;
+    z-index: 9;
+  }
+
+  #draggerheader {
+    cursor: move;
+    z-index: 10;
+  }
+
+  .konsole {
+    width: 600px;
+    height: 300px;
+    margin: auto;
+    color: #fcfcfc;
+  }
+
+  .konsole_top_left {
+    height: 30px;
+    width: 30px;
+    background: url('/assets/img/bash/top_left.png') no-repeat;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .konsole_top {
+    height: 30px;
+    background: url('/assets/img/bash/top_bg.png') repeat-x;
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 496px;
+    padding-top: 7px;
+    padding-right: 30px;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .konsole_top_right {
+    height: 30px;
+    width: 28px;
+    background: url('/assets/img/bash/top_right.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .konsole_top_right:hover {
+    background: url('/assets/img/bash/top_right_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_top_max {
+    height: 30px;
+    width: 23px;
+    background: url('/assets/img/bash/top_max.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 28px;
+  }
+
+  .konsole_top_max:hover {
+    background: url('/assets/img/bash/top_max_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_top_min {
+    height: 30px;
+    width: 23px;
+    background: url('/assets/img/bash/top_min.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 51px;
+  }
+
+  .konsole_top_min:hover {
+    background: url('/assets/img/bash/top_min_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_left {
+    width: 2px;
+    background: url('/assets/img/bash/left_bg.png') repeat-y;
+    position: absolute;
+    top: 30px;
+    left: 0;
+    height: 267px;
+  }
+
+  .konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
+  .konsoleroot { background: url('/assets/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;
+    color: #fcfcfc;
+    overflow: auto;
+    position: absolute;
+    top: 30px;
+    left: 2px;
+    height: 268px;
+    width: 596px;
+    padding: 5px;
+  }
+
+  .konsole_right {
+    width: 2px;
+    background: url('/assets/img/bash/right_bg.png') repeat-y;
+    position: absolute;
+    height: 267px;
+    top: 30px;
+    right: 0;
+  }
+
+  .konsole_bottom_left {
+    width: 3px;
+    height: 3px;
+    background: url('/assets/img/bash/bottom_left.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  .konsole_bottom {
+    height: 2px;
+    background: url('/assets/img/bash/bottom_bg.png') repeat-x;
+    position: absolute;
+    bottom: 0;
+    left: 2px;
+    width: 595px;
+  }
+
+  .konsole_bottom_right {
+    height: 3px;
+    width: 3px;
+    background: url('/assets/img/bash/bottom_right.png') no-repeat;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/bash/cli-old.vue b/resources/assets/js/components/bash/cli-old.vue
new file mode 100644
index 0000000..bd585d8
--- /dev/null
+++ b/resources/assets/js/components/bash/cli-old.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
+      {{ res.text }}
+      <br v-if="res.text" />
+      <span class="regBold">
+        {{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
+      </span>$
+      <input
+        :key="i"
+        :password="res.password"
+        :autofocus="res.active"
+        :disabled="!res.active"
+        spellcheck="false"
+        type="text"
+        class="inputField"
+        v-model="res.command"
+        @keyup.enter="exec(res.command, i)"
+      />
+      <br />
+    </div>
+  </div>
+</template>
+
+<script>
+  import Cookies from 'js-cookie';
+
+  export default {
+    data: function () {
+      return {
+        user: Cookies.get('username'),
+        host: '076.ne.jp',
+        pwd: '/',
+        result: []
+      }
+    },
+    created: function () {
+      this.result = [];
+      this.user = Cookies.get('username');
+      this.host = '076.ne.jp';
+      this.pwd = '/';
+
+      this.result.push({
+        username: this.user,
+        hostname: this.host,
+        path: this.pwd,
+        active: true,
+        text: '',
+        field: false,
+        password: false,
+        command: ''
+      });
+    },
+    methods: {
+      exec(text, key) {
+        var arg = text.split(' ');
+        this.result[key].active = false;
+
+        if (arg[0] === 'ls') this.ls(this.result[key].path);
+        else if (arg[0] === 'cd') this.cd(arg[1]);
+        else if (arg[0] === 'clear') this.clear();
+        else this.result.push({
+          username: this.user,
+          hostname: this.host,
+          path: this.pwd,
+          active: true,
+          text: arg[0] + ': コマンドは見つかれません。',
+          field: false,
+          password: false,
+          command: ''
+        });
+      },
+      ls(pwd) {
+        var neopwd = pwd.replace('/', 'sl');
+        axios.get('/api/rpc/bash/exec', { arg: ['ls', '', ''] }).then(res => {
+          this.result.push({
+            username: this.user,
+            hostname: this.host,
+            path: this.pwd,
+            active: true,
+            text: res.data,
+            field: false,
+            password: false,
+            command: ''
+          })
+        })
+      },
+      cd(pwd) {
+        if (pwd === '/fuck' || pwd === 'fuck') {
+          this.result.push({
+            username: this.user,
+            hostname: this.host,
+            path: this.pwd,
+            active: true,
+            text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
+            field: false,
+            password: false,
+            command: ''
+          });
+          return false;
+        }
+        if (!pwd.startsWith('/')) pwd = '/' + pwd;
+
+        this.pwd = pwd;
+      },
+      clear() { this.result = []; }
+    }
+  }
+</script>
+
+<style scoped>
+  .inputField {
+    background-color: #31363b;
+    color: #2ecc71;
+    border-width: 0px;
+    font-family: monospace;
+    font-size: large;
+    width: 500px;
+    outline: none;
+  }
+  .regBold { font-weight: bold; }
+  .regText { color: #2ecc71; }
+  .pathText { color: #3498db; }
+  h1, h2 { font-weight: normal; }
+  ul { list-style-type: none; padding: 0; }
+  li { display: inline-block; margin: 0 10px; }
+  a { color: #1cdc9a; }
+</style>
diff --git a/resources/assets/js/components/bash/cli.vue b/resources/assets/js/components/bash/cli.vue
index bd585d8..26fa209 100644
--- a/resources/assets/js/components/bash/cli.vue
+++ b/resources/assets/js/components/bash/cli.vue
@@ -1,128 +1,179 @@
 <template>
-  <div>
-    <div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
-      {{ res.text }}
-      <br v-if="res.text" />
-      <span class="regBold">
-        {{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
-      </span>$
-      <input
-        :key="i"
-        :password="res.password"
-        :autofocus="res.active"
-        :disabled="!res.active"
-        spellcheck="false"
-        type="text"
-        class="inputField"
-        v-model="res.command"
-        @keyup.enter="exec(res.command, i)"
-      />
-      <br />
+  <span>
+    <img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
+    <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" @click="openterm = false"></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>
-  </div>
+  </span>
 </template>
 
 <script>
-  import Cookies from 'js-cookie';
-
   export default {
     data: function () {
       return {
-        user: Cookies.get('username'),
-        host: '076.ne.jp',
-        pwd: '/',
-        result: []
+        openterm: false
       }
-    },
-    created: function () {
-      this.result = [];
-      this.user = Cookies.get('username');
-      this.host = '076.ne.jp';
-      this.pwd = '/';
-
-      this.result.push({
-        username: this.user,
-        hostname: this.host,
-        path: this.pwd,
-        active: true,
-        text: '',
-        field: false,
-        password: false,
-        command: ''
-      });
-    },
-    methods: {
-      exec(text, key) {
-        var arg = text.split(' ');
-        this.result[key].active = false;
-
-        if (arg[0] === 'ls') this.ls(this.result[key].path);
-        else if (arg[0] === 'cd') this.cd(arg[1]);
-        else if (arg[0] === 'clear') this.clear();
-        else this.result.push({
-          username: this.user,
-          hostname: this.host,
-          path: this.pwd,
-          active: true,
-          text: arg[0] + ': コマンドは見つかれません。',
-          field: false,
-          password: false,
-          command: ''
-        });
-      },
-      ls(pwd) {
-        var neopwd = pwd.replace('/', 'sl');
-        axios.get('/api/rpc/bash/exec', { arg: ['ls', '', ''] }).then(res => {
-          this.result.push({
-            username: this.user,
-            hostname: this.host,
-            path: this.pwd,
-            active: true,
-            text: res.data,
-            field: false,
-            password: false,
-            command: ''
-          })
-        })
-      },
-      cd(pwd) {
-        if (pwd === '/fuck' || pwd === 'fuck') {
-          this.result.push({
-            username: this.user,
-            hostname: this.host,
-            path: this.pwd,
-            active: true,
-            text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
-            field: false,
-            password: false,
-            command: ''
-          });
-          return false;
-        }
-        if (!pwd.startsWith('/')) pwd = '/' + pwd;
-
-        this.pwd = pwd;
-      },
-      clear() { this.result = []; }
     }
   }
 </script>
 
 <style scoped>
-  .inputField {
-    background-color: #31363b;
-    color: #2ecc71;
-    border-width: 0px;
-    font-family: monospace;
-    font-size: large;
-    width: 500px;
-    outline: none;
+  #dragger {
+    position: absolute;
+    z-index: 9;
   }
-  .regBold { font-weight: bold; }
-  .regText { color: #2ecc71; }
-  .pathText { color: #3498db; }
-  h1, h2 { font-weight: normal; }
-  ul { list-style-type: none; padding: 0; }
-  li { display: inline-block; margin: 0 10px; }
-  a { color: #1cdc9a; }
-</style>
+
+  #draggerheader {
+    cursor: move;
+    z-index: 10;
+  }
+
+  .konsole {
+    width: 600px;
+    height: 300px;
+    margin: auto;
+    color: #fcfcfc;
+  }
+
+  .konsole_top_left {
+    height: 30px;
+    width: 30px;
+    background: url('/assets/img/bash/top_left.png') no-repeat;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .konsole_top {
+    height: 30px;
+    background: url('/assets/img/bash/top_bg.png') repeat-x;
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 496px;
+    padding-top: 7px;
+    padding-right: 30px;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .konsole_top_right {
+    height: 30px;
+    width: 28px;
+    background: url('/assets/img/bash/top_right.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .konsole_top_right:hover {
+    background: url('/assets/img/bash/top_right_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_top_max {
+    height: 30px;
+    width: 23px;
+    background: url('/assets/img/bash/top_max.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 28px;
+  }
+
+  .konsole_top_max:hover {
+    background: url('/assets/img/bash/top_max_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_top_min {
+    height: 30px;
+    width: 23px;
+    background: url('/assets/img/bash/top_min.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 51px;
+  }
+
+  .konsole_top_min:hover {
+    background: url('/assets/img/bash/top_min_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_left {
+    width: 2px;
+    background: url('/assets/img/bash/left_bg.png') repeat-y;
+    position: absolute;
+    top: 30px;
+    left: 0;
+    height: 267px;
+  }
+
+  .konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
+  .konsoleroot { background: url('/assets/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;
+    color: #fcfcfc;
+    overflow: auto;
+    position: absolute;
+    top: 30px;
+    left: 2px;
+    height: 268px;
+    width: 596px;
+    padding: 5px;
+  }
+
+  .konsole_right {
+    width: 2px;
+    background: url('/assets/img/bash/right_bg.png') repeat-y;
+    position: absolute;
+    height: 267px;
+    top: 30px;
+    right: 0;
+  }
+
+  .konsole_bottom_left {
+    width: 3px;
+    height: 3px;
+    background: url('/assets/img/bash/bottom_left.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  .konsole_bottom {
+    height: 2px;
+    background: url('/assets/img/bash/bottom_bg.png') repeat-x;
+    position: absolute;
+    bottom: 0;
+    left: 2px;
+    width: 595px;
+  }
+
+  .konsole_bottom_right {
+    height: 3px;
+    width: 3px;
+    background: url('/assets/img/bash/bottom_right.png') no-repeat;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index cfc20ca..098bb37 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -43,6 +43,152 @@
     right: 16px;
   }
 
+  #dragger {
+    position: absolute;
+    z-index: 9;
+  }
+
+  #draggerheader {
+    cursor: move;
+    z-index: 10;
+  }
+
+  .konsole {
+    display: none;
+    width: 600px;
+    height: 358px;
+    margin: auto;
+    color: #fcfcfc;
+  }
+
+  .konsole_top_left {
+    height: 30px;
+    width: 30px;
+    background: url('/assets/img/bash/top_left.png') no-repeat;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .konsole_top {
+    height: 30px;
+    background: url('/assets/img/bash/top_bg.png') repeat-x;
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 496px;
+    padding-top: 7px;
+    padding-right: 30px;
+    text-align: center;
+    font-weight: bold;
+    cursor: move;
+  }
+
+  .konsole_top_right {
+    height: 30px;
+    width: 28px;
+    background: url('/assets/img/bash/top_right.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .konsole_top_right:hover {
+    background: url('/assets/img/bash/top_right_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_top_max {
+    height: 30px;
+    width: 23px;
+    background: url('/assets/img/bash/top_max.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 28px;
+  }
+
+  .konsole_top_max:hover {
+    background: url('/assets/img/bash/top_max_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_top_min {
+    height: 30px;
+    width: 23px;
+    background: url('/assets/img/bash/top_min.png') no-repeat;
+    position: absolute;
+    top: 0;
+    right: 51px;
+  }
+
+  .konsole_top_min:hover {
+    background: url('/assets/img/bash/top_min_hover.png') no-repeat;
+    cursor: default;
+  }
+
+  .konsole_left {
+    width: 2px;
+    background: url('/assets/img/bash/left_bg.png') repeat-y;
+    position: absolute;
+    top: 30px;
+    left: 0;
+    height: 325px;
+  }
+
+  .konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
+  .konsoleroot { background: url('/assets/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;
+    color: #fcfcfc;
+    overflow: auto;
+    position: absolute;
+    top: 30px;
+    left: 2px;
+    height: 326px;
+    width: 596px;
+    padding: 5px;
+  }
+
+  .konsole_right {
+    width: 2px;
+    background: url('/assets/img/bash/right_bg.png') repeat-y;
+    position: absolute;
+    height: 325px;
+    top: 30px;
+    right: 0;
+  }
+
+  .konsole_bottom_left {
+    width: 3px;
+    height: 3px;
+    background: url('/assets/img/bash/bottom_left.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  .konsole_bottom {
+    height: 2px;
+    background: url('/assets/img/bash/bottom_bg.png') repeat-x;
+    position: absolute;
+    bottom: 0;
+    left: 2px;
+    width: 595px;
+  }
+
+  .konsole_bottom_right {
+    height: 3px;
+    width: 3px;
+    background: url('/assets/img/bash/bottom_right.png') no-repeat;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+
   /// Stroke font-character
   /// @param  {Integer} $stroke - Stroke width
   /// @param  {Color}   $color  - Stroke color
diff --git a/resources/views/layouts/bash.blade.php b/resources/views/layouts/bash.blade.php
index 38f578d..d272472 100644
--- a/resources/views/layouts/bash.blade.php
+++ b/resources/views/layouts/bash.blade.php
@@ -28,7 +28,7 @@
 
     .konsole {
       width: 600px;
-      height: 300px;
+      height: 358px;
       margin: auto;
       color: #fcfcfc;
     }
@@ -103,7 +103,7 @@
       position: absolute;
       top: 30px;
       left: 0;
-      height: 267px;
+      height: 325px;
     }
 
     .konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
@@ -120,7 +120,7 @@
       position: absolute;
       top: 30px;
       left: 2px;
-      height: 258px;
+      height: 316px;
       width: 586px;
       padding: 5px;
     }
@@ -129,7 +129,7 @@
       width: 2px;
       background: url('/assets/img/bash/right_bg.png') repeat-y;
       position: absolute;
-      height: 267px;
+      height: 325px;
       top: 30px;
       right: 0;
     }
@@ -211,6 +211,18 @@
     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 48bfdf6..ecbc0ed 100644
--- a/resources/views/layouts/site.blade.php
+++ b/resources/views/layouts/site.blade.php
@@ -88,6 +88,31 @@
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col-md" style="padding-bottom: 32px;">
+          <div class="within">
+            <a href="#" onclick="showdiv('dragger');"><img src="/assets/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>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-md-3" style="padding-bottom: 32px;">
           <div class="nav flex-column nav-pills sidemenu">
@@ -111,5 +136,51 @@
 
   <!-- 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 66cf9a9..120e89f 100644
--- a/resources/views/pages/bash/cli.blade.php
+++ b/resources/views/pages/bash/cli.blade.php
@@ -2,7 +2,7 @@
 
 @section('content')
 
-<a href="#"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
+<a href="#" onclick="showdiv('dragger');"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
 
 <div class="konsole" id="dragger">
   <div id="draggerheader">
@@ -10,7 +10,7 @@
     <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"></div>
+    <div class="konsole_top_right" onclick="hidediv('dragger');"></div>
   </div>
   <div class="konsole_left"></div>
   <div class="konsoleuser">