61

codershiyar · codershiyar · commit 4d3ebab71c94 · 2020-06-02T13:04:42.000+02:00
diff --git a/Lesson 61 - الدرس/app.css b/Lesson 61 - الدرس/app.css
@@ -0,0 +1,50 @@
+*{
+    margin: 0px;
+}
+#iphone{
+    width: 100%;
+    display: flex;
+   justify-content: center;
+   border-bottom: 2px solid #a9a9a8;
+   padding: 3px 0px;
+   display: none; 
+}
+#iphone img{
+    height: 65px;
+    width: 65px;
+    object-fit: contain;
+    border-radius: 50%;
+    margin-right: 13px;
+}
+#close-iphone{
+    font-weight: bold;
+    font-size: 26px;
+    line-height: 65px;
+    color: #888888;
+    margin: 0px 13px;
+    cursor: pointer;
+}
+#text-iphone{
+    width: 40%;
+}
+#app_name-iphone{
+    font-weight: bold;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 18px;
+    padding: 11px 0px;
+    color: black;
+}
+#app_title-iphone{
+    font-size: 14px;
+    font-family: monospace;
+    color: black;
+}
+#iphone button{
+    width: 25%;
+    background: rgb(255, 54, 54);
+    color: white;
+    height: 40px;
+    border:0px;
+    margin-top: 15px;
+    border-radius: 14px;
+}
diff --git a/Lesson 61 - الدرس/app.js b/Lesson 61 - الدرس/app.js
@@ -0,0 +1,28 @@
+let section_iphone = document.getElementById("iphone");
+            
+// لجلب بيانات عن جهاز المستخدم
+let user_device = navigator.userAgent.toLocaleLowerCase();
+
+//  للتحقق من إن كان مستخدم يملك جهاز يعمل بنظام ايفون او لا
+if(user_device.includes("iphone")){
+
+    // لتاخير عرض الصندوق حسب المدة الذي تحدده بعد فتح مستخدم للموقعك
+    setTimeout(()=>{
+        section_iphone.style.display = "flex";
+    },5*1000);
+
+    // لكي يودي المستخدم إلى صفحة تحميل تطبيق عند نقر على الزر
+    let app_downlaod = document.getElementById("app_downlaod-iphone");
+    app_downlaod.addEventListener("click", ()=>{
+       window.open("http://codershiyar.com/app","_blank")     
+    }); 
+}else{
+    // لإخفاء العنصر عندما يكون مستخدم جهازه يعمل بنظام ليس بنظام ايفون
+    section_iphone.style.display = "none";
+}
+
+// لإخفاء العنصر عند نقر على علامة اكس
+let close_iphone = document.getElementById("close-iphone");
+close_iphone.addEventListener("click", ()=>{
+    section_iphone.style.display = "none";
+});
diff --git a/Lesson 61 - الدرس/index.html b/Lesson 61 - الدرس/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+    <html >
+        <head>
+            <title>Coder Shiyar</title>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            
+            <link rel="stylesheet" href="app.css">
+        </head>
+        <body>
+         
+            <section id="iphone">
+                <span id="close-iphone"> &times; </span>
+               <img src="logo_icon.png"/>
+               <span id="text-iphone">
+                   <p id="app_name-iphone"> SHIYAR APP </p>
+                   <p id="app_title-iphone"> Free on Iphone Story </p>
+               </span>
+               <button id="app_downlaod-iphone">Open - فتح</button>
+            </section>
+
+
+<script src="app.js"></script>
+        </body> 
+    </html>
diff --git a/Lesson 61 - الدرس/logo_icon.png b/Lesson 61 - الدرس/logo_icon.png
