Innovation/nightui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Start work on server and templates

Browse source
This commit is contained in:
Innovation 2024-03-23 08:34:34 -05:00
parent 3a4993319a
commit ea2967643e
4 changed files with 203 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
src/**/__pycache__

3
src/execute.sh Executable file
View file

@ -0,0 +1,3 @@
#!/bin/bash
export FLASK_APP=nightserver.py
flask run

6
src/nightserver.py Normal file
View file

@ -0,0 +1,6 @@
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def uiindex():
return render_template('index.html')

193
src/templates/index.html Normal file
View file

@ -0,0 +1,193 @@
<html>
<head>
<style>
body {
background-color: black;
text-align: center;
}
p {
color: red;
}
#offset {
display: flex;
flex-direction: column;
height: auto;
margin-top: 1%;
margin-bottom: 1%;
margin-right: 1%;
margin-left: 1%;
height: 96%;
border: 1px solid #F00; /* TODO: Remove this later. */
}
/* Below are all top elements - Vitals, Top Message, and Map */
#topElements {
padding: 2px;
display: flex;
flex-wrap: wrap;
border: 1px solid #0FF; /* TODO: Remove this later */
}
/* Below are all Vitals styling */
#vitals {
margin-left: 2px;
/*flex-grow: 1;*/
width: 30%;
border: 1px solid #F00; /* TODO: Remove this later. */
}
/* Below are all Top Message styling */
#topMessage {
flex-grow: 2;
margin-left: 2px;
margin-right: 2px;
border: 1px solid #0F0; /* TODO: Remove this later */
}
/* Below are all Map styling */
#map {
margin-right: 2px;
width: 30%;
border: 1px solid #00F; /* TODO: Remove this later */
}
#mapElements {
margin-right: 0;
margin-left: auto;
max-width: 30%;
height: 100%;
}
/* Contains project name and compass */
#mapTop {
display: flex;
flex: none;
flex-direction: row-reverse;
max-width: 20%;
line-height: 0;
margin-right: 0;
margin-left: auto;
}
#projectName {
}
#compass {
height: 0;
padding-bottom: 100%;
width: 100%;
border: 1px solid #F00; /* TODO: Remove later */
margin-left: 8px;
flex-shrink: 0;
}
/* Contains the map itself */
#mapProper {
height: 0;
padding-bottom: 100%;
width: 100%;
border: 1px solid #5FE0E9;
max-width: 100%;
}
/* Contains the time */
#mapTime {
max-width: 10%;
}
#time {
/*text-align: right;*/
line-height: 0;
color: #5FE0E9
}
/* ------------------------------------- */
/* Below are all center elements - Comms, Popup, and Info */
#centerElements {
flex-grow: 2;
display: flex;
margin-top: 2px;
border: 1px solid #0FF; /* TODO: Remove this later */
}
#commsPanel {
width: 20%;
/*flex-grow: 1;*/
margin-left: 2px;
border: 1px solid #F00; /* TODO: Remove this later */
}
#popupPanel {
flex-grow: 2;
margin-left: 2px;
margin-right: 2px;
border: 1px soild #0F0; /* TODO: Remove this later */
}
#infoPanel {
width: 20%;
/*flex-grow: 1;*/
margin-right: 2px;
border: 1px solid #00F; /* TODO: Remove this later */
}
#bottomElements {
flex-grow: 1;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid #0FF; /* TODO: Remove this later */
}
</style>
</head>
<body>
<!-- Handles x- and y-offset -->
<div id="offset">
<div id="topElements">
<div id="vitals">
<p>Vitals</p>
</div>
<div id="topMessage">
<p>Top message</p>
</div>
<div id="map">
<div id="mapElements">
<div id="mapTop">
<div id="compass">
</div>
<div id="projectName">
<p>K.A.T.I.E.</p>
</div>
</div>
<div id="mapProper">
</div>
<div id="mapTime">
<p id="time">00:00:00</p>
</div>
</div>
</div>
</div>
<div id="centerElements">
<div id="commsPanel">
<p>Comms</p>
</div>
<div id="popupPanel">
<p>Popup</p>
</div>
<div id="infoPanel">
<p>Info</p>
</div>
</div>
<div id="bottomElements">
<p>Test2</p>
</div>
</div>
</body>
</html>