more pages

main
Antonio De Lucreziis 2 years ago
parent 01d659a020
commit 39f42ade64

@ -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;

@ -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>

@ -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>

@ -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>