mirror of
https://github.com/JonasunderscoreJones/BingoGenerator.git
synced 2025-10-22 22:09:18 +02:00
added footer and fixed root layout
This commit is contained in:
parent
b22b915ce7
commit
1b7b1129c7
3 changed files with 159 additions and 52 deletions
90
src/lib/components/Footer.svelte
Normal file
90
src/lib/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<a href="https://github.com/JonasunderscoreJones" target="_blank" aria-label="GitHub Link"><i class="fab fa-github"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg" target="_blank" aria-label="YouTube Link"><i class="fab fa-youtube"></i></a>
|
||||
<a href="https://discord.gg/V2EsuUVmWh" target="_blank" aria-label="Discord Link"><i class="fab fa-discord"></i></a>
|
||||
<a href="mailto:me@jonasjones.dev" target="_blank" aria-label="Email Link"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
|
||||
<p>Website by Jonas_Jones 2021 - {year}</p>
|
||||
|
||||
<div class="footer-right">
|
||||
<a href="https://jonasjones.dev" class="footer-link" target="_blank">
|
||||
Homepage
|
||||
<i class="fas fa-external-link"></i>
|
||||
</a>
|
||||
<a href="https://blog.jonasjones.dev" class="footer-link" target="_blank">
|
||||
Blog
|
||||
<i class="fas fa-external-link"></i>
|
||||
</a>
|
||||
<a href="https://docs.jonasjones.dev" class="footer-link" target="_blank">
|
||||
Docs
|
||||
<i class="fas fa-external-link"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const year = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
height: 1rem;
|
||||
background-color: black;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.footer-left, .footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-left a, .footer-right a {
|
||||
margin: 3px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-left a:hover, .footer-right a:hover {
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
position: fixed;
|
||||
right: 10px; /* Keep the right section fixed */
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
position: fixed;
|
||||
left: 10px; /* Keep the left section fixed */
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-link i {
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.footer-left, .footer-right {
|
||||
display: none;
|
||||
}
|
||||
.footer-left a, .footer-right a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,6 +64,14 @@ body {
|
|||
line-height: 1.5;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.root-bingo-container {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 3rem);
|
||||
width: calc(100vw - 1rem);
|
||||
}
|
||||
|
||||
.bingo-container {
|
||||
|
|
@ -72,18 +80,21 @@ body {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
margin: 7px;
|
||||
border-radius: 8px;}
|
||||
margin: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bingo-main-container {
|
||||
background-color: var(--content-bg-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bingo-grid-container {
|
||||
width: 95vw;
|
||||
height: 94vh;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: calc(100vh - 3rem);
|
||||
background-color: var(--content-bg-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import '$lib/styles/main.css';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
|
|
@ -257,59 +258,62 @@ Bingo Item 25`;
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="flex-row-container">
|
||||
<div class="bingo-container bingo-main-container">
|
||||
<h1>Randomized Bingo Generator</h1>
|
||||
<div style="margin-bottom: 10px;">
|
||||
</div>
|
||||
<div class="notice-box">
|
||||
<div class="button-container">
|
||||
<button on:click={generateBingo}>Regenerate Bingo</button>
|
||||
<button on:click={downloadPDF}>Download as PDF</button>
|
||||
<button on:click={openSettings}>Configure Bingo</button>
|
||||
<head>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<div class="root-bingo-container">
|
||||
<div class="flex-row-container">
|
||||
<div class="bingo-container bingo-main-container">
|
||||
<h1>Randomized Bingo Generator</h1>
|
||||
<div style="margin-bottom: 10px;">
|
||||
</div>
|
||||
{#if running_bingo && tried_to_regen}
|
||||
<div class="bingo-running-warning">
|
||||
<p>You are currently playing this game of Bingo and it therefore doesn't Refresh changes or Regenerate the table. If you would like to End the Game, Click the Button below.</p>
|
||||
<button on:click={resetBingo}>Stop Bingo and Regenerate</button>
|
||||
<div class="notice-box">
|
||||
<div class="button-container">
|
||||
<button on:click={generateBingo}>Regenerate Bingo</button>
|
||||
<button on:click={downloadPDF}>Download as PDF</button>
|
||||
<button on:click={openSettings}>Configure Bingo</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if running_bingo && !tried_to_regen}
|
||||
<i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="notice-box cookie-notice">
|
||||
<p>Notice: This Website uses functional Cookies to store the Running Bingo Game, Settings and the Entered Bingo Entries.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bingo-container bingo-grid-container">
|
||||
{#if grid.length > 0}
|
||||
<div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
|
||||
{#each grid as row}
|
||||
{#each row as cell}
|
||||
<button class="bingo-cell"
|
||||
on:click={() => { cell.clicked = !cell.clicked; cellClicked(); }}
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') { // Handle Enter or Space key
|
||||
cell.clicked = !cell.clicked;
|
||||
cellClicked();
|
||||
}
|
||||
}}
|
||||
class:clicked={cell.clicked}
|
||||
>{cell.value}</button>
|
||||
{/each}
|
||||
{/each}
|
||||
{#if running_bingo && tried_to_regen}
|
||||
<div class="bingo-running-warning">
|
||||
<p>You are currently playing this game of Bingo and it therefore doesn't Refresh changes or Regenerate the table. If you would like to End the Game, Click the Button below.</p>
|
||||
<button on:click={resetBingo}>Stop Bingo and Regenerate</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if running_bingo && !tried_to_regen}
|
||||
<i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="notice-box cookie-notice">
|
||||
<p>This Website uses functional Cookies to store the Running Bingo Game, Settings and the Entered Bingo Entries.<br><br>They can be deleted in the Settings.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="centered-notice notice-box">
|
||||
<p>Click the Button to generate a new Bingo</p>
|
||||
<button on:click={generateBingo}>Generate Bingo</button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="bingo-container bingo-grid-container">
|
||||
{#if grid.length > 0}
|
||||
<div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
|
||||
{#each grid as row}
|
||||
{#each row as cell}
|
||||
<button class="bingo-cell"
|
||||
on:click={() => { cell.clicked = !cell.clicked; cellClicked(); }}
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') { // Handle Enter or Space key
|
||||
cell.clicked = !cell.clicked;
|
||||
cellClicked();
|
||||
}
|
||||
}}
|
||||
class:clicked={cell.clicked}
|
||||
>{cell.value}</button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="centered-notice notice-box">
|
||||
<p>Click the Button to generate a new Bingo</p>
|
||||
<button on:click={generateBingo}>Generate Bingo</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<body>
|
||||
<div id="alert-background" class="overlay-background">
|
||||
<div class="overlay-content">
|
||||
<h2>Bingo!</h2>
|
||||
|
|
@ -359,4 +363,6 @@ Bingo Item 25`;
|
|||
<button id="close-settings" class="close-btn">Save and Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue