Enhancement in Widget Menu.

Added Glass Overlay Effect in Widget Menu. Added Photos Section in Widget Menu
anand-3399 · Oct 8, 2022 · 08ba9bc · 08ba9bc
1 parent 1980b05
commit 08ba9bc
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 19 deletions.
diff --git a/ToDo.txt b/ToDo.txt
@@ -0,0 +1,2 @@
+Add this layout in Widgets Menu.
+https://blogs.windows.com/wp-content/uploads/prod/sites/2/2021/06/WIN_Widgets_Light-Theme_16x9_en-US-1-1024x576.png
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
  <source src="img/video.webm" type="video/webm">
  </video>
 
+
  <div class="icons">
  <img src="img/icons/chromeicon.png" alt="">
  <div>Google Chrome</div>
@@ -313,6 +314,7 @@
  </div>
 
 
+ <!-- <div class="widgetMenu" style="left: 0px;"> -->
  <div class="widgetMenu">
  <div class="time">
  <div class="timedate_Of_Widgets">
@@ -326,8 +328,10 @@
 
  <div class="AllWidget Wheather">
  <div class="topMenuWidget">
- <img src="img/icons/cloudyDay.svg" alt="">
- <span class="MainApp">Wheather</span>
+ <div>
+ <img src="img/icons/cloudyDay.svg" alt="">
+ <span class="MainApp">Wheather</span>
+ </div>
 
  <img src="img\icons\more-info.png" class="moreInfo"></img>
  </div>
@@ -351,11 +355,12 @@
  </div>
  </div>
  </div>
-
  <div class="AllWidget MicrosoftEdge">
  <div class="topMenuWidget">
- <img src="img\icons\edge.svg" alt="">
- <span class="MainApp">Microsoft Edge</span>
+ <div>
+ <img src="img\icons\edge.svg" alt="">
+ <span class="MainApp">Microsoft Edge</span>
+ </div>
 
  <img src="img\icons\more-info.png" class="moreInfo"></img>
  </div>
@@ -371,16 +376,45 @@
  </p>
  </div>
  </div>
- <div class="AllWidget"></div>
- <div class="AllWidget"></div>
- <div class="AllWidget"></div>
- <div class="AllWidget"></div>
+ <div class="AllWidget MicrosoftOneDrive">
+ <div class="topMenuWidget">
+ <div>
+ <img src="img\icons\icons8-microsoft-onedrive-2019.svg" alt="">
+ <span class="MainApp">Photos</span>
+ </div>
+ <img src="img\icons\more-info.png" class="moreInfo"></img>
+ </div>
+
+ <div class="heading">On this Day</div>
+ <div class="subHeading">
+ <span>OCT 22</span>
+ <p>See all</p>
+ </div>
+
+ <div class="Images">
+ <img src="https://308286-943399-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2022/03/stylish-standard-whatsapp-dp-for-boys.png"
+ alt="" style="border-radius: 0 0 0 8px;">
+
+
+ <div>
+ <span>
+ <img src="https://c4.wallpaperflare.com/wallpaper/757/370/472/heavy-bike-harley-davidson-harley-davidson-modified-wallpaper-preview.jpg"
+ alt="">
+ <img src="https://wallpaperaccess.com/full/124378.jpg" alt=""
+ style="border-radius: 0 0 8px 0;">
+ </span>
+
+ </div>
+ </div>
+
+ </div>
+
+ <div class="AllWidget MicrosoftToDo"></div>
  </div>
  </div>
 
 
 
-
 </body>
 <script src="script.js"></script>
 

diff --git a/script.js b/script.js
@@ -1,6 +1,6 @@
 Menu = document.getElementById("Menu")
 startmenu = document.getElementsByClassName("startmenu")[0]
- 
+
 Menu.addEventListener("click", () => {
  if (startmenu.style.bottom == "50px") {
  startmenu.style.bottom = "-655px"

diff --git a/style.css b/style.css
@@ -399,11 +399,11 @@ figure {
  position: absolute;
  bottom: 50px;
  z-index: 90;
- background-color: #f2f2f2;
+ background-color: #f2f2f2c2;
  border: 2px solid #f2f2f2;
  margin-bottom: 4px;
  border-radius: 7px;
-
+ backdrop-filter: blur(4px);
 }
 
 .timedate_Of_Widgets {
@@ -427,7 +427,7 @@ figure {
 .WidgetsPlace {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(5, 1fr);
+ /* grid-template-rows: repeat(5, 1fr); */
 }
 
 .topMenuWidget {
@@ -437,10 +437,11 @@ figure {
 }
 
 .MainApp {
- margin-left: -10rem;
+ /* margin-left: -10rem; */
 }
 
-.topMenuWidget img {
+.topMenuWidget img,
+.topMenuWidget div img {
  width: 13px;
  margin-left: 8px;
 }
@@ -451,7 +452,7 @@ figure {
 }
 
 .Wheather {
- background: linear-gradient(177deg, #f1e6e6, #d6d62a);
+ background: linear-gradient(135deg, #f1e6e6, #d6d62a);
 }
 
 .topMenuWidget {
@@ -521,7 +522,7 @@ figure {
 }
 
 .MicrosoftEdge .MainApp {
- margin-left: -8rem;
+ /* margin-left: -8rem; */
  color: black;
 }
 
@@ -534,8 +535,9 @@ figure {
  top: calc(44% - 249px); */
 
  position: relative;
- height: 22px;
+ height: 16px;
  top: 0;
+ width: 15px;
 }
 
 .MicrosoftEdge .search {
@@ -554,4 +556,52 @@ figure {
 
 .MicrosoftEdge .MainContentWindow p img {
  width: 1rem;
+}
+
+.MicrosoftOneDrive {
+ background-color: #eae9e9;
+ margin-top: calc(5% - 29px);
+}
+
+.MicrosoftOneDrive .MainApp {
+ /* margin-left: -11rem; */
+ color: black;
+}
+
+.MicrosoftOneDrive .heading {
+ font-size: 20px;
+ margin: 7px;
+ margin-top: 13px;
+}
+
+.MicrosoftOneDrive .subHeading {
+ display: flex;
+ justify-content: space-between;
+ margin: 10px 10px;
+}
+
+.MicrosoftOneDrive .subHeading p {
+ color: blue;
+ font-weight: 600;
+}
+
+.MicrosoftOneDrive .Images img {
+ width: 49%;
+}
+
+.MicrosoftOneDrive .Images {
+ display: flex;
+}
+
+.MicrosoftOneDrive .Images div span img {
+ width: 99%;
+}
+
+.MicrosoftOneDrive .Images div {
+ display: contents;
+}
+
+.MicrosoftOneDrive .Images div span {
+ display: flex;
+ flex-direction: column;
 }