Skip to content

Commit

Permalink
Merge pull request #49 from vishnurchityala/main
Browse files Browse the repository at this point in the history 
Added more apps dropdown.
  • Loading branch information
@vishnurchityala
vishnurchityala authored Oct 7, 2024
2 parents 47cd840 + a45bce9 commit dac6a7c
Show file tree
Hide file tree
Showing 22 changed files with 720 additions and 62 deletions.
Binary file added img/g-drive.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/g-mail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-calendar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-docs.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-forms.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-gcp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-keep.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-lens.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-maps.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-meet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-news.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-photos.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-podcast.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-search.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/google-sheets.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/goolge-slides.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 129 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,16 @@ <h5 class="fw-semibold mt-2">BU Notes</h5>
</p>
</a>
</div>
<!-- Storage Stats bar -->
<div class="">
<p class="m-0">
<i class="fa-solid fa-cloud me-2 mb-3"></i>Storage
</p>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar rounded-pill" style="width: 75%"></div>
</div>
<p class="py-2" style="color: rgba(0, 0, 0, 0.65);">75GB of 100GB used</p>
</div>
</div>

<!-- Main content area -->
Expand Down Expand Up @@ -125,7 +135,125 @@ <h5 class="fw-semibold mt-2">BU Notes</h5>
<div class="app-buttons">
<i class="button rounded-circle p-2 m-0 fa-regular fa-circle-question fs-5"></i>
<i class="button rounded-circle p-2 m-0 fas fa-cog fs-5"></i>
<i class="button rounded-circle p-2 m-0 fas fa-th fs-5"></i>

<!-- More Apps Dropdown -->
<div class="dropdown">
<button class="btn button rounded-pill m-0 p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="p-2 m-0 fas fa-th fs-5"></i>
</button>
<ul class="dropdown-menu rounded-5 more-apps mt-2">
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="rounded-5 bg-white d-flex ms-2 me-2 py-3 px-3">
<div class="container text-center mt-3 mb-3">
<div class="row row-cols-3 gy-4">
<div class="col">
<a class="d-flex flex-column text-decoration-none">
<img src="img/google-search.png" alt="Account" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Search</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-maps.png" alt="Search" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Maps</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-gcp.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Cloud</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-news.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">News</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-calendar.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Calendar</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/g-mail.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Gmail</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-photos.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Photos</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-news.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">News</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-meet.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Meet</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-lens.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Lens</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/g-drive.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Drive</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-docs.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Docs</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-keep.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Forms</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-keep.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Keep</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/google-sheets.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Sheets</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="img/goolge-slides.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Slides</p>
</a>
</div>
</div>
</div>
</div>
<div class="container text-center mt-4 mb-4">
<a href="./index.html" class="btn rounded-button px-4 py-2">
More from Mavi
</a>
</div>
</div>
</ul>
</div>

<img src="./img/profile.png" alt="Profile Picture" />
</div>
</div>
Expand Down
137 changes: 129 additions & 8 deletions pages/firstYear.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,6 @@

<!-- Custom CSS for additional styles -->
<link rel="stylesheet" href="../style.css" />

<!-- Bootstrap JS for dynamic features and components -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container-fluid p-0 d-flex h-100">
Expand Down Expand Up @@ -91,6 +84,16 @@ <h5 class="fw-semibold mt-2">BU Notes</h5>
</p>
</a>
</div>
<!-- Storage Stats bar -->
<div class="">
<p class="m-0">
<i class="fa-solid fa-cloud me-2 mb-3"></i>Storage
</p>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar rounded-pill" style="width: 75%"></div>
</div>
<p class="py-2" style="color: rgba(0, 0, 0, 0.65);">75GB of 100GB used</p>
</div>
</div>
<!-- content area -->
<div class="flex-fill d-flex flex-column space-between">
Expand Down Expand Up @@ -121,7 +124,125 @@ <h5 class="fw-semibold mt-2">BU Notes</h5>
<div class="app-buttons">
<i class="button rounded-circle p-2 m-0 fa-regular fa-circle-question fs-5"></i>
<i class="button rounded-circle p-2 m-0 fas fa-cog fs-5"></i>
<i class="button rounded-circle p-2 m-0 fas fa-th fs-5"></i>

<!-- More Apps Dropdown -->
<div class="dropdown">
<button class="btn button rounded-pill m-0 p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="p-2 m-0 fas fa-th fs-5"></i>
</button>
<ul class="dropdown-menu rounded-5 more-apps mt-2">
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="rounded-5 bg-white d-flex ms-2 me-2 py-3 px-3">
<div class="container text-center mt-3 mb-3">
<div class="row row-cols-3 gy-4">
<div class="col">
<a class="d-flex flex-column text-decoration-none">
<img src="../img/google-search.png" alt="Account" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Search</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-maps.png" alt="Search" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Maps</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-gcp.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Cloud</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-news.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">News</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-calendar.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Calendar</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/g-mail.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Gmail</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-photos.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Photos</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-news.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">News</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-meet.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Meet</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-lens.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Lens</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/g-drive.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Drive</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-docs.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Docs</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-keep.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Forms</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-keep.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Keep</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/google-sheets.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Sheets</p>
</a>
</div>
<div class="col">
<a class="d-flex flex-column align-items-center text-decoration-none">
<img src="../img/goolge-slides.png" alt="Maps" class="icon-size ms-auto me-auto">
<p class="mt-2 mb-0">Slides</p>
</a>
</div>
</div>
</div>
</div>
<div class="container text-center mt-4 mb-4">
<a href="../index.html" class="btn rounded-button px-4 py-2">
More from Mavi
</a>
</div>
</div>
</ul>
</div>

<img src="../img/profile.png" alt="Profile Picture" />
</div>
</div>
Expand Down
Loading

0 comments on commit dac6a7c

Please sign in to comment.