Update to v1.3

mhmdmhd6 · Jul 9, 2021 · deb22f3 · deb22f3
1 parent 0771b04
commit deb22f3
Show file tree

Hide file tree

Showing 23 changed files with 505 additions and 42 deletions.
diff --git a/icon/add.svg b/icon/add.svg
diff --git a/icon/alarm.png b/icon/alarm.png
diff --git a/icon/app store.jpg b/icon/app store.jpg
diff --git a/icon/app-store.png b/icon/app-store.png
diff --git a/icon/battery_charging_full_black_24dp.svg b/icon/battery_charging_full_black_24dp.svg
diff --git a/icon/calculator.png b/icon/calculator.png
diff --git a/icon/calendar.png b/icon/calendar.png
diff --git a/icon/contacts.png b/icon/contacts.png
diff --git a/icon/delete.svg b/icon/delete.svg
diff --git a/icon/dictionary.png b/icon/dictionary.png
diff --git a/icon/home.png b/icon/home.png
diff --git a/icon/launchpad.png b/icon/launchpad.png
diff --git a/icon/mail.png b/icon/mail.png
diff --git a/icon/messages.png b/icon/messages.png
diff --git a/icon/netnewswire.png b/icon/netnewswire.png
diff --git a/icon/numbers.png b/icon/numbers.png
diff --git a/icon/pages.png b/icon/pages.png
diff --git a/icon/water.png b/icon/water.png
diff --git a/icon/wifi_black_24dp.svg b/icon/wifi_black_24dp.svg
diff --git a/icon/zoom.png b/icon/zoom.png
diff --git a/index.html b/index.html
@@ -5,10 +5,17 @@
     <link rel="stylesheet" href="./style.css">
     <link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap" rel="stylesheet"></head>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&family=Roboto:wght@100&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap" rel="stylesheet"></head>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <body onload="startTime()">
-
     <div class="navbar">
         <ul class="left">
             <li class="parent">Mim Academy</li>
@@ -37,13 +44,12 @@
             <li class="parent hidden">Tools</li>
             <li class="parent">Help</li>
         </ul>
+
         <ul class="right">
-            <li class="battery hidden"><img src="./icon/battery_charging_full_black_24dp.svg" alt=""></li>
-            <li class="hidden"><img src="./icon/wifi_black_24dp.svg" alt=""></li>
-            <li class="hidden"><img src="./icon/search_black_24dp.svg" alt=""></li>
+            <li class="hidden"><i class="fas fa-wifi"></i></li>
+            <li class="battery hidden"><i class="fas fa-battery-full"></i></li>
             <li>EN</li>
             <li id="date"></li>
-
            <!--script code(starting)-->
            <script>
                 var d = new Date();
@@ -68,25 +74,83 @@
     }
 </script>
     <!--finishing script code-->
+            <li class="hidden"><img src="./icon/search_black_24dp.svg" alt=""></li>
+            <li class="hidden notification"><i class="fas fa-list-ul"></i></li>
         </ul>
     </div>
     <!--navbar bottom start-->
 
    <div class="menu">
         <ul class="earth">
             <li><img class="icon first" src="./icon/file explorer.jpg" alt=""></li>
+            <li><img class="icon last launching" src="./icon/launchpad.png" alt=""></li>
             <li class="hidden"><img class="icon last" src="./icon/safari.png" alt=""></li>
-            <li><img class="icon last" src="./icon/messages.png" alt=""></li>
-            <li><img class="icon last" src="./icon/setting.png" alt=""></li>
-            <li class="hidden"><img class="icon last" src="./icon/maps.png" alt=""></li>
+            <li class="hidden"><img class="icon last" src="./icon/messages.png" alt=""></li>
+            <li class="hidden"><img class="icon last" src="./icon/setting.png" alt=""></li>
             <li class="hidden"><img class="icon last" src="./icon/gallery.png" alt=""></li>
             <li class="hidden"><img class="icon last" src="./icon/app store.png" alt=""></li>
             <li class="hidden"><img class="icon last" src="./icon/Itunes music.png" alt=""></li>
-            <li class="hidden"><img class="icon last" src="./icon/notes.png" alt=""></li>
+            <li><img class="icon last opennote" src="./icon/notes.png" alt=""></li>
             <li><img class="icon last opening" src="./icon/terminal.png" alt=""></li>
             <li class="hidden border-column"><img class="icon last" src="./icon/trash bin.png" alt=""></li>
         </ul>
    </div> 
+   <!--launchpad start-->
+    <div class="launchpad">
+        <div class="searchbox">
+            <input type="search" name="search" placeholder="search">
+        </div>
+        <div class="container2">
+            <div class="child-launchpad">
+                <img src="./icon/app-store.png" alt="">
+                <p>App store</p>
+            </div>
+            <div class="child-launchpad">
+                <img src="./icon/calculator.png" alt="">
+                <p>calculator</p>
+            </div>
+            <div class="child-launchpad">
+                <img src="./icon/calendar.png" alt="">
+                <p>calendar</p>
+            </div>
+            <div class="child-launchpad">
+                <img src="./icon/contacts.png" alt="">
+                <p>contacts</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/dictionary.png" alt="">
+                <p>Dictionary</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/home.png" alt="">
+                <p>home</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/mail.png" alt="">
+                <p>mail</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/messages.png" alt="">
+                <p>messages</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/netnewswire.png" alt="">
+                <p>netnewswire</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/numbers.png" alt="">
+                <p>numbers</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/pages.png" alt="">
+                <p>pages</p>
+            </div>
+            <div class="child-launchpad"> 
+                <img src="./icon/zoom.png" alt="">
+                <p>zoom</p>
+            </div>
+        </div>
+    </div>
    <div class="container">
         <div class="terminal">
             <div class="taskbar-top">
@@ -96,19 +160,58 @@
                     <span class="button backfull"></span>
                 </div>
                 <div class="right-content">
-                    <!--<img src="./file.png" alt="">-->
                     <h2>Documents</h2>
                 </div>
             </div>
             <textarea name="terminal" id="commands" placeholder="Last Login : Wed 22 May 23:43:02 on console"></textarea>
         </div>
-        <script src="./script.js"></script>
-        <script>
-            $(function () {
-                $(".terminal").draggable();
-            });
-        </script>
+        <!--note app start-->     
+        <div class="note">
+            <div class="taskbar-top">
+                <div class="left-content">
+                    <span class="button close-note"></span>
+                    <span class="button full-note"></span>
+                    <span class="button backfull-note"></span>
+                </div>
+                <div class="right-content">
+                    <h2>Notes</h2>
+                </div>
+            </div>
+            <!--taskbar center start-->
+                <div class="taskabr-center">
+                    <div class="content-left">
+                        <img src="./icon/add.svg" alt="" class="adding">
+                    </div>
+                    <div class="content-right">
+                        <img src="./icon/delete.svg" alt="" class="deleting">
+                    </div>
+                    <div class="center">
+                        <input type="search" name="searching" id="searching" placeholder="Type here">
+                    </div>
+                </div>
+            <!--taskbar center end-->
+            <div class="content">
+                <div class="sidebar">
+                    <h1>All Notes</h1>
+                    <div class="notes">
+                        <input type="text" name="txt" placeholder="writing name">
+                    </div>
+                </div>
+                <div class="impor-content">
+                    <textarea cols="30" rows="10" class="typing"></textarea>
+                </div>
+            </div>
+        </div>
+        <!--note app end-->
     </div>
+    <script src="./script.js"></script>
+
     <!--navbar bottom end-->
+    <script>
+        $(function () {
+            $(".terminal").draggable();
+            $(".note").draggable();
+        });
+    </script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,14 +1,40 @@
+//terminal app
+var container = document.querySelectorAll('.container')[0];
 var terminal = document.querySelectorAll('.terminal')[0];
 var close = document.querySelectorAll('.close')[0];
 var opening = document.querySelectorAll('.opening')[0];
 var full = document.querySelectorAll('.full')[0];
 var backfull = document.querySelectorAll('.backfull')[0];
+//note app
+var note = document.querySelectorAll('.note')[0];
+var opennote = document.querySelectorAll('.opennote')[0];
+var closenote = document.querySelectorAll('.close-note')[0];
+var fullnote = document.querySelectorAll('.full-note')[0];
+var backfullnote = document.querySelectorAll('.backfull-note')[0];
+var deleting = document.querySelectorAll('.deleting')[0];
+var typing = document.querySelectorAll('.typing')[0];
+var notes = document.querySelectorAll('.notes')[0];
+var adding = document.querySelectorAll('.adding')[0];
+//launchpad app 
+var launching = document.querySelectorAll('.launching')[0];
+var launchpad = document.querySelectorAll('.launchpad')[0];
+var navbar = document.querySelectorAll('.navbar')[0];
+
+
+launching.onclick = function(){
+    launchpad.style.display = 'block';
+    navbar.style.display = 'none';
+    container.style.display = 'none';
+}
 
 close.onclick = function(){
     terminal.style.display = 'none';
 }
 opening.onclick = function(){
     terminal.style.display = 'block';
+    container.style.display = 'flex';
+    navbar.style.display = 'flex';
+    launchpad.style.display = 'none';
 }
 
 full.onclick = function(){
@@ -19,4 +45,31 @@ full.onclick = function(){
 backfull.onclick = function(){
     terminal.style.width = '70%';
     terminal.style.height = '430px';
+}
+opennote.onclick = function(){
+    note.style.display = 'block';
+    container.style.display = 'flex';
+    navbar.style.display = 'flex';
+    launchpad.style.display = 'none';
+}
+closenote.onclick = function(){
+    note.style.display = 'none';
+}
+fullnote.onclick = function(){
+    note.style.width = '90%';
+    note.style.height = '90%';
+}
+backfullnote.onclick = function(){
+    note.style.width = '70%';
+    note.style.height = '430px';
+}
+adding.onclick = function(){
+    notes.style.display = 'flex';
+}
+deleting.onclick = function(){
+    notes.style.display = 'none';
+    typing.style.display = 'none';
+}
+notes.onclick = function(){
+    typing.style.display = 'block';
 }