Skip to content

Commit 5a4fdaa

Browse files
fniephausfniephaus
committed
Add a default HTML page to SB Photon demo.
1 parent ffe6763 commit 5a4fdaa

File tree

1 file changed

+79
-0
lines changed
  • graalwasm/graalwasm-spring-boot-photon/src/main/resources/static

1 file changed

+79
-0
lines changed

‎graalwasm/graalwasm-spring-boot-photon/src/main/resources/static/index.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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>Image Effects Demo</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
text-align: center;
11+
}
12+
.effects-nav {
13+
margin-bottom: 20px;
14+
}
15+
.effects-nav a {
16+
margin: 0 10px;
17+
text-decoration: none;
18+
color: blue;
19+
}
20+
.effects-nav a:hover {
21+
text-decoration: underline;
22+
}
23+
#image-container {
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
height: 80vh;
28+
}
29+
#image-container img {
30+
max-width: 100%;
31+
max-height: 100%;
32+
}
33+
#load-time {
34+
margin-top: 10px;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
40+
<div class="effects-nav">
41+
<a href="#" onclick="changeEffect('default')">Default</a>
42+
<a href="#" onclick="changeEffect('flipv')">Flip Vertical</a>
43+
<a href="#" onclick="changeEffect('fliph')">Flip Horizontal</a>
44+
<a href="#" onclick="changeEffect('solarize')">Solarize</a>
45+
<a href="#" onclick="changeEffect('neue')">Neue</a>
46+
<a href="#" onclick="changeEffect('lofi')">LoFi</a>
47+
<a href="#" onclick="changeEffect('duotone_lilac')">Duotone</a>
48+
<a href="#" onclick="changeEffect('ryo')">Ryo</a>
49+
<a href="#" onclick="changeEffect('dramatic')">Dramatic</a>
50+
</div>
51+
52+
<div id="image-container">
53+
<img id="effect-image" src="/photo/default" alt="Image with effect">
54+
</div>
55+
<div id="load-time"></div>
56+
57+
<script>
58+
function changeEffect(effectName) {
59+
const startTime = performance.now();
60+
const img = document.getElementById('effect-image');
61+
img.src = `/photo/${effectName}`;
62+
img.onload = () => {
63+
const endTime = performance.now();
64+
const loadTime = endTime - startTime;
65+
document.getElementById('load-time').innerText = `Loaded in ${loadTime.toFixed(2)} ms`;
66+
};
67+
img.onerror = () => {
68+
document.getElementById('load-time').innerText = 'Failed to load image';
69+
};
70+
}
71+
72+
// Initially load the image with the default effect
73+
document.addEventListener('DOMContentLoaded', (event) => {
74+
changeEffect('default');
75+
});
76+
</script>
77+
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)