-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
311 lines (256 loc) · 10.8 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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stand-in guestbook</title>
<style>
body {
margin: 0;
background-color: white;
}
h1 {
font-family: "Trattatello";
font-size: 29px;
line-height: 80%;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 500px;
padding: 10px;
margin-right: 25px;
}
#header img {
max-width: 100%;
}
#guestbook {
position: fixed;
top: 0;
left: 49%;
transform: translateX(-50%);
width: 300px;
padding: 15px;
text-align: center;
flex-direction: column;
}
#guestbook input[type="text"],
#guestbook textarea,
#guestbook input[type="submit"] {
display: block;
margin-bottom: 10px;
width: 100%;
border: 2px solid black;
padding: 15px;
box-sizing: border-box;
}
#guestbook input[type="submit"] {
background-color: white;
color: black;
cursor: pointer;
}
#entries {
display: flex;
position: fixed;
top: 0;
right: 0;
width: 500px;
padding: 20px;
margin-top: 15px;
text-align: left;
max-width: calc(100% - 500px);
overflow-wrap: break-word;
font-family: "ocr-a-std", monospace;
font-weight: 400;
font-style: normal;
}
#entry-container {
max-height: 800px;
overflow-y: auto;
padding-right: 15px;
}
.entry {
margin-bottom: 5px;
}
#background-image {
position: fixed;
bottom: 0;
transform: translateX(-50%);
width: 300px;
height: 300px;
background-image: url('images/scribble.png');
background-size: cover;
z-index: -1;
}
#background-image-2 {
position: fixed;
bottom: 0;
left: 49%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background-image: url('images/pat.gif');
background-size: cover;
z-index: -1;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
@media (max-width: 768px) {
/* hide guestbook and background imgs on mobile */
#guestbook, #background-image, #background-image-2, #header, #header-img {
display: none;
}
/* adjust entries container for full width on mobile */
#entries {
margin-top: 15px;
position: static;
width: 100%;
max-width: none;
margin-top: 0;
padding: 10px;
}
.entry {
font-size: 14px;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div id="background-image"></div>
<div id="background-image-2"></div>
<div id="header">
<img src="images/header.png" alt="Header Image">
</div>
<!-- placeholder for entries -->
<div id="entriesPlaceholder"></div>
<div id="content">
<div id="guestbook">
<h1>DIGITAL GUESTBOOK</h1>
<form id="guestbookForm">
<input type="text" id="name" placeholder="name" required>
<textarea id="message" placeholder="message" rows="4" required></textarea>
<input type="submit" value="submit">
</form>
</div>
<div id="entries">
<div id="entry-container">
<!-- entries will be displayed here -->
<div class="entry" style="color: rgb(231, 70, 22);"><span class="name">Laura: </span><span class="message">We had an amazing time!</span></div>
<div class="entry" style="color: rgb(140, 162, 119);"><span class="name">tima: </span><span class="message">i'm hungry</span></div>
<div class="entry" style="color: rgb(123, 137, 174);"><span class="name">anna: </span><span class="message">im so excited and tired</span></div>
<div class="entry" style="color: rgb(213, 145, 78);"><span class="name">paula: </span><span class="message">i love eka gd ma forever to be honest and i mean it</span></div>
<div class="entry" style="color: rgb(143, 123, 56);"><span class="name">björn: </span><span class="message">can i borrow a knife from you ... ? xoxo</span></div>
<div class="entry" style="color: rgb(32, 123, 250);"><span class="name">corinne: </span><span class="message">thank u cuties <33</span></div>
<div class="entry" style="color: rgb(150, 87, 25);"><span class="name">urtina: </span><span class="message">I wish all of you have a great weekend after this month !!!</span></div>
<div class="entry" style="color: rgb(191, 25, 229);"><span class="name">413j4ndr0: </span><span class="message">always forever ever </span></div>
<div class="entry" style="color: rgb(36, 152, 67);"><span class="name">cicici: </span><span class="message">Hello everyone. Thank you for
this amazing experimental opportunity, it was wonderfully inspiring and nice. Thankyou for the effort <3 <3 you are amazing</span></div>
<div class="entry" style="color: rgb(97, 92, 123);"><span class="name">RITA: </span><span class="message">I DON,T LIKE BERLIN WITHOUT YOU GUYS. DON,T LEAVE </span></div>
<div class="entry" style="color: rgb(126, 31, 196);"><span class="name">muj: </span><span class="message">if you read this message now that means you are reading it here now.
or maybe later. or maybe on the wall. but maybe it will make it to a printed letter. who knows? seems like everything is possible at this magical School.
Thank you for creating this magical corner in Berlin. I will forever cherish these memories in my phone photo gallery in IG stories and even on papers.
cause i love paper i know you do too. cause you gave me a lot of it. and i promise i am not going to throw them away. only unless i move out.
anyway i'll stop now. love you alllll <3 <3 <3</span></div>
<div class="entry" style="color: rgb(5, 189, 164);"><span class="name">Zoë: </span><span class="message">This was so cool!! Go Stand-In-School!! Stand HARD!! #LearnForLife
#Love2Learn Go School! Thanks for all the cool talks :-) Next time more snacks please Hugs! :-)</span></div>
<div class="entry" style="color: rgb(198, 58, 127);"><span class="name">tima: </span><span class="message">i like alex's music</span></div>
<div class="entry" style="color: rgb(191, 155, 130);"><span class="name">linnea: </span><span class="message">I laughed, I cried a number of
times, I sweated, I danced, I got shot, I ate, and I had many epiphanies</span></div>
<div class="entry" style="color: rgb(79, 152, 164);"><span class="name">archil: </span><span class="message">DJ blow the speakers up!!!!!</span></div>
<div class="entry" style="color: rgb(58, 112, 85);"><span class="name">ingel: </span><span class="message">thank you for bringing the piece
of eka vibes i missed straight to my front door in berlin! gave me a reason to come out every wednesday evening and meet cute people and learn new things
and really miss going to art school honestly <3</span></div>
<div class="entry" style="color: rgb(227, 134, 146);"><span class="name">NILYAAAA: </span><span class="message">DANKE SPASIBO COX SAG OL TAK SO MIKKET MERCI BEACOUP :)</span></div>
<div class="entry" style="color: rgb(233, 103, 72);"><span class="name">Maxim: </span><span class="message">I hope the God will help us all. Thank you for this event. You bless.</span></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const guestbookForm = document.getElementById("guestbookForm");
const entryContainer = document.getElementById("entry-container");
// load entries from local storage
function loadEntries() {
const savedEntries = JSON.parse(localStorage.getItem("guestbookEntries")) || [];
savedEntries.forEach(function(entry) {
displayEntry(entry.name, entry.message);
});
adjustContainerHeight();
}
// color randomizer
function displayEntry(name, message) {
const entry = document.createElement("div");
entry.classList.add("entry");
const nameElement = document.createElement("span");
nameElement.classList.add("name");
nameElement.textContent = name + ": ";
entry.appendChild(nameElement);
const messageElement = document.createElement("span");
messageElement.classList.add("message");
messageElement.textContent = message;
entry.appendChild(messageElement);
const randomColor = getRandomColor();
entry.style.color = randomColor;
entryContainer.appendChild(entry);
}
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function adjustContainerHeight() {
const entriesHeight = entryContainer.scrollHeight;
const maxHeight = parseFloat(window.getComputedStyle(entryContainer).maxHeight);
if (entriesHeight > maxHeight) {
entryContainer.style.height = `${maxHeight}px`;
} else {
entryContainer.style.height = "auto";
}
}
loadEntries();
// form submission
guestbookForm.addEventListener("submit", function(event) {
event.preventDefault();
const nameInput = document.getElementById("name");
const messageInput = document.getElementById("message");
const name = nameInput.value.trim();
const message = messageInput.value.trim();
if (name === "" || message === "") {
alert("Please fill in both name and message fields.");
return;
}
displayEntry(name, message);
// save entry to local storage
const savedEntries = JSON.parse(localStorage.getItem("guestbookEntries")) || [];
savedEntries.push({ name: name, message: message });
localStorage.setItem("guestbookEntries", JSON.stringify(savedEntries));
// clear form inputs after adding entry
nameInput.value = "";
messageInput.value = "";
});
});
function showEntriesOnScroll() {
const header = document.getElementById("header");
const entriesPlaceholder = document.getElementById("entriesPlaceholder");
window.addEventListener("scroll", function() {
const headerBottom = header.getBoundingClientRect().bottom;
const viewportHeight = window.innerHeight;
if (headerBottom <= viewportHeight) {
entriesPlaceholder.style.display = "block";
loadEntries();
window.removeEventListener("scroll", showEntriesOnScroll);
}
});
}
showEntriesOnScroll();
</script>
</body>
</html>