|
|
@@ -11,17 +11,111 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<main>
|
|
|
- <form onsubmit={submit}>
|
|
|
- <label>Title:
|
|
|
- <input bind:value={title} type="text" required use:autofocus>
|
|
|
- </label>
|
|
|
-
|
|
|
- <label>Game Information:
|
|
|
- <textarea
|
|
|
- bind:value={gameContext}
|
|
|
- required
|
|
|
- ></textarea>
|
|
|
- </label>
|
|
|
- </form>
|
|
|
-</main>
|
|
|
+<div class="page">
|
|
|
+ <header>
|
|
|
+ <a href="/game" class="back">
|
|
|
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
|
+ <path d="M19 12H5M12 5l-7 7 7 7"/>
|
|
|
+ </svg>
|
|
|
+ My Games
|
|
|
+ </a>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main>
|
|
|
+ <div class="heading">
|
|
|
+ <h1>New Adventure</h1>
|
|
|
+ <p>Set the stage for your story. You can always change these later.</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <form class="standardForm" onsubmit={submit}>
|
|
|
+ <label>Title
|
|
|
+ <input bind:value={title} type="text" placeholder="e.g. The Lost Kingdom of Arath" required use:autofocus>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label>Game Information
|
|
|
+ <textarea
|
|
|
+ bind:value={gameContext}
|
|
|
+ placeholder="Describe the world, setting, tone, or any context you want the AI to know about your adventure…"
|
|
|
+ rows="6"
|
|
|
+ required
|
|
|
+ ></textarea>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <button type="submit">Begin Adventure</button>
|
|
|
+ </form>
|
|
|
+ </main>
|
|
|
+</div>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .page {
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #0b0b10;
|
|
|
+ }
|
|
|
+
|
|
|
+ header {
|
|
|
+ padding: 1.25rem 2rem;
|
|
|
+ border-bottom: 1px solid #1e1e28;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #6b6b7a;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: color 0.15s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back:hover { color: #a1a1aa; }
|
|
|
+
|
|
|
+ main {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 3rem 1.5rem 6rem;
|
|
|
+ gap: 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heading {
|
|
|
+ text-align: center;
|
|
|
+ max-width: 480px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: clamp(1.8rem, 4vw, 2.4rem);
|
|
|
+ font-weight: 800;
|
|
|
+ letter-spacing: -1.5px;
|
|
|
+ color: #e5e5ea;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heading p {
|
|
|
+ font-size: 0.95rem;
|
|
|
+ color: #6b6b7a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .standardForm {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 780px;
|
|
|
+ padding: 3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ resize: vertical;
|
|
|
+ min-height: 280px;
|
|
|
+ line-height: 1.6;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 700px) {
|
|
|
+ .standardForm { padding: 1.75rem; }
|
|
|
+ textarea { min-height: 160px; }
|
|
|
+ main { padding: 2rem 1.25rem 4rem; }
|
|
|
+ }
|
|
|
+</style>
|
