dev and docker compose fixes
This commit is contained in:
+24
-6
@@ -3,18 +3,20 @@
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
[data-theme='light'] {
|
||||
--text-color: #000000;
|
||||
--bg-color: #f4f4f4;
|
||||
--text-color: #000000;
|
||||
--bg-color: #f4f4f4;
|
||||
--hover-bg-color: #e4e4f0;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--text-color: #f4f4f4;
|
||||
--bg-color: #010101;
|
||||
--hover-bg-color: #1f2937;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -22,8 +24,24 @@ h1 {
|
||||
@apply text-4xl
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue-500
|
||||
.nav-item {
|
||||
@apply rounded px-3 py-2 text-sm mr-1
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
.nav-trailing {
|
||||
@apply rounded-full p-1
|
||||
}
|
||||
|
||||
.nav-trailing:hover {
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
.nav-logo:hover {
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
+1
-12
@@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="">
|
||||
<head>
|
||||
<title>FBLA 25</title>
|
||||
<meta charset="utf-8" />
|
||||
@@ -9,17 +9,6 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<!-- <script>-->
|
||||
<!-- const saved_theme = localStorage.getItem('theme');-->
|
||||
<!-- if (saved_theme) {-->
|
||||
<!-- document.body.setAttribute('data-theme', saved_theme);-->
|
||||
<!-- } else {-->
|
||||
<!-- const prefers_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;-->
|
||||
<!-- const theme = prefers_dark ? 'dark' : 'light';-->
|
||||
<!-- document.body.setAttribute('data-theme', theme);-->
|
||||
<!-- localStorage.setItem('theme', theme);-->
|
||||
<!-- }-->
|
||||
<!-- </script>-->
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
export const handle = async ({ event, resolve }) => {
|
||||
const theme = event.cookies.get('theme');
|
||||
if (!theme) {
|
||||
return await resolve(event);
|
||||
}
|
||||
return await resolve(event, {
|
||||
transformPageChunk: ({ html }) => {
|
||||
return html.replace('data-theme=""', `data-theme="${theme}"`);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
import bcrypt from 'bcrypt';
|
||||
|
||||
export async function createUser(username: string, password: string): Promise<void> {
|
||||
const sql = `INSERT INTO users (username, password, perms)
|
||||
VALUES ($username, $password, 0)`;
|
||||
|
||||
const hash = await bcrypt.hash(password, 12);
|
||||
}
|
||||
@@ -1,15 +1,67 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let currentTheme: string = $state('');
|
||||
|
||||
function toggleTheme(): void {
|
||||
const theme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
set_theme(theme);
|
||||
}
|
||||
|
||||
function set_theme(theme: string) {
|
||||
const one_year = 60 * 60 * 24 * 365;
|
||||
document.cookie = `theme=${theme}; max-age=${one_year}; path=/`;
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
currentTheme = theme;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const savedTheme = document.documentElement.getAttribute('data-theme');
|
||||
if (savedTheme) {
|
||||
currentTheme = savedTheme;
|
||||
return;
|
||||
}
|
||||
|
||||
const darkPref = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
const theme = darkPref ? 'dark' : 'light';
|
||||
set_theme(theme);
|
||||
});
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex justify-between p-6">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0,0&icon_names=account_circle,dark_mode,light_mode,login"
|
||||
/>
|
||||
|
||||
<div class="mx-2 flex h-14 justify-between p-3">
|
||||
<nav>
|
||||
<a href="/" class="pr-3">Home</a>
|
||||
<a href="/about" class="px-6">About</a>
|
||||
<a href="/settings" class="px-6">Settings</a>
|
||||
<a href="/" class="nav-logo mr-1 rounded-md px-2 pb-2 pt-1.5">
|
||||
<img
|
||||
class="inline-block"
|
||||
src="/mdevtriangle.svg"
|
||||
alt="MarinoDev Logo"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
</a>
|
||||
<a href="/about" class="nav-item">About</a>
|
||||
<a href="/listings" class="nav-item">Listings</a>
|
||||
<a href="/administration" class="nav-item">Administration</a>
|
||||
</nav>
|
||||
<div>
|
||||
<button onclick={toggleTheme} class="pr-2">
|
||||
<span class="material-symbols-outlined nav-trailing">
|
||||
{currentTheme === 'dark' ? 'dark_mode' : 'light_mode'}
|
||||
</span>
|
||||
</button>
|
||||
<button>
|
||||
<span class="material-symbols-outlined nav-trailing">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
|
||||
Reference in New Issue
Block a user