How to make Windows 11 Website Design | Adding Working App Windows | Dark Mode and other things
In this post, I am continuing the work of the Windows 11 website. We are going to make a better taskbar, add some app windows and add the side panel to control all the things.
In this post, we have worked on the dark mode of Windows with the specific color themes and make a similar kind of look.
Code
HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="desktop">
<!-- taskbar -->
<div class="taskbar">
<div class="icons">
<!-- start -->
<div class="icon_img">
<img class="start" onclick="start()" title="Start"
src="https://static.techspot.com/images2/downloads/topdownload/2021/08/2021-08-12-ts3_thumbs-9cf.png">
</div>
<!-- search -->
<div class="icon_img search" onclick="start()">
<img src="https://www.freeiconspng.com/thumbs/search-icon-png/search-icon-png-5.png">
</div>
<div class="icon_img dark_search" onclick="start()" style="display: none;">
<img src="https://www.freeiconspng.com/thumbs/search-icon-png/search-icon-png-2.png">
</div>
<!-- file -->
<div class="icon_img">
<img class="explorer" title="File Explorer" src="https://winaero.com/blog/wp-content/uploads/2019/09/File-Explorer-fluent-icon.png">
</div>
<!-- me -->
<div class="icon_img">
<img class="me" title="Microsoft Edge" src="https://1000logos.net/wp-content/uploads/2020/09/Edge-logo.png">
</div>
<!-- chrome -->
<div class="icon_img">
<img class="chrome" title="Chrome"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Chrome_icon_%28September_2014%29.svg/2048px-Google_Chrome_icon_%28September_2014%29.svg.png">
</div>
<!-- notepad -->
<div class="icon_img">
<img class="notepad" title="Notepad"
src="https://blogs.windows.com/wp-content/uploads/prod/sites/44/2021/12/Win-Notepad.png">
</div>
</div>
<div class="right">
<i class="fal fa-comment-alt"></i>
<div class="date-time">
<div class="time" id="time"></div>
<p>
<div class="date" id="date"></div>
</p>
</div>
<div class="icons">
<i class="fal fa-chevron-up"></i>
<i class="fas fa-wifi" title="Internet Access"></i>
<i class="fas fa-volume-up"></i>
<!-- <i class="fas fa-battery-three-quarters"></i> -->
</div>
</div>
</div>
<div class="taskbar_window">
<h1>Welcome</h1>
<p>Shivesh</p>
</div>
<!-- file window -->
<div class="file_window window">
<div class="titlebar">
<div class="title">Window</div>
<div class="right">
<i class="far fa-minus" style="font-size: 0.9rem;"></i>
<i class="fal fa-window-restore" style="font-size: 0.9rem;"></i>
<i class="fal fa-times"></i>
</div>
</div>
<div class="window-content">hello</div>
</div>
<!-- chrome window -->
<div class="window chrome_window">
<div class="titlebar">
<div class="title">MrDevKnown</div>
<div class="right">
<i class="far fa-minus crmin" style="font-size: 0.9rem;"></i>
<i class="fal fa-window-restore crmax" style="font-size: 0.9rem;"></i>
<i class="fal fa-times crclose"></i>
</div>
</div>
<div class="window-content"></div>
</div>
<!-- me window -->
<div class="window me_window">
<div class="titlebar">
<div class="title">Macrohard Edge</div>
<div class="right">
<i class="far fa-minus memin" style="font-size: 0.9rem;"></i>
<i class="fal fa-window-restore memax" style="font-size: 0.9rem;"></i>
<i class="fal fa-times meclose"></i>
</div>
</div>
<div class="window-content" id="mrdevknown"></div>
</div>
<!-- exp window -->
<div class="exp_window window">
<div class="titlebar">
<div class="title">Explorer</div>
<div class="right">
<i class="far fa-minus expmin" style="font-size: 0.9rem;"></i>
<i class="fal fa-window-restore expmax" style="font-size: 0.9rem;"></i>
<i class="fal fa-times expclose"></i>
</div>
</div>
<div class="window-content">File</div>
</div>
<!-- side panel -->
<div class="sidebar_close side_panel">
<div class="notification_area">
<div class="notification">MrdevKnown <p>sdfsa</p>
<p>fasdfasd</p>
</div>
</div>
<div class="action_area">
<div class="action dark_action">
<div class="mode">
<i class="fas fa-moon"></i>
<p>Dark mode</p>
</div>
</div>
<div class="action expand_action">
<div class="expand">
<i class="fal fa-expand-wide"></i>
<p>Fullscreen</p>
</div>
</div>
<div class="action"></div>
<div class="action"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Now the basic things of your website are ready. But it will not look good and clean. So, to give it a look like Windows 11, we are going to use CSS.
CSS part:
* {
box-sizing: border-box;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
:root {
--theme-color: #D4D9E8;
--window-color: #F9F9F9;
--icon-color: rgb(43, 43, 43);
--active-color: #0348DF;
--desk-back: url("https://mspoweruser.com/wp-content/uploads/2021/06/Microsoft-Windows-11-Wallpaper.jpg");
}
body {
margin: 0%;
padding: 0%;
height: 100vh;
width: 100vw;
font-family: Arial, Helvetica, sans-serif;
}
body .dark-theme {
--theme-color: #202020;
--window-color: #272727;
--icon-color: #B9B9B9;
--active-color: rgb(17, 17, 17);
--desk-back: url("https://images6.alphacoders.com/115/1152265.jpg");
color: #F9F9F9;
}
.dark-toggle {
background: var(--active-color) !important;
}
.action-active {
background: var(--active-color) !important;
}
p {
margin: 0%;
}
.desktop {
background: var(--desk-back);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
transition: 0.5s;
}
.taskbar {
display: flex;
z-index: 999999;
position: fixed;
bottom: 0%;
justify-content: center;
align-items: center;
background: var(--theme-color);
box-shadow: 0 0 0rem 0.1rem var(--theme-color);
height: 3rem;
width: 100%;
padding: 0.5rem;
box-sizing: border-box;
opacity: 95%;
}
.taskbar_window {
display: none;
z-index: 9999;
height: 70vh;
width: 34rem;
position: absolute;
background: var(--window-color);
border-radius: 1rem;
left: 50%;
transform: translate(-50%, -38.5%);
top: 50%;
opacity: 95%;
text-align: center;
padding: 2rem;
box-shadow: 0 0 0.1rem 0.1rem var(--theme-color);
}
.icons {
display: flex;
height: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.icon_img img {
height: 1.7rem;
width: 100%;
padding-right: 0.9rem;
}
.right {
position: absolute;
align-items: center;
right: 0%;
height: 100%;
padding: 0.2rem;
text-align: right;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.date-time {
position: relative;
top: 50%;
transform: translate(0, -50%);
right: 100%;
font-size: 0.8rem;
font-family: Arial, Helvetica, sans-serif;
}
.right .icons {
display: flex;
align-items: center;
position: absolute;
top: 0%;
right: 175%;
font-size: 1rem;
padding: 1rem 2rem;
}
.fa-comment-alt {
align-items: center;
position: absolute;
right: 0%;
top: 50%;
transform: translate(0, -50%);
font-size: 1.2rem;
font-size: 1.3rem !important;
margin-right: 1.5rem;
}
.right .icons i {
padding-left: 0.8rem;
}
.fas {
font-size: 1rem;
}
.window {
height: 30rem;
}
.file_window {
display: none;
width: 50vw;
position: absolute;
background: var(--window-color);
border-radius: 0.5rem;
left: 20%;
top: 10%;
transition: 0.2s;
box-shadow: 0 0 0.1rem 0.1rem var(--theme-color);
}
.chrome_window {
display: none;
width: 50vw;
position: absolute;
background: var(--window-color);
border-radius: 0.5rem;
left: 30%;
top: 5%;
transition: 0.2s;
box-shadow: 0 0 0.1rem 0.1rem var(--theme-color);
}
.me_window {
display: none;
width: 50vw;
position: absolute;
background: var(--window-color);
border-radius: 0.5rem;
left: 10%;
top: 15%;
transition: 0.2s;
box-shadow: 0 0 0rem 0.1rem var(--theme-color);
}
.exp_window {
display: none;
width: 50vw;
position: absolute;
background: var(--window-color);
border-radius: 0.5rem;
left: 25%;
top: 7%;
transition: 0.2s;
box-shadow: 0 0 0rem 0.1rem var(--theme-color);
}
.window_max {
border-radius: 0;
height: 100%;
width: 100%;
left: 0%;
top: 0%;
}
.titlebar {
width: 100%;
height: 10%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background: var(--theme-color);
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
.title {
display: flex;
position: absolute;
margin: 1rem;
}
.window .right i {
margin: 0.4rem;
font-size: 1.2rem;
color: var(--icon-color);
}
object {
height: 100%;
width: 100%;
border-radius: 1rem;
}
#mrdevknown {
height: 90%;
width: 100%;
}
.sidebar_close {
display: none;
right: 0%;
background: var(--theme-color);
width: 0%;
}
.sidebar {
display: block;
position: absolute;
height: 100%;
width: 22rem;
padding: 1.5rem;
opacity: 95%;
z-index: 99999;
}
.sidebar .notification {
background: var(--window-color);
padding: 1rem;
width: 100%;
/* clip-path: polygon(100% 0, 97% 9%, 97% 49%, 97% 100%, 0 100%, 0 0); */
border-radius: 0.2rem;
box-shadow: 0 0 0rem 0.1rem var(--theme-color);
}
.sidebar .action_area {
display: grid;
grid-template-columns: auto auto;
/* background: green; */
width: 100%;
}
.sidebar .action {
text-align: center;
background: var(--window-color);
height: 4.3rem;
width: 90%;
margin: 0.5rem 0.5rem;
box-shadow: 0 0 0rem 0.1rem var(--theme-color);
cursor: context-menu;
}
.sidebar .action .mode, .expand {
position: relative;
top: 50%;
transform: translate(0, -50%);
padding: 0.2rem;
}
.sidebar .action p {
margin-top: 0.5rem;
font-size: 0.8rem;
}
.notification_area {
height: 70%;
}
@media (max-width: 733px) {
.desktop {
display: none;
}
}
The designs are ready. Isn't it look similar to the design of Windows 11? But still we have some work left. To make this page resposive. We need to add some JavaScript to it.
Note: To make the windows of apps look like they are opening and closing, we are going to play with the display and visibility of the objects in CSS using JS.
JS part:
let taskbar_window = document.querySelector(".taskbar_window");
let close = document.querySelector(".fa-times");
let maximise = document.querySelector(".fa-window-restore");
let minimise = document.querySelector(".fa-minus");
let cr_close = document.querySelector(".crclose");
let cr_maximise = document.querySelector(".crmax");
let cr_minimise = document.querySelector(".crmin");
let me_close = document.querySelector(".meclose");
let me_maximise = document.querySelector(".memax");
let me_minimise = document.querySelector(".memin");
let exp_close = document.querySelector(".expclose");
let exp_maximise = document.querySelector(".expmax");
let exp_minimise = document.querySelector(".expmin");
taskbar_window.style.display = "none"
// time
function updateClock() {
var now = new Date();
if (now.getMinutes() < 10) { time_minutes = "0" + now.getMinutes() } else { if (now.getMinutes() == 0) {time_minutes = "00"} else { time_minutes = now.getMinutes() } }
time = now.getHours() + ':' + time_minutes,
date = now.toLocaleDateString();
// set the content of the element with the ID time to the formatted string
document.getElementById('time').innerHTML = time;
document.getElementById('date').innerHTML = date;
// call this function again in 1000ms
setTimeout(updateClock, 1000);
}
updateClock();
// close start / notification
function close_function() {
if (document.querySelector(".side_panel").classList.contains("sidebar")) {
document.querySelector(".side_panel").classList.remove("sidebar");
notification.classList.toggle("fas");
}
taskbar_window.style.display = "none";
}
// chrome window
document.querySelector(".chrome").addEventListener("click", function () {
close_function();
if (document.querySelector(".chrome_window").style.visibility === "visible" && document.querySelector(".chrome_window").style.display === "block") {
document.querySelector(".chrome_window").style.visibility = "hidden";
} else {
document.querySelector(".chrome_window").style.visibility = "visible";
document.querySelector(".chrome_window").style.zIndex = Number(document.querySelector(".me_window").style.zIndex) + Number(document.querySelector(".exp_window").style.zIndex) + Number(document.querySelector(".file_window").style.zIndex) + 1;
}
document.querySelector(".chrome_window").style.display = "block";
});
document.querySelector(".chrome_window").style.visibility = "hidden";
cr_close.addEventListener("click", function () {
close_function();
document.querySelector(".chrome_window").style.display = "none";
document.querySelector(".chrome_window").style.visibility = "visible";
});
cr_maximise.addEventListener("click", function () {
close_function();
document.querySelector(".chrome_window").classList.toggle("window_max");
});
cr_minimise.addEventListener("click", function () {
close_function();
if (document.querySelector(".chrome_window").style.visibility === "visible") {
document.querySelector(".chrome_window").style.visibility = "hidden";
} else {
document.querySelector(".chrome_window").style.visibility = "visible";
}
});
// me window
document.querySelector(".me").addEventListener("click", function () {
close_function();
if (document.querySelector(".me_window").style.visibility === "visible" && document.querySelector(".me_window").style.display === "block") {
document.querySelector(".me_window").style.visibility = "hidden";
} else {
document.querySelector(".me_window").style.visibility = "visible";
document.querySelector(".me_window").style.zIndex = Number(document.querySelector(".chrome_window").style.zIndex) + Number(document.querySelector(".exp_window").style.zIndex) + Number(document.querySelector(".file_window").style.zIndex) + 1;
}
document.querySelector(".me_window").style.display = "block";
});
document.querySelector(".me_window").style.visibility = "hidden";
me_close.addEventListener("click", function () {
close_function();
document.querySelector(".me_window").style.display = "none";
document.querySelector(".me_window").style.visibility = "visible";
});
me_maximise.addEventListener("click", function () {
close_function();
document.querySelector(".me_window").classList.toggle("window_max");
});
me_minimise.addEventListener("click", function () {
close_function();
if (document.querySelector(".me_window").style.visibility === "visible") {
document.querySelector(".me_window").style.visibility = "hidden";
} else {
document.querySelector(".me_window").style.visibility = "visible";
}
});
// file window
document.querySelector(".notepad").addEventListener("click", function () {
close_function();
if (document.querySelector(".file_window").style.visibility === "visible" && document.querySelector(".file_window").style.display === "block") {
document.querySelector(".file_window").style.visibility = "hidden";
} else {
document.querySelector(".file_window").style.visibility = "visible";
document.querySelector(".file_window").style.zIndex = Number(document.querySelector(".chrome_window").style.zIndex) + Number(document.querySelector(".exp_window").style.zIndex) + Number(document.querySelector(".me_window").style.zIndex) + 1;
}
document.querySelector(".file_window").style.display = "block";
});
document.querySelector(".file_window").style.visibility = "hidden";
close.addEventListener("click", function () {
close_function();
document.querySelector(".file_window").style.display = "none";
document.querySelector(".file_window").style.visibility = "visible";
});
maximise.addEventListener("click", function () {
close_function();
document.querySelector(".file_window").classList.toggle("window_max");
});
minimise.addEventListener("click", function () {
close_function();
if (document.querySelector(".file_window").style.visibility === "visible") {
document.querySelector(".file_window").style.visibility = "hidden";
} else {
document.querySelector(".file_window").style.visibility = "visible";
}
});
// explorer window
document.querySelector(".explorer").addEventListener("click", function () {
close_function();
if (document.querySelector(".exp_window").style.visibility === "visible" && document.querySelector(".exp_window").style.display === "block") {
document.querySelector(".exp_window").style.visibility = "hidden";
} else {
document.querySelector(".exp_window").style.visibility = "visible";
document.querySelector(".exp_window").style.zIndex = Number(document.querySelector(".chrome_window").style.zIndex) + Number(document.querySelector(".me_window").style.zIndex) + Number(document.querySelector(".file_window").style.zIndex) + 1;
}
document.querySelector(".exp_window").style.display = "block";
});
document.querySelector(".exp_window").style.visibility = "hidden";
exp_close.addEventListener("click", function () {
close_function();
document.querySelector(".exp_window").style.display = "none";
document.querySelector(".exp_window").style.visibility = "visible";
});
exp_maximise.addEventListener("click", function () {
close_function();
document.querySelector(".exp_window").classList.toggle("window_max");
});
exp_minimise.addEventListener("click", function () {
close_function();
if (document.querySelector(".exp_window").style.visibility === "visible") {
document.querySelector(".exp_window").style.visibility = "hidden";
} else {
document.querySelector(".exp_window").style.visibility = "visible";
}
});
// other
notification = document.querySelector(".fa-comment-alt")
notification.addEventListener("click", function () {
notification.classList.toggle("fas");
document.querySelector(".sidebar_close").classList.toggle("sidebar");
});
function start() {
if (taskbar_window.style.display === "none") {
taskbar_window.style.display = "block";
} else {
taskbar_window.style.display = "none";
}
}
// dark mode
document.querySelector(".mode").addEventListener("click", function () {
document.querySelector(".dark_action").classList.toggle("dark-toggle");
document.querySelector(".desktop").classList.toggle("dark-theme");
if (document.querySelector(".desktop").classList.contains("dark-theme")) {
document.querySelector(".search").style.display = "none";
document.querySelector(".dark_search").style.display = "block";
} else {
document.querySelector(".search").style.display = "block";
document.querySelector(".dark_search").style.display = "none";
}
});
// fullscreen
var elem = document.body;
var full_screen = document.querySelector(".expand");
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
document.querySelector(".expand").addEventListener("click", function () {
document.querySelector(".expand_action").classList.toggle("action-active");
if (window.innerWidth == screen.width && window.innerHeight == screen.height) {
document.exitFullscreen();
} else {
requestFullScreen(elem);
}
})
// display mrdevknown site on Macrohard Edge
$("#mrdevknown")
.html('<object data="https://mrdevknown.blogspot.com/"/>');
Note: I have also used JQuery in the last two lines to display the MrDevKnown site inside the Macrohard Edge Window. You can skip that thing, since it is a simple HTML, CSS, JS tutorial.
Now, our Windows 11 themed Website is ready.
Output
Summary
In this article you learnt how you can make a Windows 11 themed web design. You learnt about some basics of HTML and CSS.
Thanks for reading. Hope you liked the idea and project. Do comment down you opinions. Also, share this project with your friends and programmers.
.png)
Posts
1 Comments
Cool
ReplyDelete