LeoVasanko/paskia
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Major refactor of frontend source tree such that paths better match where they are served.

Browse Source
This commit is contained in:
Leo Vasanko
2025-12-02 22:09:07 +00:00
parent 123a62549b
commit c83450dace
30 changed files with 243 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/index.html
+114 -13
View File
@@ -3,22 +3,123 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PassKey Auth - Examples</title>
<title>PassKey Auth - Dev Mode</title>
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
max-width: 600px;
width: 100%;
}
h1 {
color: #667eea;
margin-bottom: 10px;
font-size: 2em;
}
.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 1.1em;
}
h2 {
color: #667eea;
margin-top: 30px;
margin-bottom: 15px;
font-size: 1.3em;
}
.section:first-of-type h2 {
margin-top: 0;
}
.links {
display: flex;
flex-direction: column;
gap: 12px;
}
.links.side-by-side {
flex-direction: row;
flex-wrap: wrap;
}
.links.side-by-side a {
flex: 1;
min-width: 200px;
}
a {
display: block;
padding: 15px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-decoration: none;
border-radius: 8px;
transition: transform 0.2s, box-shadow 0.2s;
font-weight: 500;
}
a:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.example-description {
font-size: 0.9em;
opacity: 0.9;
margin-top: 5px;
}
.info {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
font-size: 0.9em;
color: #666;
}
.info p {
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🔐 PassKey Auth Examples</h1>
<p class="subtitle">Interactive demos and code examples for PassKey authentication</p>
</header>
<h1>🔐 PassKey Auth</h1>
<p class="subtitle">Dev server running this example application.</p>
<div class="content">
<div class="examples-grid">
<a href="/examples/restricted-api.html" class="example-card">
<h3 class="example-title">API Demo: login and re-authentication via JS.</h3>
<p class="example-description">
</p>
</a>
<div class="section">
<h2>Main Application</h2>
<div class="links side-by-side">
<a href="/auth/">👤 User Profile</a>
<a href="/auth/admin/">⚙️ Admin Panel</a>
</div>
</div>
<div class="section">
<h2>Examples & Demos</h2>
<div class="links">
<a href="/examples/restricted-api.html">
📡 API Demo
<div class="example-description">Login and re-authentication via JS</div>
</a>
</div>
</div>
<div class="info">
<p><strong>Dev Server:</strong> Vite on port 4403</p>
<p><strong>Backend:</strong> localhost:4402</p>
</div>
</div>
</div>
</body>
</html>