Popup design

goodies/chrome-extension/manifest.json

@@ -9,10 +9,15 @@
     "128": "icon/128.png"
   },
 
+  "browser_action": {
+    "default_popup": "popup/index.html"
+  },
+
   "permissions": [
     "background",
     "contextMenus",
     "webRequest",
+    "storage",
     "*://*/*"
   ],
 

goodies/chrome-extension/popup/css/background.css

@@ -0,0 +1,37 @@
+body {
+    width: 300px;
+    height: 300px;
+    margin: 0 !important;
+}
+body .bgmask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: -8;
+    background-image: linear-gradient(#0000 50%, #04254e);
+}
+
+body .bggatter {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -9;
+    -webkit-mask-image: url("../image/grid.png");
+    background-color: #5954a4;
+}
+
+body .bggatter__wrapper {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    overflow: hidden;
+    z-index: -9;
+}
+
+body .bgdrop {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: -10;
+    background-color: #04254e;
+}

goodies/chrome-extension/popup/css/button.css

@@ -0,0 +1,28 @@
+button {
+    padding: 0.5em 2em;
+    color: #04254e;
+    font-size: 14pt;
+    border-radius: 5px;
+    cursor: pointer;
+    transition:
+        color 0.15s ease,
+        transform 0.15s ease;
+}
+
+button:hover {
+    /*background-color: #5954a4;*/
+    color: #fff;
+    animation: color-cycle;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes color-cycle {
+    0%      {background-color: #ff6666; transform: scale(1.075);}
+    16.67%  {background-color: #c966ff;}
+    33.33%  {background-color: #6678ff;}
+    50%     {background-color: #66edff; transform: scale(1.15);}
+    66.66%  {background-color: #66ff70;}
+    83.33%  {background-color: #fcff66;}
+    100%    {background-color: #ff6666; transform: scale(1.075);}
+}

goodies/chrome-extension/popup/css/font/include.css

@@ -0,0 +1 @@
+@import "zilla-slab.css"

goodies/chrome-extension/popup/css/font/zilla-slab.css

@@ -0,0 +1,49 @@
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Regular.ttf") format('truetype');
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Italic.ttf") format('truetype');
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Bold.ttf") format('truetype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-BoldItalic.ttf") format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}

goodies/chrome-extension/popup/css/form.css

@@ -0,0 +1,14 @@
+label {
+    margin-bottom: 0.5em;
+}
+
+input {
+    border-radius: 5px;
+    height: 25pt;
+}
+
+input,
+textarea {
+    color: #04254e;
+    font-size: 14pt;
+}

goodies/chrome-extension/popup/css/modular.css

@@ -0,0 +1,23 @@
+.text-center {
+    text-align: center;
+}
+
+.pt-1 {
+    padding-top: 1em;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.align-items-center {
+    align-items: center;
+}

goodies/chrome-extension/popup/css/typography.css

@@ -0,0 +1,15 @@
+* {
+    font-family: 'ZillaSlab' !important;
+    color: #ddd;
+}
+
+p,
+a,
+label {
+    font-size: 14pt;
+}
+
+h1,
+h2 {
+    line-height: 1em;
+}

goodies/chrome-extension/popup/index.html

@@ -0,0 +1,34 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="css/background.css">
+        <link rel="stylesheet" href="css/typography.css">
+        <link rel="stylesheet" href="css/modular.css">
+        <link rel="stylesheet" href="css/form.css">
+        <link rel="stylesheet" href="css/button.css">
+        <link rel="stylesheet" href="css/font/include.css">
+        <title>Tubio - Companion Extension</title>
+    </head>
+
+    <body>
+        <div class="bgdrop"></div>
+        <div class="bggatter__wrapper">
+            <div class="bggatter"></div>
+        </div>
+        <div class="bgmask"></div>
+
+
+        <h1 class="text-center pt-1">Tubio</h1>
+        <h2 class="text-center">Companion Extension</h2>
+
+        <div class="flex justify-content-center">
+            <div class="flex flex-col align-items-center">
+                <button >Download!</button>
+                
+                <label for="tubio-address" style="margin-top: 3em;">Where can i reach tubio?</label>
+                <input type="text" id="tubio-address" class="text-center" />
+                
+            </div>
+        </div>
+
+    </body>
+</html>