Skip to content

Commit b2d30f9

Browse files
commitconfirmclaude
commitconfirm
and
claude
committed
Add "See How It Works" preview section to landing page
Shows a static mockup of what results look like after matching, placed between the intro text and Connect Spotify button. Features: - 5 example artists from actual Treefort lineup (Father John Misty, Magdalena Bay, Blondshell, Samia, Billie Marten) - Blondshell pre-expanded to show genre-based similar artists - Styled with dashed borders and slight opacity to read as preview - Label clarifying these are example results Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent c8e2629 commit b2d30f9

3 files changed

Lines changed: 197 additions & 2 deletions

File tree

‎src/callback.html‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,72 @@ <h1>Spotifort</h1>
1919
</header>
2020

2121
<main>
22-
<section id="auth-section">
22+
<section id="intro-section">
2323
<p>Connect your Spotify account to see which artists from your Liked Songs are playing Treefort Music Fest 2026 (March 25-29, Boise, Idaho).</p>
24+
</section>
25+
26+
<section id="preview-section">
27+
<h2>Here's what you'll see</h2>
28+
<div class="preview-box">
29+
<div class="list-box preview-list-box">
30+
<h3>Your Treefort Matches</h3>
31+
<ul class="artist-list">
32+
<li class="artist-item">
33+
<div class="artist-row">
34+
<span class="artist-toggle">
35+
<span class="artist-marker">[+]</span>
36+
</span>
37+
<a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="artist-name-link">Father John Misty</a>
38+
</div>
39+
</li>
40+
<li class="artist-item">
41+
<div class="artist-row">
42+
<span class="artist-toggle">
43+
<span class="artist-marker">[+]</span>
44+
</span>
45+
<a href="https://open.spotify.com/artist/1oPRcJUkloHaRLYx0olBLJ" target="_blank" rel="noopener noreferrer" class="artist-name-link">Magdalena Bay</a>
46+
</div>
47+
</li>
48+
<li class="artist-item preview-expanded">
49+
<div class="artist-row">
50+
<span class="artist-toggle">
51+
<span class="artist-marker">[-]</span>
52+
</span>
53+
<a href="https://open.spotify.com/artist/7qrEXiLLnWkkYHhadZ1Oij" target="_blank" rel="noopener noreferrer" class="artist-name-link">Blondshell</a>
54+
</div>
55+
<div class="artist-related">
56+
<p class="related-header">Other artists at Treefort you might like:</p>
57+
<p class="related-info">Based on shared genres (indie rock). This is not Spotify's "Related Artists" — it's genre matching from our lineup data.</p>
58+
<ul class="related-list">
59+
<li><a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="related-artist-link">Samia</a></li>
60+
<li><a href="https://open.spotify.com/artist/4aEnNH9PuU1HF3TsZTru54" target="_blank" rel="noopener noreferrer" class="related-artist-link">Caracara</a></li>
61+
<li><a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="related-artist-link">Father John Misty</a></li>
62+
</ul>
63+
</div>
64+
</li>
65+
<li class="artist-item">
66+
<div class="artist-row">
67+
<span class="artist-toggle">
68+
<span class="artist-marker">[+]</span>
69+
</span>
70+
<a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="artist-name-link">Samia</a>
71+
</div>
72+
</li>
73+
<li class="artist-item">
74+
<div class="artist-row">
75+
<span class="artist-toggle">
76+
<span class="artist-marker">[+]</span>
77+
</span>
78+
<a href="https://open.spotify.com/artist/7c3NW1Z7GXA6bhuMmqvJYf" target="_blank" rel="noopener noreferrer" class="artist-name-link">Billie Marten</a>
79+
</div>
80+
</li>
81+
</ul>
82+
</div>
83+
<p class="preview-label">Example results — connect Spotify to see your actual matches</p>
84+
</div>
85+
</section>
86+
87+
<section id="auth-section">
2488
<button id="connect-btn" type="button">Connect Spotify</button>
2589
<p class="browser-note">For best results, open this site in Safari or Chrome, not an in-app browser.</p>
2690
</section>

‎src/index.html‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,72 @@ <h1>Spotifort</h1>
1919
</header>
2020

2121
<main>
22-
<section id="auth-section">
22+
<section id="intro-section">
2323
<p>Connect your Spotify account to see which artists from your Liked Songs are playing Treefort Music Fest 2026 (March 25-29, Boise, Idaho).</p>
24+
</section>
25+
26+
<section id="preview-section">
27+
<h2>Here's what you'll see</h2>
28+
<div class="preview-box">
29+
<div class="list-box preview-list-box">
30+
<h3>Your Treefort Matches</h3>
31+
<ul class="artist-list">
32+
<li class="artist-item">
33+
<div class="artist-row">
34+
<span class="artist-toggle">
35+
<span class="artist-marker">[+]</span>
36+
</span>
37+
<a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="artist-name-link">Father John Misty</a>
38+
</div>
39+
</li>
40+
<li class="artist-item">
41+
<div class="artist-row">
42+
<span class="artist-toggle">
43+
<span class="artist-marker">[+]</span>
44+
</span>
45+
<a href="https://open.spotify.com/artist/1oPRcJUkloHaRLYx0olBLJ" target="_blank" rel="noopener noreferrer" class="artist-name-link">Magdalena Bay</a>
46+
</div>
47+
</li>
48+
<li class="artist-item preview-expanded">
49+
<div class="artist-row">
50+
<span class="artist-toggle">
51+
<span class="artist-marker">[-]</span>
52+
</span>
53+
<a href="https://open.spotify.com/artist/7qrEXiLLnWkkYHhadZ1Oij" target="_blank" rel="noopener noreferrer" class="artist-name-link">Blondshell</a>
54+
</div>
55+
<div class="artist-related">
56+
<p class="related-header">Other artists at Treefort you might like:</p>
57+
<p class="related-info">Based on shared genres (indie rock). This is not Spotify's "Related Artists" — it's genre matching from our lineup data.</p>
58+
<ul class="related-list">
59+
<li><a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="related-artist-link">Samia</a></li>
60+
<li><a href="https://open.spotify.com/artist/4aEnNH9PuU1HF3TsZTru54" target="_blank" rel="noopener noreferrer" class="related-artist-link">Caracara</a></li>
61+
<li><a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="related-artist-link">Father John Misty</a></li>
62+
</ul>
63+
</div>
64+
</li>
65+
<li class="artist-item">
66+
<div class="artist-row">
67+
<span class="artist-toggle">
68+
<span class="artist-marker">[+]</span>
69+
</span>
70+
<a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="artist-name-link">Samia</a>
71+
</div>
72+
</li>
73+
<li class="artist-item">
74+
<div class="artist-row">
75+
<span class="artist-toggle">
76+
<span class="artist-marker">[+]</span>
77+
</span>
78+
<a href="https://open.spotify.com/artist/7c3NW1Z7GXA6bhuMmqvJYf" target="_blank" rel="noopener noreferrer" class="artist-name-link">Billie Marten</a>
79+
</div>
80+
</li>
81+
</ul>
82+
</div>
83+
<p class="preview-label">Example results — connect Spotify to see your actual matches</p>
84+
</div>
85+
</section>
86+
87+
<section id="auth-section">
2488
<button id="connect-btn" type="button">Connect Spotify</button>
2589
<p class="browser-note">For best results, open this site in Safari or Chrome, not an in-app browser.</p>
2690
</section>

‎src/style.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,73 @@ footer {
813813
box-shadow: 2px 2px 0 var(--black);
814814
}
815815

816+
/* Preview Section */
817+
#intro-section {
818+
max-width: 600px;
819+
margin: 0 auto 2rem;
820+
text-align: center;
821+
}
822+
823+
#intro-section p {
824+
font-size: 1.1rem;
825+
line-height: 1.6;
826+
}
827+
828+
#preview-section {
829+
max-width: 500px;
830+
margin: 0 auto 2rem;
831+
}
832+
833+
#preview-section h2 {
834+
font-size: 1.25rem;
835+
text-align: center;
836+
margin-bottom: 1rem;
837+
}
838+
839+
.preview-box {
840+
opacity: 0.75;
841+
}
842+
843+
.preview-list-box {
844+
border: 3px dashed #666 !important;
845+
box-shadow: none !important;
846+
background: #fafafa;
847+
}
848+
849+
.preview-list-box h3 {
850+
font-size: 1.125rem;
851+
margin-bottom: 0.75rem;
852+
padding-bottom: 0.5rem;
853+
border-bottom: 1px dashed #999;
854+
color: #333;
855+
}
856+
857+
.preview-list-box .artist-list {
858+
font-size: 1rem;
859+
}
860+
861+
.preview-list-box .artist-item {
862+
border-bottom-color: #ddd;
863+
border-bottom-style: dashed;
864+
}
865+
866+
.preview-list-box .artist-toggle {
867+
cursor: default;
868+
}
869+
870+
.preview-list-box .artist-toggle:hover .artist-marker {
871+
background: transparent;
872+
color: var(--black);
873+
}
874+
875+
.preview-label {
876+
text-align: center;
877+
font-size: 0.875rem;
878+
color: #666;
879+
font-style: italic;
880+
margin-top: 0.75rem;
881+
}
882+
816883
.hidden {
817884
display: none !important;
818885
}

0 commit comments

Comments
 (0)