feat(reviews): Implement reviews section with rating pills and marquee display
This commit is contained in:
cogwheel0
236
docs/index.html
236
docs/index.html
@@ -114,44 +114,222 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="stats">
|
||||
<section id="reviews" class="reviews">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
<!-- Rating Pills -->
|
||||
<div class="reviews-stats">
|
||||
<div class="stat-pill">
|
||||
<div class="stat-pill-icon ios">
|
||||
<svg width="14" height="14" 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>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">Private</span>
|
||||
<span class="stat-label">Your data stays yours</span>
|
||||
<span class="stat-pill-value">4.6</span>
|
||||
<span class="stat-pill-label">avg</span>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="stat-pill-icon android">
|
||||
<svg width="14" height="14" 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>
|
||||
</div>
|
||||
<span class="stat-pill-value">4.8</span>
|
||||
<span class="stat-pill-label">avg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Marquee Row 1 -->
|
||||
<div class="reviews-marquee">
|
||||
<div class="marquee-track marquee-left">
|
||||
<!-- Original set -->
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">This is a great and easy companion app for OWUI. The developer took effort to make this app easy to use. Hope to see more features added in the future.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">ythefly</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">I've used this for my openwebui through tailscale, and this app picks up everything perfectly. The UI is far superior to what OpenWebUI has as a PWA.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Pixel 9 Pro</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">I needed a client to connect to my self hosted server, and this just worked right out of the box. Love it!</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">SpikefishX</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">This app is just incredible. Instant startup and incredibly responsive and gives offline access to your openwebui chats and history. Loveeee it!!</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Pixel Tablet</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Duplicate set for seamless loop -->
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">This is a great and easy companion app for OWUI. The developer took effort to make this app easy to use. Hope to see more features added in the future.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">ythefly</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">I've used this for my openwebui through tailscale, and this app picks up everything perfectly. The UI is far superior to what OpenWebUI has as a PWA.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Pixel 9 Pro</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">I needed a client to connect to my self hosted server, and this just worked right out of the box. Love it!</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">SpikefishX</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">This app is just incredible. Instant startup and incredibly responsive and gives offline access to your openwebui chats and history. Loveeee it!!</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Pixel Tablet</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
||||
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Marquee Row 2 -->
|
||||
<div class="reviews-marquee">
|
||||
<div class="marquee-track marquee-right">
|
||||
<!-- Original set -->
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">This app is an exceptionally good client for OWUI and is complete with secure authentication and an extremely usable UI. Great work.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">AlpacaDev</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">Open Source</span>
|
||||
<span class="stat-label">GPLv3 Licensed</span>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">If you run an ollama server this app is not only free and open source but really polished and impressive! I think this is really the only app of its kind.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Galaxy S10</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">This app is much better than the PWA. UI is on par with ChatGPT app. Great app, dev is quick to fix bugs.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Owner45653</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">Exceptional! Great work done so far. Really good UI and no issues with connecting to the OWUI server!</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Pixel 7 Pro</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Duplicate set for seamless loop -->
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">This app is an exceptionally good client for OWUI and is complete with secure authentication and an extremely usable UI. Great work.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">AlpacaDev</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">If you run an ollama server this app is not only free and open source but really polished and impressive! I think this is really the only app of its kind.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Galaxy S10</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="ios">
|
||||
<p class="review-text">This app is much better than the PWA. UI is on par with ChatGPT app. Great app, dev is quick to fix bugs.</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Owner45653</span>
|
||||
<div class="review-platform-badge">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-card" data-platform="android">
|
||||
<p class="review-text">Exceptional! Great work done so far. Really good UI and no issues with connecting to the OWUI server!</p>
|
||||
<div class="review-meta">
|
||||
<span class="review-rating">★★★★★</span>
|
||||
<span class="review-author">Pixel 7 Pro</span>
|
||||
<div class="review-platform-badge android">
|
||||
<svg width="12" height="12" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
|
||||
<line x1="12" y1="18" x2="12.01" y2="18"/>
|
||||
</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>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-value">Native</span>
|
||||
<span class="stat-label">iOS & Android</span>
|
||||
</div>
|
||||
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>
|
||||
|
||||
392
docs/styles.css
392
docs/styles.css
@@ -566,7 +566,7 @@ img {
|
||||
border-radius: 32px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-card);
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||||
0 4px 8px rgba(0, 0, 0, 0.2),
|
||||
0 12px 32px rgba(0, 0, 0, 0.3),
|
||||
@@ -576,7 +576,7 @@ img {
|
||||
|
||||
.device-frame:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 107, 74, 0.3),
|
||||
0 8px 16px rgba(0, 0, 0, 0.2),
|
||||
0 24px 48px rgba(0, 0, 0, 0.3),
|
||||
@@ -616,76 +616,258 @@ img {
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
STATS SECTION
|
||||
REVIEWS SECTION
|
||||
============================================ */
|
||||
|
||||
.stats {
|
||||
padding: 4rem 0;
|
||||
.reviews {
|
||||
padding: calc(var(--section-gap) * 0.75) 0;
|
||||
background: var(--bg-deep);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
/* Rating Pills */
|
||||
.reviews-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
.stat-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-elevated);
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s var(--ease-out);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
.stat-pill-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--accent-subtle);
|
||||
border-radius: 12px;
|
||||
color: var(--accent);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: 50%;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
.stat-pill-icon.ios {
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
.stat-pill-icon.android {
|
||||
color: #3ddc84;
|
||||
}
|
||||
|
||||
.stat-pill-value {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
.stat-pill-label {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Marquee Container */
|
||||
.reviews-marquee {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 -2rem;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.reviews-marquee::before,
|
||||
.reviews-marquee::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 120px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reviews-marquee::before {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, var(--bg-deep) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.reviews-marquee::after {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, var(--bg-deep) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Marquee Track */
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.marquee-left {
|
||||
animation: marqueeLeft 40s linear infinite;
|
||||
}
|
||||
|
||||
.marquee-right {
|
||||
animation: marqueeRight 35s linear infinite;
|
||||
}
|
||||
|
||||
/* Translate by exactly half + half a gap to align with duplicate set */
|
||||
@keyframes marqueeLeft {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(calc(-50% - 0.5rem)); }
|
||||
}
|
||||
|
||||
@keyframes marqueeRight {
|
||||
0% { transform: translateX(calc(-50% - 0.5rem)); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.marquee-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Review Cards */
|
||||
.review-card {
|
||||
flex: 0 0 auto;
|
||||
width: 340px;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
transition: all 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.review-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
background: var(--bg-elevated);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.review-card[data-platform="ios"] {
|
||||
border-top: 2px solid rgba(163, 163, 163, 0.3);
|
||||
}
|
||||
|
||||
.review-card[data-platform="android"] {
|
||||
border-top: 2px solid rgba(61, 220, 132, 0.3);
|
||||
}
|
||||
|
||||
.review-text {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.25rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.review-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.review-rating {
|
||||
font-size: var(--text-xs);
|
||||
color: #fbbf24;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.review-author {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.review-platform-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 6px;
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
.review-platform-badge.android {
|
||||
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 {
|
||||
padding: var(--section-gap) 0;
|
||||
background: var(--bg-deep);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -890,7 +1072,7 @@ img {
|
||||
|
||||
.feature-category {
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-surface);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s var(--ease-out);
|
||||
@@ -962,39 +1144,44 @@ img {
|
||||
|
||||
.gallery {
|
||||
padding: var(--section-gap) 0;
|
||||
background: var(--bg-surface);
|
||||
background: var(--bg-deep);
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.gallery-showcase {
|
||||
position: relative;
|
||||
margin: 0 -1.5rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.gallery-track {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.gallery-track::-webkit-scrollbar {
|
||||
.gallery-showcase::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-track {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
|
||||
.gallery-item {
|
||||
flex: 0 0 auto;
|
||||
width: 240px;
|
||||
width: min(240px, 28vw);
|
||||
scroll-snap-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
max-height: min(520px, 55vh);
|
||||
object-fit: contain;
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.2),
|
||||
@@ -1014,7 +1201,7 @@ img {
|
||||
|
||||
.gallery-label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
@@ -1034,6 +1221,8 @@ img {
|
||||
|
||||
.cta-section {
|
||||
padding: var(--section-gap) 0;
|
||||
background: var(--bg-deep);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
@@ -1070,9 +1259,9 @@ img {
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cta-decoration {
|
||||
@@ -1131,7 +1320,7 @@ img {
|
||||
|
||||
.footer {
|
||||
padding: 4rem 0 2rem;
|
||||
background: var(--bg-surface);
|
||||
background: var(--bg-deep);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@@ -1155,8 +1344,8 @@ img {
|
||||
.footer-links-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-col h4 {
|
||||
font-family: var(--font-body);
|
||||
@@ -1284,6 +1473,10 @@ img {
|
||||
.feature-hero-rings .ring:nth-child(1) { width: 100px; height: 100px; }
|
||||
.feature-hero-rings .ring:nth-child(2) { width: 125px; height: 125px; }
|
||||
.feature-hero-rings .ring:nth-child(3) { width: 150px; height: 150px; }
|
||||
|
||||
.review-card {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -1318,11 +1511,6 @@ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-hero {
|
||||
padding: 2rem;
|
||||
}
|
||||
@@ -1344,7 +1532,44 @@ img {
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
width: 200px;
|
||||
width: min(200px, 40vw);
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
max-height: min(400px, 50vh);
|
||||
}
|
||||
|
||||
/* Reviews responsive */
|
||||
.reviews-stats {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
padding: 0.375rem 0.75rem 0.375rem 0.375rem;
|
||||
}
|
||||
|
||||
.stat-pill-value {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.review-card {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.reviews-marquee::before,
|
||||
.reviews-marquee::after {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.reviews-links {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.review-link {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
@@ -1365,7 +1590,7 @@ img {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.footer-links-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@@ -1403,11 +1628,50 @@ img {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Reviews smallest screens */
|
||||
.review-card {
|
||||
width: 260px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.reviews-marquee::before,
|
||||
.reviews-marquee::after {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.footer-links-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SHORT VIEWPORT ADJUSTMENTS
|
||||
============================================ */
|
||||
|
||||
@media (max-height: 700px) {
|
||||
.gallery {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.gallery-showcase {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
.gallery-item img {
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SELECTION
|
||||
============================================ */
|
||||
|
||||
Reference in New Issue
Block a user