more pages

src/client/style.css

@@ -655,7 +655,7 @@ a:visited {
 
     place-content: center;
 
-    background: linear-gradient(180deg, #f5efff 0%, #fafcfe 100%);
+    background: linear-gradient(to bottom right, #f5efff 0%, #fafcfe 100%);
 
     > section {
         display: grid;
@@ -684,7 +684,7 @@ a:visited {
 
             min-height: calc(100vh + 20rem);
 
-            padding-top: 20vh;
+            padding-top: 15vh;
 
             h1 {
                 font-size: 3rem;
@@ -708,6 +708,12 @@ a:visited {
                 border-radius: 0.5rem;
 
                 box-shadow: 0 0 0.25rem 0 #680bff08, 0 0.5rem 1rem 0 #680bff10;
+
+                transition: transform 0.25s;
+
+                &:hover {
+                    transform: scale(1.05);
+                }
             }
         }
 
@@ -752,6 +758,41 @@ a:visited {
     }
 }
 
+header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+
+    padding: 1rem;
+
+    border-bottom: 1px solid #d9d9d9;
+
+    font-size: 18px;
+
+    .logo {
+        font-size: 24px;
+        font-weight: 700;
+    }
+
+    nav {
+        display: grid;
+        grid-auto-flow: column;
+        gap: 1rem;
+    }
+
+    a,
+    a:visited {
+        color: #333;
+        text-decoration: none;
+
+        font-weight: 400;
+
+        &:hover {
+            text-decoration: underline solid 2px;
+        }
+    }
+}
+
 footer {
     display: grid;
     gap: 1rem;

src/layouts/Base.astro

@@ -18,7 +18,7 @@ const { title } = Astro.props
         <meta name="generator" content={Astro.generator} />
 
         <title>
-            {[title, 'Online Code Editor'].filter(Boolean).join(' | ')}
+            {[title, 'PHC / Run'].filter(Boolean).join(' | ')}
         </title>
     </head>
     <body>

src/pages/index.astro

@@ -1,15 +1,22 @@
 ---
-import '@xterm/xterm/css/xterm.css'
-import '../client/style.css'
-import Base from '../layouts/Base.astro'
+import Base from '@/layouts/Base.astro'
 ---
 
-<Base title="PHC / Run">
+<Base>
+    <header>
+        <nav>
+            <a href="/">Home</a>
+        </nav>
+        <div class="spacer"></div>
+        <nav>
+            <a href="/login">Login</a>
+        </nav>
+    </header>
     <div class="homepage">
         <section class="hero-section">
             <h1>PHC / Run</h1>
             <h2>A platform to easily create, run and share code projects and prototypes</h2>
-            <img src="/public/screenshot-1.png" alt="phc run screenshot" />
+            <img src="/screenshot-1.png" alt="phc run screenshot" />
         </section>
         <section>
             <h2>Features</h2>

src/pages/login.astro

@@ -0,0 +1,30 @@
+---
+import Base from '@/layouts/Base.astro'
+
+console.log('env:', Object.fromEntries(Object.entries(import.meta.env).filter(([key]) => key.startsWith('OAUTH_'))))
+---
+
+<Base>
+    <header>
+        <nav>
+            <a href="/">Home</a>
+        </nav>
+        <div class="spacer"></div>
+        <nav>
+            <a href="/login">Login</a>
+        </nav>
+    </header>
+    <div class="page">
+        <h1>Login</h1>
+        <form action="/login" method="post">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" required />
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required />
+            <button type="submit">Login</button>
+        </form>
+        <h2>Or login with</h2>
+        <a role="button" href="/auth/github">GitHub</a>
+        <a role="button" href="/auth/oauth-provider-1">OAuth Provider 1</a>
+    </div>
+</Base>