Add glassmorphic landing page, serve static files
This commit is contained in:
parent
aa5168b201
commit
ba4f9f7377
2
index.js
2
index.js
@ -14,6 +14,8 @@ const PORT = process.env.AUTH_PORT || 3004;
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
app.use('/auth', discordRoutes);
|
||||
|
||||
app.get('/health', (req, res) => {
|
||||
|
||||
212
public/index.html
Normal file
212
public/index.html
Normal file
@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Howling Whispers</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #fff;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 20% 20%, rgba(88,166,255,0.08) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 80%, rgba(188,140,255,0.06) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(88,166,255,0.03) 0%, transparent 60%);
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 24px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.brand {
|
||||
font-size: 52px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #58a6ff, #bc8cff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.tagline {
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.glass {
|
||||
background: rgba(255,255,255,0.04);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 16px;
|
||||
}
|
||||
.login-card {
|
||||
padding: 40px 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
.login-card h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.6);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.btn-discord {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 32px;
|
||||
background: #5865F2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-discord:hover {
|
||||
background: #4752c4;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(88,101,242,0.3);
|
||||
}
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
.tile {
|
||||
padding: 24px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tile:hover {
|
||||
background: rgba(255,255,255,0.07);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(255,255,255,0.12);
|
||||
}
|
||||
.tile-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
.tile h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.tile p {
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.35);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.tile-status {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.status-live {
|
||||
background: rgba(63,185,80,0.12);
|
||||
color: #3fb950;
|
||||
border: 1px solid rgba(63,185,80,0.2);
|
||||
}
|
||||
.status-wip {
|
||||
background: rgba(210,153,34,0.1);
|
||||
color: #d29922;
|
||||
border: 1px solid rgba(210,153,34,0.2);
|
||||
}
|
||||
.status-legacy {
|
||||
background: rgba(139,148,158,0.1);
|
||||
color: rgba(255,255,255,0.3);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.footer {
|
||||
margin-top: 48px;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.15);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.brand { font-size: 36px; }
|
||||
.login-card { padding: 32px 24px; }
|
||||
.tiles { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div class="container">
|
||||
<div class="brand">The Howling Whispers</div>
|
||||
<div class="tagline">a universe of stories, characters, and worlds</div>
|
||||
|
||||
<div class="glass login-card">
|
||||
<h2>sign in to explore</h2>
|
||||
<a href="/auth/discord" class="btn-discord">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
||||
continue with Discord
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tiles">
|
||||
<a href="https://sandbox.thehowlingwhispers.com" class="glass tile">
|
||||
<span class="tile-icon">◆</span>
|
||||
<h3>Sandbox</h3>
|
||||
<p>Character workshop with AI</p>
|
||||
<span class="tile-status status-live">Live</span>
|
||||
</a>
|
||||
<a href="https://rp.thehowlingwhispers.com" class="glass tile">
|
||||
<span class="tile-icon">♢</span>
|
||||
<h3>Roleplay</h3>
|
||||
<p>Multi-character sessions</p>
|
||||
<span class="tile-status status-live">Live</span>
|
||||
</a>
|
||||
<a href="https://play.thehowlingwhispers.com" class="glass tile">
|
||||
<span class="tile-icon">◉</span>
|
||||
<h3>Play</h3>
|
||||
<p>Games & experiences</p>
|
||||
<span class="tile-status status-live">Live</span>
|
||||
</a>
|
||||
<a href="https://git.thehowlingwhispers.com" class="glass tile">
|
||||
<span class="tile-icon"></></span>
|
||||
<h3>Git</h3>
|
||||
<p>Source code hosting</p>
|
||||
<span class="tile-status status-live">Live</span>
|
||||
</a>
|
||||
<a href="https://legacy.thehowlingwhispers.com" class="glass tile">
|
||||
<span class="tile-icon">★</span>
|
||||
<h3>Legacy</h3>
|
||||
<p>Original AI roleplay</p>
|
||||
<span class="tile-status status-legacy">Legacy</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">The Howling Whispers — 2026</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user