Big changes to the UI to make it more...

Minecraft-y And easier to understand, because contrast was a problem
ReCape · Aug 27, 2023 · 99cf811 · 99cf811
1 parent 74832f5
commit 99cf811
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 34 deletions.
diff --git a/assets/logo-plain.png b/assets/logo-plain.png
diff --git a/index.html b/index.html
@@ -49,6 +49,15 @@ <h4>Texture file (.png)</h4>
   <br>
   <button onclick="do_with_loader(uploadModel);">Upload</button>
 </div>
+
+<div id="client-section" style="flex-grow: 1;">
+  <h1>About</h1>
+  <h2>ReCape Web Client v1.2.1</h2>
+  <h2>Need help? <a href="https://discord.gg/HNUhexqusj">Join the Discord!</a></h2>
+  <h2>Download the installer, find source code, and more on <a href="https://recape.boyne.dev">our website!</a></h2>
+  <h2>Thank you for choosing ReCape.</h2>
+</div>
+
 </div>
 </div>
 
@@ -58,6 +67,7 @@ <h2>Now Loading...</h2>
 </div>
 
 <div id="login-popup">
+  <img id="head-logo" src="assets/logo-plain.png">
   <h2>Login to ReCape</h2>
   <p>We need to make sure you own your Minecraft account. You can use a login code from our authentication Minecraft server.</p>
 

diff --git a/script.js b/script.js
@@ -208,7 +208,7 @@ function loadClientMenu() {
     viewer[0].remove()
   }
 
-  createScene();
+  createScene(0.4);
   fetch_cape();
   loadSkin("https://mc-heads.net/skin/" + Cookies.get("uuid"))
   loadModelList();

diff --git a/style.css b/style.css
@@ -1,19 +1,50 @@
+:root {
+  --background: #000000;
+  --background-alt: #383838;
+  --foreground: #1a1a1a;
+  --accent: #fffb00;
+  --accent-dark: #6b6900;
+
+  --loading-tint: rgba(0, 0, 0, 0.8);
+  --popup-tint: rgba(0, 0, 0, 0.8);
+}
+
 body {
   margin: 0;
   padding: 0;
-  background-color: #111111;
+  background-color: var(--background);
   color: white;
   font-family: sans-serif;
   pointer-events: none;
   user-select: none;
   text-align: center;
 }
 
+a:visited {
+  color: blue;
+}
+
+#side {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#head-logo {
+  width: 10vw;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cfgviewer {
+  background-color: var(--background-alt);
+}
+
 #client-section {
-  background-color: #121212;
-  box-shadow: 0 0 4px 0 black;
+  background-color: var(--background-alt);
   padding: 4px;
   margin: 8px;
+  margin-bottom: 0;
 }
 
 .no-popup {
@@ -38,7 +69,7 @@ body {
   width: 100vw;
   height: 100vh;
   display: flex;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: var(--loading-tint);
   backdrop-filter: blur(10px);
   position: fixed;
   transition: 0.2s;
@@ -54,7 +85,7 @@ body {
 #login-popup {
   transition: 0.2s;
   pointer-events: all;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: var(--popup-tint);
   border: 2px solid black;
   backdrop-filter: blur(40px);
   width: 100vw;
@@ -69,10 +100,7 @@ body {
   transform: translate(-50%, -50%);
   text-align: center;
 
-  box-shadow: 0 0 32px 0 black;
-
   overflow-y: scroll;
-  border-radius: 10px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -86,48 +114,49 @@ input {
   margin-right: auto;
   border: none;
   outline: none;
-  background-color: #222222;
+  background-color: var(--foreground);
   width: 50%;
   font-size: 1.5em;
-  border-radius: 10px;
   color: #aaaaaa;
-  box-shadow: 0 0 4px 0 black;
   transition: 0.2s;
 }
 
-input:hover {
-  box-shadow: 0 0 8px 0 black;
-}
-
 input:focus {
   color: white;
 }
 
-button:hover, input[type=file]::file-selector-button:hover, a:hover {
-  box-shadow: 0 0 8px 0 black;
+button:active, input[type=file]::file-selector-button:active {
+  color: black;
+
 }
-button:active, input[type=file]::file-selector-button:active, a:active {
-  color: white;
+
+button:hover, input[type=file]::file-selector-button:hover {
+  background-color: var(--accent);
+  color: var(--background-alt);
 }
 
-button, input[type=file]::file-selector-button, a {
+button, input[type=file]::file-selector-button {
   text-align: center;
   border: none;
   outline: none;
-  background-color: #222222;
+  background-color: var(--accent-dark);
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
   margin-top: 4px;
-  color: #aaaaaa;
+  color: #ffffff;
   font-size: 1.2em;
   padding: 4px;
-  border-radius: 10px;
-  box-shadow: 0 0 4px 0 black;
   transition: 0.2s;
   text-decoration: none;
 }
 
+input[type=file] {
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+
 input[type=file] {
   margin-left: 4px;
 }
@@ -141,10 +170,8 @@ input[type=file]::file-selector-button {
   display: flex;
   flex-direction: column;
   margin: 16px;
-  background-color: #121212;
-  border-radius: 4px;
+  background-color: var(--background-alt);
   padding: 8px;
-  box-shadow: 0 0 4px 0 black;
 }
 
 #notifications {
@@ -163,9 +190,7 @@ input[type=file]::file-selector-button {
   height: fit-content;
   padding: 8px;
   margin: 8px;
-  background-color: #222222;
-  box-shadow: 0 0 4px 0 black;
-  border-radius: 10px;
+  background-color: var(--foreground);
 }
 
 #model-list {
@@ -176,14 +201,11 @@ input[type=file]::file-selector-button {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
-  border-radius: 10px;
   padding: 10px;
 }
 
 .model {
-  box-shadow: 0 0 4px 0 black;
   margin: 4px;
-  border-radius: 10px;
 }
 
 .model-delete {