qr code and model examples

heshamelmasry77 · Oct 13, 2023 · 5e43747 · 5e43747
1 parent deb3ae6
commit 5e43747
Show file tree

Hide file tree

Showing 11 changed files with 867 additions and 0 deletions.
diff --git a/day-4-start/.idea/.gitignore b/day-4-start/.idea/.gitignore
diff --git a/day-4-start/.idea/day-4-start.iml b/day-4-start/.idea/day-4-start.iml
diff --git a/day-4-start/.idea/modules.xml b/day-4-start/.idea/modules.xml
diff --git a/day-4-start/.idea/vcs.xml b/day-4-start/.idea/vcs.xml
diff --git a/day-4-start/assets/images/qr-code.png b/day-4-start/assets/images/qr-code.png
diff --git a/day-4-start/assets/images/qr-code.svg b/day-4-start/assets/images/qr-code.svg
diff --git a/day-4-start/button-library.html b/day-4-start/button-library.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>:: Button Library :: </title>
+    <style>
+        * {
+            box-sizing: border-box;
+            font-family: Monaco, serif;
+        }
+
+        .btn {
+            background: lightgray;
+            border: 1px solid lightgray;
+            outline: none;
+            cursor: pointer;
+            padding: .5em 1em;
+            border-radius: 8px;
+        }
+
+        .btn:hover, .btn:focus {
+            background-color: darkgray;
+            box-shadow: 0 0 5px 0 lightgray;
+        }
+
+        .btn.btn-primary {
+            background-color: purple;
+            color: white;
+            border-color: mediumpurple;
+        }
+
+        .btn.btn-primary:hover, .btn.btn-primary:focus {
+            background-color: rebeccapurple;
+            box-shadow: 0 0 5px 0 mediumpurple;
+        }
+
+        .btn.btn-accent {
+            background-color: blue;
+            color: white;
+            border-color: darkblue;
+        }
+
+        .btn.btn-accent:hover, .btn.btn-accent:focus {
+            background-color: darkblue;
+            box-shadow: 0 0 5px 0 dodgerblue;
+        }
+    </style>
+</head>
+
+
+<body>
+
+<button class="btn">Default</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-accent">Accent</button>
+<button>Danger</button>
+<button>Large</button>
+<button>Small</button>
+<button>Pill</button>
+<button>Custom</button>
+
+</body>
+</html>
+
+
diff --git a/day-4-start/css/styles.css b/day-4-start/css/styles.css
@@ -0,0 +1,99 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #555;
+    font-family: Monaco, serif;
+}
+
+.modal {
+    height: 80vh;
+    width: 900px;
+    max-width: 80%;
+    /*THIS IS A TRICK*/
+    overflow: auto;
+    /*WE DID THIS OVERFLOW HIDDEN TO MAKE
+    THE SCROLL WORK IF THE CONTENT IS MORE*/
+    /*THAN 80v h OF THE SCREEN IT SCROLLS*/
+    background-color: white;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem;
+    padding-bottom: .5rem;
+    border-bottom: 1px solid #777;
+}
+
+.title {
+    font-size: 1.5rem;
+    padding-top: 1rem;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    align-self: flex-start;
+    padding-top: .5rem;
+}
+
+.body {
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1rem;
+}
+
+.footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: .5rem;
+    border-top: 1px solid #777;
+}
+
+.footer .btn {
+    margin-right: .5rem;
+}
+
+.footer .btn:last-child {
+    margin-right: initial;
+}
+
+.btn {
+    padding: .5em 1em;
+    font-size: inherit;
+    border-radius: .3em;
+    border: none;
+    color: white;
+    cursor: pointer;
+}
+
+.btn.btn-primary {
+    background-color: #1CA;
+}
+
+.btn.btn-primary:hover, .btn.btn-primary:focus {
+    background-color: #0A8;
+}
+
+.btn.btn-danger {
+    background-color: #C33;
+}
+
+.btn.btn-danger:hover, .btn.btn-danger:focus {
+    background-color: #A11;
+}
diff --git a/day-4-start/index.html b/day-4-start/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>:: Modal Example :: </title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+
+
+<body>
+<div class="modal">
+
+    <!--    HEADER-->
+    <div class="header">
+        <span class="title">Title</span>
+        <button class="close-button">X</button>
+    </div>
+
+    <!--    BODY-->
+    <div class="body">
+        Minions ipsum hahaha poulet tikka masala baboiii daa wiiiii butt. Hana dul sae butt jeje belloo! Daa tulaliloo
+        jeje butt pepete jeje. Hahaha la bodaaa ti aamoo! Bappleees me want bananaaa! Wiiiii uuuhhh. Gelatooo jeje
+        poopayee poulet tikka masala pepete belloo! Me want bananaaa! Uuuhhh underweaaar me want bananaaa! Jiji la
+        bodaaa ti aamoo! Aaaaaah gelatooo ti aamoo!Minions ipsum hahaha poulet tikka masala baboiii daa wiiiii butt.
+        Hana dul sae butt jeje belloo! Daa tulaliloo
+        jeje butt pepete jeje. Hahaha la bodaaa ti aamoo! Bappleees me want bananaaa! Wiiiii uuuhhh. Gelatooo jeje
+        poopayee poulet tikka masala pepete belloo! Me want bananaaa! Uuuhhh underweaaar me want bananaaa! Jiji la
+        bodaaa ti aamoo! Aaaaaah gelatooo ti aamoo!Minions ipsum hahaha poulet tikka masala baboiii daa wiiiii butt.
+        Hana dul sae butt jeje belloo! Daa tulaliloo
+        jeje butt pepete jeje. Hahaha la bodaaa ti aamoo! Bappleees me want bananaaa! Wiiiii uuuhhh. Gelatooo jeje
+        poopayee poulet tikka masala pepete belloo! Me want bananaaa! Uuuhhh underweaaar me want bananaaa! Jiji la
+        bodaaa ti aamoo! Aaaaaah gelatooo ti aamoo!Minions ipsum hahaha poulet tikka masala baboiii daa wiiiii butt.
+        Hana dul sae butt jeje belloo! Daa tulaliloo
+        jeje butt pepete jeje. Hahaha la bodaaa ti aamoo! Bappleees me want bananaaa! Wiiiii uuuhhh. Gelatooo jeje
+        poopayee poulet tikka masala pepete belloo! Me want bananaaa! Uuuhhh underweaaar me want bananaaa! Jiji la
+        bodaaa ti aamoo! Aaaaaah gelatooo ti aamoo!Minions ipsum hahaha poulet tikka masala baboiii daa wiiiii butt.
+        Hana dul sae butt jeje belloo! Daa tulaliloo
+        jeje butt pepete jeje. Hahaha la bodaaa ti aamoo! Bappleees me want bananaaa! Wiiiii uuuhhh. Gelatooo jeje
+        poopayee poulet tikka masala pepete belloo! Me want bananaaa! Uuuhhh underweaaar me want bananaaa! Jiji la
+        bodaaa ti aamoo! Aaaaaah gelatooo ti aamoo!
+    </div>
+
+    <!--    FOOTER-->
+    <div class="footer">
+        <button class="btn btn-primary">Ok</button>
+        <button class="btn btn-danger">Cancel</button>
+    </div>
+
+</div>
+
+</body>
+</html>
+
+