ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(branding): Replace logo mark with image and update color palette to Conduit blue

Browse Source
This commit is contained in:
cogwheel0
2025-11-29 16:32:04 +05:30
parent c616972c3d
commit 79b9c82fb5
2 changed files with 33 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/index.html
View File

@@ -27,7 +27,7 @@
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<a href="#" class="logo"> <a href="#" class="logo">
<span class="logo-mark">⬡</span> <img src="https://raw.githubusercontent.com/cogwheel0/conduit/main/assets/icons/icon.png" alt="Conduit" class="logo-icon">
<span class="logo-text">Conduit</span> <span class="logo-text">Conduit</span>
</a> </a>
<div class="nav-links"> <div class="nav-links">
@@ -314,24 +314,6 @@
</div> </div>
</div> </div>
<!-- CTA -->
<div class="reviews-cta">
<p>Join thousands of happy users</p>
<div class="reviews-links">
<a href="https://apps.apple.com/us/app/conduit-open-webui-client/id6749840287" class="review-link ios">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
</svg>
Rate on App Store
</a>
<a href="https://play.google.com/store/apps/details?id=app.cogwheel.conduit" class="review-link android">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
</svg>
Rate on Google Play
</a>
</div>
</div>
</div> </div>
</section> </section>
@@ -559,7 +541,7 @@
<div class="footer-main"> <div class="footer-main">
<div class="footer-brand"> <div class="footer-brand">
<a href="#" class="logo"> <a href="#" class="logo">
<span class="logo-mark">⬡</span> <img src="https://raw.githubusercontent.com/cogwheel0/conduit/main/assets/icons/icon.png" alt="Conduit" class="logo-icon">
<span class="logo-text">Conduit</span> <span class="logo-text">Conduit</span>
</a> </a>
<p>The native mobile client for Open-WebUI.<br>Open source. Privacy-first. Beautiful.</p> <p>The native mobile client for Open-WebUI.<br>Open source. Privacy-first. Beautiful.</p>

120
docs/styles.css
View File

@@ -3,16 +3,16 @@
============================================ */ ============================================ */
:root { :root {
/* Color Palette - Warm Dark Theme with Coral Accent */ /* Color Palette - Dark Theme with Conduit Blue */
--bg-deep: #0a0a0c; --bg-deep: #050810;
--bg-surface: #111114; --bg-surface: #0a0f18;
--bg-elevated: #18181c; --bg-elevated: #111827;
--bg-card: #1e1e24; --bg-card: #1a2235;
--accent: #ff6b4a; --accent: #2563eb;
--accent-light: #ff8a70; --accent-light: #3b82f6;
--accent-glow: rgba(255, 107, 74, 0.4); --accent-glow: rgba(37, 99, 235, 0.4);
--accent-subtle: rgba(255, 107, 74, 0.1); --accent-subtle: rgba(37, 99, 235, 0.1);
--text-primary: #fafafa; --text-primary: #fafafa;
--text-secondary: #a8a8b8; --text-secondary: #a8a8b8;
@@ -127,30 +127,30 @@ img {
.orb-1 { .orb-1 {
width: 600px; width: 600px;
height: 600px; height: 600px;
background: linear-gradient(135deg, var(--accent) 0%, #ff3d00 100%); background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
top: -200px; top: -200px;
right: -200px; right: -200px;
opacity: 0.15; opacity: 0.2;
animation: float 20s ease-in-out infinite; animation: float 20s ease-in-out infinite;
} }
.orb-2 { .orb-2 {
width: 400px; width: 400px;
height: 400px; height: 400px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
bottom: 20%; bottom: 20%;
left: -150px; left: -150px;
opacity: 0.1; opacity: 0.12;
animation: float 25s ease-in-out infinite reverse; animation: float 25s ease-in-out infinite reverse;
} }
.orb-3 { .orb-3 {
width: 300px; width: 300px;
height: 300px; height: 300px;
background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
bottom: -100px; bottom: -100px;
right: 20%; right: 20%;
opacity: 0.08; opacity: 0.1;
animation: float 18s ease-in-out infinite; animation: float 18s ease-in-out infinite;
} }
@@ -199,9 +199,10 @@ img {
opacity: 0.8; opacity: 0.8;
} }
.logo-mark { .logo-icon {
color: var(--accent); width: 28px;
font-size: 1.375rem; height: 28px;
border-radius: 6px;
} }
.nav-links { .nav-links {
@@ -341,7 +342,7 @@ img {
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: var(--accent-subtle); background: var(--accent-subtle);
border: 1px solid rgba(255, 107, 74, 0.2); border: 1px solid rgba(37, 99, 235, 0.3);
border-radius: 100px; border-radius: 100px;
font-family: var(--font-body); font-family: var(--font-body);
font-size: var(--text-xs); font-size: var(--text-xs);
@@ -438,7 +439,7 @@ img {
} }
.title-accent { .title-accent {
background: linear-gradient(135deg, var(--accent) 0%, #ff9a7a 40%, var(--accent-light) 100%); background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 40%, var(--accent-light) 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -577,7 +578,7 @@ img {
.device-frame:hover { .device-frame:hover {
transform: translateY(-8px) scale(1.02); transform: translateY(-8px) scale(1.02);
box-shadow: box-shadow:
0 0 0 1px rgba(255, 107, 74, 0.3), 0 0 0 1px rgba(37, 99, 235, 0.4),
0 8px 16px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2),
0 24px 48px rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.3),
0 48px 96px rgba(0, 0, 0, 0.4), 0 48px 96px rgba(0, 0, 0, 0.4),
@@ -756,11 +757,11 @@ img {
} }
.review-card[data-platform="ios"] { .review-card[data-platform="ios"] {
border-top: 2px solid rgba(163, 163, 163, 0.3); border-top: 2px solid rgba(37, 99, 235, 0.4);
} }
.review-card[data-platform="android"] { .review-card[data-platform="android"] {
border-top: 2px solid rgba(61, 220, 132, 0.3); border-top: 2px solid rgba(59, 130, 246, 0.4);
} }
.review-text { .review-text {
@@ -810,55 +811,6 @@ img {
color: #3ddc84; color: #3ddc84;
} }
/* Reviews CTA */
.reviews-cta {
text-align: center;
margin-top: 3rem;
}
.reviews-cta p {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-muted);
margin-bottom: 1.25rem;
}
.reviews-links {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.review-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 100px;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-secondary);
transition: all 0.3s var(--ease-out);
}
.review-link:hover {
background: var(--bg-elevated);
border-color: var(--border-hover);
color: var(--text-primary);
transform: translateY(-2px);
}
.review-link.ios:hover {
color: #fff;
}
.review-link.android:hover {
color: #3ddc84;
}
/* ============================================ /* ============================================
FEATURES SECTION FEATURES SECTION
@@ -908,8 +860,8 @@ img {
gap: 3rem; gap: 3rem;
align-items: center; align-items: center;
padding: 3rem; padding: 3rem;
background: linear-gradient(135deg, rgba(255, 107, 74, 0.1) 0%, rgba(255, 107, 74, 0.02) 100%); background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.02) 100%);
border: 1px solid rgba(255, 107, 74, 0.2); border: 1px solid rgba(37, 99, 235, 0.25);
border-radius: 24px; border-radius: 24px;
margin-bottom: 3rem; margin-bottom: 3rem;
position: relative; position: relative;
@@ -923,7 +875,7 @@ img {
right: 0; right: 0;
width: 50%; width: 50%;
height: 100%; height: 100%;
background: radial-gradient(circle at 80% 50%, rgba(255, 107, 74, 0.15) 0%, transparent 60%); background: radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 60%);
pointer-events: none; pointer-events: none;
} }
@@ -1009,7 +961,7 @@ img {
justify-content: center; justify-content: center;
width: 96px; width: 96px;
height: 96px; height: 96px;
background: linear-gradient(135deg, var(--accent) 0%, #ff3d00 100%); background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
border-radius: 28px; border-radius: 28px;
color: #fff; color: #fff;
box-shadow: 0 16px 48px -8px var(--accent-glow); box-shadow: 0 16px 48px -8px var(--accent-glow);
@@ -1029,7 +981,7 @@ img {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 1px solid rgba(255, 107, 74, 0.2); border: 1px solid rgba(37, 99, 235, 0.3);
border-radius: 50%; border-radius: 50%;
animation: heroRingPulse 3s ease-out infinite; animation: heroRingPulse 3s ease-out infinite;
} }
@@ -1196,7 +1148,7 @@ img {
0 8px 24px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2),
0 24px 64px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.4),
0 0 60px -20px var(--accent-glow); 0 0 60px -20px var(--accent-glow);
border-color: rgba(255, 107, 74, 0.3); border-color: rgba(37, 99, 235, 0.4);
} }
.gallery-label { .gallery-label {
@@ -1228,7 +1180,7 @@ img {
.cta-card { .cta-card {
position: relative; position: relative;
padding: 4rem; padding: 4rem;
background: linear-gradient(135deg, var(--accent) 0%, #e55a3a 100%); background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
border-radius: 32px; border-radius: 32px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@@ -1561,16 +1513,6 @@ img {
width: 60px; width: 60px;
} }
.reviews-links {
flex-direction: column;
align-items: center;
}
.review-link {
width: 100%;
max-width: 280px;
justify-content: center;
}
.cta-card { .cta-card {
padding: 3rem 2rem; padding: 3rem 2rem;