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

feat(reviews): Implement reviews section with rating pills and marquee display

Browse Source
This commit is contained in:
cogwheel0
2025-11-26 23:28:41 +05:30
parent 0e2d405d4e
commit 6829682c2a
2 changed files with 535 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
docs/index.html
View File

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