feat: begin adding settings menu, move theme to settings

4 files changed, 244 insertions, 12 deletions

diff --git a/static/main.css b/static/main.css
index 6f899cf..5f7c0f9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -25,12 +25,19 @@
     box-sizing: border-box;
 }
 
+html {
+    height:100%;
+}
+
 body {
     background-color:var(--bg-main);
+    background-image:radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
+    background-attachment:fixed;
     color:var(--text-primary);
     font-family:system-ui,-apple-system,sans-serif;
     margin:0;
     padding:0;
+    min-height:100%;
     -webkit-tap-highlight-color: transparent;
 }
 
@@ -44,13 +51,12 @@ img[src=""] {
     align-items: center;
     min-height: 100vh;
     padding: 20px;
-    background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
 }
 
 .view-home .container {
     width: 100%;
     max-width: 580px;
-    margin: 0 auto; 
+    margin: 0 auto;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -100,11 +106,56 @@ img[src=""] {
     background:var(--bg-card);
     color:var(--text-primary);
     border-color:var(--border);
+    text-decoration:none;
+    display:inline-flex;
+    align-items:center;
+    padding:10px 24px;
+    border-radius:8px;
+    font-weight:600;
+    font-size:0.9rem;
+    cursor:pointer;
+    transition:all 0.2s;
+    border:1px solid var(--border);
 }
 .view-home .btn-secondary:hover {
     background:var(--border);
     border-color:var(--text-secondary);
 }
+.home-settings-btn {
+    position:fixed;
+    top:27px;
+    right:60px;
+    width:24px;
+    height:24px;
+    background-color:var(--text-primary);
+    -webkit-mask-image:url('/static/settings.svg');
+    mask-image:url('/static/settings.svg');
+    mask-size:contain;
+    mask-repeat:no-repeat;
+    mask-position:center;
+    text-decoration:none;
+}
+.nav-settings-icon {
+    width:24px;
+    height:24px;
+    flex-shrink:0;
+    margin-left:auto;
+    margin-top:3px;
+    background-color:var(--text-secondary);
+    -webkit-mask-image:url('/static/settings.svg');
+    mask-image:url('/static/settings.svg');
+    mask-size:100% 100%;
+    transition:background-color 0.2s;
+    text-decoration:none;
+}
+.nav-settings-icon:hover,
+.nav-settings-icon.active {
+    background-color:var(--text-primary);
+}
+.nav-settings-link {
+    display:none;
+    margin-left:auto;
+}
 header {
     display:flex;
     align-items:center;
@@ -112,6 +163,7 @@ header {
     padding:15px 60px;
     border-bottom:1px solid var(--border);
     background:var(--bg-main);
+    width:100%;
 }
 .search-form {
     flex-grow:1;
@@ -145,11 +197,11 @@ h1 span {
     padding:0 60px;
     border-bottom:1px solid var(--border);
     background:var(--bg-main);
+    width:100%;
 }
 .nav-container {
     display:flex;
     gap:30px;
-    max-width:1200px;
 }
 .nav-tabs a {
     padding:14px 0;
@@ -168,6 +220,9 @@ h1 span {
     color:var(--accent);
     border-bottom-color:var(--accent);
 }
+.nav-right {
+    margin-left:auto;
+}
 .image-results-container {
     padding:30px 60px;
 }
@@ -473,19 +528,23 @@ h1 span {
 
 
 @media (max-width:1200px) {
-    body {
-        padding-left: 16px;
-        padding-right: 16px;
-    }
     .content-layout {
         grid-template-columns:1fr;
         padding:20px 30px;
         gap:20px;
     }
+    header {
+        gap:20px;
+    }
     .results-container,.infobox-sidebar {
         grid-column:1;
         max-width:100%;
     }
+    .settings-layout {
+        padding:20px 30px;
+        display:flex;
+        justify-content:center;
+    }
     .infobox-sidebar {
         order:-1;
     }
@@ -498,9 +557,11 @@ h1 span {
 }
 
 @media (max-width:768px) {
-    body {
-        padding-left: 16px;
-        padding-right: 16px;
+    .nav-settings-icon {
+        display:none;
+    }
+    .nav-settings-link {
+        display:inline;
     }
     header {
         flex-direction:column;
@@ -532,7 +593,7 @@ h1 span {
         font-size:0.95rem;
     }
     .content-layout {
-        padding:16px;
+        padding:16px 16px 16px 40px;
         gap:16px;
     }
     .result {
@@ -591,7 +652,6 @@ h1 span {
         display: flex;
         justify-content: center;
         align-items: center;
-        transform: translateY(-5vh);
         padding:20px 16px;
         min-height: 100vh;
     }
@@ -621,6 +681,12 @@ h1 span {
 }
 
 @media (max-width:600px) {
+    .content-layout {
+        padding:16px 16px 16px 28px;
+    }
+    .settings-layout {
+        padding:12px 0;
+    }
     header {
         padding:12px 12px;
     }
@@ -657,3 +723,145 @@ h1 span {
         font-size:0.75rem;
     }
 }
+
+.settings-layout {
+    padding:30px 60px 30px 260px;
+}
+
+.settings-container {
+    max-width:700px;
+}
+
+.settings-title {
+    font-size:1.8rem;
+    font-weight:700;
+    margin:0 0 32px 0;
+    letter-spacing:-0.5px;
+}
+
+.settings-section {
+    background:var(--bg-card);
+    border:1px solid var(--border);
+    border-radius:12px;
+    padding:24px;
+    margin-bottom:32px;
+}
+
+.settings-section-title {
+    font-size:1.1rem;
+    font-weight:700;
+    margin:0 0 4px 0;
+}
+
+.settings-section-desc {
+    color:var(--text-secondary);
+    font-size:0.9rem;
+    margin:0 0 20px 0;
+    line-height:1.4;
+}
+
+.settings-field {
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:10px 0;
+}
+
+.settings-field + .settings-field {
+    border-top:1px solid var(--border);
+}
+
+.settings-label {
+    font-size:0.95rem;
+    color:var(--text-primary);
+}
+
+.settings-select {
+    padding:8px 12px;
+    border-radius:8px;
+    border:1px solid var(--border);
+    background:var(--bg-main);
+    color:var(--text-primary);
+    font-size:0.9rem;
+    outline:none;
+    cursor:pointer;
+    transition:border-color 0.2s;
+}
+
+.settings-select:focus {
+    border-color:var(--accent);
+}
+
+.settings-actions {
+    display:flex;
+    gap:12px;
+    margin-top:8px;
+    padding-bottom:40px;
+    justify-content:flex-start;
+}
+
+.settings-actions .btn-primary {
+    background:var(--accent);
+    color:var(--bg-main);
+    border:1px solid transparent;
+    padding:10px 24px;
+    border-radius:8px;
+    font-weight:600;
+    font-size:0.9rem;
+    cursor:pointer;
+    transition:all 0.2s;
+    touch-action:manipulation;
+}
+
+.settings-actions .btn-primary:hover {
+    filter:brightness(1.1);
+    transform:translateY(-1px);
+}
+
+.settings-actions .btn-secondary {
+    background:var(--bg-card);
+    color:var(--text-primary);
+    border:1px solid var(--border);
+    padding:10px 24px;
+    border-radius:8px;
+    font-weight:600;
+    font-size:0.9rem;
+    cursor:pointer;
+    transition:all 0.2s;
+    touch-action:manipulation;
+}
+
+.settings-actions .btn-secondary:hover {
+    background:var(--border);
+    border-color:var(--text-secondary);
+}
+
+@media (max-width:768px) {
+    .settings-layout {
+        padding:12px;
+        display:block;
+    }
+    .settings-container {
+        max-width:100%;
+    }
+    .settings-title {
+        font-size:1.4rem;
+        margin-bottom:24px;
+    }
+    .settings-section {
+        padding:16px;
+    }
+    .settings-field {
+        flex-direction:column;
+        align-items:stretch;
+        gap:8px;
+    }
+    .settings-actions {
+        flex-direction:column;
+    }
+    .settings-actions .btn-primary,
+    .settings-actions .btn-secondary {
+        width:100%;
+        text-align:center;
+    }
+}
diff --git a/static/settings.svg b/static/settings.svg
new file mode 100644
index 0000000..4aebf8f
--- /dev/null
+++ b/static/settings.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="3"/>
+  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+</svg>
diff --git a/static/theme-dark.css b/static/theme-dark.css
new file mode 100644
index 0000000..246aabe
--- /dev/null
+++ b/static/theme-dark.css
@@ -0,0 +1,10 @@
+:root {
+    --bg-main: #121212;
+    --bg-card: #1e1e1e;
+    --border: #333333;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0a0;
+    --text-muted: #d1d1d1;
+    --accent: #e2e2e2;
+    --accent-glow: rgba(255,255,255,0.1);
+}
diff --git a/static/theme-light.css b/static/theme-light.css
new file mode 100644
index 0000000..1c69377
--- /dev/null
+++ b/static/theme-light.css
@@ -0,0 +1,10 @@
+:root {
+    --bg-main: #ffffff;
+    --bg-card: #f8f9fa;
+    --border: #e0e0e0;
+    --text-primary: #1a1a1a;
+    --text-secondary: #5f6368;
+    --text-muted: #757575;
+    --accent: #202124;
+    --accent-glow: rgba(0,0,0,0.05);
+}