Skip to content

Commit

Permalink
Flexbox styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShazimC
ShazimC committed Sep 28, 2021
1 parent d271aac commit 4e8a668
Show file tree
Hide file tree
Showing 9 changed files with 90 additions and 430 deletions.
Binary file modified SalahWatchFace.wgt
View file
Binary file not shown.
200 changes: 32 additions & 168 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,203 +9,67 @@ body {
background-color: #000;
}

.center {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

#body-bg {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}

.info-indicator {
position: absolute;
width: 88px;
height: 88px;
background-size: contain;
background-repeat: no-repeat;
}

.info-icon {
position: absolute;
width: 73px;
height: 73px;
background-size: contain;
background-repeat: no-repeat;
}

.info-text {
position: absolute;
width: 66px;
height: 20px;
font-size: 20px;
text-align: center;
color: rgb(255, 255, 255);
display: none;
z-index: 1;
}

/*-------TIME-------*/

#formatted-time {
position: absolute;
top: 70px;
left: 20%;
#salah-status {
color: white;
font-size: 35px;
font-size: 30px;
font-weight: bold;
margin: 5px;
}

#salah-status {
position: absolute;
top: 25px;
left: 20%;
#formatted-time {
color: white;
font-size: 25px;
font-size: 45px;
font-weight: bold;
margin: 5px;
}

#time-second-indicator {
position: absolute;
top: 0px;
left: 173.5px;
width: 13px;
height: 360px;
background-image: url('../image/second_indicator.png');
z-index: 3;
}
/*-------CALENDAR-------*/

#time-min-indicator {
position: absolute;
left: 177px;
width: 6px;
height: 360px;
background-image: url('../image/minute_indicator.png');
z-index: 4;
pointer-events: none;
#date-text {
color: white;
font-size: 30px;
font-weight: bold;
margin: 5px;
}

#time-hour-indicator {
position: absolute;
left: 177px;
width: 6px;
height: 360px;
background-image: url('../image/hour_indicator.png');
z-index: 5;
pointer-events: none;
}
/*-------BATTERY + WEATHER-------*/

#time-center-pin {
position: absolute;
top: 170px;
left: 170px;
width: 20px;
height: 20px;
background-image: url('../image/pin.png');
z-index: 6;
#measurements {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
margin: 5px;
}

/*-------BATTERY-------*/

#battery-indicator {
top: 114px;
left: 200px;
background-image: url('../image/status_indicator.png');
z-index: 0;
}

#battery-status {
top: 114px;
left: 200px;
z-index: 1;
}

#battery-icon {
top: 122px;
left: 208px;
z-index: 0;
}

#battery-text {
top: 146px;
left: 211px;
z-index: 0;
}

/*-------AIR-------*/

#air-indicator {
top: 114px;
left: 72px;
background-image: url('../image/status_indicator.png');
z-index: 0;
}

#air-status {
top: 114px;
left: 72px;
z-index: 1;
}

#air-icon {
top: 122px;
left: 80px;
z-index: 0;
}

#air-text {
top: 146px;
left: 83px;
z-index: 0;
}

/*-------CALENDAR-------*/

#calendar-month {
position: absolute;
top: 235px;
left: 117px;
width: 86px;
height: 17px;
font-size: 15px;
font-weight: bold;
color: rgb(255, 255, 255);
text-align: right;
z-index: 0;
}

#calendar-date {
position: absolute;
top: 229px;
left: 203px;
width: 28px;
height: 23px;
font-size: 21px;
color: white;
font-size: 28px;
font-weight: bold;
color: rgb(219, 211, 3);
text-align: center;
z-index: 0;
}

/*-------WEATHER-------*/

#weather-icon {
position: absolute;
top: 257px;
left: 145px;
width: 26px;
height: 26px;
background-size: 26px 26px;
background-repeat: no-repeat;
z-index: 0;
}

#weather-text {
position: absolute;
top: 262px;
left: 171px;
width: 78px;
height: 17px;
font-size: 12px;
color: rgb(255, 255, 255);
text-align: left;
z-index: 0;
color: white;
font-size: 28px;
font-weight: bold;
}
11 changes: 0 additions & 11 deletions data/airPollutionData.xml
View file

This file was deleted.

3 changes: 3 additions & 0 deletions data/weather.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"url": "google.com"
}
28 changes: 0 additions & 28 deletions data/weatherData.json
View file

This file was deleted.

Binary file removed icon.png
View file
Binary file not shown.
31 changes: 8 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,20 @@
</head>

<body>
<div id="body-bg">
<div id="body-bg" class="center">

<div id="body-time">
<div id="salah-status">Loading..</div>
<div id="body-time" class="center">
<div id="salah-status">Updating..</div>
<div id="formatted-time"></div>
</div>

<div id="body-battery">
<div id="battery-indicator" class="info-indicator"></div>
<div id="battery-status" class="info-indicator"></div>
<div id="battery-text" class="info-text"></div>
<div id="battery-icon" class="info-icon"></div>
<div id="body-date" class="center">
<div id="date-text"></div>
</div>

<div id="body-air">
<div id="air-indicator" class="info-indicator"></div>
<div id="air-status" class="info-indicator"></div>
<div id="air-text" class="info-text"></div>
<div id="air-icon" class="info-icon"></div>
</div>

<div id="body-calendar">
<div id="calendar-month"></div>
<div id="calendar-date"></div>
</div>

<div id="body-weather">
<div id="weather-icon"></div>
<div id="weather-text"></div>
<div id="measurements">
<div id="weather-text">23º</div>
<div id="battery-text">..</div>
</div>

</div>
Expand Down

0 comments on commit 4e8a668

Please sign in to comment.