Add new logos and refactor header component

This commit is contained in:
sHa
2025-05-01 01:51:14 +03:00
parent aaf7db1471
commit a49568a389
11 changed files with 432 additions and 540 deletions

View File

@@ -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"
}
]

11
public/data/tags.json Normal file
View File

@@ -0,0 +1,11 @@
{
"tech": {
"color": "silver"
},
"retail": {
"color": "#4f8cff"
},
"bank": {
"color": "#27ae60"
}
}

View File

@@ -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;
}
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

7
public/logos/okko.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg data-v-3153e3cf="" width="100%" height="100%" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor">
<path
d="M28.06 55.617h-1.209c-1.41 0-2.418 1.21-2.216 2.62h6.045c1.814-1.814 3.829-3.224 6.045-4.232-.604-2.418-1.007-5.038-.806-7.456-1.813.202-3.425.403-5.239 1.008-.604.201-.806.604-.604 1.209l1.813 4.232c-1.209.806-2.216 1.612-3.224 2.62h-.604zm16.121-23.98c-.403.806-.403 1.814.403 2.62 1.612 1.41 3.426 2.217 4.434 4.232.604 1.007 1.41 3.022-.403 3.224-1.613.201-4.03-1.41-5.441-2.418.604.806.806 1.813 1.209 2.62.201.402.403.604.604.604 1.612.806 4.232 1.41 5.441-.202 1.21-1.41.806-3.224-.403-4.836-1.209-2.015-3.224-2.62-4.635-4.232-.201-.201-.403-.604-.201-.806.201-.604.806-.806 1.41-.806.807-.201 1.814-.403 2.419-.604.604-.403.806-1.008 1.007-1.41l.202-1.008c-1.41.403-3.023.806-4.232 1.41-.403.403-1.41 1.008-1.814 1.612zm-20.755-8.463c2.62-4.635 5.642-9.068 8.866-13.3.605-2.015.202-3.627-.604-5.24l-1.612-3.626a144.276 144.276 0 00-9.068 17.531c-.403.806-.202 1.814.403 2.418.604.605 1.41 1.41 2.015 2.217zm-9.471 35.063c5.239-7.456 13.702-12.292 22.77-12.695.806 2.62 2.217 5.037 3.83 7.254 3.022-.605 6.044-.403 8.866.403l.806 2.015c0 .202 0 .403-.202.403h-.806c-1.41 0-2.418 1.21-2.217 2.62h5.643c.806 0 1.41-.806 1.209-1.612l-2.418-6.247c-1.612-.605-3.224-.806-4.837-1.008l-3.425-8.866c-.605-1.612-2.62-2.418-4.03-2.821-1.612-.403-3.628-.605-5.441-.403 2.015-1.008 4.03-2.016 6.247-2.822 1.209-.403 2.015-1.41 2.418-2.418.403-1.007.604-1.813 1.007-2.82-1.813.805-3.627 1.611-5.44 2.619l3.627-2.418c1.612-1.008 2.418-2.015 2.82-3.627.202-1.21.404-2.217.605-3.426-2.216.806-4.634 2.015-6.65 3.022 1.008-.806 2.62-1.813 3.628-2.418 2.216-1.41 3.425-3.627 3.627-6.247V13.3c-3.023 1.813-6.045 3.627-8.867 5.844 1.612-1.612 3.225-3.225 5.038-4.635 2.62-2.418 3.627-5.643 3.023-9.068-.403-1.814-.806-3.627-1.41-5.441-3.426 3.224-6.65 6.851-9.673 10.479-3.224 4.03-6.247 8.463-9.068 12.896-.403.806-.403 1.612 0 2.217 1.007 1.41 2.015 3.023 2.418 4.635 1.209 4.634-1.21 6.045-3.627 7.859-.605.403-.605 0-.403-.202l.604-.604c1.814-1.613 2.015-4.635.806-6.852-1.612-2.82-3.828-5.44-6.448-7.456-.403 1.008-1.008 2.015-2.62 3.023-1.007.604-3.224 2.217-5.037 4.836.806 1.21 1.612 2.015 2.82 2.821.404-.403.807-.806 1.411-1.209.403-.403 1.008-.201 1.21.202.402-.403.402.201 0 .604l-.404.403c-.403.403-1.007.202-1.209-.201 0 0 0-.202-.201-.202l-.403.403c.403.806 1.007 2.217 1.209 2.217.201 0 .201 0 .403-.202l1.612-1.41c0-.202.201 0 .201.201-1.612 3.023-3.425 6.65-4.433 9.875-.201.604 0 1.209.202 1.612.806 1.41 2.216 2.82 2.62 3.224-1.411 1.813-2.62 3.829-3.628 5.844-.201.403-.604.604-1.209.604H8.917c-1.41 0-2.418 1.21-2.217 2.62h7.255zm16.322 7.859h-4.03L20.2 71.939v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.24-5.642zm16.121 0h-4.03l-6.046 5.843v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.239-5.642zm-35.869 0c-1.008-.202-2.217-.403-3.224-.403-1.008 0-2.217.201-3.224.403a4.77 4.77 0 00-3.628 3.627c-.604 2.217-.604 4.232 0 6.448a4.77 4.77 0 003.628 3.627c1.007 0 2.216.202 3.224.202 1.007 0 2.216-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.217.605-4.232 0-6.449-.403-1.612-1.813-3.022-3.627-3.425zm.604 9.068c-.201.604-.604 1.209-1.41 1.209-1.612.403-3.224.403-5.038 0-.604-.202-1.209-.605-1.41-1.21a9.823 9.823 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .604.202 1.209.605 1.41 1.21a9.824 9.824 0 010 4.836zm49.975-5.643a4.77 4.77 0 00-3.627-3.627c-1.007-.201-2.217-.403-3.224-.403-1.008 0-2.217.202-3.224.403a4.77 4.77 0 00-3.627 3.627c-.605 2.217-.605 4.232 0 6.449a4.77 4.77 0 003.627 3.627c1.007.202 2.216.403 3.224.403s2.217-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.015.605-4.232 0-6.449zm-3.022 5.643c-.202.604-.605 1.209-1.41 1.209-1.613.403-3.225.403-5.039 0-.604-.202-1.209-.605-1.41-1.21a9.824 9.824 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .605.202 1.21.605 1.41 1.21a9.822 9.822 0 010 4.836z">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

12
public/logos/wog.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg id="logo" viewBox="0 0 130 40" fill="none" stroke="none" height="100%" width="100%"
xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M79.37 12.49l-2.1 7.61c-.17.68-.79 3.47-1 5.52h-.18c-.2-2.23-.76-4.63-1-5.68l-1.67-7.46h-5.33l-1.68 7.46c-.23 1.05-.8 3.45-1 5.68h-.18c-.2-2.05-.82-4.85-1-5.52l-2.1-7.61H56l5.5 17.36c.68 2.13 1.79 3.24 3.7 3.24 1.88 0 3.08-1.17 3.55-3.24l.82-3.54c.36-1.49.86-3.65 1.09-5.29h.17c.23 1.64.73 3.8 1.08 5.3l.83 3.53c.5 2.07 1.68 3.24 3.55 3.24 1.91 0 3.03-1.11 3.7-3.24l5.5-17.36h-6.12zM96 12.05c-6.24 0-11.02 4.59-11.02 10.52S89.78 33.09 96 33.09c6.23 0 11.01-4.59 11.01-10.52.01-5.93-4.78-10.52-11-10.52zm0 15.93a5.36 5.36 0 01-5.45-5.41A5.36 5.36 0 0196 17.16a5.36 5.36 0 015.44 5.41 5.36 5.36 0 01-5.44 5.41zM129.8 21.06h-11.84v4.15h6.49c-.32 1.52-2.24 3.01-4.88 3.01-3.66 0-5.61-2.46-5.61-5.64a5.36 5.36 0 015.52-5.44c2.2 0 3.88 1.12 4.8 2.81l5.08-2.07c-1.8-3.51-5.11-5.81-9.87-5.81-6.17 0-11.01 4.56-11.01 10.52s4.64 10.52 11.01 10.52c6.99-.01 11.48-5.48 10.3-12.05z"
fill="#009345"></path>
<path d="M42.61 0a6.67 6.67 0 00-6 9.62l6 12.1 6-12.1a6.67 6.67 0 00-6-9.62z" fill="#8BC53F"></path>
<path
d="M21.23 29.02L15.77 40 .7 9.6A6.65 6.65 0 013.73.7a6.71 6.71 0 018.96 3.02l8.53 17.17a9.16 9.16 0 010 8.14zM39.18 29.02L33.72 40 18.65 9.6A6.65 6.65 0 0121.68.7a6.71 6.71 0 018.96 3.02l8.54 17.18a9.17 9.17 0 010 8.13z"
fill="#009345"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB