-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (143 loc) · 6.22 KB
/
Copy pathindex.html
File metadata and controls
148 lines (143 loc) · 6.22 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icons/terranova.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TerraNova</title>
<style>
/* Splash styled to match TerraNova UI tokens (copied from tailwind config).
Added shimmer and leading-edge animations for a livelier progress bar. */
:root{
--tn-bg: #1c1a17; /* tn.bg */
--tn-panel: #312d28; /* tn.panel */
--tn-border: #4a4438; /* tn.border */
--tn-text: #e8e2d9; /* tn.text */
--tn-text-muted: #9a9082; /* tn.text-muted */
--tn-accent: #b5924c; /* tn.accent */
}
html,body{height:100%;}
#initial-splash {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--tn-bg);
color: var(--tn-text);
z-index: 99999;
-webkit-font-smoothing: antialiased;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
#splash-card{
width: 420px;
max-width: calc(100% - 48px);
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
border: 1px solid var(--tn-border);
border-radius: 10px;
padding: 20px 20px;
box-shadow: 0 6px 30px rgba(0,0,0,0.6);
display:flex;
gap:16px;
align-items:center;
transform-origin: center;
animation: splash-drop 420ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes splash-drop {
0% { transform: translateY(12px) scale(0.98); opacity: 0 }
60% { transform: translateY(-6px) scale(1.003); opacity: 1 }
100% { transform: translateY(0) scale(1); opacity: 1 }
}
#splash-logo{width:56px;height:56px;border-radius:8px;background:var(--tn-panel);display:flex;align-items:center;justify-content:center;padding:8px}
#splash-logo img{width:40px;height:40px}
#splash-info{flex:1}
.splash-title{font-size:18px;font-weight:700;color:var(--tn-text);margin-bottom:6px}
.splash-sub{font-size:13px;color:var(--tn-text-muted);margin-bottom:12px}
.splash-bar{height:10px;background:var(--tn-panel);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)}
.splash-progress{height:100%;width:0%;background:linear-gradient(90deg,var(--tn-accent),#d8b06a);transition:width 160ms linear;box-shadow:0 4px 10px rgba(181,146,76,0.12);position:relative;overflow:hidden}
/* Moving sheen across the filled portion */
.splash-progress::before{
content: "";
position: absolute;
left: -60%;
top: 0;
height: 100%;
width: 60%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.16), rgba(255,255,255,0));
transform: skewX(-18deg);
animation: splash-shimmer 1.6s linear infinite;
}
@keyframes splash-shimmer { from { left: -60% } to { left: 160% } }
/* Soft glowing leading edge that stays at the bar's end */
.splash-progress::after{
content: "";
position: absolute;
right: -6px;
top: -6px;
width: 16px;
height: 22px;
background: radial-gradient(circle at center, rgba(255,255,255,0.9), rgba(255,255,255,0));
border-radius: 50%;
filter: blur(6px);
opacity: 0.9;
transform-origin: center;
animation: splash-lead 1.6s linear infinite;
}
@keyframes splash-lead { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
.splash-actions{display:flex;gap:8px;align-items:center;margin-top:12px}
.splash-small{font-size:12px;color:var(--tn-text-muted)}
#initial-splash.fade-out{opacity:0;transition:opacity 260ms ease;pointer-events:none}
</style>
</head>
<body class="bg-tn-bg text-tn-text overflow-hidden">
<div id="initial-splash" aria-hidden="true">
<div id="splash-card" role="status" aria-live="polite">
<div id="splash-logo"><img src="/icons/terranova.svg" alt="TerraNova logo"/></div>
<div id="splash-info">
<div class="splash-title">TerraNova</div>
<div class="splash-sub">Loading editor and resources — please wait</div>
<div class="splash-bar"><div id="splash-progress" class="splash-progress" style="width:14%"></div></div>
<div class="splash-actions"><div id="splash-status" class="splash-small">Initializing…</div></div>
</div>
</div>
</div>
<div id="root"></div>
<script>
// Runs immediately during bundle load — no module dependency.
(function(){
var msgs=[
"Getting it together...","Hoping that Simon notices me...",
"Plastic is Fantastic, just dont consume on a daily basis",
"Good luck in the Modding Contest!","Loading assets...",
"Warming up the map...","Assembling blocks...",
"Summoning terrain spirits...","Polishing the sky...",
"Feeding the pixel dragons...","Tuning the grass color...",
"Checking for missing cookies..."
];
var statusEl=document.getElementById("splash-status");
var progressEl=document.getElementById("splash-progress");
if(!statusEl)return;
// Rotate messages
var i=0;
statusEl.textContent=msgs[0];
window.__splashMsgInterval=setInterval(function(){
i=(i+1)%msgs.length;
var e=document.getElementById("splash-status");
if(e)e.textContent=msgs[i];
},2400);
// Progressive bar: advance toward 90%, slowing as it approaches.
// React will fill the last 10% when it mounts.
var pct=14;
window.__splashTickInterval=setInterval(function(){
var el=document.getElementById("splash-progress");
if(!el)return;
var remaining=90-pct;
var step=Math.max(0.15,remaining*0.02);
pct=Math.min(pct+step,90);
el.style.width=pct.toFixed(1)+"%";
},100);
})();
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>