asc/webcal-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-12-16

Browse Source
This commit is contained in:
Anthony Correa
2024-12-16 08:25:39 -06:00
parent 35677f7e95
commit f65cf3c1ed
7 changed files with 1961 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
server/app/templates/dashboard.html
View File

@@ -2,29 +2,30 @@
<html>
<head>
<title>Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}})</title>
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<style>{% include "style.css"%}</style>
<meta name="viewport" content="width=600, height=800" />
</head>
<body>
<div class="dashboard">
<div style="height:1em"></div>
<div class="panel top">
<div class="subpanel">
<div class="splitpanel">
<div><i class="wi wi-owm-{{ weather.id }} weather-icon"></i></div>
<div>{{weather.main}}</div>
</div>
<div class="subpanel" style="font-size: 60px;font-weight: bold;vertical-align:top; text-align:right;">
<div class="splitpanel big-text">
{{ today.strftime('%a') }}<br>
{{ today.strftime('%b %-d') }}<br>
{{ today.strftime('%Y') }}<br>
</div>
</div>
<div class="panel bottom week">
{% for day, events in days %}
<div class="row">
{% for day, events in days [:4] %}
<div class="day">
<div id="dotw-1" class="day-title">
{{ day.strftime('%A') }}
<div id="dotw-1" class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%a %-d') }}
</div>
{% for event in events %}
<div class="event">
@@ -36,7 +37,26 @@
{% endfor %}
</div>
{% endfor %}
</div>
<div class="row">
{% for day, events in days [4:] %}
<div class="day">
<div id="dotw-1" class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%a %-d') }}
</div>
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div style="height:1em;text-align: center;"><code>{{extra_debug}} </code><code>{{ today.strftime('%c') }}</code></div>
</div>
</body>
</html>

42
server/app/templates/dashboard_static.html
View File

@@ -1,42 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}})</title>
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=600, height=800" />
</head>
<body>
<div class="dashboard">
<div style="height:1em"></div>
<div class="panel top">
<div class="subpanel">
<div><i class="wi wi-owm-{{ weather.id }} weather-icon"></i></div>
<div>{{weather.main}}</div>
</div>
<div class="subpanel" style="font-size: 60px;font-weight: bold;vertical-align:top; text-align:right;">
{{ today.strftime('%a') }}<br>
{{ today.strftime('%b %-d') }}<br>
{{ today.strftime('%Y') }}<br>
</div>
</div>
<div class="panel bottom week">
{% for day, events in days %}
<div class="day">
<div id="dotw-1" class="day-title">
{{ day.strftime('%A') }}
</div>
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</body>
</html>

78
server/app/templates/style.css
View File

@@ -1,66 +1,106 @@
@import url('http://127.0.0.1:5000/fonts/dinpro/dinpro.css');
@import url('http://127.0.0.1:5000/fonts/noto-emoji.css');
@import url('http://127.0.0.1:5000/fonts/openmoji.css');
@import url('http://127.0.0.1:5000/fonts/weather-icons/weather-icons.css');
body {
height: 800px;
@import url('http://10.0.1.128:56733/fonts/weather-icons/weather-icons.css');
* {
box-sizing: border-box; /* Include padding and borders in size calculations */
}
html, body {
width: 600px;
height: 800px;
margin: 0; /* Prevent any default margins */
padding: 0;
}
.dashboard {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
font-family: sans-serif;
text-align: left;
font-size: 17px;
height: 100%;
width: 100%;
margin: 0 auto; /* Center horizontally */
}
.panel.top {
display:flex;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
flex:0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.panel.top .splitpanel {
flex:1;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
text-align: center;
}
.splitpanel.big-text {
font-size: 60px;
font-weight: bold;
vertical-align:top;
text-align:right;
vertical-align: top;
text-align: right;
}
.splitpanel .weather-icon {
font-size: 200px;
font-size: 180px;
display: block;
margin: auto;
}
.panel.bottom {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
.panel.bottom.week .row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height:50%;
height: 50%;
}
.panel.bottom.week .row .day {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical; /* Old WebKit property for column layout */
-webkit-box-direction: normal; /* Old WebKit property for forward direction */
-webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */
flex-direction: column; /* Standard Flexbox column layout */
border-style: solid;
width: 135px;
vertical-align: top;
width: 135px; /* Fixed width for each day */
margin: 1px;
align-items: center;
align-items: stretch; /* Stretch children to fill the width (optional) */
justify-content: flex-start; /* Align children at the top */
text-align: left;
flex:1;
flex: 1;
}
.day .day-title{
.day .day-title {
background-color: black;
text-align: center;
color: white;
@@ -80,4 +120,8 @@ body {
border-style: solid;
border-radius: 5px;
padding: 2px;
}
code {
font-size: .8em;
}

1838
server/app/templates/weather-icons.css Normal file
View File

File diff suppressed because it is too large Load Diff