[TASK] adapt demo project
This commit is contained in:
Marie Birner
parent
00afae10e1
commit
7aef0944b3
1006
rot_app/package-lock.json
generated
1006
rot_app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -21,13 +21,16 @@
|
|||||||
"@types/cookie": "^0.5.1",
|
"@types/cookie": "^0.5.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||||
"@typescript-eslint/parser": "^5.45.0",
|
"@typescript-eslint/parser": "^5.45.0",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
"eslint": "^8.28.0",
|
"eslint": "^8.28.0",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"eslint-plugin-svelte": "^2.26.0",
|
"eslint-plugin-svelte": "^2.26.0",
|
||||||
|
"postcss": "^8.4.24",
|
||||||
"prettier": "^2.8.0",
|
"prettier": "^2.8.0",
|
||||||
"prettier-plugin-svelte": "^2.8.1",
|
"prettier-plugin-svelte": "^2.8.1",
|
||||||
"svelte": "^3.54.0",
|
"svelte": "^3.54.0",
|
||||||
"svelte-check": "^3.0.1",
|
"svelte-check": "^3.0.1",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
"tslib": "^2.4.1",
|
"tslib": "^2.4.1",
|
||||||
"typescript": "^5.0.0",
|
"typescript": "^5.0.0",
|
||||||
"vite": "^4.3.0",
|
"vite": "^4.3.0",
|
||||||
|
|||||||
8
rot_app/postcss.config.js
Normal file
8
rot_app/postcss.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
'postcss-import': {},
|
||||||
|
'tailwindcss/nesting': {},
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
35
rot_app/src/app.css
Normal file
35
rot_app/src/app.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
@apply inline-block rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
|
||||||
|
|
||||||
|
&-primary {
|
||||||
|
@apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dark {
|
||||||
|
@apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-gray {
|
||||||
|
@apply bg-gray-400 hover:bg-gray-500 focus-visible:outline-primary-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-attention {
|
||||||
|
@apply bg-[#f43f5e] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
|
||||||
|
}
|
||||||
|
|
||||||
|
&-alert {
|
||||||
|
@apply bg-[#ff0000] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fw {
|
||||||
|
@apply w-28;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-pressed='true'] {
|
||||||
|
@apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -1,53 +1,39 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
|
import { loggedin } from '../store.js';
|
||||||
import Header from './Header.svelte';
|
import Header from './Header.svelte';
|
||||||
import './styles.css';
|
import '../app.css';
|
||||||
|
|
||||||
|
const date = new Date();
|
||||||
|
|
||||||
|
let isLoggedIn: Boolean;
|
||||||
|
|
||||||
|
loggedin.subscribe(value => {
|
||||||
|
isLoggedIn = value;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="app">
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
<main>
|
<div class="bg-gray-100">
|
||||||
|
{#if isLoggedIn}
|
||||||
|
<Header />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<main class="flex min-h-screen {isLoggedIn ? 'items-center' : 'items-start'} justify-center px-4 py-12 sm:px-6 lg:px-8">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
{#if isLoggedIn}
|
||||||
<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
|
<footer class="bg-primary-950 text-white w-full flex justify-center p-3">
|
||||||
|
<div class="max-w-screen-xl w-full flex justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="text-[#ff0000]">♥</span> ASKÖ Ruderverein Donau Linz
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
© {date.getFullYear()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.app {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 64rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
footer {
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,12 +1,26 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import Counter from './Counter.svelte';
|
import { loggedin } from '../store.js';
|
||||||
import welcome from '$lib/images/svelte-welcome.webp';
|
import welcome from '$lib/images/svelte-welcome.webp';
|
||||||
import welcome_fallback from '$lib/images/svelte-welcome.png';
|
import welcome_fallback from '$lib/images/svelte-welcome.png';
|
||||||
|
import Login from './Login.svelte';
|
||||||
|
|
||||||
|
let isLoggedIn: Boolean;
|
||||||
|
|
||||||
|
loggedin.subscribe(value => {
|
||||||
|
isLoggedIn = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
function login() {
|
||||||
|
loggedin.set(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
loggedin.set(false);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Home</title>
|
<title>Ruderassistent - ASKÖ Ruderverein Donau Linz</title>
|
||||||
<meta name="description" content="Svelte demo app" />
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
@ -17,43 +31,17 @@
|
|||||||
<img src={welcome_fallback} alt="Welcome" />
|
<img src={welcome_fallback} alt="Welcome" />
|
||||||
</picture>
|
</picture>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
to your new<br />SvelteKit app
|
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<h2>
|
{#if isLoggedIn}
|
||||||
try editing <strong>src/routes/+page.svelte</strong>
|
<p>Here comes the list</p>
|
||||||
</h2>
|
<button on:click={logout} class="btn btn-primary">
|
||||||
|
Jetzt ausloggen
|
||||||
<Counter />
|
</button>
|
||||||
|
{:else}
|
||||||
|
<p>Login</p>
|
||||||
|
<button on:click={login} class="btn btn-primary">
|
||||||
|
Jetzt einloggen
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
|
||||||
section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
padding: 0 0 calc(100% * 495 / 2048) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome img {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -25,6 +25,9 @@
|
|||||||
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
|
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
|
||||||
<a href="/sverdle">Sverdle</a>
|
<a href="/sverdle">Sverdle</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li aria-current={$page.url.pathname === '/test' ? 'page' : undefined}>
|
||||||
|
<a href="/test">Test</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<svg viewBox="0 0 2 3" aria-hidden="true">
|
<svg viewBox="0 0 2 3" aria-hidden="true">
|
||||||
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
|
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
|
||||||
|
|||||||
0
rot_app/src/routes/Login.svelte
Normal file
0
rot_app/src/routes/Login.svelte
Normal file
@ -1,107 +0,0 @@
|
|||||||
@import '@fontsource/fira-mono';
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
|
||||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
||||||
--font-mono: 'Fira Mono', monospace;
|
|
||||||
--color-bg-0: rgb(202, 216, 228);
|
|
||||||
--color-bg-1: hsl(209, 36%, 86%);
|
|
||||||
--color-bg-2: hsl(224, 44%, 95%);
|
|
||||||
--color-theme-1: #ff3e00;
|
|
||||||
--color-theme-2: #4075a6;
|
|
||||||
--color-text: rgba(0, 0, 0, 0.7);
|
|
||||||
--column-width: 42rem;
|
|
||||||
--column-margin-top: 4rem;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-color: var(--color-bg-1);
|
|
||||||
background-size: 100vw 100vh;
|
|
||||||
background-image: radial-gradient(
|
|
||||||
50% 50% at 50% 50%,
|
|
||||||
rgba(255, 255, 255, 0.75) 0%,
|
|
||||||
rgba(255, 255, 255, 0) 100%
|
|
||||||
),
|
|
||||||
linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
p {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-theme-1);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
background-color: rgba(255, 255, 255, 0.45);
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
|
|
||||||
padding: 0.5em;
|
|
||||||
overflow-x: auto;
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-column {
|
|
||||||
display: flex;
|
|
||||||
max-width: 48rem;
|
|
||||||
flex: 0.6;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button {
|
|
||||||
font-size: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus:not(:focus-visible) {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 720px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.visually-hidden {
|
|
||||||
border: 0;
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
height: auto;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
@ -184,7 +184,7 @@
|
|||||||
style="position: absolute; left: 50%; top: 30%"
|
style="position: absolute; left: 50%; top: 30%"
|
||||||
use:confetti={{
|
use:confetti={{
|
||||||
particleCount: $reduced_motion ? 0 : undefined,
|
particleCount: $reduced_motion ? 0 : undefined,
|
||||||
force: 0.7,
|
force: 0.1,
|
||||||
stageWidth: window.innerWidth,
|
stageWidth: window.innerWidth,
|
||||||
stageHeight: window.innerHeight,
|
stageHeight: window.innerHeight,
|
||||||
colors: ['#ff3e00', '#40b3ff', '#676778']
|
colors: ['#ff3e00', '#40b3ff', '#676778']
|
||||||
|
|||||||
8
rot_app/src/routes/test/+page.svelte
Normal file
8
rot_app/src/routes/test/+page.svelte
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svelte:head>
|
||||||
|
<title>Test</title>
|
||||||
|
<meta name="description" content="About this app" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="text-column">
|
||||||
|
Test Page
|
||||||
|
</div>
|
||||||
9
rot_app/src/routes/test/+page.ts
Normal file
9
rot_app/src/routes/test/+page.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { dev } from '$app/environment';
|
||||||
|
|
||||||
|
// we don't need any JS on this page, though we'll load
|
||||||
|
// it in dev so that we get hot module replacement
|
||||||
|
export const csr = dev;
|
||||||
|
|
||||||
|
// since there's no dynamic data here, we can prerender
|
||||||
|
// it so that it gets served as a static asset in production
|
||||||
|
export const prerender = true;
|
||||||
3
rot_app/src/store.js
Normal file
3
rot_app/src/store.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const loggedin = writable(false);
|
||||||
BIN
rot_app/static/favicon.ico
Normal file
BIN
rot_app/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
45
rot_app/tailwind.config.js
Normal file
45
rot_app/tailwind.config.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const { colors } = require('tailwindcss/defaultTheme');
|
||||||
|
|
||||||
|
export default {
|
||||||
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
transparent: 'transparent',
|
||||||
|
current: 'currentColor',
|
||||||
|
black: '#000000',
|
||||||
|
white: '#ffffff',
|
||||||
|
gray: {
|
||||||
|
50: '#f8fafc',
|
||||||
|
100: '#f1f5f9',
|
||||||
|
200: '#e2e8f0',
|
||||||
|
300: '#cbd5e1',
|
||||||
|
400: '#94a3b8',
|
||||||
|
500: '#64748b',
|
||||||
|
600: '#475569',
|
||||||
|
700: '#334155',
|
||||||
|
800: '#1e293b',
|
||||||
|
900: '#0f172a',
|
||||||
|
950: '#020617',
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
950: '#172554',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user