Skip to content

Commit

Permalink
Added Animations
Browse files Browse the repository at this point in the history 
Co-Authored-By: Anand Jaiswar <[email protected]>
  • Loading branch information
@anand-3399
anand-3399 committed Jul 24, 2022
1 parent 28acfef commit 5d1a2b6
Show file tree
Hide file tree
Showing 3 changed files with 339 additions and 52 deletions.
116 changes: 111 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windows 11 Clone</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="img/icons/favicon.png" sizes="152x152">
</head>

<body>
Expand Down Expand Up @@ -57,21 +58,126 @@
<a id="m">00</a>:
<a id="s">00</a>:
<a id="mi">000</a>
</div>
</div>
</div>
</div>
</div>
<div class="startMenuPlace">
<div class="startmenu">
<!-- <img src="img/startmenu.png" alt=""> -->
<div class="search">
<div class="SearchIcon"></div>
<input type="text" class="SearchInput">
</div>
<div class="pinned">

<div class="start-top-elements">
<span>Pinned</span>
<button class="openAll" id="allapps">All apps <img src="img/icons/right.svg" alt="open all apps"
class="smallRight"></button>
</div>

<div class="start-icons">

<figure id="startWord">
<img src="img/icons/word.svg" alt="MS Word icon">
<figcaption>Word</figcaption>
</figure>
<figure id="startEdge" onclick="executeProgram('msedge')">
<img src="img/icons/edge.svg" alt="Windows 11 Edge icon">
<figcaption>Edge</figcaption>
</figure>
<figure id="startPowerPoint" onclick="executeProgram('powerpoint')">
<img src="img/icons/powerPoint.svg" alt="PowerPoint icon">
<figcaption>PowerPoint</figcaption>
</figure>
<figure id="startExcel" onclick="executeProgram('excel')">
<img src="img/icons/excel.svg" alt="MS Excel icon">
<figcaption>Excel</figcaption>
</figure>
<figure id="startMail">
<img src="img/icons/mail.svg" alt="Windows Mail icon">
<figcaption>Mail</figcaption>
</figure>
<figure id="startStore">
<img src="img/icons/store.png" alt="Windows 11 Microsoft Store icon">
<figcaption>MS Store</figcaption>
</figure>
<figure id="startPhotos">
<img src="img/icons/photos.svg" alt="Windows Photos icon">
<figcaption>Photos</figcaption>
</figure>
<figure id="startCalendar">
<img src="img/icons/calender.svg" alt="Windows Calender icon">
<figcaption>Calender</figcaption>
</figure>
<figure id="startOneNote">
<img src="img/icons/oneNote.svg" alt="OneNote icon">
<figcaption>OneNote</figcaption>
</figure>
<figure id="startYourPhone">
<img src="img/icons/yourPhone.svg" alt="Windows Your Phone icon">
<figcaption>Your Phone</figcaption>
</figure>
<figure id="startClock">
<img src="img/icons/clock.svg" alt="Windows Clock icon">
<figcaption>Clock</figcaption>
</figure>
<figure id="startLinkedIn">
<img src="img/icons/linkedIn.svg" alt="LinkedIn icon">
<figcaption>LinkedIn</figcaption>
</figure>
<figure id="startToDo">
<img src="img/icons/toDo.svg" alt="Microsoft To DO icon">
<figcaption>To Do</figcaption>
</figure>
<figure id="startSettings" onclick="executeProgram('settings')">
<img src="img/icons/settings.svg" alt="Windows 11 Settings icon">
<figcaption>Settings</figcaption>
</figure>
<figure id="startCalci">
<img src="img/icons/calculator.svg" alt="Windows Calculator icon">
<figcaption>Calculator</figcaption>
</figure>
<figure id="startWhiteboard">
<img src="img/icons/whiteboard.png" alt="Windows Whiteboard icon">
<figcaption>Whiteboard</figcaption>
</figure>
<figure id="startSnip">
<img src="img/icons/snipSketch.svg" alt="Windows Snipping Tool icon">
<figcaption>Snipping Tool</figcaption>
</figure>
<figure id="startMovies">
<img src="img/icons/movies.svg" alt="Windows Movies &amp; TV icon">
<figcaption>Movies &amp; TV</figcaption>
</figure>

</div>
</div>
<div class="recommended">
<div class="start-top-elements">
<span>Recommended</span>
<button class="openAll" id="allapps">More <img src="img/icons/right.svg" alt="open all apps"
class="smallRight"></button>
</div>
</div>
<div class="profile">
<div class="user">
<img src="img/icons/user.png" alt="Windows 11 User icon">
<span>Anand Jaiswar</span>
</div>
<img src="img/icons/shutdown.svg" alt="Windows 11 Shutdown icon" id="shutdown">
</div>

<div class="startmenu">
<img src="img/startmenu.png" alt="">

</div>
</div>

<div class="searchmenu">
<img src="img\Searchbar-new.jpg" alt="">

</div>



</body>
<script src="script.js"></script>
Expand Down
89 changes: 52 additions & 37 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
Menu = document.getElementById("Menu")
startmenu = document.getElementsByClassName("startmenu")[0]

Menu.addEventListener("click",()=>{
if(startmenu.style.bottom == "50px"){
Menu.addEventListener("click", () => {
if (startmenu.style.bottom == "50px") {
startmenu.style.bottom = "-655px"
}
else{
else {
startmenu.style.bottom = "50px"
searchmenu.style.bottom = "-655px"
startmenu.style.transform = "translateX(0)"

}
})

SearchIcon = document.getElementById("SearchIcon")
searchmenu = document.getElementsByClassName("searchmenu")[0]

SearchIcon.addEventListener("click",()=>{
if(searchmenu.style.bottom == "50px"){
SearchIcon.addEventListener("click", () => {
if (searchmenu.style.bottom == "50px") {
searchmenu.style.bottom = "-655px"

}
else{
else {
searchmenu.style.bottom = "50px"
startmenu.style.bottom = "-655px"
}
Expand All @@ -32,39 +35,51 @@ SearchIcon.addEventListener("click",()=>{
Number.prototype.pad = function (n) {
for (var r = this.toString(); r.length < n; r = 0 + r);
return r;
};
function updateClock() {
};

function updateClock() {
var now = new Date();
var milli = now.getMilliseconds()%10,
sec = now.getSeconds(),
min = now.getMinutes(),
hou = now.getHours(),
mo = now.getMonth(),
dy = now.getDate(),
yr = now.getFullYear();
var milli = now.getMilliseconds() % 10,
sec = now.getSeconds(),
min = now.getMinutes(),
hou = now.getHours(),
mo = now.getMonth(),
dy = now.getDate(),
yr = now.getFullYear();
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
for (var i = 0; i < tags.length; i++)
document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}

updateClock();
window.setInterval("updateClock()", 1);

// END CLOCK SCRIPT
// End
document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}

updateClock();
window.setInterval("updateClock()", 1);

// END CLOCK SCRIPT
// End

clickanywhere = document.getElementById("myVideo")
clickanywhere.addEventListener("click", () => {
if (startmenu.style.bottom == "50px") {
startmenu.style.bottom = "-655px"
}
else if (searchmenu.style.bottom == "50px") {
searchmenu.style.bottom = "-655px"

}

})

0 comments on commit 5d1a2b6

Please sign in to comment.