html/css done! next, js loading.

This commit is contained in:
Elijah Steres 2020-12-29 22:57:07 -05:00
parent 53da277ee5
commit ed56c8c0ce
3 changed files with 60 additions and 56 deletions

View File

@ -82,7 +82,7 @@ h2 {
.body { .body {
margin: 10px; margin: 10px;
display: grid; display: grid;
grid-template-columns: 3fr 2fr; grid-template-columns: 60% 40%;
grid-template-areas: grid-template-areas:
"scores info" "scores info"
"players players" "players players"
@ -119,6 +119,7 @@ h2 {
padding-top: 8px; padding-top: 8px;
padding-bottom: 4px; padding-bottom: 4px;
margin-left: 15%; margin-left: 15%;
margin-right: 10px;
border-radius: 4px; border-radius: 4px;
} }
@ -156,8 +157,10 @@ h2 {
.score { .score {
background: #4f545c; /*discord's background-accent*/ background: #4f545c; /*discord's background-accent*/
width: 40px; width: 40px;
min-width: 40px;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
margin-left: 10px;
} }
.players { .players {

55
templates/game.html Normal file
View File

@ -0,0 +1,55 @@
<div class="game">
<div class="header">
<div class="inning">
Inning: 🔼 1/9
</div>
<div class="weather">
🌟 Supernova
</div>
</div>
<div class="body">
<div class="scores">
<div class="team">
<div class="team_name">Halifax Fire Sharks</div>
<div class="score">0</div>
</div>
<div class="team">
<div class="team_name">Dead Batteries</div>
<div class="score">1</div>
</div>
</div>
<div class="info">
<div class="field">
<img class="base2" src="/static/img/base_filled.png"/>
<div style="display: flex;">
<img class="base3" src="/static/img/base_empty.png"/>
<img class="base1" src="/static/img/base_empty.png"/>
</div>
</div>
<div class="outs">
<div class="outs_title">OUTS</div>
<div class="outs_count">
<img class="out" src="/static/img/out_out.png"/>
<img class="out" src="/static/img/out_in.png"/>
</div>
</div>
</div>
<div class="players">
<div class="player">
<div class="player_type">Pitcher:</div>
<div class="player_name">Hot Fish Summer</div>
</div>
<div class="player">
<div class="player_type">Batter:</div>
<div class="player_name">Shape Batteries</div>
</div>
</div>
<div class="update">
<div class="update_emoji">🏏</div>
<div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
</div>
</div>
<div class="footer">
<div class="batting">Dead Batteries batting</div>
</div>
</div>

View File

@ -16,61 +16,7 @@
</div> </div>
<div></div> <div></div>
<div class="emptyslot"></div> <div class="emptyslot"></div>
<div class="game"> <div class="emptyslot"></div>
<div class="header">
<div class="inning">
Inning: 🔼 1/9
</div>
<div class="weather">
🌟 Supernova
</div>
</div>
<div class="body">
<div class="scores">
<div class="team">
<div class="team_name">Halifax Fire Sharks</div>
<div class="score">0</div>
</div>
<div class="team">
<div class="team_name">Dead Batteries</div>
<div class="score">1</div>
</div>
</div>
<div class="info">
<div class="field">
<img class="base2" src="/static/img/base_filled.png"/>
<div style="display: flex;">
<img class="base3" src="/static/img/base_empty.png"/>
<img class="base1" src="/static/img/base_empty.png"/>
</div>
</div>
<div class="outs">
<div class="outs_title">OUTS</div>
<div class="outs_count">
<img class="out" src="/static/img/out_out.png"/>
<img class="out" src="/static/img/out_in.png"/>
</div>
</div>
</div>
<div class="players">
<div class="player">
<div class="player_type">Pitcher:</div>
<div class="player_name">Hot Fish Summer</div>
</div>
<div class="player">
<div class="player_type">Batter:</div>
<div class="player_name">Shape Batteries</div>
</div>
</div>
<div class="update">
<div class="update_emoji">🏏</div>
<div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
</div>
</div>
<div class="footer">
<div class="batting">Dead Batteries batting</div>
</div>
</div>
<div class="emptyslot"></div> <div class="emptyslot"></div>
<div class="emptyslot"></div> <div class="emptyslot"></div>
<div class="emptyslot"></div> <div class="emptyslot"></div>