Skip to content

Commit 1253ce4

Browse files
Jing-yilinJing-yilin
committed
feat: add animated logo scroller showcasing 9 supported AI platforms with gradient effects and hover pause
1 parent afd7b60 commit 1253ce4

1 file changed

Lines changed: 147 additions & 2 deletions

File tree

‎website/worker.js‎

Lines changed: 147 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -403,9 +403,74 @@ Sitemap: https://opc.dev/sitemap.xml`, {
403403
.badge { display: inline-block; border: 1px solid var(--black); padding: 5px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; }
404404
h1 { font-family: var(--font-pixel); font-size: 20px; font-weight: 400; margin-bottom: 16px; letter-spacing: 0; line-height: 1.6; }
405405
.compatibility-note { font-size: 13px; color: var(--gray-600); margin: 0 auto 16px; max-width: 600px; }
406-
.stats-bar { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; font-size: 12px; color: var(--gray-600); }
406+
.stats-bar { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; font-size: 12px; color: var(--gray-600); }
407407
.stats-bar span { display: flex; align-items: center; gap: 4px; }
408408
.stats-bar strong { color: var(--black); font-weight: 700; }
409+
410+
.tools-scroller {
411+
width: 100%;
412+
overflow: hidden;
413+
margin-bottom: 32px;
414+
padding: 20px 0;
415+
background: var(--gray-50);
416+
border-top: 1px solid var(--gray-200);
417+
border-bottom: 1px solid var(--gray-200);
418+
position: relative;
419+
}
420+
.tools-scroller::before,
421+
.tools-scroller::after {
422+
content: '';
423+
position: absolute;
424+
top: 0;
425+
bottom: 0;
426+
width: 100px;
427+
z-index: 2;
428+
pointer-events: none;
429+
}
430+
.tools-scroller::before {
431+
left: 0;
432+
background: linear-gradient(to right, var(--gray-50), transparent);
433+
}
434+
.tools-scroller::after {
435+
right: 0;
436+
background: linear-gradient(to left, var(--gray-50), transparent);
437+
}
438+
.tools-track {
439+
display: flex;
440+
gap: 50px;
441+
animation: scroll 40s linear infinite;
442+
}
443+
.tools-scroller:hover .tools-track {
444+
animation-play-state: paused;
445+
}
446+
.tool-item {
447+
display: flex;
448+
align-items: center;
449+
gap: 8px;
450+
white-space: nowrap;
451+
flex-shrink: 0;
452+
transition: opacity 0.3s ease;
453+
}
454+
.tool-item:hover {
455+
opacity: 1;
456+
}
457+
.tool-item img {
458+
width: 24px;
459+
height: 24px;
460+
object-fit: contain;
461+
opacity: 0.9;
462+
}
463+
.tool-item span {
464+
font-size: 11px;
465+
color: var(--gray-600);
466+
font-weight: 500;
467+
}
468+
469+
@keyframes scroll {
470+
0% { transform: translateX(0); }
471+
100% { transform: translateX(-50%); }
472+
}
473+
409474
.hero-install { max-width: 600px; margin: 0 auto; width: 100%; }
410475
.hero-level-tabs { border-bottom: 1px solid var(--black); }
411476
.hero-tool-tabs { border-bottom: none; }
@@ -493,7 +558,11 @@ Sitemap: https://opc.dev/sitemap.xml`, {
493558
.badge { font-size: 9px; padding: 4px 10px; }
494559
h1 { font-size: 14px; line-height: 1.8; }
495560
.subtitle { font-size: 13px; }
496-
.stats-bar { gap: 12px 20px; font-size: 11px; }
561+
.stats-bar { gap: 12px 20px; font-size: 11px; margin-bottom: 24px; }
562+
.tools-scroller { margin-bottom: 24px; padding: 12px 0; }
563+
.tool-item { gap: 6px; }
564+
.tool-item img { width: 20px; height: 20px; }
565+
.tool-item span { font-size: 10px; }
497566
.hero-tabs { flex-wrap: wrap; }
498567
.hero-tab { flex: 1 1 auto; min-width: 60px; padding: 6px 8px; font-size: 10px; }
499568
.hero-cmd code { font-size: 9px; padding: 10px; }
@@ -574,6 +643,82 @@ Sitemap: https://opc.dev/sitemap.xml`, {
574643
<span><strong>100%</strong> Free & Open Source</span>
575644
<span><strong>MIT</strong> License</span>
576645
</div>
646+
<div class="tools-scroller">
647+
<div class="tools-track">
648+
<div class="tool-item">
649+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/anthropic.png" alt="Claude" width="24" height="24" loading="lazy">
650+
<span>Claude</span>
651+
</div>
652+
<div class="tool-item">
653+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/cursor.png" alt="Cursor" width="24" height="24" loading="lazy">
654+
<span>Cursor</span>
655+
</div>
656+
<div class="tool-item">
657+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/windsurf.png" alt="Windsurf" width="24" height="24" loading="lazy">
658+
<span>Windsurf</span>
659+
</div>
660+
<div class="tool-item">
661+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/openai.png" alt="OpenAI" width="24" height="24" loading="lazy">
662+
<span>OpenAI</span>
663+
</div>
664+
<div class="tool-item">
665+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/copilot.png" alt="GitHub Copilot" width="24" height="24" loading="lazy">
666+
<span>GitHub Copilot</span>
667+
</div>
668+
<div class="tool-item">
669+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/cline.png" alt="Cline" width="24" height="24" loading="lazy">
670+
<span>Cline</span>
671+
</div>
672+
<div class="tool-item">
673+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/replit.png" alt="Replit" width="24" height="24" loading="lazy">
674+
<span>Replit</span>
675+
</div>
676+
<div class="tool-item">
677+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/lmstudio.png" alt="LM Studio" width="24" height="24" loading="lazy">
678+
<span>LM Studio</span>
679+
</div>
680+
<div class="tool-item">
681+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/ollama.png" alt="Ollama" width="24" height="24" loading="lazy">
682+
<span>Ollama</span>
683+
</div>
684+
<div class="tool-item">
685+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/anthropic.png" alt="Claude" width="24" height="24" loading="lazy">
686+
<span>Claude</span>
687+
</div>
688+
<div class="tool-item">
689+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/cursor.png" alt="Cursor" width="24" height="24" loading="lazy">
690+
<span>Cursor</span>
691+
</div>
692+
<div class="tool-item">
693+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/windsurf.png" alt="Windsurf" width="24" height="24" loading="lazy">
694+
<span>Windsurf</span>
695+
</div>
696+
<div class="tool-item">
697+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/openai.png" alt="OpenAI" width="24" height="24" loading="lazy">
698+
<span>OpenAI</span>
699+
</div>
700+
<div class="tool-item">
701+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/copilot.png" alt="GitHub Copilot" width="24" height="24" loading="lazy">
702+
<span>GitHub Copilot</span>
703+
</div>
704+
<div class="tool-item">
705+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/cline.png" alt="Cline" width="24" height="24" loading="lazy">
706+
<span>Cline</span>
707+
</div>
708+
<div class="tool-item">
709+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/replit.png" alt="Replit" width="24" height="24" loading="lazy">
710+
<span>Replit</span>
711+
</div>
712+
<div class="tool-item">
713+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/lmstudio.png" alt="LM Studio" width="24" height="24" loading="lazy">
714+
<span>LM Studio</span>
715+
</div>
716+
<div class="tool-item">
717+
<img src="https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/light/ollama.png" alt="Ollama" width="24" height="24" loading="lazy">
718+
<span>Ollama</span>
719+
</div>
720+
</div>
721+
</div>
577722
<div class="hero-install">
578723
<div class="hero-cmd">
579724
<code id="hero-cmd-code" data-cmd="npx skills add ReScienceLab/opc-skills">npx skills add ReScienceLab/opc-skills</code>

0 commit comments

Comments
 (0)