myarea.html

<style>
  .dashboard {
    background-color: #9bc2ce;
    display: flex;
    flex-direction: column;
    overflow:scroll;
    padding-bottom: 310px;
  }
  
  .header {
    background-color: #fff;
    color: #0b3957;
    display: flex;
    font: 32px Inter, sans-serif;
    justify-content: space-between;
    padding: 27px 24px;
    width: 100%;
  }
  
  .logo-container {
    align-self: start;
    display: flex;
    font-weight: 600;
  }
  
  .logo {
    aspect-ratio: 1.13;
    object-fit: contain;
    width: 44px;
  }
  
  .brand-name {
    flex-grow: 1;
  }
  
  .nav-container {
    display: flex;
    font-weight: 400;
    gap: 20px;
    justify-content: space-between;
  }
  
  .logout-container {
    display: flex;
  }
  
  .logout-icon {
    aspect-ratio: 0.79;
    object-fit: contain;
    width: 33px;
  }
  
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 58px;
    padding: 0 70px;
    width: 100%;
  }
  
  .section-title {
    align-self: start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    max-width: 100%;
    width: 698px;
  }
  
  .icon-container {
    align-self: start;
    background-color: #0b3957;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    min-height: 55px;
    padding: 11px 39px;
  }
  
  .section-icon {
    aspect-ratio: 1.82;
    object-fit: contain;
    width: 62px;
  }
  
  .section-heading {
    color: #fff;
    font: 700 64px Inter, sans-serif;
  }
  
  .content-wrapper {
    margin-top: 86px;
    max-width: 1150px;
    width: 100%;
  }
  
  .content-container {
    display: flex;
    gap: 20px;
  }
  
  .map-container {
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    padding: 27px;
    width: 76%;
  }
  
  .map-image {
    aspect-ratio: 1.69;
    border-radius: 20px;
    object-fit: contain;
    width: 100%;
  }
  
  .sidebar {
    display: flex;
    flex-direction: column;
    font: 400 28px Inter, sans-serif;
    margin: auto 0;
    width: 24%;
  }
  
  .location-label {
    color: #0b3957;
    margin-left: 11px;
    text-align: center;
  }
  
  .location-input {
    background-color: #fff;
    border-radius: 20px;
    color: rgba(11, 57, 87, 0.7);
    margin-top: 26px;
    padding: 14px 20px;
    text-align: center;
    width: 100%;
  }
  
  .view-reports-btn {
    background-color: #0b3957;
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-top: 21px;
    padding: 12px 14px;
  }
  
  .chart-section {
    align-items: center;
    display: flex;
    gap: 26px;
    margin-top: 67px;
    max-width: 1146px;
    width: 100%;
  }
  
  .chart-container {
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 57px;
  }
  
  .chart-image {
    aspect-ratio: 1.36;
    object-fit: contain;
    width: 100%;
  }
  
  .chart-description {
    align-self: stretch;
    color: #0b3957;
    flex-grow: 1;
    font: 700 36px Inter, sans-serif;
    margin: auto 0;
  }
  
  @media (max-width: 991px) {
    .dashboard {
      padding-bottom: 100px;
    }
  
    .header {
      max-width: 100%;
      padding: 0 20px;
    }
  
    .logo-container,
    .nav-container,
    .logout-container {
      white-space: initial;
    }
  
    .main-content {
      margin-top: 40px;
      max-width: 100%;
      padding: 0 20px;
    }
  
    .icon-container {
      padding: 0 20px;
    }
  
    .section-heading {
      font-size: 40px;
    }
  
    .content-wrapper {
      margin-top: 40px;
      max-width: 100%;
    }
  
    .content-container {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
  
    .map-container {
      margin-top: 35px;
      max-width: 100%;
      padding: 0 20px;
      width: 100%;
    }
  
    .map-image {
      max-width: 100%;
    }
  
    .sidebar {
      margin-top: 40px;
      width: 100%;
    }
  
    .location-label {
      margin-left: 10px;
    }
  
    .chart-section {
      margin: 40px 4px 0 0;
      max-width: 100%;
    }
  
    .chart-container {
      max-width: 100%;
      padding: 0 20px;
    }
  
    .chart-image {
      max-width: 100%;
    }
  
    .chart-description {
      max-width: 100%;
    }
  }
  
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  </style>
  
  <section class="dashboard">
    <header class="header">
      <div class="logo-container">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/e147569c27d0a95f6bb2809b03f593cd86a590621ce2497f1c1655e2f0b901cb?apiKey=a116ddd38fca48bebf1b0ec748547571&&apiKey=a116ddd38fca48bebf1b0ec748547571" alt="SmartCity Logo" class="logo">
        <span class="brand-name">SmartCity</span>
      </div>
      <nav class="nav-container">
          <a href="premium.html">Premium</a><img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/803a90ceaa233f5655b7b053aeba4cbbf8cb509919d065071beb9617edc3c5e5?apiKey=a116ddd38fca48bebf1b0ec748547571&&apiKey=a116ddd38fca48bebf1b0ec748547571" class="frame-image" alt="Frame image" />
        <a href="community.html">Community</a>
          <a href="dashboard.html">Home</a>
        <div class="logout-container">
          <a href="login.html">Log out</a>
          <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/84c33f7b4a470a459550c43352805500b77ebf8e9d78515ed004ee885780567c?apiKey=a116ddd38fca48bebf1b0ec748547571&&apiKey=a116ddd38fca48bebf1b0ec748547571" alt="Logout Icon" class="logout-icon">
        </div>
      </nav>
    </header>
  
    <main class="main-content">
      <div class="section-title">
        <div class="icon-container">
          <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/7f3841e10537c0cad9413fe13a3bcdf8bc89c5fe1216facfd1ec55f8529306e2?apiKey=a116ddd38fca48bebf1b0ec748547571&&apiKey=a116ddd38fca48bebf1b0ec748547571" alt="Area Icon" class="section-icon">
        </div>
        <h1 class="section-heading"> <a href="dashboard.html">My Area</a></h1>
      </div>
  
      <div class="content-wrapper">
        <div class="content-container">
          <div class="map-container">
              <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDP6MFLMMNuIBxTJOeuu9TMIf78oLIHsTw&loading=async&libraries=maps,marker&v=beta" defer></script>
              <gmp-map
                  center="12.0,77.56"
                  zoom="4"
                  map-id="DEMO_MAP_ID"
                  style="height: 400px"
              >
                  <gmp-advanced-marker
                      position="12.9121,77.6446"
                      title="HSR Layout, Bengaluru"
                  ></gmp-advanced-marker>
                  <gmp-advanced-marker
                      position="13.0354,77.5988"
                      title="Hebbal, Bengaluru"
                  ></gmp-advanced-marker>
              </gmp-map>
          </div>
          
          <aside class="sidebar">
            <label for="location-input" class="location-label">Enter Location</label>
            <input type="text" id="location-input" class="location-input" value="HSR Layout" aria-label="Enter Location">
            <button class="view-reports-btn">View Reports</button>
          </aside>
        </div>
      </div>
  
      <section class="chart-section">
        <div class="chart-container">
          <img src="cluster plot.jpeg" alt="Congestion Chart" class="chart-image">
        </div>
        <p class="chart-description">
          <a href="https://colab.research.google.com/drive/1cP84IG-cAYD-x4050T-CvuGaHbjwC-TK?usp=sharing">Cluster Plot</a><br>This plot represents the maximum detected congestions in niche areas of Bengaluru using
          our Clustering Model.
        </p>
      </section>
    </main>
  </section>