forked from pgaonamu/IKEA_3D
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (131 loc) · 3.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>IKEA 3D</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: "Roboto", Arial, sans-serif;
}
img#ikea-logo {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: auto;
z-index: 1000;
background-color: transparent;
}
#fade-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 999;
opacity: 1;
transition: opacity 2s ease-out;
}
button.control-btn {
position: absolute;
z-index: 1001;
width: 50px;
height: 50px;
font-size: 24px;
color: white;
border: none;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button.control-btn:hover {
transform: scale(1.1);
}
#toggle-hdr-btn {
top: 10px;
right: 10px;
background-color: #0057ad;
}
#toggle-hdr-btn.day:hover {
background-color: #003d80;
}
#toggle-hdr-btn.night {
background-color: #FFA500;
}
#toggle-hdr-btn.night:hover {
background-color: #cc8500;
}
#screenshot-btn {
top: 70px;
right: 10px;
background-color: #444;
}
#screenshot-btn:hover {
background-color: #666;
}
#help-text {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 14px;
color: white;
background: rgba(0, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 5px;
z-index: 1001;
}
#help-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
background: rgba(0, 0, 0, 0.9);
color: white;
font-family: "Roboto", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
display: none;
z-index: 1002;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
text-align: center;
}
#help-overlay p {
margin: 0 0 10px 0;
padding: 0;
}
</style>
</head>
<body>
<img id="ikea-logo" src="/ikea_logo.png" alt="IKEA Logo" />
<div id="fade-overlay"></div>
<button id="toggle-hdr-btn" class="control-btn day">☀️</button>
<button id="screenshot-btn" class="control-btn">📸</button>
<div id="help-text">Press H for help.</div>
<div id="help-overlay">
<p><strong>Controls:</strong></p>
<p>Use <strong>Left Click</strong> to select an object.</p>
<p>Press <strong>A</strong> to move objects left.</p>
<p>Press <strong>W</strong> to move objects forward.</p>
<p>Press <strong>S</strong> to move objects backward.</p>
<p>Press <strong>D</strong> to move objects right.</p>
<p>Use <strong>LEFT</strong> and <strong>RIGHT</strong> arrow keys to rotate.</p>
<p>Press <strong>Q</strong> to shrink the object.</p>
<p>Press <strong>E</strong> to extend the object.</p>
<p>Press <strong>R</strong> to reset all objects to their initial state.</p>
<p style="margin-top: 20px;">Press <strong>H</strong> to close this help screen.</p>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>