Added the style trials

2023-02-14 10:31:06 +01:00
parent 59997caea1
commit 6c3491861f
3 changed files with 117 additions and 1 deletions
--- a/style.html
+++ b/style.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OctoPrint Dashboard</title>
+  <!-- Bootstrap CSS -->
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css"> -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+  <style>
+    body {
+      background-color: #212529;
+      color: #fff;
+    }
+
+    .card {
+      background-color: #343a40;
+      color: #fff;
+    }
+
+    .badge {
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Octotor</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./styleControls.html">Control</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <div class="container my-3">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Printer infos</h5>
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Printer Name
+            <span class="badge bg-primary">My Printer</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Printer Status
+            <span class="badge bg-success">Operational</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Current Job
+            <span class="badge bg-info">Printing</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Progress
+            <span class="badge bg-secondary">35%</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Temperature Bed
+            <span class="badge bg-primary">50.0°C / 60.0°C</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Temperature Tool 0
+            <span class="badge bg-primary">200.0°C / 210.0°C</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Time Remaining
+            <span class="badge bg-secondary">1:23:45</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Time Elapsed
+            <span class="badge bg-secondary">2:01:23</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Time Print
+            <span class="badge bg-secondary">3:25:08</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Filament Printed
+            <span class="badge bg-secondary">100m</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Webcam Stream</h5>
+        <iframe src="http://192.168.50.239/webcam/?action=stream" width="100%" height="200" frameborder="0"></iframe>
+      </div>
+    </div>
+  </div>
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
+    integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
+    integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
+    crossorigin="anonymous"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script> -->
+</body>
+
+</html>