styled top bar, got tabs to work on regular page but to be converted to...

styled top bar, got tabs to work on regular page but to be converted to separate js file for extension popup

styled top bar, got tabs to work on regular page but to be converted to...
styled top bar, got tabs to work on regular page but to be converted to separate js file for extension popup
c05123bf · Zhai Zirun · f9e0f3a8 · c05123bf · c05123bf · c05123bf
Commit c05123bf authored Sep 24, 2020 by Zhai Zirun
12 changed files
--- a/button.js
+++ b/button.js
+document.getElementById("custom-button").addEventListener("click", openTab(event, 'custom'));
+document.getElementById("load-button").addEventListener("click", openTab(event, 'load'));
+
+function openTab(evt, tabName) {
+    var i, content, tablinks;
+    content = document.getElementsByClassName("content");
+
+    for (i = 0; i < content.length; i++) {
+      content[i].style.display = "none";
+    }
+
+    tablinks = document.getElementsByClassName("tablinks");
+
+    for (i = 0; i < tablinks.length; i++) {
+      tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+
+    document.getElementById(tabName).style.display = "block";
+    evt.currentTarget.className += " active";
+}
+
+document.getElementById("custom-button").click();
\ No newline at end of file
--- a/fonts/nunito-v14-latin-600.eot
+++ b/fonts/nunito-v14-latin-600.eot
--- a/fonts/nunito-v14-latin-600.svg
+++ b/fonts/nunito-v14-latin-600.svg
--- a/fonts/nunito-v14-latin-600.ttf
+++ b/fonts/nunito-v14-latin-600.ttf
--- a/fonts/nunito-v14-latin-600.woff
+++ b/fonts/nunito-v14-latin-600.woff
--- a/fonts/nunito-v14-latin-600.woff2
+++ b/fonts/nunito-v14-latin-600.woff2
--- a/images/add.pdf
+++ b/images/add.pdf
--- a/images/logo.pdf
+++ b/images/logo.pdf
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/user.pdf
+++ b/images/user.pdf
--- a/popup.html
+++ b/popup.html
@@ -5,18 +5,37 @@
        <title> clickerance </title>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script src="content.js"></script>
+        <script src="button.js"></script>
    </head>
    <body>
-      <div class="Title"></div>
-        <h1> Clickerance </h1>
+        <header class="header">
+            <div class="header-logo">
+                <img src="images/logo.png">
+            </div>
+            <div class="header-text">
+                <p class="h-text">clickerance</p>
+            </div>
+        </header>

-        Dairy  : <input type="checkbox" id="Dairy"><br>
-        Meat   : <input type="checkbox" id="Meat"><br>
-        Corn   : <input type="checkbox" id="Corn"><br>
-        Gluten : <input type="checkbox" id="Gluten"><br>
+        <div class="topbar">
+            <button class="tablinks" id="custom-button">Your preferences</button>
+            <button class="tablinks" id="load-button">Get an order on us</button>
+        </div>

-        <p>Which ones you can't eat?</p>
+        <div class="content" id="custom">
+            Dairy  : <input type="checkbox" id="Dairy"><br>
+            Meat   : <input type="checkbox" id="Meat"><br>
+            Corn   : <input type="checkbox" id="Corn"><br>
+            Gluten : <input type="checkbox" id="Gluten"><br>

-        <input id="Submit" type="submit" value="Submit">
+            <p>Which ones you can't eat?</p>
+
+            <input id="Submit" type="submit" value="Submit">
+        </div>
+
+        <div class="content" id="load">
+            blah
+        </div>
+        
    </body>
 </html>
--- a/style.css
+++ b/style.css
-.Title
+/* nunito-600 - latin */
+@font-face {
+    font-family: 'Nunito';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./fonts/nunito-v14-latin-600.eot'); /* IE9 Compat Modes */
+    src: local('Nunito SemiBold'), local('Nunito-SemiBold'),
+         url('./fonts/nunito-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('./fonts/nunito-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+         url('./fonts/nunito-v14-latin-600.woff') format('woff'), /* Modern Browsers */
+         url('./fonts/nunito-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('./fonts/nunito-v14-latin-600.svg#Nunito') format('svg'); /* Legacy iOS */
+}
+.html {
+    width: 430px;
+}
+body {
+    font-family: 'Nunito', sans-serif;
+    min-height: 430px;
+}
+/* ----- header ----- */
+
+.header
 {
-    text-align: justify;
-    font: 40px helvetica, sans-serif;
+    overflow: hidden;
+    background-color: #51C2A9;
+    min-width: 300px;
+    box-shadow: 0 0 3px #adadad;
+}
+
+.header-logo {
+    display: inline-block;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    left: 25px;
+    top: 17px;
+}
+
+.header-logo img {
+    width: 50px;
+}
+
+.h-text {
    color: white;
-    background-color: #47BD95;
-    padding: 28px
+    text-align: center;
+    
+    font-size: 18px;
+    padding: 1px;
+    vertical-align: middle;
+}
+
+/* ----- topbar ----- */
+.topbar {
+    height: 30px;   
+    overflow: hidden;
+}
+
+.topbar button {
+    width: 150px;
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 5px;
+    transition: 0.3s;
+    font-family: 'Nunito', sans-serif;
+}
+
+.tab button:hover {
+    border-bottom: 3px solid #51C2A9;
+}
+
+.topbar button.active {
+    border-bottom: 3px solid #51C2A9;
+}
+/* ----- main-window -----*/
+
+.content {
+    display: none;
+    padding: 6px 12px;
+    background: #f5f5f5;
+    border: 1px solid #adadad;
+    box-shadow: 0 0 3px #adadad;
+    min-height: 250px;
 }

 .nameWrapper___4c05X {