gronod/ICCery
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat: Implement ICCery SVG logo branding and UI layout refinements (closes #23) #24

Merged
gronod merged 7 commits from feature/logo into development 2026-08-23 10:02:36 +01:00
Conversation 0 Commits 7 Files Changed 3
+127 -24
3 changed files with 127 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/ICCery-logo.svg
+47
View File
@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 160" width="100%" height="100%">
<defs>
<clipPath id="coneClip">
<path d="M 50 82 L 110 82 L 80 142 Z" />
</clipPath>
<linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00AEEF" />
<stop offset="100%" stop-color="#0066CC" />
</linearGradient>
</defs>
<!-- Drop Shadow -->
<ellipse cx="80" cy="145" rx="25" ry="5" fill="#1E293B" opacity="0.1" />
<!-- Ice Cream Cone (Waffle) -->
<path d="M 50 82 L 110 82 L 80 142 Z" fill="#FAD7A1" stroke="#E59866" stroke-width="2.5" stroke-linejoin="round"/>
<g clip-path="url(#coneClip)" stroke="#E59866" stroke-width="2">
<line x1="40" y1="80" x2="120" y2="160" />
<line x1="55" y1="80" x2="135" y2="160" />
<line x1="70" y1="80" x2="150" y2="160" />
<line x1="85" y1="80" x2="165" y2="160" />
<line x1="120" y1="80" x2="40" y2="160" />
<line x1="105" y1="80" x2="25" y2="160" />
<line x1="90" y1="80" x2="10" y2="160" />
<line x1="75" y1="80" x2="-5" y2="160" />
</g>
<!-- CMYK Scoops (C, M, Y) -->
<circle cx="63" cy="72" r="22" fill="#00BCEB" stroke="#ffffff" stroke-width="2.5"/>
<circle cx="97" cy="72" r="22" fill="#EC008C" stroke="#ffffff" stroke-width="2.5"/>
<circle cx="80" cy="48" r="22" fill="#FFED00" stroke="#ffffff" stroke-width="2.5"/>
<!-- Black (Key) Cherry -->
<path d="M 80 23 Q 92 12 96 16" fill="none" stroke="#1E293B" stroke-width="2" stroke-linecap="round"/>
<circle cx="80" cy="24" r="7" fill="#1E293B" stroke="#ffffff" stroke-width="1.5"/>
<!-- Highlights on scoops for 3D effect -->
<circle cx="58" cy="67" r="4" fill="#ffffff" opacity="0.35"/>
<circle cx="92" cy="67" r="4" fill="#ffffff" opacity="0.35"/>
<circle cx="75" cy="43" r="4" fill="#ffffff" opacity="0.45"/>
<circle cx="78" cy="22" r="1.5" fill="#ffffff" opacity="0.6"/>
<!-- Text: ICCery -->
<text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" x="140" y="105" fill="#ffffff" letter-spacing="-1">ICC<tspan fill="url(#textGrad)">ery</tspan></text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

src/index.html
+10 -7
View File
@@ -14,8 +14,14 @@
<div class="app-container">
<aside class="sidebar">
<div class="brand">
<h1>ICCery</h1>
<img src="./assets/ICCery-logo.svg" alt="ICCery" class="main-logo" />
<div class="brand-actions">
<button id="openSettingsBtn" class="icon-btn" title="Settings" style="display: flex; align-items: center; justify-content: center;">
<svg width="20" height="20" 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"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.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-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
<button id="openAboutBtn" class="icon-btn" title="About" style="display: flex; align-items: center; justify-content: center;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
@@ -23,12 +29,6 @@
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
<button id="openSettingsBtn" class="icon-btn" title="Settings" style="display: flex; align-items: center; justify-content: center;">
<svg width="20" height="20" 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"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.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-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
</div>
</div>
<nav class="stepper">
@@ -363,6 +363,9 @@
<!-- About Dialog -->
<dialog id="aboutDialog" class="settings-modal about-modal">
<div class="modal-content">
<div class="about-logo-container">
<img src="./assets/ICCery-logo.svg" alt="ICCery Logo" class="about-logo" />
</div>
<h2>About ICCery</h2>
<p><strong>Version:</strong> <span id="aboutVersion">v0.1.0</span> &bull; <strong>Build Date:</strong> <span id="aboutBuildDate">August 2026</span></p>
<p><strong>Copyright &copy; 2026 Gordon Bolton. All rights reserved.</strong></p>
src/styles/main.css
+70 -17
View File
@@ -1,4 +1,5 @@
:root {
color-scheme: dark;
--bg-color: #1e1e1e;
--panel-color: #252526;
--text-color: #d4d4d4;
@@ -21,7 +22,7 @@ body {
}
.sidebar {
width: 250px;
width: 270px;
background-color: var(--panel-color);
border-right: 1px solid var(--border-color);
display: flex;
@@ -29,21 +30,40 @@ body {
}
.brand {
padding: 20px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-width: 0;
}
.brand-actions {
display: flex;
gap: 8px;
gap: 6px;
flex-shrink: 0;
}
.brand h1 {
margin: 0;
font-size: 1.5rem;
.main-logo {
height: 4.42rem;
max-width: 175px;
width: 100%;
object-fit: contain;
object-position: left center;
flex-shrink: 1;
min-width: 0;
}
.about-logo-container {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.about-logo {
height: 5.5rem;
object-fit: contain;
}
.stepper {
@@ -75,7 +95,7 @@ body {
.content {
flex: 1;
padding: 40px;
padding: 24px 32px;
overflow-y: auto;
}
@@ -90,6 +110,7 @@ body {
h2 {
margin-top: 0;
margin-bottom: 6px;
color: #fff;
}
@@ -97,11 +118,11 @@ button.primary {
background-color: var(--accent-color);
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
padding: 9px 18px;
font-size: 0.95rem;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
margin-top: 14px;
}
button.primary:hover {
@@ -109,21 +130,50 @@ button.primary:hover {
}
.form-group {
margin: 20px 0;
margin: 14px 0;
}
.form-group:first-child {
margin-top: 0;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-group label {
display: block;
margin-bottom: 8px;
margin-bottom: 6px;
}
select,
.form-group select {
padding: 8px;
background-color: var(--panel-color);
color: var(--text-color);
padding: 8px 12px;
background-color: var(--bg-color);
color: #ffffff;
border: 1px solid var(--border-color);
border-radius: 4px;
width: 200px;
width: 100%;
max-width: 320px;
color-scheme: dark;
cursor: pointer;
box-sizing: border-box;
}
select:focus,
.form-group select:focus {
outline: 1px solid var(--accent-color);
border-color: var(--accent-color);
}
select option {
background-color: var(--panel-color);
color: #ffffff;
}
select option:checked {
background-color: var(--accent-color);
color: #ffffff;
}
@keyframes fadeIn {
@@ -138,7 +188,7 @@ button.primary:hover {
.form-container {
max-width: 600px;
background: var(--panel-color);
padding: 20px;
padding: 16px 20px;
border-radius: 8px;
border: 1px solid var(--border-color);
}
@@ -671,10 +721,13 @@ button.danger:hover {
cursor: pointer;
padding: 4px;
border-radius: 4px;
color: #d1d5db;
transition: color 0.15s ease, background-color 0.15s ease;
}
.icon-btn:hover {
background: var(--border-color);
color: #ffffff;
}
.settings-modal {