From dfe979e0c14ad0379ceb14ddc2d96f80495b7d38 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: Fri, 1 May 2020 21:04:01 +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

---
 resources/views/layouts/bash.blade.php   | 63 +++++++++++++++++++++---
 resources/views/pages/bash/cli.blade.php | 14 +++---
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/resources/views/layouts/bash.blade.php b/resources/views/layouts/bash.blade.php
index 498d386..10b20ff 100644
--- a/resources/views/layouts/bash.blade.php
+++ b/resources/views/layouts/bash.blade.php
@@ -16,12 +16,20 @@
       background-position: center 25%;
     }
 
+    #dragger {
+      position: absolute;
+      z-index: 9;
+    }
+
+    #draggerheader {
+      cursor: move;
+      z-index: 10;
+    }
+
     .konsole {
       width: 600px;
       height: 300px;
-      position: relative;
       margin: auto;
-      margin-top: 150px;
       color: #fcfcfc;
     }
 
@@ -88,11 +96,7 @@
 
     .konsoleuser, .konsoleroot {
       background-size: cover;
-      -webkit-backdrop-filter: blur(13px);
-      -moz-backdrop-filter: blur(13px);
-      -o-backdrop-filter: blur(13px);
-      -ms-backdrop-filter: blur(13px);
-      backdrop-filter: blur(13px);
+      backdrop-filter: blur(17px);
       font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
       font-size: 12px;
       /* white-space: pre; */
@@ -148,5 +152,50 @@
 
   <!-- 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;
+  }
+}
+  </script>
 </body>
 </html>
diff --git a/resources/views/pages/bash/cli.blade.php b/resources/views/pages/bash/cli.blade.php
index 0c8b1df..dcf217f 100644
--- a/resources/views/pages/bash/cli.blade.php
+++ b/resources/views/pages/bash/cli.blade.php
@@ -1,12 +1,14 @@
 @extends('layouts.bash')
 
 @section('content')
-<div class="konsole">
-  <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"></div>
+<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"></div>
+  </div>
   <div class="konsole_left"></div>
   <div class="konsoleuser">
     ロリコマンドラインですね〜♡<br />