develop header

This commit is contained in:
Matt Walsh 2022-05-03 16:18:30 -05:00
parent 16541dc21a
commit 8ffb0e744e
5 changed files with 80 additions and 1 deletions

View file

@ -0,0 +1,61 @@
.weather-display {
width: 640px;
height: 480px;
overflow: hidden;
position: relative;
background-image: url(../images/BackGround1_1.png);
/* background-attachment: fixed; */
}
.weather-display .header {
width: 640px;
height: 70px;
padding-top: 30px;
}
.weather-display .header .title {
color: yellow;
text-shadow: 3px 3px black;
font-family: 'Star4000';
font-size: 24pt;
position: absolute;
left: 170px;
top: 25px;
}
.weather-display .header .logo {
top: 30px;
left: 50px;
position: absolute;
}
.weather-display .header .title.single {
top: 40px;
}
.weather-display .header .date-time {
white-space: pre;
color: white;
font-family: 'Star4000 Small';
font-size: 24pt;
text-shadow: 2px 2px black;
left: 430px;
position: absolute;
}
.weather-display .header .date-time#date {
padding-top: 22px;
}
.weather-display .main-has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
.weather-display .scroll {
width: 640px;
height: 80px;
overflow: hidden;
}

View file

@ -28,6 +28,7 @@
<script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
<% } else { %>
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<link rel="stylesheet" type="text/css" href="styles/weatherdisplay.css" />
<script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
@ -89,7 +90,10 @@
<div class="instructions">Enter your location above to continue</div>
</div>
</div>
</div>
<div id="weather-hourly" class="weather-display">
<%- include('partials/hourly.ejs') %>
</div>
</div>
<div id="divTwcBottom">
<div id="divTwcBottomLeft">
<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />

View file

@ -0,0 +1,6 @@
<div class="header">
<div class="logo"><img src="images/Logo3.png"/></div>
<div class="title single"><%-title %></div>
<div class="date-time" id="time">12:00:00PM</div>
<div class="date-time" id="date">MON JAN 1</div>
</div>

View file

@ -0,0 +1,5 @@
<%- include('header.ejs', {title: 'Hourly Forecast'}) %>
<div class="main-has-scroll">
Main
</div>
<%- include('scroll.ejs') %>

View file

@ -0,0 +1,3 @@
<div class="scroll">
Scroll
</div>