lucasoskorep/mta-sign
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Basic Website Design

Browse Source
This commit is contained in:
Lucas
2021-07-11 16:48:38 -04:00
parent e2e0c99132
commit f3f7ab49b0
5 changed files with 119 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
templates/layouts/index.html
View File

@@ -10,19 +10,32 @@
</head>
<body>
Yo This will be a kickass display coming soon^tm
<br>
<span>
new test
</span>
<br>
<span>
<button id="test_button">Test Button</button>
</span>
<br>
<span id="result">
<div id="main_div">
<div id="header_div">
<span>PI MTA TRACKER</span>
</div>
<div class="station_div">
<div class="station_header">
<span>Times Square Station</span>
</div>
<div class="direction_div">
<div class="direction_header"> North</div>
<div>Train 1 Info</div>
<div>Train 2 Info</div>
<div>Train 3 Info</div>
</div>
<div class="direction_div">
<div class="direction_header"> South</div>
<div>Train 1 Info</div>
<div>Train 2 Info</div>
<div>Train 3 Info</div>
</div>
</div>
</span>
<button id="test_button">Test Button</button>
<span id="result"></span>
</div>
<footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

80
templates/static/css/style.css Normal file
View File

@@ -0,0 +1,80 @@
#main_div {
margin: 10px;
width: 90%;
position: absolute;
left: 50%;
margin-left: -45%;
min-width: 500px;
background-color: blueviolet;
padding: 10px;
}
#test_span {
background-color: blue;
}
#header_div {
height: 75px;
margin: 10px;
padding: 10px;
display: flex;
background-color: coral;
}
.station_div {
display: block;
overflow: auto;
margin: 10px;
padding: 10px;
background-color: lime;
}
.station_header {
height: 75px;
padding: 10px;
border-radius: 25px 25px 1px 1px;
display: flex;
background-color: cornflowerblue;
}
.direction_div {
height: 50%;
width: 50%;
float: left;
border-radius: 1px 1px 25px 25px;
background-color: aquamarine;
}
.direction_div div {
padding: 10px;
/*margin: 10px;*/
border-radius: 1px;
background-color: chocolate;
}
/*.direction_div div:first-child{*/
/* border-radius: 25px 25px 1px 1px;*/
/*}*/
.direction_div div:last-child {
border-radius: 1px 1px 25px 25px;
}
.direction_header {
background-color: bisque !important;
/*border-radius: 1px;*/
}
/*div {*/
/* border-radius: 25px;*/
/*}*/
span {
display: inline-flex;
vertical-align: middle;
align-items: center;
}