1 files changed, 131 insertions, 0 deletions
diff --git a/public/strip_setup.html b/public/strip_setup.html
new file mode 100644
index 0000000..606d527
--- /dev/null
+++ b/public/strip_setup.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html class="general">
+  <head>
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
+    <link rel="stylesheet" href="./css/luxcena.css" type="text/css" />
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+
+    <body>
+        <header>
+            <nav>
+                <div class="nav-wrapper">
+                    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+                    <a href="#" class="brand-logo">Luxcena Neo</a>
+                </div>
+            </nav>
+
+            <ul id="slide-out" class="sidenav sidenav-fixed">
+                <li>
+                    <div class="user-view">
+                        <div class="background">
+                            <img src="./logo/150h/Icon.png">
+                        </div>
+                        <!--<a href="#!user"><img class="circle" src="https://picsum.photos/200/300/?random"></a>
+                        <a href="#!name"><span class="white-text name">John Doe</span></a>
+                        <a href="#!email"><span class="white-text email">Guest</span></a>-->
+                    </div>
+                </li>
+                <li><div class="divider"></div></li>
+                <li><a class="waves-effect" href="/"><i class="material-icons">dashboard</i> Dashboard</a></li>
+                <li><a class="waves-effect" href="/profiles"><i class="material-icons">cloud</i> Profiles</a></li>
+                <li><a class="waves-effect" href="/neo_ide"><i class="material-icons">code</i> Neo IDE</a></li>
+                <li><div class="divider"></div></li>
+                <li><a class="subheader">Settings</a></li>
+                <li><a class="waves-effect" href="strip_setup"><i class="material-icons">straighten</i> Strip setup</a></li>
+                <li><a class="waves-effect" href="/settings"><i class="material-icons">settings</i> Settings</a></li>
+            </ul>
+        </header>
+
+        <main>
+
+            <div class="row">
+
+                <div class="col s12 m5">
+                    <div class="card">
+                        <div class="card-content">
+
+                            <div class="input-field">
+                                <select>
+                                    <option value="" disabled selected>How are the LEDs configured?</option>
+                                    <option value="1">Basic, straight?</option>
+                                    <option value="2">Adventorous, snake?</option>
+                                    <option value="3">Crazy, just something random?</option>
+                                </select>
+                                <label>Led configuration</label>
+                            </div>
+
+                            <div class="input-field">
+                                <input type="number" name="" value="">
+                                <label>Number of LEDs</label>
+                            </div>
+
+                            <div class="input-field">
+                                <input type="number" name="" value="">
+                                <label>Number of Segments</label>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col s12 m7">
+                    <div class="card">
+                        <div class="card-content">
+
+                            Segment config...
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="row">
+                <div class="col s12 m12">
+                    <div class="card">
+                        <div class="card-content">
+                            <p>Explanation of them different configuration modes. "⮽" is the symbol used for LEDs, everything else is just wire.</p>
+                            <h5>Straight:</h5>
+                            Everything is in a stright line, or the cable is looped around.
+                            <pre style="line-height:0.9em;">
+└⮽─⮽─⮽─⮽─⮽─⮽─⮽─⮽┐
+
+└⮽─⮽─⮽─⮽┐
+┌────────┘
+└⮽─⮽─⮽─⮽┐
+                            </pre>
+                            <h5>Snake:</h5>
+                            The diodes are in a "snake"-pattern.
+                            <pre style="line-height:0.9em;">
+└⮽─⮽─⮽─⮽┐
+┌⮽─⮽─⮽─⮽┘
+└⮽─⮽─⮽─⮽┐
+                            </pre>
+                            <h5>Crazy:</h5>
+                            <br />This will just assume you have no idea what you are doing, and make a random configuration for you. based purely on the number of LEDs you have.
+                            <pre style="line-height:0.9em;">
+└⮽─⮽x⮽─⮽
+   └─┐
+┌⮽─⮽x⮽─⮽┐
+└⮽─⮽─⮽─⮽┘
+                            </pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
+        <script type="text/javascript">
+            var elem = document.querySelector('.sidenav');
+            var instance = M.Sidenav.init(elem);
+            var instance = M.FormSelect.init(document.querySelector('select'));
+        </script>
+  </body>
+</html>