Skip to content

Commit

Permalink
Finished the UI for #9.
Browse files Browse the repository at this point in the history
  • Loading branch information
@MahmoudAoude
MahmoudAoude committed Dec 23, 2020
1 parent 8f009f1 commit b8045fc
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 47 deletions.
11 changes: 10 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
.DS_Store

# Generated by Android Studio
.idea/

# Generated by Prettier VSCode extension
.prettierrc

# Generated by package manager
node_modules/

# Generated by Cordova
/plugins/
/platforms/
/platforms/

# Generated by Cordova Tools VSCode extension
typings/
.vscode/
jsconfig.json
116 changes: 95 additions & 21 deletions www/css/homepage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,85 @@ body {
height: 40vh;
}

.myrow2 {
justify-content: center;
padding-left: 10%;
padding-right: 10%;
/* border: solid 2px gold; */
}

/******************************************************************************************************/
/* Logo and Prayer Window: Layout and Structure */
/******************************************************************************************************/

.row2row1,
.row2row2,
.row2row3,
.row2row4 {
font-family: "Source Sans Pro", sans-serif;
text-align: center;
align-items: center;
color: white;
/* border: solid white 1px; */
}

.row2row1 {
justify-content: center;
height: 44%;
}
.row2row2 {
text-transform: uppercase;
height: 12.5%;
}
.row2row3 {
height: 33%;
justify-content: center;
}
.row2row4 {
text-transform: uppercase;
height: 10.5%;
}

/******************************************************************************************************/
/* Logo and Prayer Window: Content */
/******************************************************************************************************/
.logo {
width: auto;
height: 100%;
filter: invert(100%);
/* border: gold solid 1px; */
}

#first-prayer,
#time-left,
#second-prayer {
margin: 0;
}

#first-prayer {
font-size: 3.5vh;
font-weight: bold;
/* border: red solid 1px; */
}
#time-left {
font-weight: bold;
font-family: helvetica;
font-size: 15vh;
line-height: 0.6;
/* border: black solid 1px; */
}
#second-prayer {
line-height: 0.6;
font-size: 3vh;
font-weight: bold;
/* border: red solid 1px; */
}

/******************************************************************************************************/
/* Slider Open state: Layout and Structure */
/******************************************************************************************************/

.innerRow {
.innerRow3 {
justify-content: center;
align-items: center;
height: 29%;
Expand All @@ -40,50 +114,50 @@ body {
/* border: solid 0.1px black; */
}

.mycol2,
.mycol3,
.mycol4 {
.row3col2,
.row3col3,
.row3col4 {
border-right: solid 1px;
border-left: solid 1px;
border-color: aliceblue;
}

.mycol1,
.mycol2,
.mycol3,
.mycol4,
.mycol5 {
.row3col1,
.row3col2,
.row3col3,
.row3col4,
.row3col5 {
border-top: solid aliceblue 2px;
position: relative;
top: 88%;
min-width: 5%;
}

.mycol1,
.mycol5 {
.row3col1,
.row3col5 {
border-color: aliceblue;
}

.mycol1 {
.row3col1 {
border-left: solid 0px;
border-right: solid 1px;
border-color: aliceblue;
background-color: rgb(26, 31, 50, 1);
}

.mycol2 {
.row3col2 {
background-color: rgb(48, 49, 70, 1);
}

.mycol3 {
.row3col3 {
background-color: rgb(23, 25, 38, 1);
}

.mycol4 {
.row3col4 {
background-color: rgba(84, 71, 91, 1);
}

.mycol5 {
.row3col5 {
border-right: solid 0px;
border-left: solid 1px;
border-color: aliceblue;
Expand Down Expand Up @@ -127,11 +201,11 @@ body {
}
}

.mycol1:hover,
.mycol2:hover,
.mycol3:hover,
.mycol4:hover,
.mycol5:hover {
.row3col1:hover,
.row3col2:hover,
.row3col3:hover,
.row3col4:hover,
.row3col5:hover {
animation: 0.5s slide-up;
border-top: solid aliceblue 0px;
top: 0%;
Expand Down
Binary file added www/img/salah-logo-transparent.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 46 additions & 25 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,78 +50,99 @@
<h2 id="row1" class="prayer-name">Row 1</h2>
</div>
</div>
<!--This is the Second Row(Logo and Prayer Window)-->
<div class="row myrow2">
<div class="col-xs">
<h2 id="row2" class="prayer-name">Row 2</h2>
<!--Logo-->
<div class="row row2row1">
<img class="logo" src="img/salah-logo-transparent.png" alt="logo" />
</div>
<!--first prayer-->
<div class="row row2row2">
<h1 id="first-prayer">Maghrib</h1>
</div>
<!--time left between prayers-->
<div class="row row2row3">
<h1 id="time-left">10</h1>
</div>
<!--second prayer-->
<div class="row row2row4">
<h1 id="second-prayer">to Isha</h1>
</div>
</div>
<!--This is the Third Row(Slider)-->
<div class="row myrow3">
<div class="col mycol1">
<!--Fajr-->
<div class="col row3col1">
<div class="row">
<h2 class="prayer-name">FAJR</h2>
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow"></div>
<div class="row innerRow3"></div>
</div>
<div class="col mycol2">
<!--Zuhr-->
<div class="col row3col2">
<div class="row">
<h2 class="prayer-name">DUHR</h2>
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
</div>
<div class="col mycol3">
<!--Asr-->
<div class="col row3col3">
<div class="row">
<h2 class="prayer-name">ASR</h2>
</div>
<div class="row innerRow"></div>
<div class="row innerRow">
<div class="row innerRow3"></div>
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow"></div>
<div class="row innerRow3"></div>
</div>
<div class="col mycol4">
<!--Maghrib-->
<div class="col row3col4">
<div class="row">
<h2 class="prayer-name">MAGHRIB</h2>
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow"></div>
<div class="row innerRow3"></div>
</div>
<div class="col mycol5">
<!--Isha-->
<div class="col row3col5">
<div class="row">
<h2 class="prayer-name">ISHA</h2>
</div>
<div class="row innerRow"></div>
<div class="row innerRow">
<div class="row innerRow3"></div>
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<div class="row innerRow3">
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script src="cordova.js"></script>
<script src="./js/index.js"></script>
</body>
Expand Down

0 comments on commit b8045fc

Please sign in to comment.