updates

Co-Authored-By: Anand Jaiswar <[email protected]>
anand-3399 · Jul 24, 2022 · 6240d93 · 6240d93
1 parent 5d1a2b6
commit 6240d93
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -134,7 +134,7 @@
  <figure id="startSettings" onclick="executeProgram('settings')">
  <img src="img/icons/settings.svg" alt="Windows 11 Settings icon">
  <figcaption>Settings</figcaption>
- </figure> 
+ </figure>
  <figure id="startCalci">
  <img src="img/icons/calculator.svg" alt="Windows Calculator icon">
  <figcaption>Calculator</figcaption>
@@ -173,7 +173,23 @@
  </div>
 
  <div class="searchmenu">
- <img src="img\Searchbar-new.jpg" alt="">
+ <!-- <img src="img\Searchbar-new.jpg" alt=""> -->
+ <div class="search">
+ <div class="SearchIcon"></div>
+ <input type="text" class="SearchInput">
+ </div>
+ <div class="pinned">
+
+ <div class="search-top-elements">
+ <span style="font-weight: 700;">All</span>
+ <span>Apps</span>
+ <span>Documents</span>
+ <span>Web</span>
+ <span>More<img src="img\icons\down.svg" alt="open all apps" class="moreSearch"></span></button>
+ </div>
+
+
+ </div>
 
  </div>
 

diff --git a/script.js b/script.js
@@ -7,8 +7,8 @@ Menu.addEventListener("click", () => {
  }
  else {
  startmenu.style.bottom = "50px"
- searchmenu.style.bottom = "-655px"
  startmenu.style.transform = "translateX(0)"
+ searchmenu.style.bottom = "-655px"
 
  }
 })
@@ -23,6 +23,7 @@ SearchIcon.addEventListener("click", () => {
  }
  else {
  searchmenu.style.bottom = "50px"
+ searchmenu.style.transform = "translateX(0)"
  startmenu.style.bottom = "-655px"
  }
 

diff --git a/style.css b/style.css
@@ -37,8 +37,6 @@ body {
 
 .taskbar img:active {
  background-color: #b8b8b8;
- /* width: 27px; */
- /* height: 24px; */
  transform: scale(0.9, 0.9);
 }
 
@@ -64,15 +62,6 @@ body {
 
 /* START MENU BAR NOW */
 .startmenu {
- /*
- position: absolute;
- bottom: 50px;
- width: 100%;
- text-align: center;
- background-color: #b8b8b8;
- width: 600px;
- */
-
  bottom: -655px;
  transition: all 0.5s ease-in;
 
@@ -85,33 +74,11 @@ body {
  background-color: #f2f2f2;
  border: 2px solid #f2f2f2;
  margin-bottom: 4px;
-
- /*
- -webkit-backdrop-filter: blur(20px);
- backdrop-filter: blur(20px);
-*/
  border-radius: 7px;
  transform: translateY(660px);
 
 }
 
-/*
-.startMenuPlace{
- background-color: rebeccapurple;
- width: 100%;
- height: 86%;
- position: absolute;
- bottom: 0;
-
-}
-*/
-/* 
-.startmenu img {
- border-radius: 10px;
- width: 37%;
-} 
-*/
-
 /* ---------- */
 .SearchIcon {
  background: url(img/icons/search.svg) no-repeat;
@@ -122,9 +89,6 @@ body {
  opacity: 0.7;
  bottom: 0;
  width: 22px;
-
- /* height: 100%;
- width: 20px; */
 }
 
 .search {
@@ -155,6 +119,16 @@ body {
  font-weight: 700;
 }
 
+.start figure:focus,
+.start-icons figure:active {
+ transform: scale(1.1);
+}
+
+.start-icons figure:hover {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 5px;
+}
+
 .openAll {
  background-color: #fff;
  padding: 2px 5px;
@@ -239,19 +213,45 @@ figure {
 /* SEARCH MENU */
 
 .searchmenu {
- position: absolute;
- /* bottom: 50px; */
  bottom: -655px;
- width: 100%;
- text-align: center;
  transition: all 0.5s ease-in;
+
+ height: 500px;
+ width: 530.63px;
+ margin-left: calc(50% - 265.315px);
+ position: absolute;
+ bottom: 50px;
+ z-index: 90;
+ background-color: #f2f2f2;
+ border: 2px solid #f2f2f2;
+ margin-bottom: 4px;
+ border-radius: 7px;
+ transform: translateY(660px);
 }
 
+.search-top-elements {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: left;
+ margin: 15px 40px 0;
+}
 
+.search-top-elements span {
+ font-size: smaller;
+ /* font-weight: 700; */
+ padding: 0px 14px;
+}
+
+.moreSearch {
+ width: 11px;
+}
+
+/* 
 .searchmenu img {
  border-radius: 10px;
  width: 40%;
-}
+} */
 
 /* END */