begun project

t8 · May 2, 2018 · 1e681f7 · 1e681f7
1 parent 37c0d69
commit 1e681f7
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -99,3 +99,4 @@ ENV/
 
 # mypy
 .mypy_cache/
+.DS_Store
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/megaio-web-interface.iml b/.idea/megaio-web-interface.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app/__init__.py b/app/__init__.py
diff --git a/app/index.py b/app/index.py
@@ -0,0 +1,10 @@
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route('/')
+def home():
+    return render_template('dashboard.html')
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -0,0 +1,15 @@
+.relay {
+    width: 100%;
+    height: 150px;
+    background-color: dodgerblue;
+    color: white;
+    border-radius: 10px;
+    transition: border linear 0.1s;
+    align-items: center;
+    display: flex;
+}
+
+.relay:hover {
+    /*box-shadow: 4px 4px 10px red;*/
+    border: 3px solid white;
+}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
+    <link rel="stylesheet" href="../static/css/style.css">
+    <title>MegaIO Dashboard</title>
+</head>
+<body>
+
+<section class="hero is-light is-fullheight">
+  <!-- Hero head: will stick at the top -->
+  <div class="hero-head">
+    <nav class="navbar">
+      <div class="container">
+        <div class="navbar-brand">
+          <a class="navbar-item">
+              <b>Mega-IO Dashboard</b>
+          </a>
+          <span class="navbar-burger burger" data-target="navbarMenuHeroA">
+            <span></span>
+            <span></span>
+            <span></span>
+          </span>
+        </div>
+        <div id="navbarMenuHeroA" class="navbar-menu">
+          <div class="navbar-end">
+            <span class="navbar-item">
+              <a class="button is-dark is-inverted">
+                <span class="icon">
+                  <i class="fab fa-github"></i>
+                </span>
+                <span>Star it</span>
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+
+  <!-- Hero content: will be in the middle -->
+  <div class="hero-body">
+    <div class="container has-text-centered">
+        <h1 class="title" style="margin-bottom: 60px;">
+            Turn relays on and off:
+        </h1>
+        <div class="columns">
+            <div class="column"></div>
+            <div class="column relay">
+                <a id="relay-1">
+                    <span style="color: white; text-align: center;">Relay 1</span>
+                </a>
+            </div>
+            <div class="column relay">
+                <a id="relay-2">
+                    <span style="color: white; text-align: center;">Relay 2</span>
+                </a>
+            </div>
+            <div class="column relay">
+                <a id="relay-3">
+                    <span style="color: white; text-align: center;">Relay 3</span>
+                </a>
+            </div>
+            <div class="column relay">
+                <a id="relay-4">
+                    <span style="color: white; text-align: center;">Relay 4</span>
+                </a>
+            </div>
+            <div class="column"></div>
+        </div>
+        <div class="columns">
+            <div class="column"></div>
+            <div class="column relay">
+                <a id="relay-5">
+                    <span style="color: white;">Relay 5</span>
+                </a>
+            </div>
+            <div class="column relay">
+                <a id="relay-6">
+                    <span style="color: white;">Relay 6</span>
+                </a>
+            </div>
+            <div class="column relay">
+                <a id="relay-7">
+                    <span style="color: white;">Relay 7</span>
+                </a>
+            </div>
+            <div class="column relay">
+                <a id="relay-8">
+                    <span style="color: white;">Relay 8</span>
+                </a>
+            </div>
+            <div class="column"></div>
+        </div>
+    </div>
+  </div>
+</section>
+
+<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
+
+</body>
+</html>