Skip to content

Commit fff9228

Browse files
marcus-hammarbergmarcus-hammarberg
committed
Adds game Standup for Jesus
1 parent c979547 commit fff9228

6 files changed

Lines changed: 177 additions & 0 deletions

File tree

‎standupforjesus/1.jpg‎

7.64 KB
Loading

‎standupforjesus/2.jpg‎

142 KB
Loading

‎standupforjesus/3.jpg‎

470 KB
Loading

‎standupforjesus/4.jpg‎

972 KB
Loading

‎standupforjesus/5.jpg‎

404 KB
Loading

‎standupforjesus/index.html‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Stå upp, stå upp för Jesus</title>
7+
<style>
8+
* { box-sizing: border-box; margin: 0; padding: 0; }
9+
body {
10+
font-family: system-ui, sans-serif;
11+
background: #1a1a2e;
12+
color: #eee;
13+
min-height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
gap: 1rem;
19+
padding: 1rem;
20+
}
21+
h1 { font-size: 1.8rem; font-weight: 500; letter-spacing: 0.05em; opacity: 0.9; }
22+
.img-wrap {
23+
border-radius: 16px;
24+
overflow: hidden;
25+
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
26+
width: min(80vw, 500px);
27+
max-height: calc(100vh - 10rem);
28+
max-height: calc(100dvh - 10rem);
29+
}
30+
#img {
31+
display: block;
32+
width: 100%;
33+
height: 100%;
34+
object-fit: cover;
35+
filter: blur(40px);
36+
scale: 1.08;
37+
}
38+
#img.playing {
39+
filter: blur(0px);
40+
scale: 1;
41+
transition: filter var(--dur) linear, scale var(--dur) linear;
42+
}
43+
.controls {
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
gap: 1rem;
48+
width: 100%;
49+
max-width: min(90vw, 600px);
50+
}
51+
#progress-wrap {
52+
width: 100%;
53+
height: 4px;
54+
background: rgba(255,255,255,0.1);
55+
border-radius: 2px;
56+
overflow: hidden;
57+
}
58+
#progress-bar {
59+
height: 100%;
60+
width: 0%;
61+
background: #7c6fff;
62+
transition: width 1s linear;
63+
border-radius: 2px;
64+
}
65+
button {
66+
padding: 10px 32px;
67+
border-radius: 999px;
68+
border: none;
69+
background: #7c6fff;
70+
color: #fff;
71+
font-size: 15px;
72+
font-weight: 500;
73+
cursor: pointer;
74+
transition: transform 0.1s, background 0.2s;
75+
}
76+
button:hover { background: #6a5cee; }
77+
button:active { transform: scale(0.97); }
78+
#status { font-size: 13px; opacity: 0.5; min-height: 18px; }
79+
</style>
80+
</head>
81+
<body>
82+
83+
<h1>Stå upp, stå upp för Jesus</h1>
84+
85+
<div class="img-wrap">
86+
<img id="img" src="./1.jpg" />
87+
</div>
88+
89+
<div class="controls">
90+
<div id="progress-wrap"><div id="progress-bar"></div></div>
91+
<span id="status"></span>
92+
93+
94+
<div class="row" style="display:flex;gap:12px;">
95+
<button id="btn" onclick="toggle()">Start</button>
96+
<button id="nextBtn" onclick="nextPicture()">Next picture</button>
97+
</div>
98+
</div>
99+
100+
<script>
101+
let playing = false, timer, elapsed = 0;
102+
let currentPic = 1;
103+
const totalPics = 5;
104+
const img = document.getElementById('img');
105+
const btn = document.getElementById('btn');
106+
const status = document.getElementById('status');
107+
const bar = document.getElementById('progress-bar');
108+
109+
const dur = 10;
110+
const blr = 40;
111+
112+
function loadPicture() {
113+
img.src = './' + currentPic + '.jpg';
114+
}
115+
116+
function toggle() {
117+
playing ? reset() : play();
118+
}
119+
120+
function play() {
121+
playing = true;
122+
elapsed = 0;
123+
btn.textContent = 'Reset';
124+
img.style.setProperty('--dur', dur + 's');
125+
img.style.transition = 'none';
126+
img.style.filter = 'blur(' + blr + 'px)';
127+
img.style.scale = '1.08';
128+
bar.style.transition = 'none';
129+
bar.style.width = '0%';
130+
status.textContent = '0 / ' + dur + 's';
131+
132+
requestAnimationFrame(() => requestAnimationFrame(() => {
133+
img.style.transition = '';
134+
img.style.filter = '';
135+
img.style.scale = '';
136+
img.classList.add('playing');
137+
bar.style.transition = 'width ' + dur + 's linear';
138+
bar.style.width = '100%';
139+
}));
140+
141+
timer = setInterval(() => {
142+
elapsed++;
143+
status.textContent = elapsed + ' / ' + dur + 's';
144+
if (elapsed >= dur) {
145+
clearInterval(timer);
146+
status.textContent = 'Revealed!';
147+
}
148+
}, 1000);
149+
}
150+
151+
function reset() {
152+
playing = false;
153+
clearInterval(timer);
154+
btn.textContent = 'Start';
155+
status.textContent = '';
156+
img.classList.remove('playing');
157+
img.style.transition = 'none';
158+
img.style.filter = '';
159+
img.style.scale = '';
160+
bar.style.transition = 'none';
161+
bar.style.width = '0%';
162+
requestAnimationFrame(() => {
163+
img.style.transition = '';
164+
});
165+
}
166+
167+
function nextPicture() {
168+
currentPic = currentPic < totalPics ? currentPic + 1 : 1;
169+
reset();
170+
loadPicture();
171+
}
172+
173+
loadPicture();
174+
175+
</script>
176+
</body>
177+
</html>

0 commit comments

Comments
 (0)