From a49568a389e5a8b3e3bbe160cfed8ac52584c3b6 Mon Sep 17 00:00:00 2001 From: sHa Date: Thu, 1 May 2025 01:51:14 +0300 Subject: [PATCH] Add new logos and refactor header component --- public/data/logos.json | 38 ++- public/data/tags.json | 11 + public/global.css | 330 ++++++++++++++++++++------ public/logos/dalnoboy-service.svg | 2 +- public/logos/okko.svg | 7 + public/logos/wog.svg | 12 + src/App.svelte | 382 ++---------------------------- src/components/Actions.svelte | 2 +- src/components/Header.svelte | 84 +++++++ src/components/Preview.svelte | 6 +- src/components/Row.svelte | 98 -------- 11 files changed, 432 insertions(+), 540 deletions(-) create mode 100644 public/data/tags.json create mode 100644 public/logos/okko.svg create mode 100644 public/logos/wog.svg create mode 100644 src/components/Header.svelte diff --git a/public/data/logos.json b/public/data/logos.json index cdfefa0..e4f450e 100644 --- a/public/data/logos.json +++ b/public/data/logos.json @@ -28,10 +28,7 @@ "disable": false, "brand": "Apple", "tags": [ - { - "text": "tech", - "color": "silver" - } + "tech" ], "colors": [ { @@ -74,7 +71,13 @@ "transport", "garage" ], - "brand": "Dalnoboy Service" + "brand": "Dalnoboy Service", + "colors": [ + { + "label": "Orange", + "value": "#ee7800" + } + ] }, { "name": "Disney", @@ -130,10 +133,7 @@ "disable": false, "brand": "Google", "tags": [ - { - "text": "tech", - "color": "silver" - } + "tech" ] }, { @@ -367,6 +367,16 @@ "tags": [], "brand": "Nvidia" }, + { + "name": "Okko", + "path": "logos/okko.svg", + "format": "SVG", + "disable": false, + "tags": [ + "fuel" + ], + "brand": "Okko" + }, { "name": "Privat24", "path": "logos/privat24.svg", @@ -581,5 +591,15 @@ "finance", "transfer" ] + }, + { + "name": "WOG", + "path": "logos/wog.svg", + "format": "SVG", + "disable": false, + "tags": [ + "fuel" + ], + "brand": "WOG" } ] \ No newline at end of file diff --git a/public/data/tags.json b/public/data/tags.json new file mode 100644 index 0000000..25e81cd --- /dev/null +++ b/public/data/tags.json @@ -0,0 +1,11 @@ +{ + "tech": { + "color": "silver" + }, + "retail": { + "color": "#4f8cff" + }, + "bank": { + "color": "#27ae60" + } +} diff --git a/public/global.css b/public/global.css index f3700e8..672bcd9 100644 --- a/public/global.css +++ b/public/global.css @@ -1,9 +1,29 @@ :root { --primary-color: #3498db; + --primary-color-hover: #2980b9; --secondary-color: #2c3e50; --background-color: #f8f9fa; - --card-background: #ffffff; --text-color: #333333; + --white: #ffffff; + --black: #000000; + --color-border: #ddd; + --card-background: var(--white); + --color-bg: var(--background-color); + --color-text: var(--text-color); + --color-card: var(--card-background); + --color-accent: var(--primary-color); + --color-accent-hover: var(--primary-color-hover); +} + +/* Dark theme overrides */ +@media (prefers-color-scheme: dark) { + :root { + --color-card: #23272e; + --background-color: #181a20; + --color-text: #f5f6fa; + --color-border: #333842; + --color-accent: #4f8cff; + } } * { @@ -12,10 +32,16 @@ padding: 0; } +:global(html), +:global(body) { + background: var(--color-bg); + color: var(--color-text); +} + body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - background-color: var(--background-color); - color: var(--text-color); + background-color: var(--color-bg); + color: var(--color-text); line-height: 1.6; } @@ -23,13 +49,15 @@ body { max-width: 1200px; margin: 0 auto; padding: 2rem; + background: var(--color-bg); + color: var(--color-text); } button { cursor: pointer; padding: 0.5rem 1rem; - background-color: var(--primary-color); - color: white; + background-color: var(--color-accent); + color: var(--white); border: none; border-radius: 4px; font-size: 0.9rem; @@ -37,13 +65,34 @@ button { } button:hover { - background-color: #2980b9; + background-color: var(--color-accent-hover); } .view-toggle { display: flex; - gap: 0.5rem; - margin-bottom: 1rem; + gap: 0.2rem; +} + +.view-toggle button { + padding: 0.3rem 0.5rem; + background: var(--color-card); + color: var(--color-text); + border: 1px solid var(--color-border); + border-radius: 4px; + font-size: 1rem; + transition: background 0.2s, color 0.2s; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.view-toggle button.active, +.view-toggle button:focus { + background: var(--color-accent); + color: var(--white); + font-weight: bold; + outline: 2px solid var(--color-border); } .search-bar { @@ -55,15 +104,17 @@ button:hover { .search-bar input { width: 100%; padding: 0.75rem; - border: 1px solid #ddd; + border: 1px solid var(--color-border); border-radius: 4px; font-size: 1rem; + background: var(--color-card); + color: var(--color-text); } .copy-btn, .copy-group .png-btn { - background-color: var(--secondary-color, #2c3e50); - color: #fff; + background-color: var(--secondary-color); + color: var(--white); font-weight: 500; letter-spacing: 0.02em; min-width: 2.5em; @@ -71,7 +122,7 @@ button:hover { margin: 0; padding: 0.4em 1em; font-size: 0.95em; - border-right: 1px solid var(--color-border, #ddd); + border-right: 1px solid var(--color-border); transition: background 0.2s, color 0.2s; text-wrap: nowrap; } @@ -85,15 +136,15 @@ button:hover { .copy-btn:hover, .copy-group .png-btn:focus, .copy-group .png-btn:hover { - background: #222; - color: #fff; + background: var(--black); + color: var(--white); outline: none; } .download-btn, .download-group .png-btn { background: #27ae60; - color: #fff; + color: var(--white); font-weight: 500; letter-spacing: 0.02em; min-width: 2.5em; @@ -101,7 +152,7 @@ button:hover { margin: 0; padding: 0.4em 1em; font-size: 0.95em; - border-right: 1px solid var(--color-border, #ddd); + border-right: 1px solid var(--color-border); transition: background 0.2s, color 0.2s; } @@ -115,31 +166,50 @@ button:hover { .download-group .png-btn:focus, .download-group .png-btn:hover { background: #219150; - color: #fff; + color: var(--white); outline: none; } -.copy-group, .download-group { +.copy-group, +.download-group { display: inline-flex; border-radius: 6px; overflow: hidden; - box-shadow: 0 1px 2px rgba(0,0,0,0.03); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); margin-right: 0.5em; } /* Shared color switcher and color circle styles */ +.format-row { + display: flex; + align-items: center; + gap: 1em; + margin-bottom: 0.5em; + justify-content: space-between; +} + .color-circle { - width: 20px; - height: 20px; + width: 24px; + height: 24px; border-radius: 50%; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); + display: inline-flex; + align-items: center; + justify-content: center; + margin-right: 4px; cursor: pointer; - display: inline-block; - transition: border 0.2s, box-shadow 0.2s; + box-sizing: border-box; + padding: 0; + transition: box-shadow 0.2s; } + .color-circle:hover { - box-shadow: 0 2px 8px rgba(0,0,0,0.12); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } + +.color-circle.color-reset { + background: none !important; +} + .color-switcher-preview, .color-switcher-inline, .color-switcher-under { @@ -147,26 +217,39 @@ button:hover { gap: 0.4em; align-items: center; } + .color-switcher-preview { justify-content: center; - } + +.color-switcher-preview.align-right { + justify-content: flex-end; +} + +.color-switcher-preview.align-left { + justify-content: flex-start; +} + .color-switcher-inline { margin-left: auto; } + .color-switcher-under { margin: 0.5em 0 0 0; } .logo-tag { display: inline-block; - background: var(--color-accent, #4f8cff); - color: #fff; + background: var(--color-accent); + color: var(--white); border-radius: 12px; padding: 0.2em 0.8em; font-size: 0.85em; font-weight: 500; letter-spacing: 0.02em; + margin-right: 0.3em; + margin-top: 0.2em; + margin-bottom: 0.2em; transition: background 0.2s; } @@ -174,10 +257,11 @@ button:hover { display: flex; align-items: center; gap: 0.5em; - flex-wrap: nowrap; } .logo-info { + flex: 1 1 auto; + min-width: 0; background: var(--color-card); color: var(--color-text); padding: 0.5rem 1rem; @@ -198,7 +282,8 @@ button:hover { transition: background 0.2s, color 0.2s; } -.logo-preview img { +.logo-preview img, +div.logo-image img { max-width: 80%; max-height: 80%; width: auto; @@ -208,32 +293,6 @@ button:hover { margin: 0 auto; } -.format-row { - display: flex; - align-items: center; - gap: 1em; - margin-bottom: 0.5em; - justify-content: space-between; -} - -/* Direct logo image size constraints that will work with any component structure */ -div.logo-image { - display: flex; - align-items: center; - justify-content: center; - /* background-color removed for theme support */ - position: relative; - overflow: hidden; -} - -div.logo-image img { - max-width: 80%; - max-height: 80%; - width: auto; - height: auto; - object-fit: contain; -} - .logo-image svg { width: 100%; height: 100%; @@ -245,7 +304,6 @@ div.logo-image img { /* Grid specific */ .logo-grid .logo-item .logo-image { - /* height: 160px; */ width: 100%; } @@ -254,16 +312,156 @@ div.logo-image img { width: 120px; min-width: 120px; height: 100px; - border-right: 1px solid #eee; + border-right: 1px solid var(--color-border); } -/* Dark theme overrides */ -@media (prefers-color-scheme: dark) { - :root { - --color-card: #23272e; - --background-color: #181a20; - --color-text: #f5f6fa; - --color-border: #333842; - --color-accent: #4f8cff; +/* Row specific */ +.logo-row { + display: flex; + align-items: center; + padding: 0.5em 0.5em; + border-bottom: 1px solid var(--color-border); + gap: 1em; +} + +.logo-row.grid { + flex-direction: column; + align-items: stretch; + border-bottom: none; + border-radius: 10px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); + margin-bottom: 1em; + padding: 1em; +} + +.logo-row.list { + flex-direction: row; + align-items: center; + border-radius: 0; + box-shadow: none; + margin-bottom: 0; + padding: 0.5em 0.5em; +} + +.logo-img { + flex-shrink: 0; + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-card); + border-radius: 8px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + cursor: pointer; +} + +/* Header styles */ +.main-header { + margin-bottom: 1.5rem; + background: var(--color-card); + color: var(--color-text); + border-radius: 8px; + padding: 1.2rem 1rem 0.7rem 1rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); +} + +.header-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; +} + +.header-controls { + margin-top: 0.5rem; +} + +.logo-count { + font-family: system-ui, Arial, sans-serif; + font-size: 0.6rem; + font-weight: normal; + color: var(--color-text); + margin-left: 1rem; + align-self: center; + opacity: 0.7; +} + +.theme-switcher { + display: flex; + align-items: center; + gap: 0.2rem; + margin-left: auto; +} + +.theme-switch-group { + display: flex; + border-radius: 6px; + overflow: hidden; + border: 1px solid var(--color-border); + background: var(--color-card); +} + +.theme-switch-group button { + background: none; + border: none; + color: var(--color-text); + padding: 0.2em 0.7em; + font-size: 1.1rem; + border-radius: 0; + transition: background 0.2s, color 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.theme-switch-group button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.theme-switch-group button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.theme-switch-group button.active, +.theme-switch-group button:focus { + background: var(--color-accent); + color: var(--white); + font-weight: bold; + outline: 2px solid var(--color-border); +} + +.theme-switch-group button:hover { + background: var(--color-accent); + color: var(--color-accent-text); +} + +.logos-container { + width: 100%; +} + +footer { + margin-top: 3rem; + text-align: center; + font-size: 0.9rem; + color: #888; + background: transparent; +} + +@media (max-width: 700px) { + .header-row { + flex-direction: column; + align-items: stretch; + gap: 0.5rem; + } + + .main-header { + padding: 1rem 0.5rem 0.5rem 0.5rem; + } + + h1 { + font-size: 1.1rem; } } diff --git a/public/logos/dalnoboy-service.svg b/public/logos/dalnoboy-service.svg index 8b18adf..568574d 100644 --- a/public/logos/dalnoboy-service.svg +++ b/public/logos/dalnoboy-service.svg @@ -1,5 +1,5 @@ + fill="currentColor" /> diff --git a/public/logos/okko.svg b/public/logos/okko.svg new file mode 100644 index 0000000..05712cb --- /dev/null +++ b/public/logos/okko.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/public/logos/wog.svg b/public/logos/wog.svg new file mode 100644 index 0000000..65361e3 --- /dev/null +++ b/public/logos/wog.svg @@ -0,0 +1,12 @@ + diff --git a/src/App.svelte b/src/App.svelte index 9c77ec1..2251418 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; import LogoGrid from './components/Grid.svelte'; import LogoList from './components/List.svelte'; + import Header from './components/Header.svelte'; let viewMode = 'grid'; // 'grid' or 'list' let searchQuery = ''; @@ -191,73 +192,25 @@
-
-
-

Logo Gallery

- {logos.length} images in gallery -
-
- - - -
-
-
-
-
- -
-
- {#each selectedTags as tagText} - {#if getTagObj(tagText)} - - {/if} - {/each} -
- - {#if tagDropdownOpen} -
- {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj} - - {/each} - {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0} - No more tags - {/if} -
- {/if} -
-
-
- - -
-
-
+
{#if viewMode === 'grid'} @@ -280,298 +233,3 @@

shadoll Logo Gallery. All logos are property of their respective owners.

- - diff --git a/src/components/Actions.svelte b/src/components/Actions.svelte index 0e13b55..3f6ea0a 100644 --- a/src/components/Actions.svelte +++ b/src/components/Actions.svelte @@ -359,7 +359,7 @@ right: 0; min-width: 160px; background: var(--color-card, #fff); - color: var(--color-text, #222); + color: var(--text-color, #222); border: 1px solid var(--color-border, #ddd); border-radius: 8px; box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18); diff --git a/src/components/Header.svelte b/src/components/Header.svelte new file mode 100644 index 0000000..e2a5f51 --- /dev/null +++ b/src/components/Header.svelte @@ -0,0 +1,84 @@ + + +
+
+

Logo Gallery

+ {logos.length} images in gallery +
+
+ + + +
+
+
+
+
+ +
+
+ {#each selectedTags as tagText} + {#if getTagObj(tagText)} + + {/if} + {/each} +
+ + {#if tagDropdownOpen} +
+ {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj} + + {/each} + {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0} + No more tags + {/if} +
+ {/if} +
+
+
+ + +
+
+
diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte index ad6c146..be5f3e0 100644 --- a/src/components/Preview.svelte +++ b/src/components/Preview.svelte @@ -159,7 +159,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme); :global(.modal-content) { background: var(--color-card); - color: var(--color-text); + color: var(--text-color); border-radius: 8px; padding: 1rem; max-width: 500px; @@ -186,7 +186,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme); border: none; font-size: 1.5rem; cursor: pointer; - color: var(--color-text, #222); + color: var(--text-color, #222); transition: color 0.2s; } @@ -222,7 +222,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme); .logo-details { padding: 1rem; background-color: var(--color-card); - color: var(--color-text); + color: var(--text-color); border-radius: 4px; transition: background 0.2s, color 0.2s; } diff --git a/src/components/Row.svelte b/src/components/Row.svelte index ffb0c04..3459872 100644 --- a/src/components/Row.svelte +++ b/src/components/Row.svelte @@ -1,7 +1,5 @@