diff --git a/.gitignore b/.gitignore index a10140e..5ee4f25 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ /bin /obj -config.ini \ No newline at end of file +config.ini +.session diff --git a/static/main.css b/static/main.css index 31b9d7b..d9e1f6f 100644 --- a/static/main.css +++ b/static/main.css @@ -1,604 +1,628 @@ +@import url("https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css"); + :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); + --bg-main: var(--ctp-latte-base); + --bg-card: var(--ctp-latte-overlay0); + --border: var(--ctp-latte-overlay2); + --text-primary: var(--ctp-latte-text); + --text-secondary: var(--ctp-latte-subtext0); + --text-muted: var(--ctp-latte-overlay1); + --accent: var(--ctp-latte-mauve); + --accent-glow: rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { - :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); - } + :root { + --bg-main: var(--ctp-mocha-base); + --bg-card: var(--ctp-mocha-surface1); + --border: var(--ctp-mocha-overlay2); + --text-primary: var(--ctp-mocha-text); + --text-secondary: var(--ctp-mocha-subtext0); + --text-muted: var(--ctp-mocha-subtext1); + --accent: var(--ctp-mocha-mauve); + --accent-glow: rgba(0, 0, 0, 0.05); + } } -*, *::before, *::after { - box-sizing: border-box; +*, +*::before, +*::after { + box-sizing: border-box; } body { - background-color:var(--bg-main); - color:var(--text-primary); - font-family:system-ui,-apple-system,sans-serif; - margin:0; - padding:0; - -webkit-tap-highlight-color: transparent; + background-color: var(--bg-main); + color: var(--text-primary); + font-family: + system-ui, + -apple-system, + sans-serif; + margin: 0; + padding: 0; + -webkit-tap-highlight-color: transparent; } img[src=""] { display: none; } +#header-icon { + text-decoration: none; + color: var(--text-primary); +} + .view-home { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - padding: 20px; - background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; + background: radial-gradient( + circle at top right, + var(--accent) 0%, + var(--bg-main) 100% + ); } .view-home .container { - width: 100%; - max-width: 580px; - margin: 0 auto; - text-align: center; - display: flex; - flex-direction: column; + width: 100%; + max-width: 580px; + margin: 0 auto; + text-align: center; + display: flex; + flex-direction: column; } .view-home .hero-logo { - font-size:4.5rem; - margin-bottom:30px; - letter-spacing:-3px; - font-weight:800; + font-size: 4.5rem; + margin-bottom: 30px; + letter-spacing: -3px; + font-weight: 800; } .view-home .search-input-wrapper { - width: 100%; - margin-bottom: 24px; + width: 100%; + margin-bottom: 24px; } .view-home .search-box { - font-size:1.1rem; - padding:16px 28px; - box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); + font-size: 1.1rem; + padding: 16px 28px; + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .view-home .buttons { - display:flex; - gap:12px; - justify-content:center; + display: flex; + gap: 12px; + justify-content: center; } .view-home button { - padding:10px 24px; - border-radius:8px; - font-weight:600; - font-size:0.9rem; - cursor:pointer; - transition:all 0.2s; - border:1px solid transparent; - touch-action:manipulation; + padding: 10px 24px; + border-radius: 8px; + font-weight: 600; + font-size: 0.9rem; + cursor: pointer; + transition: all 0.2s; + border: 1px solid transparent; + touch-action: manipulation; } .view-home .btn-primary { - background:var(--accent); - color:var(--bg-main); + background: var(--accent); + color: var(--bg-main); } .view-home .btn-primary:hover { - filter:brightness(1.1); - transform:translateY(-1px); + filter: brightness(1.1); + transform: translateY(-1px); } .view-home .btn-secondary { - background:var(--bg-card); - color:var(--text-primary); - border-color:var(--border); + background: var(--bg-card); + color: var(--text-primary); + border-color: var(--border); } .view-home .btn-secondary:hover { - background:var(--border); - border-color:var(--text-secondary); + background: var(--border); + border-color: var(--text-secondary); } header { - display:flex; - align-items:center; - gap:20px; - padding:15px 60px; - border-bottom:1px solid var(--border); - background:var(--bg-main); + display: flex; + align-items: center; + gap: 20px; + padding: 15px 60px; + border-bottom: 1px solid var(--border); + background: var(--bg-main); } .search-form { - flex-grow:1; - max-width:600px; + flex-grow: 1; + max-width: 600px; } h1 { - font-size:1.5rem; - margin:0; - letter-spacing:-1px; - white-space:nowrap; + font-size: 1.5rem; + margin: 0; + letter-spacing: -1px; + white-space: nowrap; } h1 span { - color:var(--accent); + color: var(--accent); } .search-box { - width: 100%; - padding: 12px 24px; - border-radius: 99px; - border: 1px solid var(--border); - background: var(--bg-card); - color: var(--text-primary); - outline: none; - transition: border-color 0.2s, box-shadow 0.2s; + width: 100%; + padding: 12px 24px; + border-radius: 99px; + border: 1px solid var(--border); + background: var(--bg-card); + color: var(--text-primary); + outline: none; + transition: + border-color 0.2s, + box-shadow 0.2s; } .search-box:focus { - border-color:var(--accent); - box-shadow:0 0 0 4px var(--accent-glow); + border-color: var(--accent); + box-shadow: 0 0 0 4px var(--accent-glow); } .nav-tabs { - padding:0 60px; - border-bottom:1px solid var(--border); - background:var(--bg-main); + padding: 0 60px; + border-bottom: 1px solid var(--border); + background: var(--bg-main); } .nav-container { - display:flex; - gap:30px; - max-width:1200px; + display: flex; + gap: 30px; + max-width: 1200px; } .nav-tabs a { - padding:14px 0; - color:var(--text-secondary); - text-decoration:none; - font-size:0.9rem; - font-weight:500; - border-bottom:2px solid transparent; - transition:color 0.2s; - touch-action: manipulation; + padding: 14px 0; + color: var(--text-secondary); + text-decoration: none; + font-size: 0.9rem; + font-weight: 500; + border-bottom: 2px solid transparent; + transition: color 0.2s; + touch-action: manipulation; } .nav-tabs a:hover { - color:var(--text-primary); + color: var(--text-primary); } .nav-tabs a.active { - color:var(--accent); - border-bottom-color:var(--accent); + color: var(--accent); + border-bottom-color: var(--accent); } .image-results-container { - padding:30px 60px; + padding: 30px 60px; } .image-grid { - display:grid; - grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); - gap:24px; - max-width:1600px; - margin:0 auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 24px; + max-width: 1600px; + margin: 0 auto; } .image-card { - background:var(--bg-card); - border-radius:12px; - overflow:hidden; - border:1px solid var(--border); - transition:transform 0.2s ease,border-color 0.2s; + background: var(--bg-card); + border-radius: 12px; + overflow: hidden; + border: 1px solid var(--border); + transition: + transform 0.2s ease, + border-color 0.2s; } .image-card:hover { - transform:translateY(-4px); - border-color:var(--accent); + transform: translateY(-4px); + border-color: var(--accent); } .image-wrapper { - position:relative; - aspect-ratio:4/3; - background:#000; - overflow:hidden; + position: relative; + aspect-ratio: 4/3; + background: #000; + overflow: hidden; } .image-wrapper img { - width:100%; - height:100%; - object-fit:cover; - display:block; - transition:opacity 0.3s; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: opacity 0.3s; } .image-overlay { - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.4); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.2s; - pointer-events: none; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.2s; + pointer-events: none; } .image-card:hover .image-overlay { - opacity:1; - pointer-events: auto; + opacity: 1; + pointer-events: auto; } .overlay-buttons { - display:flex; - flex-direction:column; - gap:10px; - width:70%; + display: flex; + flex-direction: column; + gap: 10px; + width: 70%; } .overlay-btn { - padding:8px 16px; - border-radius:20px; - font-size:0.8rem; - font-weight:700; - text-decoration:none; - text-align:center; - transition:filter 0.2s; - touch-action: manipulation; + padding: 8px 16px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 700; + text-decoration: none; + text-align: center; + transition: filter 0.2s; + touch-action: manipulation; } .overlay-btn:hover { - filter:brightness(1.1); + filter: brightness(1.1); } .overlay-btn.primary { - background:var(--accent); - color:var(--bg-main); + background: var(--accent); + color: var(--bg-main); } .overlay-btn.secondary { - background:rgba(255,255,255,0.1); - color:white; - backdrop-filter:blur(4px); - border:1px solid rgba(255,255,255,0.2); + background: rgba(255, 255, 255, 0.1); + color: white; + backdrop-filter: blur(4px); + border: 1px solid rgba(255, 255, 255, 0.2); } .image-info { - padding:12px; + padding: 12px; } .image-caption { - display:block; - font-size:0.85rem; - color:var(--text-primary); - white-space:nowrap; - overflow:hidden; - text-overflow:ellipsis; - margin-bottom:4px; + display: block; + font-size: 0.85rem; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 4px; } .image-source { - display:block; - font-size:0.75rem; - color:var(--text-secondary); - white-space:nowrap; - overflow:hidden; - text-overflow:ellipsis; + display: block; + font-size: 0.75rem; + color: var(--text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .content-layout { - display:grid; - grid-template-columns:140px minmax(0,700px) 450px; - gap:60px; - padding:30px 60px; + display: grid; + grid-template-columns: 140px minmax(0, 700px) 450px; + gap: 60px; + padding: 30px 60px; } .results-container { - grid-column:2; + grid-column: 2; } .engine-warning-list { - display:flex; - flex-direction:column; - gap:12px; - margin-bottom:24px; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 24px; } .engine-warning { - background:var(--bg-card); - border:1px solid var(--border); - border-radius:12px; - padding:14px 16px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 14px 16px; } .engine-warning-title { - display:block; - font-size:0.95rem; - font-weight:700; - margin-bottom:4px; + display: block; + font-size: 0.95rem; + font-weight: 700; + margin-bottom: 4px; } .engine-warning-copy { - color:var(--text-muted); - line-height:1.5; - margin:0; + color: var(--text-muted); + line-height: 1.5; + margin: 0; } .result { - margin-bottom:32px; + margin-bottom: 32px; } .result > a { - color:var(--accent); - text-decoration:none; - font-size:1.25rem; - display:inline-block; - margin-bottom:4px; + color: var(--accent); + text-decoration: none; + font-size: 1.25rem; + display: inline-block; + margin-bottom: 4px; } .url { - color:var(--text-secondary); - font-size:0.85rem; - display:block; - margin-bottom:4px; + color: var(--text-secondary); + font-size: 0.85rem; + display: block; + margin-bottom: 4px; } .desc { - color:var(--text-muted); - line-height:1.6; - margin:0; + color: var(--text-muted); + line-height: 1.6; + margin: 0; } .cached { - color: var(--text-secondary); - font-size:0.85rem; - display:inline-block; - text-decoration: underline; + color: var(--text-secondary); + font-size: 0.85rem; + display: inline-block; + text-decoration: underline; } .infobox { - grid-column:3; - background:var(--bg-card); - border:1px solid var(--border); - border-radius:12px; - align-self:start; - margin-bottom: 10px; + grid-column: 3; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + align-self: start; + margin-bottom: 10px; } .infobox-header { - padding:20px; - border-bottom:1px solid var(--border); + padding: 20px; + border-bottom: 1px solid var(--border); } .infobox-title { - font-size:1.5rem; - font-weight:600; - margin:0; -} .infobox-content { - display: flex; - flex-direction: column; - gap: 12px; + font-size: 1.5rem; + font-weight: 600; + margin: 0; +} +.infobox-content { + display: flex; + flex-direction: column; + gap: 12px; } .read-more { - color: var(--accent); - font-weight: bold; - text-decoration: none; - font-size: 0.9rem; - align-self: flex-start; + color: var(--accent); + font-weight: bold; + text-decoration: none; + font-size: 0.9rem; + align-self: flex-start; } .read-more:hover { - text-decoration: underline; -} .infobox-main { - display:flex; - gap:15px; - padding:20px; + text-decoration: underline; +} +.infobox-main { + display: flex; + gap: 15px; + padding: 20px; } .infobox-image { - width:120px; - height:120px; - min-width:120px; - border-radius:8px; - border:1px solid var(--border); - object-fit:cover; + width: 120px; + height: 120px; + min-width: 120px; + border-radius: 8px; + border: 1px solid var(--border); + object-fit: cover; } .infobox-summary { - display: block; - font-size:0.95rem; - line-height:1.5; - color:var(--text-muted); - margin:0; + display: block; + font-size: 0.95rem; + line-height: 1.5; + color: var(--text-muted); + margin: 0; } .pagination { - display: flex; - justify-content: center; - align-items: center; - gap: 16px; - margin-top: 40px; - padding-bottom: 40px; + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + margin-top: 40px; + padding-bottom: 40px; } .pagination-btn { - background: var(--bg-card); - color: var(--text-secondary); - border: 1px solid var(--border); - padding: 4px 8px; - border-radius: 8px; - text-decoration: none; - font-size: 0.9rem; - font-weight: 600; - transition: all 0.2s; - touch-action: manipulation; + background: var(--bg-card); + color: var(--text-secondary); + border: 1px solid var(--border); + padding: 4px 8px; + border-radius: 8px; + text-decoration: none; + font-size: 0.9rem; + font-weight: 600; + transition: all 0.2s; + touch-action: manipulation; } .pagination-btn:hover { - background: var(--border); - border-color: var(--text-secondary); + background: var(--border); + border-color: var(--text-secondary); } - .pagination-current { - background: var(--bg-card); - color: var(--text-primary); - border: 1px solid var(--border); - padding: 4px 12px; - border-radius: 8px; - text-decoration: none; - font-size: 1.2rem; - font-weight: 600; - transition: all 0.2s; - touch-action: manipulation; + background: var(--bg-card); + color: var(--text-primary); + border: 1px solid var(--border); + padding: 4px 12px; + border-radius: 8px; + text-decoration: none; + font-size: 1.2rem; + font-weight: 600; + transition: all 0.2s; + touch-action: manipulation; } .pagination-current:hover { - background: var(--border); - border-color: var(--text-secondary); + background: var(--border); + border-color: var(--text-secondary); } - -@media (max-width:1200px) { - .content-layout { - grid-template-columns:1fr; - padding:20px 30px; - gap:20px; - } - .results-container,.infobox-sidebar { - grid-column:1; - max-width:100%; - } - .infobox-sidebar { - order:-1; - } - .nav-tabs,.image-results-container { - padding:0 30px; - } - header { - padding:15px 30px; - } +@media (max-width: 1200px) { + .content-layout { + grid-template-columns: 1fr; + padding: 20px 30px; + gap: 20px; + } + .results-container, + .infobox-sidebar { + grid-column: 1; + max-width: 100%; + } + .infobox-sidebar { + order: -1; + } + .nav-tabs, + .image-results-container { + padding: 0 30px; + } + header { + padding: 15px 30px; + } } -@media (max-width:768px) { - header { - flex-direction:column; - gap:12px; - padding:12px 16px; - text-align:center; - } - h1 { - font-size:1.3rem; - } - .search-form { - width:100%; - max-width:100%; - } - .search-form .search-box { - width:100%; - } - .nav-tabs { - overflow-x:auto; - -webkit-overflow-scrolling:touch; - padding:0 16px; - } - .nav-container { - gap:24px; - min-width:max-content; - } - .nav-tabs a { - padding:12px 0; - font-size:0.95rem; - } - .content-layout { - padding:16px; - gap:16px; - } - .result { - margin-bottom:24px; - } - .engine-warning { - padding:12px 14px; - } - .result > a { - font-size:1.1rem; - word-break:break-word; - } - .url { - font-size:0.8rem; - word-break:break-all; - } - .desc { - font-size:0.9rem; - } - .cached { - font-size:0.8rem; - } - .infobox { - margin-bottom:16px; - } - .infobox-header { - padding:16px; - } - .infobox-title { - font-size:1.2rem; - } - .infobox-main { - flex-direction:column; - padding:16px; - gap:12px; - } - .infobox-image { - width:100%; - height:auto; - min-width:unset; - max-width:200px; - } - .image-results-container { - padding:16px; - } - .pagination { - flex-wrap:wrap; - gap:8px; - padding:0 8px; - } - .pagination-btn { - padding:10px 14px; - font-size:0.85rem; - } - .view-home { - display: flex; - justify-content: center; - align-items: center; - transform: translateY(-5vh); - padding:20px 16px; - min-height: 100vh; - } - .view-home .container { - padding:0; - width:100%; - max-width:580px; - } - .view-home .hero-logo { - font-size:3rem; - margin-bottom:24px; - } - .view-home .search-input-wrapper { - margin-bottom:16px; - } - .view-home .search-box { - width:100%; - font-size:1rem; - padding:14px 20px; - } - .view-home .buttons { - gap:10px; - } - .view-home button { - padding:12px 20px; - } +@media (max-width: 768px) { + header { + flex-direction: column; + gap: 12px; + padding: 12px 16px; + text-align: center; + } + h1 { + font-size: 1.3rem; + } + .search-form { + width: 100%; + max-width: 100%; + } + .search-form .search-box { + width: 100%; + } + .nav-tabs { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding: 0 16px; + } + .nav-container { + gap: 24px; + min-width: max-content; + } + .nav-tabs a { + padding: 12px 0; + font-size: 0.95rem; + } + .content-layout { + padding: 16px; + gap: 16px; + } + .result { + margin-bottom: 24px; + } + .engine-warning { + padding: 12px 14px; + } + .result > a { + font-size: 1.1rem; + word-break: break-word; + } + .url { + font-size: 0.8rem; + word-break: break-all; + } + .desc { + font-size: 0.9rem; + } + .cached { + font-size: 0.8rem; + } + .infobox { + margin-bottom: 16px; + } + .infobox-header { + padding: 16px; + } + .infobox-title { + font-size: 1.2rem; + } + .infobox-main { + flex-direction: column; + padding: 16px; + gap: 12px; + } + .infobox-image { + width: 100%; + height: auto; + min-width: unset; + max-width: 200px; + } + .image-results-container { + padding: 16px; + } + .pagination { + flex-wrap: wrap; + gap: 8px; + padding: 0 8px; + } + .pagination-btn { + padding: 10px 14px; + font-size: 0.85rem; + } + .view-home { + display: flex; + justify-content: center; + align-items: center; + transform: translateY(-5vh); + padding: 20px 16px; + min-height: 100vh; + } + .view-home .container { + padding: 0; + width: 100%; + max-width: 580px; + } + .view-home .hero-logo { + font-size: 3rem; + margin-bottom: 24px; + } + .view-home .search-input-wrapper { + margin-bottom: 16px; + } + .view-home .search-box { + width: 100%; + font-size: 1rem; + padding: 14px 20px; + } + .view-home .buttons { + gap: 10px; + } + .view-home button { + padding: 12px 20px; + } } -@media (max-width:600px) { - header { - padding:12px 12px; - } - .search-box { - font-size:0.95rem; - } - .view-home .search-box { - width:100%; - } - .view-home { - padding:20px 16px; - } - .image-grid { - grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); - gap:10px; - } - .image-card { - border-radius:8px; - } - .image-info { - padding:8px 10px; - } - .image-caption { - font-size:0.8rem; - } - .image-source { - font-size:0.7rem; - } - .overlay-buttons { - width:80%; - } - .overlay-btn { - padding:6px 12px; - font-size:0.75rem; - } +@media (max-width: 600px) { + header { + padding: 12px 12px; + } + .search-box { + font-size: 0.95rem; + } + .view-home .search-box { + width: 100%; + } + .view-home { + padding: 20px 16px; + } + .image-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 10px; + } + .image-card { + border-radius: 8px; + } + .image-info { + padding: 8px 10px; + } + .image-caption { + font-size: 0.8rem; + } + .image-source { + font-size: 0.7rem; + } + .overlay-buttons { + width: 80%; + } + .overlay-btn { + padding: 6px 12px; + font-size: 0.75rem; + } } diff --git a/templates/home.html b/templates/home.html index 90fc904..e49e1e9 100644 --- a/templates/home.html +++ b/templates/home.html @@ -18,7 +18,7 @@

- OmniSearch + Voidarc

diff --git a/templates/images.html b/templates/images.html index b20eb04..16e1de7 100644 --- a/templates/images.html +++ b/templates/images.html @@ -14,7 +14,7 @@

- OmniSearch + Voidarc

- OmniSearch + Voidarc