exodus/burg-stett-king-arth-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

step: initial app with chatbot

Browse Source
This commit is contained in:
Jakob Gegeniger
2026-05-09 22:31:17 +02:00
parent bb4502a09d
commit 9900d48622
3 changed files with 206 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/counter.ts
-9
View File
@@ -1,9 +0,0 @@
export function setupCounter(element: HTMLButtonElement) {
let counter = 0
const setCounter = (count: number) => {
counter = count
element.innerHTML = `Count is ${counter}`
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
}
src/main.ts
+134 -55
View File
@@ -1,60 +1,139 @@
import './style.css'
import typescriptLogo from './assets/typescript.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import { setupCounter } from './counter.ts'
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<section id="center">
<div class="hero">
<img src="${heroImg}" class="base" width="170" height="179">
<img src="${typescriptLogo}" class="framework" alt="TypeScript logo"/>
<img src="${viteLogo}" class="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>Edit <code>src/main.ts</code> and save to test <code>HMR</code></p>
</div>
<button id="counter" type="button" class="counter"></button>
type Page = 'players' | 'start' | 'info'
const storageKey = 'players'
let players: string[] = loadPlayers()
let currentName = ''
function loadPlayers(): string[] {
const saved = localStorage.getItem(storageKey)
if (!saved) return []
try {
const parsed = JSON.parse(saved)
if (Array.isArray(parsed)) {
return parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
}
} catch {
return []
}
return []
}
function savePlayers(): void {
localStorage.setItem(storageKey, JSON.stringify(players))
}
function getPageFromHash(): Page {
const hash = window.location.hash.replace('#', '')
if (hash === 'start' || hash === 'info' || hash === 'players') {
return hash
}
return 'players'
}
function render(): void {
const app = document.querySelector<HTMLDivElement>('#app')
if (!app) return
const page = getPageFromHash()
app.innerHTML = `
<main class="app">
<h1>Simple Player Web App</h1>
<nav class="nav">
<a href="#players" class="nav-link ${page === 'players' ? 'active' : ''}">Page 1: Players</a>
<a href="#start" class="nav-link ${page === 'start' ? 'active' : ''}">Page 2: Start</a>
<a href="#info" class="nav-link ${page === 'info' ? 'active' : ''}">Page 3: Text</a>
</nav>
<section class="page-content">
${renderPage(page)}
</section>
<div class="ticks"></div>
<section id="next-steps">
<div id="docs">
<svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#documentation-icon"></use></svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img class="logo" src="${viteLogo}" alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://www.typescriptlang.org" target="_blank">
<img class="button-icon" src="${typescriptLogo}" alt="">
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#social-icon"></use></svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li><a href="https://github.com/vitejs/vite" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#github-icon"></use></svg>GitHub</a></li>
<li><a href="https://chat.vite.dev/" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#discord-icon"></use></svg>Discord</a></li>
<li><a href="https://x.com/vite_js" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#x-icon"></use></svg>X.com</a></li>
<li><a href="https://bsky.app/profile/vite.dev" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#bluesky-icon"></use></svg>Bluesky</a></li>
</ul>
</div>
</section>
<div class="ticks"></div>
<section id="spacer"></section>
</main>
`
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
attachHandlers(page)
}
function renderPage(page: Page): string {
if (page === 'players') {
const listItems = players.map((name) => `<li>${name}</li>`).join('')
return `
<h2>Add players</h2>
<div class="row">
<input id="player-input" type="text" placeholder="Enter player name" />
<button id="add-player" type="button">Add</button>
</div>
<ul class="player-list">${listItems}</ul>
`
}
if (page === 'start') {
const shownName = currentName || 'No name selected yet'
return `
<h2>Start</h2>
<button id="start-btn" type="button">Start</button>
<p id="selected-name">${shownName}</p>
`
}
return `
<h2>Some text</h2>
<p>This is the third page with static text.</p>
`
}
function attachHandlers(page: Page): void {
if (page === 'players') {
const input = document.querySelector<HTMLInputElement>('#player-input')
const button = document.querySelector<HTMLButtonElement>('#add-player')
if (input && button) {
const addPlayer = () => {
const value = input.value.trim()
if (!value) return
players.push(value)
savePlayers()
input.value = ''
render()
}
button.addEventListener('click', addPlayer)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
addPlayer()
}
})
}
}
if (page === 'start') {
const button = document.querySelector<HTMLButtonElement>('#start-btn')
const selectedName = document.querySelector<HTMLParagraphElement>('#selected-name')
if (button && selectedName) {
button.addEventListener('click', () => {
if (players.length === 0) {
currentName = 'Please add players on page 1 first.'
} else {
const randomIndex = Math.floor(Math.random() * players.length)
currentName = players[randomIndex]
}
selectedName.textContent = currentName
})
}
}
}
window.addEventListener('hashchange', render)
if (!window.location.hash) {
window.location.hash = '#players'
}
render()
src/style.css
+75 -266
View File
@@ -1,296 +1,105 @@
:root {
--text: #6b6375;
--text-h: #08060d;
--bg: #fff;
--border: #e5e4e7;
--code-bg: #f4f3ec;
--accent: #aa3bff;
--accent-bg: rgba(170, 59, 255, 0.1);
--accent-border: rgba(170, 59, 255, 0.5);
--social-bg: rgba(244, 243, 236, 0.5);
--shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
--mono: ui-monospace, Consolas, monospace;
font: 18px/145% var(--sans);
letter-spacing: 0.18px;
color-scheme: light dark;
color: var(--text);
background: var(--bg);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (max-width: 1024px) {
font-size: 16px;
}
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1f2937;
background: #f3f4f6;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #9ca3af;
--text-h: #f3f4f6;
--bg: #16171d;
--border: #2e303a;
--code-bg: #1f2028;
--accent: #c084fc;
--accent-bg: rgba(192, 132, 252, 0.15);
--accent-border: rgba(192, 132, 252, 0.5);
--social-bg: rgba(47, 48, 58, 0.5);
--shadow:
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
}
#social .button-icon {
filter: invert(1) brightness(2);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h1,
h2 {
font-family: var(--heading);
font-weight: 500;
color: var(--text-h);
#app {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.app {
width: 100%;
max-width: 680px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
}
h1 {
font-size: 56px;
letter-spacing: -1.68px;
margin: 32px 0;
@media (max-width: 1024px) {
font-size: 36px;
margin: 20px 0;
}
margin: 0 0 16px;
font-size: 28px;
}
h2 {
font-size: 24px;
line-height: 118%;
letter-spacing: -0.24px;
margin: 0 0 8px;
@media (max-width: 1024px) {
margin: 0 0 12px;
font-size: 20px;
}
}
p {
margin: 0;
}
code,
.counter {
font-family: var(--mono);
display: inline-flex;
border-radius: 4px;
color: var(--text-h);
}
code {
font-size: 15px;
line-height: 135%;
padding: 4px 8px;
background: var(--code-bg);
}
.counter {
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
color: var(--accent);
background: var(--accent-bg);
border: 2px solid transparent;
transition: border-color 0.3s;
margin-bottom: 24px;
&:hover {
border-color: var(--accent-border);
}
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
.hero {
position: relative;
.base,
.framework,
.vite {
inset-inline: 0;
margin: 0 auto;
}
.base {
width: 170px;
position: relative;
z-index: 0;
}
.framework,
.vite {
position: absolute;
}
.framework {
z-index: 1;
top: 34px;
height: 28px;
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
scale(1.4);
}
.vite {
z-index: 0;
top: 107px;
height: 26px;
width: auto;
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
scale(0.8);
}
}
#app {
width: 1126px;
max-width: 100%;
margin: 0 auto;
text-align: center;
border-inline: 1px solid var(--border);
min-height: 100svh;
.nav {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#center {
display: flex;
flex-direction: column;
gap: 25px;
place-content: center;
place-items: center;
flex-grow: 1;
@media (max-width: 1024px) {
padding: 32px 20px 24px;
gap: 18px;
}
}
#next-steps {
display: flex;
border-top: 1px solid var(--border);
text-align: left;
& > div {
flex: 1 1 0;
padding: 32px;
@media (max-width: 1024px) {
padding: 24px 20px;
}
}
.icon {
margin-bottom: 16px;
width: 22px;
height: 22px;
}
@media (max-width: 1024px) {
flex-direction: column;
text-align: center;
}
}
#docs {
border-right: 1px solid var(--border);
@media (max-width: 1024px) {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
#next-steps ul {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
margin: 32px 0 0;
.logo {
height: 18px;
}
a {
color: var(--text-h);
font-size: 16px;
border-radius: 6px;
background: var(--social-bg);
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
text-decoration: none;
transition: box-shadow 0.3s;
&:hover {
box-shadow: var(--shadow);
}
.button-icon {
height: 18px;
width: 18px;
}
}
@media (max-width: 1024px) {
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
li {
flex: 1 1 calc(50% - 8px);
gap: 8px;
margin-bottom: 20px;
}
a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
}
.nav-link {
text-decoration: none;
color: #111827;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 8px 10px;
font-size: 14px;
}
#spacer {
height: 88px;
border-top: 1px solid var(--border);
@media (max-width: 1024px) {
height: 48px;
}
.nav-link.active {
background: #111827;
color: #ffffff;
border-color: #111827;
}
.ticks {
position: relative;
width: 100%;
&::before,
&::after {
content: '';
position: absolute;
top: -4.5px;
border: 5px solid transparent;
.page-content {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 16px;
}
&::before {
left: 0;
border-left-color: var(--border);
.row {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
&::after {
right: 0;
border-right-color: var(--border);
input,
button {
font: inherit;
}
input {
flex: 1;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 8px 10px;
}
button {
border: 1px solid #111827;
background: #111827;
color: #ffffff;
border-radius: 8px;
padding: 8px 14px;
cursor: pointer;
}
.player-list {
margin: 0;
padding-left: 20px;
}
#selected-name {
margin-top: 12px;
font-size: 18px;
font-weight: 600;
}