home screen and taskbar added

sadaiprince · Mar 21, 2024 · bb196f7 · bb196f7
1 parent aabe99d
commit bb196f7
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 46 deletions.
diff --git a/win11/assets/bg.jpeg b/win11/assets/bg.jpeg
diff --git a/win11/assets/chevron-up.png b/win11/assets/chevron-up.png
diff --git a/win11/assets/file-explorer.png b/win11/assets/file-explorer.png
diff --git a/win11/assets/microsoft-edge.png b/win11/assets/microsoft-edge.png
diff --git a/win11/assets/microsoft-store.png b/win11/assets/microsoft-store.png
diff --git a/win11/assets/search.png b/win11/assets/search.png
diff --git a/win11/assets/setting.png b/win11/assets/setting.png
diff --git a/win11/assets/volume.png b/win11/assets/volume.png
diff --git a/win11/assets/wi-fi.png b/win11/assets/wi-fi.png
diff --git a/win11/assets/windows11.png b/win11/assets/windows11.png
diff --git a/win11/index.html b/win11/index.html
@@ -1,29 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Windows 11 by aiPRinCE</title>
     <link rel="stylesheet" href="style.css">
 </head>
-<body >
-    <div class="lockScreen" >
+
+<body>
+    <!-- Home screen section -->
+    <div class="homeScreen">
+        <div class="wallpaper"><img src="assets/bg.jpeg" alt=""></div>
+        <div class="taskbar">
+            <div class="icon"><img src="assets/windows11.png" alt="wallpaper"></div>
+            <div class="icon"><img src="assets/search.png" alt="search"></div>
+            <div class="icon"><img src="assets/setting.png" alt="setting"></div>
+            <div class="icon"><img src="assets/file-explorer.png" alt="file-explorer"></div>
+            <div class="icon"><img src="assets/microsoft-edge.png" alt="microsoft-edge"></div>
+            <div class="icon"><img src="assets/microsoft-store.png" alt="microsoft-store"></div>
+            <div class="rightSideTaskbar">
+                <img class="" src="assets/chevron-up.png" alt="chevron-up">
+                <span class="wifi-volume">
+                    <img src="assets/wi-fi.png" alt="wi-fi"><img src="assets/volume.png" alt="volume">
+                </span>
+                <div class="clockIntaskbar clock">
+                    <span class="h">hour</span>
+                    <span class="m">min</span>
+                    <span class="s">sec</span>
+                    <span class="interval"></span>
+                    </span><br>
+                    <span class="dates"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Lock screen function -->
+    <div class="lockScreen">
         <div class="lockClock">
             <span class="clock">
-                <span class="h"></span>
-                <span class="m"></span>
+                <span class="h">h</span>
+                <span class="m">m</span>
+                <span class="s">s</span>
                 <span class="interval"></span>
-              </span><br>
-              <span class="dates"></span>  
-            
+            </span><br>
+            <span class="dates"></span>
+
         </div>
         <div class="signInToWindows">
-                <img src="assets/profile-pic.png" alt="profile-pic">
-                <div>MD. Arif Istiack PRinCE</div >
-                <button class="signInBtn">Sign in</button>
-            </div>   
+            <img src="assets/profile-pic.png" alt="profile-pic">
+            <div>MD. Arif Istiack PRinCE</div>
+            <button class="signInBtn">Sign in</button>
+        </div>
     </div>
+    <!-- --------------------------------- -->
+
+
     <!-- js section -->
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/win11/script.js b/win11/script.js
@@ -4,8 +4,8 @@ function showTime() {
     // Get hours, minutes
     const h = d.getHours();
     const m = d.getMinutes();
+    const s =d.getSeconds();
     const date = d.getDate();
-    const month = d.getMonth();
     var day = d.getDay();
     //AM or PM
     var interval;
@@ -38,27 +38,35 @@ function showTime() {
 
     }
     // Format and display time elements
-    document.querySelector(".h").textContent = (h >= 13 ? h - 12 : h).toString().padStart(2, "0") + " :";
-    document.querySelector(".m").textContent = m.toString().padStart(2, "0");
-    document.querySelector(".interval").textContent = interval;
-    document.querySelector(".dates").textContent = day + " , " + currentMonthText + " " + date;
+    //for lockscreen time and date
+    document.querySelectorAll(".m")[1].textContent = m.toString().padStart(2, "0") + ":";
+    document.querySelectorAll(".h")[1].textContent = (h >= 13 ? h - 12 : h).toString().padStart(2, "0") + " :";
+    document.querySelectorAll(".s")[1].textContent = s.toString().padStart(2, "0");
+    document.querySelectorAll(".interval")[1].textContent = interval;
+    document.querySelectorAll(".dates")[1].textContent = day + " , " + currentMonthText + " " + date;
+    //for taskbar time and date
+    document.querySelectorAll(".m")[0].textContent = m.toString().padStart(2, "0") + ":";
+    document.querySelectorAll(".h")[0].textContent = (h >= 13 ? h - 12 : h).toString().padStart(2, "0") + " :";
+    document.querySelectorAll(".s")[0].textContent = s.toString().padStart(2, "0");
     setTimeout(showTime, 1000);
 }
 showTime();
 //    ----------------------------
 // before the window home screen
+var homeScreen=document.querySelector(".homeScreen");
 var removeLockScreen = document.querySelector(".lockScreen");
-removeLockScreen.addEventListener('click', ()=>{
-removeLockScreen.style.backgroundImage = "url('assets/bluredLockScreenWallpaper.jpg')";
-    document.querySelector(".lockClock").style.display="none";
-    document.querySelector(".signInToWindows").style.display="block";
-
+removeLockScreen.addEventListener('click', () => {
+    removeLockScreen.style.transition = "all" + " .2s " + "ease-in-out";
+    document.querySelector(".lockClock").style.top = "-100vh";
+    document.querySelector(".signInToWindows").style.top = "50%";
+    // clearTimeout(setTime);
 
 })
+
+// disable right click
+homeScreen.addEventListener('contextmenu', event => event.preventDefault());
 // lock Screen remove in click
-
-    document.querySelector(".signInBtn").addEventListener("click",()=>{
-        removeLockScreen.classList.add("removeLockScreen");
-
-        document.querySelector(".signInToWindows img").style.display="none";
-    })
+
+document.querySelector(".signInBtn").addEventListener("click", () => {
+    removeLockScreen.classList.add("removeLockScreen");
+});
diff --git a/win11/style.css b/win11/style.css
@@ -6,6 +6,7 @@
 body{
     height: 100vh;
     width: 100vw;
+    background-image: radial-gradient(rgba(18, 18, 170, 0.884) ,rgb(0, 0, 0));
     overflow: hidden;
     position: relative;
 }
@@ -18,13 +19,17 @@ body{
     display: flex;
     justify-content: center;
     align-items: center;
-    position: relative;
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    z-index: 111;
+    transition:all .2s ease-in-out;
+    /* display: none; I have to remove this for displaying lock screeen ; */
 }
 .lockClock{
-    transition:all .5s ease-in-out;
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
+    transition:all .2s ease-in-out;
+    width: 100vw !important;
+    height: 100vh !important;
     font-size: 4rem;
     color: white;
     text-align: center;
@@ -33,30 +38,29 @@ body{
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 600;
     cursor: pointer;
-
-
 }
 .lockClock .dates{
     font-size: 2rem;
 }
 /* go to sign in */
 .signInToWindows{
-    transition:all .4s ease-in-out !important;
     display: block;
-    height: 40vh;
-    width: 40vh;
-    position: relative;
+    width: 100vw;
+    backdrop-filter: blur(5px);
+    position: absolute;
+    z-index: 101;
     text-align: center;
     font-size: 1.7rem;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     color: white;
-    display: none;
-
-
-
+    top: 150%;
+    left: 50%;
+    transform: translate(-50% ,-50%);
+    transition:top .2s linear .1s!important;
+
 }
 .signInToWindows img{
-    transition:all .4s ease-in-out !important ;
+    transition:all .2s ease-in-out .2s !important ;
     height: 30vh;
     width: 30vh;
     border-radius: 50%;
@@ -77,9 +81,83 @@ body{
 }
 /* remove lock Screen on click */
 .removeLockScreen{
-    transition: all .2s ease-in-out !important;
-    height: 0;
-    width: 0;
+    transition: all .2s linear !important;
+    top: -100vh;
+    position: relative;
+    opacity: 0;
+}
+/* ----------------------------------------- */
+/* home screen */
+.homeScreen{
+    height: 100vh !important;
+    width: 100vw !important;
     position: relative;
+    overflow: hidden !important;
+    display: block;
+    cursor: pointer;
+    /* display: none; */
+}
+.homeScreen .wallpaper{
+    height: 100vh;
+    width: 100vw;
+}
+.homeScreen .wallpaper img{
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+}
+
+.taskbar{
+    height: 3rem;
+    width: 100vw;
+    background-color: #181b39be;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 0;
 
+
+}
+.taskbar .icon {
+    height: 2rem;
+    width: 2rem;
+    background-color: transparent;
+    margin: .2rem;
+    border-radius: 5px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+.taskbar .icon img{
+    height: 1.9rem;
+    width: 1.9rem;
+    padding: 2px;
+    border-radius: 6px;
+    object-fit: cover;
+}
+
+.rightSideTaskbar{
+    position: absolute;
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 0;
+    margin-right: 3rem;
+}
+.rightSideTaskbar img{
+    height: 1.4rem;
+    width: 1.4rem;
+    padding: 3px;
+    border-radius: 6px;
+    object-fit: cover;
+}
+.clockIntaskbar{
+    color: white;
+    font-size: .7em;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 1em;
 }