Update static/form-styles.css

static/form-styles.css

@@ -76,6 +76,42 @@ body::before {
   100% { background-position: 100% 100%; }
 }
 
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--base-spacing) calc(var(--base-spacing) * 2);
+    background: var(--bg-med);
+    border-bottom: 1px solid var(--border-color);
+}
+
+nav .logo {
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: var(--text-primary);
+}
+
+nav .logo span {
+    color: var(--primary);
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: calc(var(--base-spacing) * 1.5);
+}
+
+nav ul li a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition-fast);
+}
+
+nav ul li a:hover {
+    color: var(--primary-glow);
+}
+
 .preloader {
   position: fixed;
   top: 0;
@@ -95,71 +131,6 @@ body::before {
   visibility: hidden;
 }
 
-.dna-loader {
-  position: relative;
-  width: 100px;
-  height: 200px;
-}
-
-.dna-loader-strand {
-  position: absolute;
-  width: 2px;
-  height: 100%;
-  background-color: hsla(257, 100%, 65%, 0.3);
-  left: 30px;
-  transform: rotate(5deg);
-}
-
-.dna-loader-strand:nth-child(2) {
-  left: 70px;
-  transform: rotate(-5deg);
-}
-
-.dna-loader-rung {
-  position: absolute;
-  width: 40px;
-  height: 4px;
-  left: 30px;
-  background: linear-gradient(90deg, var(--primary-glow), var(--accent-glow));
-  filter: blur(0.5px);
-  box-shadow: 0 0 15px var(--primary-glow);
-  transform-origin: center;
-  animation: dnaLoaderSpin 2s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.dna-loader-rung:nth-child(3) { top: 10%; animation-delay: -0.2s; }
-.dna-loader-rung:nth-child(4) { top: 20%; animation-delay: -0.4s; }
-.dna-loader-rung:nth-child(5) { top: 30%; animation-delay: -0.6s; }
-.dna-loader-rung:nth-child(6) { top: 40%; animation-delay: -0.8s; }
-.dna-loader-rung:nth-child(7) { top: 50%; animation-delay: -1.0s; }
-.dna-loader-rung:nth-child(8) { top: 60%; animation-delay: -1.2s; }
-.dna-loader-rung:nth-child(9) { top: 70%; animation-delay: -1.4s; }
-.dna-loader-rung:nth-child(10) { top: 80%; animation-delay: -1.6s; }
-.dna-loader-rung:nth-child(11) { top: 90%; animation-delay: -1.8s; }
-
-@keyframes dnaLoaderSpin {
-  0%, 100% { transform: rotate(0deg) scaleX(1); }
-  50% { transform: rotate(180deg) scaleX(0.5); }
-}
-
-.loader-text {
-  position: absolute;
-  bottom: -40px;
-  width: 100%;
-  text-align: center;
-  font-size: 1rem;
-  color: var(--text-secondary);
-  font-weight: 400;
-  letter-spacing: 3px;
-  text-transform: uppercase;
-  animation: loaderTextPulse 2s infinite;
-}
-
-@keyframes loaderTextPulse {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 1; }
-}
-
 .container {
   max-width: var(--container-width);
   margin: clamp(4rem, 10vh, 6rem) auto;
@@ -227,7 +198,7 @@ select {
 
 input[type="text"]:focus,
 input[type="email"]:focus,
-input[type-="number"]:focus,
+input[type="number"]:focus,
 select:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px hsla(257, 100%, 65%, 0.25);
@@ -244,21 +215,29 @@ input[type="file"] {
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: calc(var(--base-spacing) * 0.9) calc(var(--base-spacing) * 1.2);
+  padding: calc(var(--base-spacing) * 2);
   border: 2px dashed var(--border-color);
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: var(--transition-fast);
   color: var(--text-secondary);
+  font-weight: 500;
+  text-align: center;
 }
 
-.file-upload-label:hover,
-.file-upload-label.file-selected {
+.file-upload-label:hover {
   border-color: var(--primary);
   color: var(--primary-glow);
   background-color: hsla(257, 100%, 65%, 0.05);
 }
 
+.file-upload-label.file-selected {
+    border-color: var(--success);
+    color: var(--success);
+    background-color: hsla(122, 55%, 50%, 0.05);
+    border-style: solid;
+}
+
 select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@@ -267,7 +246,6 @@ select {
   background-size: 18px;
 }
 
-button,
 .submit-button {
   display: inline-block;
   width: 100%;
@@ -285,14 +263,13 @@ button,
   text-decoration: none;
 }
 
-button:hover,
 .submit-button:hover {
   transform: translateY(-4px) scale(1.02);
   box-shadow: var(--shadow-lg);
   filter: brightness(1.1);
 }
 
-button:disabled {
+.submit-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
@@ -300,33 +277,6 @@ button:disabled {
   filter: none;
 }
 
-.result,
-.training-history,
-#history-section {
-  margin-top: calc(var(--base-spacing) * 2.5);
-  padding: calc(var(--base-spacing) * 1.5);
-  background: var(--bg-med);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  animation: slideIn 0.5s ease-out;
-}
-
-@keyframes slideIn {
-  from { opacity: 0; transform: translateY(15px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.result h2,
-.training-history h2,
-#history-section h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--base-spacing);
-  padding-bottom: calc(var(--base-spacing) / 2);
-  border-bottom: 1px solid var(--border-color);
-}
-
 .alert {
   padding: var(--base-spacing);
   border-radius: var(--border-radius);
@@ -335,99 +285,11 @@ button:disabled {
   border: 1px solid transparent;
 }
 
-.alert-success {
-  background: hsla(122, 55%, 50%, 0.1);
-  border-color: var(--success);
-}
-
 .alert-warning {
   background: hsla(45, 100%, 60%, 0.1);
   border-color: var(--warning);
 }
 
-.alert-error {
-  background: hsla(350, 85%, 60%, 0.1);
-  border-color: var(--error);
-}
-
-#email-status {
-  font-weight: 500;
-  margin-top: var(--base-spacing);
-}
-
-.action-buttons {
-  display: flex;
-  gap: var(--base-spacing);
-  margin-top: calc(var(--base-spacing) * 1.5);
-  flex-wrap: wrap;
-}
-
-.action-buttons .submit-button {
-  width: auto;
-  font-size: 0.9rem;
-  padding: calc(var(--base-spacing) * 0.7) calc(var(--base-spacing) * 1.5);
-}
-
-.training-history img {
-  width: 100%;
-  height: auto;
-  border-radius: var(--border-radius);
-  margin-top: var(--base-spacing);
-}
-
-#history-section .history-controls {
-  display: flex;
-  gap: var(--base-spacing);
-}
-
-#history-section input {
-  flex-grow: 1;
-}
-
-#history-section button {
-  width: auto;
-}
-
-#history-results ul {
-  list-style: none;
-  margin-top: calc(var(--base-spacing) * 1.5);
-  display: grid;
-  gap: var(--base-spacing);
-}
-
-#history-results .history-item {
-  display: flex;
-  gap: var(--base-spacing);
-  align-items: center;
-  padding: var(--base-spacing);
-  background-color: var(--bg-light);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  transition: var(--transition-fast);
-}
-
-#history-results .history-item:hover {
-  transform: translateY(-3px);
-  border-color: var(--primary);
-  box-shadow: var(--shadow-sm);
-}
-
-#history-results .history-item img {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  border-radius: var(--border-radius);
-}
-
-#history-results .history-item .history-details p {
-  margin: 0;
-  color: var(--text-secondary);
-}
-
-#history-results .history-item .history-details strong {
-  color: var(--text-primary);
-}
-
 @media (max-width: 768px) {
   .container {
     margin: clamp(2rem, 5vh, 4rem) auto;
@@ -437,9 +299,4 @@ button:disabled {
   header h1 {
     font-size: calc(var(--fluid-header-size) * 0.9);
   }
-
-  #history-section .history-controls {
-    flex-direction: column;
-  }
-}
-```
+}