/
index.html
238 lines (221 loc) · 9.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visible Strings</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=EB+Garamond&display=swap" rel="stylesheet">
<link rel="icon" href="daisy.png" type="image/png">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DDKHCR5YD8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DDKHCR5YD8');
</script>
<!-- Custom CSS -->
<style>
* { box-sizing: border-box; }
@font-face {
font-family: 'Courier Prime', monospace;
font-style: normal;
font-weight: 150;
src: url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
}
/* Taylor Swift Pastel Color Palette */
:root {
--pastel-pink: #FFA7D1; /* Soft Pink */
--pastel-blue: #AED9E0; /* Sky Blue */
--pastel-lavender: #C9A7E5; /* Lavender */
--pastel-mint: #B4E7E5; /* Mint Green */
--pastel-gray: #321c1c; /*#D3D3D3; /* Light Gray */
--pastel-cream: #F8EDEB; /* Cream */
--pastel-peach: #FFDAB9; /* Peach */
--pastel-lilac: #E0BBE4; /* Lilac */
--pastel-mauve: #E6B0AA; /* Mauve */
--pastel-mint2: #98FF98; /* Light Mint Green */
}
/* Updated Styles with Pastel Colors */
body {
background-color: var(--pastel-cream);
color: var(--pastel-gray);
font-family: 'Courier Prime', monospace;
line-height: 1.5;
}
.container {
background-color: #fff; /* Default white background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.navbar {
background-color: var(--pastel-blue);
}
/* Initial styles for .navbar-brand */
.navbar-brand {
color: #fff; /* White text color */
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
transition: color 0.3s ease; /* Add a smooth transition effect */
}
/* Change the text color on hover */
.navbar-brand:hover {
color: #321c1c;
}
h1 {
color: var(--pastel-gray); /* Light gray heading color */
}
h3 {
color: var(--pastel-gray); /* Light gray subheading color */
}
/* Apply the pastel color palette to <a> links */
a {
color: var(--pastel-pink); /* Default link color (pastel pink) */
transition: color 0.3s ease; /* Smooth color transition on hover */
}
/* Change the link color on hover */
a:hover {
color: var(--pastel-blue); /* Hover link color (pastel blue) */
}
.form-group label {
color: var(--pastel-gray); /* Light gray label color */
}
.form-control {
padding: 10px;
margin-top: 10px;
margin-bottom: 20px;
}
.btn-primary {
background-color: var(--pastel-blue);
border-color: var(--pastel-blue);
}
.btn-primary:hover {
background-color: var(--pastel-pink);
border-color: var(--pastel-pink);
/* color: #321c1c; */
}
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
ul li {
margin-bottom: 10px;
}
.navbar-sticky {
position: sticky;
top: 0;
z-index: 100;
}
/* .small a{
color: pink;
}
.small a:hover{
color: blueviolet;
} */
</style>
<!-- Include Font Awesome icons -->
<script src="https://kit.fontawesome.com/982e2175e7.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-sticky">
<a class="navbar-brand" href="https://izzyreiff.github.io/visiblestrings/">Visible Strings</a>
</nav>
<!-- Bootstrap Container for Page Content -->
<div class="container mt-4">
<h1>Visible Strings</h1>
<h4>Came back from the Eras tour and can't decode your new bracelet?</h4>
<h4>Input the letters below, and find out the song!</h4>
<ul>
<li>Just letters, no need for spaces :)</li>
<li>This only gives you song titles, not exact lyrics. That way, you can still do your own sleuthing!</li>
<li>If your bracelet has numbers, use the letter equivalent. For example, 15 -> f, 22 -> t</li>
<li>Common acronyms may include things like "FTV" (From The Vault), "SGAV" (Sad Girl Autumn Version), "RLPS" (Recorded at Long Pond Studios), "TV" (Taylor's Version), etc. Try excluding these from your search!</li>
</ul>
<input type="text" id="userInput" placeholder="i.e. hygtg" onkeydown="handleKeyDown(event)">
<button onclick="searchSongs()" class="btn btn-primary">Search</button>
<!-- Display the result here with Bootstrap Card -->
<div class="mt-4">
<div class="card">
<div class="card-body">
<p id="result"></p>
</div>
</div>
</div>
</div>
<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="mt-5 py-3 text-center">
<div class="container">
<div class="row">
<small>Hi, I'm Izzy 👋 Find me on my <a href="https://izzyreiff.com" target="_blank" rel="noopener noreferrer">website</a> or <a href="https://github.com/izzyreiff/" target="_blank" rel="noopener noreferrer">Github</a>. View the project source code <a href="https://github.com/izzyreiff/visiblestrings" target="_blank" rel="noopener noreferrer">here</a>. Upvote the Reddit post <a href="https://www.reddit.com/r/TaylorSwift/comments/16ksp5g/visible_strings_i_made_a_bracelet_decoding_website/" target="_blank" rel="noopener noreferrer">here</a>. Yes, the project name is supposed to be a silly (inside) joke. Enjoy!
</small>
</div>
</div>
</footer>
<script>
var songs = []; // Initialize an empty array for song data
// Function to fetch and parse the CSV file
function fetchCSV() {
fetch('clean.csv') // Replace with the path to your CSV file
.then(response => response.text())
.then(data => {
// Parse the CSV data into an array of objects
var rows = data.split('\n');
for (var i = 1; i < rows.length; i++) { // Start from 1 to skip the header row
var columns = rows[i].split(',');
if (columns.length === 4) { // Assuming 4 columns: Title Album Lyrics TitlesCleaned
var song = {
Title: columns[0].trim(),
Album: columns[1].trim(),
Lyrics: columns[2].trim(),
TitlesCleaned: columns[3].trim()
};
songs.push(song);
}
}
})
.catch(error => console.error('Error fetching CSV:', error));
}
// Call the fetchCSV function to load data from the CSV file
fetchCSV();
function searchSongs() {
var userInput = document.getElementById('userInput').value.toLowerCase();
var matchingEntries = [];
console.log("checking")
for (var i = 0; i < songs.length; i++) {
var lyrics = songs[i].Lyrics;
var title = songs[i].Title;
var titleclean = songs[i].TitlesCleaned;
console.log(1)
if (lyrics.includes(userInput)) {
matchingEntries.push(title);
console.log("lyrics match")
}
else if (titleclean.includes(userInput)) {
matchingEntries.push(title);
console.log("title match")
}
}
var resultElement = document.getElementById('result');
if (matchingEntries.length > 0) {
resultElement.textContent = "Songs containing '" + userInput + "': " + matchingEntries.join(", ");
} else {
resultElement.textContent = "No songs were found containing '" + userInput + "'. Try removing a letter from the beginning or end, and enter it again!";
}
}
// Enable pressing enter as userInput
function handleKeyDown(event) {
if (event.keyCode === 13) {
searchSongs(); // Call the searchSongs function when Enter is pressed
}
}
</script>
</body>
</html>