daniel_kauss/chipburners_web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Daniel Kauss Serna 2026-01-26 13:19:50 +01:00
commit 6667a969b7
10 changed files with 1340 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
static/Geo-Regular.woff2 Normal file
View file

Binary file not shown.

157
static/monthView.html Normal file
View file

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Month View Calendar Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar-wrapper">
<header class="calendar-header">
<h1 class="view-title">Month View</h1>
<nav class="calendar-nav">
<a href="?month=09&year=2023" class="nav-link">&laquo; Prev Month</a>
<a href="?month=10&year=2023" class="nav-link">This Month</a>
<a href="?month=11&year=2023" class="nav-link">Next Month &raquo;</a>
</nav>
<h2 class="month-name">October 2023</h2>
</header>
<table class="calendar-table">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td class="other-month">
<span class="day-number">25</span>
</td>
<td class="other-month">
<span class="day-number">26</span>
</td>
<td class="other-month">
<span class="day-number">27</span>
</td>
<td class="other-month">
<span class="day-number">28</span>
</td>
<td class="other-month">
<span class="day-number">29</span>
</td>
<td class="other-month">
<span class="day-number">30</span>
</td>
<td>
<span class="day-number">1</span>
<ul class="event-list">
<li class="event-item">Rent Due</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="day-number">2</span>
</td>
<td>
<span class="day-number">3</span>
<ul class="event-list">
<li class="event-item">Team Meeting (10am)</li>
<li class="event-item urgent">Project Deadline</li>
</ul>
</td>
<td>
<span class="day-number">4</span>
</td>
<td>
<span class="day-number">5</span>
</td>
<td class="current-day">
<span class="day-number">6</span>
<ul class="event-list">
<li class="event-item personal">Dentist Appt</li>
</ul>
</td>
<td>
<span class="day-number">7</span>
<ul class="event-list">
<li class="event-item">Grocery shopping</li>
</ul>
</td>
<td>
<span class="day-number">8</span>
</td>
</tr>
<tr>
<td><span class="day-number">9</span></td>
<td><span class="day-number">10</span></td>
<td><span class="day-number">11</span></td>
<td><span class="day-number">12</span></td>
<td><span class="day-number">13</span></td>
<td>
<span class="day-number">14</span>
<ul class="event-list">
<li class="event-item">Birthday Party</li>
</ul>
</td>
<td><span class="day-number">15</span></td>
</tr>
<tr>
<td><span class="day-number">16</span></td>
<td><span class="day-number">17</span></td>
<td>
<span class="day-number">18</span>
<ul class="event-list">
<li class="event-item urgent">Server Maintenance</li>
</ul>
</td>
<td><span class="day-number">19</span></td>
<td><span class="day-number">20</span></td>
<td><span class="day-number">21</span></td>
<td><span class="day-number">22</span></td>
</tr>
<tr>
<td><span class="day-number">23</span></td>
<td><span class="day-number">24</span></td>
<td><span class="day-number">25</span></td>
<td><span class="day-number">26</span></td>
<td><span class="day-number">27</span></td>
<td><span class="day-number">28</span></td>
<td><span class="day-number">29</span></td>
</tr>
<tr>
<td><span class="day-number">30</span></td>
<td>
<span class="day-number">31</span>
<ul class="event-list">
<li class="event-item">Halloween Party</li>
</ul>
</td>
<td class="other-month"><span class="day-number">1</span></td>
<td class="other-month"><span class="day-number">2</span></td>
<td class="other-month"><span class="day-number">3</span></td>
<td class="other-month"><span class="day-number">4</span></td>
<td class="other-month"><span class="day-number">5</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

469
static/style.css Normal file
View file

@ -0,0 +1,469 @@
/*
:root {
--black-base: #141414;
--black-surface: #1f1f1f;
--black-elevated: #10101a;
--black4: #0f0d0c;
--accent-red: #e88a80;
--accent-orange: #d3a07a;
--accent-cream: #eed9bf;
--text-main: #d7d4f5;
--ui-ice: #e3e8f5;
--ui-blue: #afb8e6;
--grey-muted: #808080;
--grid-color: rgba(207, 216, 230, 0.1);
--font-main: "Geo", "Courier New", monospace;
--spacing-md: 2rem;
--spacing-sm: 1rem;
}
*/
:root {
--black-base: #0d0f12;
--black-surface: #161a1f;
--black-elevated: #21262d;
--accent-red: #e88a80;
--accent-orange: #d3a07a;
--accent-cream: #eed9bf;
--text-main: #c9d1d9;
--ui-blue: #8fa1d0;
--ui-ice: #e3e8f5;
--grey-muted: #6e7681;
--grid-color: rgba(143, 161, 208, 0.08);
--highlight-soft: rgba(240, 240, 255, 0.07);
--highlight-hard: rgba(240, 240, 255, 0.13);
--highlight-red: rgba(232, 138, 128, 0.05);
--font-main: "Geo", "Courier New", monospace;
--spacing-md: 2rem;
--spacing-sm: 1rem;
}
@font-face {
font-family: Geo;
src: url("/Geo-Regular.woff2");
/* url of the font */
}
/* idk this is good? */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: var(--black-base);
/* grid, idk */
/* background-image: */
/* linear-gradient(var(--grid-color) 1px, transparent 1px), */
/* linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); */
/* background-size: 30px 30px; */
color: var(--accent-cream);
font-family: var(--font-main);
font-weight: 400;
font-size: 25px;
line-height: 1.2;
margin: 0;
padding-bottom: 50px;
}
img {
max-width: 100%;
height: auto;
display: block;
border: 1px solid var(--grey-muted);
}
h1,
h2,
h3 {
margin-top: 0;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
a {
color: var(--ui-ice);
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color 0.2s, border-color 0.2s;
}
a:hover,
a:focus {
color: var(--accent-orange);
border-bottom-color: var(--accent-orange);
outline: none;
}
.site-header {
padding: var(--spacing-sm);
margin-bottom: var(--spacing-md);
background: var(--black-surface);
border-image: linear-gradient(to right,
var(--accent-red), var(--accent-orange), var(--text-main), var(--ui-ice), var(--ui-blue)) 1;
border-bottom: 1px solid var(--grey-muted);
}
.nav-list {
padding: 0;
margin: 0 auto;
max-width: 600px;
display: flex;
justify-content: center;
gap: 30px;
list-style-type: none;
flex-wrap: wrap;
/* Idk if his is good */
}
.nav-list a {
font-size: 1.2rem;
padding: 5px 10px;
}
/* Maybe change back to single line */
.nav-list a:hover,
.nav-list a.active {
border-bottom: 2px solid var(--text-main);
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
.layout {
display: flex;
gap: 3rem;
align-items: flex-start;
}
.content {
/* background-color: var(--black4); */
flex: 2.5;
min-width: 0;
border-left: 2px solid var(--accent-red);
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
padding-bottom: var(--spacing-md);
}
.content h1 {
color: var(--accent-red);
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.lead {
font-size: 1.2rem;
color: var(--accent-orange);
margin-bottom: var(--spacing-md);
}
figure {
margin: 0;
background: var(--black-soft);
padding: 10px;
border: 1px solid var(--grey-muted);
}
figcaption {
font-size: 0.9rem;
color: var(--grey-muted);
margin-top: 5px;
text-align: right;
}
.sidebar {
flex: 1;
/* background: var(--black3); */
border-left: 1px solid var(--ui-blue);
padding: var(--spacing-sm);
/* Idk maybe this is bad*/
position: sticky;
top: 20px;
}
.events-panel h2 {
color: var(--ui-blue);
font-size: 1.5rem;
border-bottom: 1px solid var(--ui-blue);
padding-bottom: 10px;
margin-bottom: 15px;
}
.event-list {
list-style: none;
padding: 0;
margin: 0;
}
.event-group {
margin-bottom: 20px;
}
.date-header {
display: block;
color: var(--text-main);
font-weight: bold;
margin-bottom: 8px;
text-transform: uppercase;
}
.daily-events {
list-style: none;
padding-left: 0;
margin: 0;
border-left: 1px dashed var(--grey-muted);
}
.daily-events li {
display: flex;
/* justify-content: space-between; */
padding: 5px 10px;
color: var(--ui-ice);
transition: background-color 0.1s;
}
.daily-events li:hover {
background-color: var(--highlight-soft);
}
.event-time {
color: var(--grey-muted);
font-size: 0.9em;
}
.event-title {
/* text-align: right; */
text-align: left;
padding-left: 12px;
}
@media (max-width: 800px) {
.layout {
flex-direction: column;
gap: var(--spacing-md);
}
.content {
border-left: none;
border-top: 2px solid var(--accent-red);
padding: var(--spacing-sm);
}
.sidebar {
width: 100%;
position: static;
}
.site-header {
margin-bottom: 1rem;
}
}
/* Calendar ,TODO move to another file? */
.calendar-wrapper {
max-width: 1200px;
margin: 25px auto;
background: var(--black-surface);
padding: 25px;
border: 1px solid var(--grey-muted);
}
.calendar-header {
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid var(--accent-red);
border-image: linear-gradient(to right, var(--accent-red), var(--accent-orange), var(--text-main), var(--ui-ice), var(--ui-blue)) 1;
padding-bottom: 20px;
}
.view-title {
font-size: 1rem;
color: var(--text-main);
margin: 0 0 5px 0;
text-transform: uppercase;
letter-spacing: 2px;
}
.month-name {
font-size: 3rem;
margin: 5px 0;
color: var(--accent-red);
text-transform: uppercase;
}
.calendar-nav {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.nav-link {
text-decoration: none;
color: var(--ui-ice);
font-weight: 400;
padding: 8px 20px;
border: 1px dashed var(--ui-ice);
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 0.9rem;
}
.nav-link:hover {
background-color: var(--accent-orange);
color: var(--black-base);
border-style: solid;
border-color: var(--accent-orange);
}
.calendar-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background-color: var(--black4);
}
.calendar-table th {
background-color: var(--black-elevated);
color: var(--ui-blue);
padding: 15px;
text-align: center;
border: 1px solid var(--grey-muted);
font-weight: 400;
text-transform: uppercase;
font-size: 0.8rem;
}
.calendar-table td {
border: 1px solid var(--grid-color);
height: 140px;
vertical-align: top;
padding: 10px;
background-color: transparent;
transition: background-color 0.1s;
}
.calendar-table td:hover {
background-color: var(--highlight-soft);
}
.calendar-table td.other-month {
background-color: var(--black-base);
color: var(--grey-muted);
}
.day-number {
font-weight: 400;
font-size: 1.3rem;
margin-bottom: 10px;
display: block;
color: var(--text-main);
}
.current-day {
background-color: var(--highlight-red) !important;
}
.current-day .day-number {
color: var(--accent-red);
text-decoration: underline;
text-underline-offset: 4px;
}
.event-item {
background-color: var(--black-surface);
color: var(--ui-blue);
padding: 2px 3px;
margin-bottom: 6px;
border: 1px solid var(--ui-blue);
border-left: 2px solid var(--ui-blue);
font-size: 1.3rem;
/*! white-space: nowrap; */
overflow: hidden;
text-overflow: None;
transition: background-color 0.1s;
}
.event-item a:hover {
text-decoration: none;
}
.event-item:hover {
/* kinda cool, maybe later more*/
/* transform: translateX(3px); */
/* this breaks the popup :( */
/* filter: brightness(1.2); */
background-color: var(--highlight-hard);
}
.event-popup {
display: block;
opacity: 0;
visibility: hidden;
position: fixed;
top: 10%;
left: 10%;
background: var(--black-base);
width: 80%;
height: 80%;
padding: 20px;
z-index: 1;
border: 3px solid;
border-image: linear-gradient(to right, var(--accent-red), var(--accent-orange), var(--text-main), var(--ui-ice), var(--ui-blue)) 1;
transition: opacity 0.1;
}
.event-popup h1 {
border-bottom: 1px solid var(--text-main);
display: flex;
justify-content: space-between;
}
.event-popup:target {
visibility: visible;
opacity: 1;
}
/* .show .event-popup { */
/* visibility: visible; */
/* -webkit-animation: fadeIn 0.1s; */
/* animation: fadeIn 0.1s */
/* } */
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}