added Alpha Notice to pages

This commit is contained in:
Jonas_Jones 2025-03-07 22:19:47 +01:00
parent 236777e7f3
commit 9877879ba6
4 changed files with 46 additions and 2 deletions

View file

@ -0,0 +1,32 @@
<div class="alpha-notice">
<h2><b>This is an Alpha Version</b></h2>
<p>
Note that this Dashboard is in an alpha state. This means that there are bugs and missing features.
Please report any bugs or issues to the
<a href="https://github.com/JonasunderscoreJones/dash.jonasjones.dev/issues">GitHub repository</a>.
</p>
</div>
<style>
.alpha-notice {
background-color: #c48900;
color: #721c24;
padding: 1rem;
border: 1px solid #533300;
border-radius: 0.25rem;
margin: 1rem 0;
}
.alpha-notice h2 {
margin-top: 0;
}
.alpha-notice a {
color: #721c24;
text-decoration: underline;
}
.alpha-notice a:hover {
color: #560009;
}
</style>

View file

@ -1,3 +1,7 @@
<script>
import AlphaNotice from "$lib/components/AlphaNotice.svelte";
</script>
<svelte:head> <svelte:head>
<title>About</title> <title>About</title>
<meta name="description" content="About this app" /> <meta name="description" content="About this app" />
@ -6,6 +10,8 @@
<div class="text-column"> <div class="text-column">
<h1>About this Dashboard</h1> <h1>About this Dashboard</h1>
<AlphaNotice />
<p> <p>
This is a Dashboard app for my Ecosystem's services. This is a Dashboard app for my Ecosystem's services.
The list and roadmap of supported services can be viewed in the The list and roadmap of supported services can be viewed in the

View file

@ -3,6 +3,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { setSessionKey, redirectToHome, ACCOUNTS_WORKER_URL } from '$lib/session.js'; import { setSessionKey, redirectToHome, ACCOUNTS_WORKER_URL } from '$lib/session.js';
import { page } from '$app/state'; import { page } from '$app/state';
import AlphaNotice from '$lib/components/AlphaNotice.svelte';
let email = ''; let email = '';
let password = ''; let password = '';
let errorMessage = ''; let errorMessage = '';
@ -43,6 +44,8 @@
<div class="login-prompt"> <div class="login-prompt">
<h1>Login</h1> <h1>Login</h1>
<AlphaNotice />
{#if errorMessage} {#if errorMessage}
<p style="color: red;">{errorMessage}</p> <p style="color: red;">{errorMessage}</p>
{/if} {/if}

View file

@ -2,6 +2,7 @@
import { navigate } from 'svelte-routing'; import { navigate } from 'svelte-routing';
import { setSessionKey, ACCOUNTS_WORKER_URL } from '$lib/session.js'; import { setSessionKey, ACCOUNTS_WORKER_URL } from '$lib/session.js';
import { page } from '$app/state'; import { page } from '$app/state';
import AlphaNotice from '$lib/components/AlphaNotice.svelte';
let username = ''; let username = '';
let firstname = ''; let firstname = '';
let lastname = ''; let lastname = '';
@ -41,6 +42,8 @@
<div class="login-prompt"> <div class="login-prompt">
<h1>Signup</h1> <h1>Signup</h1>
<AlphaNotice />
{#if errorMessage} {#if errorMessage}
<p style="color: red;">{errorMessage}</p> <p style="color: red;">{errorMessage}</p>
{/if} {/if}
@ -141,7 +144,7 @@
} }
button:hover { button:hover {
background-color: #0056b3; background-color: var(--color-theme-2);
} }
p { p {