- added a 'themes' window that shows all themes and allows to quickly…

… change between them (new themes MUST be added to themes/theme-list.json to be visible in this window) you can show it by clicking 'themes' in the footer - changed the footer to allow for multiple elements - fixed body background getting broken when the content is taller than the view height
I7T5 · Jul 26, 2019 · e2097e7 · e2097e7
1 parent 661bf08
commit e2097e7
Show file tree

Hide file tree

Showing 33 changed files with 261 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
   </head>
   <body>
     <h2 id="header">typings</h2>
-    <div id="command-center">
+    <div id="command-center" class="">
       <div class="bar">
         <div id="left-wing">
           <span id="word-count">
@@ -58,7 +58,14 @@ <h2 id="header">typings</h2>
         </div>
       </div>
     </div>
-    <a id="footer" href="https://github.com/briano1905/typings#typings" target="_blank">user guide</a>
+    <div id="theme-center" class="hidden">
+      <div id="left-wing" onClick="hideThemeCenter();">< go back</div>
+      <div id="theme-area"></div>
+    </div>
+    <div id="footer">
+      <a href="https://github.com/briano1905/typings#typings" target="_blank">user guide</a>
+      <div class="button" onClick="showThemeCenter();">themes</div>
+    </div>
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -365,3 +365,52 @@ function getCookie(cname) {
   }
   return '';
 }
+
+showAllThemes();
+function showAllThemes(){
+    fetch(`themes/theme-list.json`)
+    .then(response => {
+      if (response.status === 200) {
+        response
+          .text()
+          .then(body => {
+            let themes = JSON.parse(body);
+            let keys = Object.keys(themes);
+            for(let i = 0;i < keys.length; i ++){
+
+              let theme = document.createElement('div');
+              theme.setAttribute('class', 'theme-button');
+              theme.setAttribute('onClick', `setTheme('${keys[i]}')`);
+              if(themes[keys[i]]['customHTML'] != undefined){
+                theme.style.background = themes[keys[i]]['background'];
+                theme.innerHTML = themes[keys[i]]['customHTML']
+              }else{
+                theme.textContent = keys[i];
+                theme.style.background = themes[keys[i]]['background'];
+                theme.style.color = themes[keys[i]]['color'];
+              }
+              document.getElementById('theme-area').appendChild(theme);
+
+            }
+          })
+          .catch(err => console.error(err));
+      } else {
+        console.log(`Cant find theme-list.json`);
+      }
+    })
+    .catch(err => console.error(err));
+}
+
+function showThemeCenter() {
+  console.log('test');
+  document.getElementById('theme-center').classList.remove('hidden');
+  document.getElementById('command-center').classList.add('hidden');
+}
+
+function hideThemeCenter() {
+  console.log('test');
+  document.getElementById('theme-center').classList.add('hidden');
+  document.getElementById('command-center').classList.remove('hidden');
+}
+
+
diff --git a/style.css b/style.css
@@ -2,7 +2,7 @@
 
 body {
   margin: 0;
-  height: 100vh;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -23,6 +23,7 @@ body {
 #header {
   margin: 0;
   margin: 1.2rem 0 0 0;
+  line-height: 2rem;
 }
 
 #command-center {
@@ -35,6 +36,39 @@ body {
   transform: translateY(-2vh);
 }
 
+#theme-area{
+  margin-top: 1rem;
+  padding: 1.4rem 1rem;
+  border-radius: 0.4rem;
+  background: #eaeaea;
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+#theme-center{
+  margin: 0 0.4rem;
+  width: 100%;
+  max-width: 40rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transform: translateY(-2vh);
+}
+
+.theme-button{
+  padding: 1rem 0;
+  background: gray;
+  border-radius: 0.4rem;
+  text-align: center;
+  font-size: .8rem;
+}
+
+.theme-button:hover{
+  cursor: pointer;
+  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2);
+}
+
 /* #left-wing {} */
 
 /* #right-wing {} */
@@ -71,6 +105,24 @@ body {
 }
 
 #footer {
-  margin-bottom: 0.4rem;
+  margin-bottom: 1.2rem;
+  display: flex;
+}
+
+#footer *{
   text-decoration: none;
+  margin: 0 .5rem;
+}
+
+#footer .button{
+  cursor: pointer;
+}
+
+#footer a:visited{
+  color: unset;
+}
+
+
+.hidden{ 
+  display: none !important;
 }
diff --git a/themes/8008.css b/themes/8008.css
@@ -22,7 +22,7 @@ body {
   color: #f44c7f;
 }
 
-#typing-area {
+#typing-area, #theme-area{
   background: #a2aebd;
 }
 

diff --git a/themes/9009.css b/themes/9009.css
@@ -24,7 +24,7 @@ body {
   color: #2e2f33;
 }
 
-#typing-area {
+#typing-area, #theme-area, #theme-center{
   background: #d9d2c8;
 }
 

diff --git a/themes/aurora.css b/themes/aurora.css
@@ -28,7 +28,7 @@ body {
   color: #fafafa;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: rgba(250, 250, 250, 0.6);
   backdrop-filter: blur(1rem);
 }

diff --git a/themes/burgundy.css b/themes/burgundy.css
@@ -14,7 +14,7 @@ body {
   color: #fafafa;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #691f28;
 }
 

diff --git a/themes/carbon.css b/themes/carbon.css
@@ -14,7 +14,7 @@ body {
   color: #ed6b21;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #e3d9c6;
 }
 

diff --git a/themes/dark.css b/themes/dark.css
@@ -14,7 +14,7 @@ body {
   color: #fafafa;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #333333;
 }
 

diff --git a/themes/denim.css b/themes/denim.css
@@ -24,7 +24,7 @@ body {
   color: #e3d5b9;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #687796;
 }
 

diff --git a/themes/dots.css b/themes/dots.css
@@ -26,7 +26,7 @@ body {
   color: #ffd751;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #232533;
 }
 

diff --git a/themes/dracula.css b/themes/dracula.css
@@ -14,7 +14,7 @@ body {
   color: #bd93f9;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #44475a;
 }
 

diff --git a/themes/eclipse.css b/themes/eclipse.css
@@ -22,7 +22,7 @@ body {
   color: #abc6dc;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #3a3a3a;
 }
 

diff --git a/themes/handarbeit.css b/themes/handarbeit.css
@@ -29,7 +29,7 @@ body {
   color: #147d36;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #bb2e17;
 }
 

diff --git a/themes/hyperfuse.css b/themes/hyperfuse.css
@@ -14,7 +14,7 @@ body {
   color: #25cdc5;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #d4d4d4;
 }
 

diff --git a/themes/light.css b/themes/light.css
@@ -14,7 +14,7 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #eaeaea;
 }
 

diff --git a/themes/mizu.css b/themes/mizu.css
@@ -21,7 +21,7 @@ body {
   color: #fafafa;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #b9d9eb;
 }
 

diff --git a/themes/moderndolch.css b/themes/moderndolch.css
@@ -23,7 +23,7 @@ body {
   color: #fafafa;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #7c7e81;
 }
 

diff --git a/themes/monokai.css b/themes/monokai.css
@@ -18,7 +18,7 @@ body {
   color: #F8F8F2;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #272822;
 }
 

diff --git a/themes/mrsleeves.css b/themes/mrsleeves.css
@@ -21,7 +21,7 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #eaeaea;
 }
 

diff --git a/themes/nautilus.css b/themes/nautilus.css
@@ -23,7 +23,7 @@ body {
   color: #eac004;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #155d94;
 }
 

diff --git a/themes/nord.css b/themes/nord.css
@@ -14,7 +14,7 @@ body {
   color: #eceff4;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #2e3440;
 }
 

diff --git a/themes/oblivion.css b/themes/oblivion.css
@@ -14,7 +14,7 @@ body {
   color: #ffac00;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #63696a;
 }
 

diff --git a/themes/olivia.css b/themes/olivia.css
@@ -14,7 +14,7 @@ body {
   color: #e8c4b8;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #fafafa;
 }
 

diff --git a/themes/phantom.css b/themes/phantom.css
@@ -14,7 +14,7 @@ body {
   color: #eed484;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #2e1a47;
 }
 

diff --git a/themes/rama.css b/themes/rama.css
@@ -14,7 +14,7 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #d4d4d4;
 }
 

diff --git a/themes/sakura.css b/themes/sakura.css
@@ -9,7 +9,7 @@ brown: #917075;
 */
 
 body {
-  background: linear-gradient(-20deg, rgba(255,186,200,1) 0%, rgba(255,152,172,1) 100%);;
+  background: linear-gradient(-20deg, rgba(255,186,200,1) 0%, rgba(255,152,172,1) 100%);
 }
 
 #header {
@@ -24,7 +24,7 @@ body {
   color: #fff;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #fff;
 }
 

diff --git a/themes/serika.css b/themes/serika.css
@@ -23,7 +23,7 @@ body {
   color: #302f2b;
 }
 
-#typing-area {
+#typing-area, #theme-area {
   background: #f0ebd7;
 }