wdi-sg · alan88wy · Dec 15, 2018 · Dec 15, 2018 · Dec 16, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/Frame/DeviceFrame.jpg b/Frame/DeviceFrame.jpg
diff --git a/Frame/HomeScreenMockup.png b/Frame/HomeScreenMockup.png
diff --git a/Icons/.DS_Store b/Icons/.DS_Store
diff --git a/Icons/1.png b/Icons/1.png
diff --git a/Icons/10.png b/Icons/10.png
diff --git a/Icons/11.png b/Icons/11.png
diff --git a/Icons/12.png b/Icons/12.png
diff --git a/Icons/13.png b/Icons/13.png
diff --git a/Icons/14.png b/Icons/14.png
diff --git a/Icons/15.png b/Icons/15.png
diff --git a/Icons/16.png b/Icons/16.png
diff --git a/Icons/17.png b/Icons/17.png
diff --git a/Icons/18.png b/Icons/18.png
diff --git a/Icons/19.png b/Icons/19.png
diff --git a/Icons/2.png b/Icons/2.png
diff --git a/Icons/20.png b/Icons/20.png
diff --git a/Icons/3.png b/Icons/3.png
diff --git a/Icons/4.png b/Icons/4.png
diff --git a/Icons/5.png b/Icons/5.png
diff --git a/Icons/6.png b/Icons/6.png
diff --git a/Icons/7.png b/Icons/7.png
diff --git a/Icons/8.png b/Icons/8.png
diff --git a/Icons/9.png b/Icons/9.png
diff --git a/Icons/Mail.png b/Icons/Mail.png
diff --git a/Icons/Messages.png b/Icons/Messages.png
diff --git a/Icons/Phone.png b/Icons/Phone.png
diff --git a/Icons/Safari.png b/Icons/Safari.png
diff --git a/Icons/Telephone.png b/Icons/Telephone.png
diff --git a/Icons/message.png b/Icons/message.png
diff --git a/Icons/music.png b/Icons/music.png
diff --git a/Icons/safari.jpg b/Icons/safari.jpg
diff --git a/README.md b/README.md
diff --git a/Wallpaper/Default.jpg b/Wallpaper/Default.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="styles.css">
+    <title>IOS</title>
+</head>
+
+<body>
+
+    <!-- <header class='ios-header'></header> -->
+    <!-- <div id='bg'>
+        <img id='bg-img' src='Wallpaper/Default.jpg' alt=" Default">
+    </div> -->
+    <div class='status'>
+        <div class="status-signal">
+            <div id='status-signal-01' class='status-signal-attribute'></div>
+            <div id='status-signal-02' class='status-signal-attribute'></div>
+            <div id='status-signal-03' class='status-signal-attribute'></div>
+            <div id='status-signal-04' class='status-signal-attribute'></div>
+        </div>
+        <p id='status-date'></p>
+        <div class="status-battery"></div>
+    </div>
+
+    <div class='ios-body'>
+        <img class='icon-image' src="icons/1.png" alt="1">
+        <img class='icon-image' src="icons/2.png" alt="2">
+        <img class='icon-image' src="icons/3.png" alt="3">
+        <img class='icon-image' src="icons/4.png" alt="4">
+        <img class='icon-image' src="icons/5.png" alt="5">
+        <img class='icon-image' src="icons/6.png" alt="6">
+        <img class='icon-image' src="icons/7.png" alt="7">
+        <img class='icon-image' src="icons/8.png" alt="8">
+        <img class='icon-image' src="icons/9.png" alt="9">
+        <img class='icon-image' src="icons/10.png" alt="10">
+        <img class='icon-image' src="icons/11.png" alt="11">
+        <img class='icon-image' src="icons/12.png" alt="12">
+        <img class='icon-image' src="icons/13.png" alt="13">
+        <img class='icon-image' src="icons/14.png" alt="14">
+        <img class='icon-image' src="icons/15.png" alt="15">
+        <img class='icon-image' src="icons/16.png" alt="16">
+        <img class='icon-image' src="icons/17.png" alt="17">
+        <img class='icon-image' src="icons/18.png" alt="18">
+        <img class='icon-image' src="icons/19.png" alt="19">
+        <img class='icon-image' src="icons/20.png" alt="20">
+    </div>
+    <div class='page'>
+        <div class='page-no' id='page-no-01'></div>
+        <div class='page-no' id='page-no-02'></div>
+        <div class='page-no' id='page-no-03'></div>
+    </div>
+    <footer class='ios-footer'>
+            <img class='ios-footer-image' src="icons/Telephone.png" alt="phone">
+            <img class='ios-footer-image' src="icons/Safari.png" alt="Safari">
+            <img class='ios-footer-image' src="icons/messages.png" alt="Message">
+            <img class='ios-footer-image' src="icons/music.png" alt="Music">
+    </footer>
+    <script src='scripts.js'></script>
+</body>
+
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,32 @@
+function getTodaysDate() {
+    var today = new Date();
+    var day = today.getDate();
+    var month = today.getMonth() + 1;
+    var year = today.getFullYear();
+    var hour = today.getHours();
+    var minute = today.getMinutes();
+
+    if (day < 10) {
+        day = '0' + day
+    }
+
+    if (month < 10) {
+        month = '0' + month
+    }
+
+    if (hour < 10) {
+        hour = '0' + hour
+    }
+
+    if (minute < 10) {
+        minute = '0' + minute
+    }
+
+    today = day + '/' + month + '/' + year + " " + hour + ":" + minute;
+
+    return today
+}
+
+// var today = getTodaysDate();
+var today = document.getElementById('status-date');
+today.innerText = getTodaysDate();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,135 @@
+/* html {
+	background: url('Wallpaper/Default.jpg') no-repeat center center fixed;
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+} */
+
+body {
+    background: url(Wallpaper/Default.jpg) no-repeat center;
+    background-size: 375px 667px;
+    ;
+    max-width: 375px;
+    height: 667px;
+    overflow: hidden;
+    margin: auto;
+}
+
+.status {
+    margin-top: 2px;
+    width: 370px;
+}
+
+.status-signal {
+    display: inline-block;
+    width: 140px;
+    height: 30px;
+}
+
+.status-signal-attribute {
+    display: inline-block;
+    width: 2px;
+    background-color: white;
+    margin: 0px;
+    border-width: 1px;
+    padding: 0px;
+}
+
+#status-signal-01 {
+    height: 2px;
+}
+
+#status-signal-02 {
+    height: 4px;
+}
+
+#status-signal-03 {
+    height: 6px;
+}
+
+#status-signal-04 {
+    height: 8px;
+}
+
+#status-date {
+    display: inline-block;
+    color: white;
+    font-size: 12px;
+    margin-top: 2px;
+    width: 100px;
+    height: 10px;
+    text-align: center;
+}
+
+.status-battery {
+    display: inline-block;
+    width: 18px;
+    height: 8px;
+    background-color: white;
+    margin-left: 100px;
+    border-width: 1px;
+    padding: 0px;
+}
+
+.ios-body {
+    width: 375px;
+    height: 550px;
+    /* margin-left: 30px; */
+    /* margin-right: 30px; */
+    border-width: 60px;
+    /* padding-left: 16px;
+    padding-right: 16px; */
+}
+
+.icon-image {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    padding: 15px;
+}
+
+.page {
+    display: block;
+    margin-left: 150px;
+    margin-bottom: 0;
+    width: 100px;
+    height: 10px;
+}
+
+.page-no {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: white;
+    margin-left: 10px;
+    border-width: 1px;
+    padding: 0px;
+    border-radius: 50%;
+}
+
+#page-no-01 {
+    background-color: rgb(228, 222, 222);
+}
+
+#page-no-03 {
+    background-color: rgb(228, 222, 222);
+}
+
+.ios-footer {
+    display: block;
+    margin-top: 17px;
+    background-color: rgb(250, 204, 143);
+    /* padding: 100px; */
+    /* margin: 0 auto; */
+    /* border: 0px; */
+    width: 375px;
+    height: 80px;
+}
+
+.ios-footer-image {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    padding: 15px;
+}