Skip to content

Commit 2e0f80a

Browse files
dddeviddddevid
authored
Improve platform and roadmap card styles and content
Enhanced platform card and roadmap card styles, added hover effects, and updated platform descriptions.
1 parent af3d11b commit 2e0f80a

1 file changed

Lines changed: 231 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 231 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -430,12 +430,52 @@
430430
padding: 2.5rem;
431431
text-align: center;
432432
transition: all 0.3s ease;
433+
position: relative;
434+
overflow: hidden;
435+
}
436+
437+
.platform-card::before {
438+
content: '';
439+
position: absolute;
440+
top: 0;
441+
left: 0;
442+
width: 100%;
443+
height: 4px;
444+
background: linear-gradient(90deg, var(--primary-red), #FC5C65);
445+
transform: scaleX(0);
446+
transition: transform 0.3s ease;
447+
}
448+
449+
.platform-card:hover::before {
450+
transform: scaleX(1);
433451
}
434452

435453
.platform-card:hover {
436-
transform: scale(1.05);
454+
transform: translateY(-10px);
437455
background: rgba(255, 255, 255, 0.08);
438456
border-color: var(--primary-red);
457+
box-shadow: 0 20px 40px rgba(250, 36, 60, 0.2);
458+
}
459+
460+
.platform-status {
461+
display: inline-block;
462+
padding: 0.4rem 1rem;
463+
border-radius: 20px;
464+
font-size: 0.85rem;
465+
font-weight: 600;
466+
margin-top: 1rem;
467+
}
468+
469+
.status-available {
470+
background: rgba(52, 199, 89, 0.2);
471+
color: #34C759;
472+
border: 1px solid rgba(52, 199, 89, 0.3);
473+
}
474+
475+
.status-build {
476+
background: rgba(255, 159, 10, 0.2);
477+
color: #FF9F0A;
478+
border: 1px solid rgba(255, 159, 10, 0.3);
439479
}
440480

441481
.platform-icon {
@@ -453,6 +493,111 @@
453493
margin-bottom: 0.5rem;
454494
}
455495

496+
.platform-card p {
497+
color: var(--text-secondary);
498+
font-size: 0.95rem;
499+
}
500+
501+
/* Roadmap Section */
502+
.roadmap {
503+
padding: 8rem 5%;
504+
background: rgba(0, 0, 0, 0.3);
505+
}
506+
507+
.roadmap-grid {
508+
max-width: 1400px;
509+
margin: 0 auto;
510+
display: grid;
511+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
512+
gap: 2rem;
513+
margin-top: 4rem;
514+
}
515+
516+
.roadmap-card {
517+
background: rgba(28, 28, 30, 0.6);
518+
backdrop-filter: blur(20px);
519+
border: 1px solid rgba(255, 255, 255, 0.1);
520+
border-radius: 25px;
521+
padding: 2.5rem;
522+
transition: all 0.3s ease;
523+
position: relative;
524+
overflow: hidden;
525+
}
526+
527+
.roadmap-card::after {
528+
content: '';
529+
position: absolute;
530+
top: 0;
531+
left: 0;
532+
width: 4px;
533+
height: 100%;
534+
background: var(--primary-red);
535+
transform: scaleY(0);
536+
transition: transform 0.3s ease;
537+
}
538+
539+
.roadmap-card:hover::after {
540+
transform: scaleY(1);
541+
}
542+
543+
.roadmap-card:hover {
544+
transform: translateX(10px);
545+
border-color: rgba(250, 36, 60, 0.3);
546+
box-shadow: -10px 0 30px rgba(250, 36, 60, 0.15);
547+
}
548+
549+
.roadmap-icon {
550+
width: 60px;
551+
height: 60px;
552+
background: rgba(250, 36, 60, 0.15);
553+
border-radius: 15px;
554+
display: flex;
555+
align-items: center;
556+
justify-content: center;
557+
font-size: 1.8rem;
558+
margin-bottom: 1.5rem;
559+
color: var(--primary-red);
560+
}
561+
562+
.roadmap-card h3 {
563+
font-size: 1.5rem;
564+
margin-bottom: 1rem;
565+
color: var(--text-primary);
566+
}
567+
568+
.roadmap-card p {
569+
color: var(--text-secondary);
570+
line-height: 1.7;
571+
font-size: 1rem;
572+
}
573+
574+
.roadmap-status {
575+
display: inline-flex;
576+
align-items: center;
577+
gap: 0.5rem;
578+
padding: 0.5rem 1rem;
579+
background: rgba(255, 159, 10, 0.15);
580+
border: 1px solid rgba(255, 159, 10, 0.3);
581+
border-radius: 20px;
582+
font-size: 0.85rem;
583+
font-weight: 600;
584+
color: #FF9F0A;
585+
margin-top: 1rem;
586+
}
587+
588+
.status-dot {
589+
width: 8px;
590+
height: 8px;
591+
background: #FF9F0A;
592+
border-radius: 50%;
593+
animation: pulse-dot 2s ease-in-out infinite;
594+
}
595+
596+
@keyframes pulse-dot {
597+
0%, 100% { opacity: 1; }
598+
50% { opacity: 0.5; }
599+
}
600+
456601
/* Footer */
457602
footer {
458603
padding: 4rem 5%;
@@ -576,6 +721,7 @@
576721
<ul class="nav-links">
577722
<li><a href="#features">Features</a></li>
578723
<li><a href="#platforms">Platforms</a></li>
724+
<li><a href="#roadmap">Roadmap</a></li>
579725
<li><a href="#download">Download</a></li>
580726
</ul>
581727
<button class="download-btn" onclick="scrollToDownload()">
@@ -660,27 +806,105 @@ <h2>Cross-Platform Support</h2>
660806
<div class="platform-card reveal">
661807
<div class="platform-icon"><i class="fab fa-android"></i></div>
662808
<h3>Android</h3>
663-
<p>Prebuilt APK</p>
809+
<p>Full support with prebuilt APK ready to download</p>
810+
<span class="platform-status status-available">
811+
<i class="fas fa-check-circle"></i> Available Now
812+
</span>
664813
</div>
665814
<div class="platform-card reveal">
666815
<div class="platform-icon"><i class="fab fa-apple"></i></div>
667816
<h3>iOS</h3>
668-
<p>Build from source</p>
817+
<p>Compatible with iPhone and iPad - requires manual build</p>
818+
<span class="platform-status status-build">
819+
<i class="fas fa-hammer"></i> Build from Source
820+
</span>
669821
</div>
670822
<div class="platform-card reveal">
671823
<div class="platform-icon"><i class="fab fa-windows"></i></div>
672824
<h3>Windows</h3>
673-
<p>Desktop support</p>
825+
<p>Native desktop application for Windows 10/11</p>
826+
<span class="platform-status status-build">
827+
<i class="fas fa-hammer"></i> Build from Source
828+
</span>
674829
</div>
675830
<div class="platform-card reveal">
676831
<div class="platform-icon"><i class="fab fa-linux"></i></div>
677832
<h3>Linux</h3>
678-
<p>Open source</p>
833+
<p>Full open source support for all major distributions</p>
834+
<span class="platform-status status-build">
835+
<i class="fas fa-hammer"></i> Build from Source
836+
</span>
679837
</div>
680838
<div class="platform-card reveal">
681839
<div class="platform-icon"><i class="fas fa-desktop"></i></div>
682840
<h3>macOS</h3>
683-
<p>Native app</p>
841+
<p>Native macOS application with Apple Silicon support</p>
842+
<span class="platform-status status-build">
843+
<i class="fas fa-hammer"></i> Build from Source
844+
</span>
845+
</div>
846+
</div>
847+
</section>
848+
849+
<section class="roadmap" id="roadmap">
850+
<div class="section-title reveal">
851+
<h2>Roadmap</h2>
852+
<p>What's coming next to Musly</p>
853+
</div>
854+
<div class="roadmap-grid">
855+
<div class="roadmap-card reveal">
856+
<div class="roadmap-icon"><i class="fas fa-desktop"></i></div>
857+
<h3>Custom PC UX</h3>
858+
<p>A dedicated desktop-optimized interface designed specifically for larger screens, moving beyond the mobile-adapted layout.</p>
859+
<div class="roadmap-status">
860+
<span class="status-dot"></span>
861+
In Planning
862+
</div>
863+
</div>
864+
<div class="roadmap-card reveal">
865+
<div class="roadmap-icon"><i class="fas fa-car-side"></i></div>
866+
<h3>CarPlay Support</h3>
867+
<p>Native CarPlay integration with a dedicated browsing interface for safe and intuitive in-car music control.</p>
868+
<div class="roadmap-status">
869+
<span class="status-dot"></span>
870+
In Planning
871+
</div>
872+
</div>
873+
<div class="roadmap-card reveal">
874+
<div class="roadmap-icon"><i class="fas fa-heart"></i></div>
875+
<h3>Last.fm Integration</h3>
876+
<p>Automatic scrobbling support and rich metadata for artists and albums from Last.fm's extensive database.</p>
877+
<div class="roadmap-status">
878+
<span class="status-dot"></span>
879+
In Planning
880+
</div>
881+
</div>
882+
<div class="roadmap-card reveal">
883+
<div class="roadmap-icon"><i class="fas fa-list-music"></i></div>
884+
<h3>Local Playlists</h3>
885+
<p>Create and manage playlists locally on your device, independent of the Subsonic server for greater flexibility.</p>
886+
<div class="roadmap-status">
887+
<span class="status-dot"></span>
888+
In Planning
889+
</div>
890+
</div>
891+
<div class="roadmap-card reveal">
892+
<div class="roadmap-icon"><i class="fas fa-server"></i></div>
893+
<h3>Custom API Server</h3>
894+
<p>Support for custom backend implementations and extended APIs beyond standard Subsonic compatibility.</p>
895+
<div class="roadmap-status">
896+
<span class="status-dot"></span>
897+
In Planning
898+
</div>
899+
</div>
900+
<div class="roadmap-card reveal">
901+
<div class="roadmap-icon"><i class="fas fa-sync"></i></div>
902+
<h3>Improved Sync</h3>
903+
<p>Enhanced synchronization capabilities for offline music, ensuring your library is always up to date.</p>
904+
<div class="roadmap-status">
905+
<span class="status-dot"></span>
906+
In Planning
907+
</div>
684908
</div>
685909
</div>
686910
</section>
@@ -705,6 +929,7 @@ <h2>Download Beta</h2>
705929
<div class="footer-links">
706930
<a href="https://github.com/dddevid/Musly" target="_blank">GitHub</a>
707931
<a href="https://github.com/dddevid/Musly/releases" target="_blank">Releases</a>
932+
<a href="#roadmap">Roadmap</a>
708933
<a href="https://github.com/dddevid/Musly/issues" target="_blank">Support</a>
709934
</div>
710935
<div class="social-links">

0 commit comments

Comments
 (0)