コマンドライン

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>

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 />