207 lines
5.3 KiB
HTML
207 lines
5.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>CodeNomad</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: dark;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
background-color: #1a1a1a;
|
||
color: #cfd4dc;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32px;
|
||
text-align: center;
|
||
}
|
||
button {
|
||
border: none;
|
||
background: none;
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
.wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
max-width: 520px;
|
||
}
|
||
.logo {
|
||
width: 180px;
|
||
height: auto;
|
||
filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.35));
|
||
}
|
||
.title {
|
||
font-size: 2.7rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
color: #f4f6fb;
|
||
}
|
||
.loading-card {
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
max-width: 420px;
|
||
padding: 22px;
|
||
border-radius: 18px;
|
||
background: #151a23;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
|
||
}
|
||
.loading-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
font-size: 0.95rem;
|
||
color: #cfd4dc;
|
||
}
|
||
.spinner {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255, 255, 255, 0.18);
|
||
border-top-color: #6ce3ff;
|
||
animation: spin 0.9s linear infinite;
|
||
}
|
||
.phrase-controls {
|
||
margin-top: 12px;
|
||
font-size: 0.9rem;
|
||
color: #8f96a9;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
.phrase-controls button {
|
||
color: #8fb5ff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
.logo {
|
||
width: 180px;
|
||
height: auto;
|
||
filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.45));
|
||
}
|
||
.title {
|
||
font-size: 2.7rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
color: #f4f6fb;
|
||
}
|
||
.loading-card {
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
padding: 22px;
|
||
border-radius: 18px;
|
||
background: #0f1421;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 25px 60px rgba(5, 6, 10, 0.6);
|
||
}
|
||
|
||
.wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
max-width: 520px;
|
||
}
|
||
.logo {
|
||
width: 180px;
|
||
height: auto;
|
||
}
|
||
.title {
|
||
font-size: 2.7rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
}
|
||
.subtitle {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
color: #aeb3c4;
|
||
}
|
||
.loading-card {
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
padding: 20px;
|
||
border-radius: 14px;
|
||
background: rgba(13, 16, 24, 0.8);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
|
||
}
|
||
.loading-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
font-size: 0.95rem;
|
||
color: #cad0dd;
|
||
}
|
||
.spinner {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255, 255, 255, 0.18);
|
||
border-top-color: #6ce3ff;
|
||
animation: spin 0.9s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrapper" role="status" aria-live="polite">
|
||
<img src="./icon.png" alt="CodeNomad" class="logo" />
|
||
<div>
|
||
<h1 class="title">CodeNomad</h1>
|
||
</div>
|
||
<div class="loading-card">
|
||
<div class="loading-row">
|
||
<div class="spinner" aria-hidden="true"></div>
|
||
<span id="loading-phrase">Warming up the AI neurons…</span>
|
||
</div>
|
||
<div class="phrase-controls">
|
||
<button id="phrase-toggle" type="button">Show another</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const phrases = [
|
||
"Warming up the AI neurons…",
|
||
"Convincing the AI to stop daydreaming…",
|
||
"Polishing the AI’s code goggles…",
|
||
"Asking the AI to stop reorganizing your files…",
|
||
"Feeding the AI additional coffee…",
|
||
"Teaching the AI not to delete node_modules (again)…",
|
||
"Telling the AI to act natural before you arrive…",
|
||
"Asking the AI to please stop rewriting history…",
|
||
"Letting the AI stretch before its coding sprint…",
|
||
"Persuading the AI to give you keyboard control…"
|
||
]
|
||
|
||
const phraseEl = document.getElementById("loading-phrase")
|
||
const button = document.getElementById("phrase-toggle")
|
||
|
||
function pickPhrase() {
|
||
const next = phrases[Math.floor(Math.random() * phrases.length)]
|
||
phraseEl.textContent = next
|
||
}
|
||
|
||
pickPhrase()
|
||
button?.addEventListener("click", pickPhrase)
|
||
</script>
|
||
</body>
|
||
</html>
|