
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1" />
  <title>Solar Energy Dashboard</title>
  
  <!-- Link to manifest -->
  <link rel="manifest" href="/manifest.json" />
  
  <!-- Meta Tags for PWA -->
  <meta name="theme-color" content="#0073e6">
  <meta name="apple-mobile-web-app-title" content="Solar Dashboard">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-capable" content="yes">
  
  <!-- Icons for iOS -->
  <link rel="apple-touch-icon" href="icons/icon-192x192.png">

  <!-- Link external js and hash and axios -->
  <script src="https://cdn.jsdelivr.net/npm/js-sha1"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="app.js" defer></script> <!-- Link to external JavaScript -->
  <script src="year.js" defer></script> <!-- Link to external JavaScript -->
  <script src="month.js" defer></script> <!-- Link to external JavaScript -->
  
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: #333;
      overflow: hidden;
      
    }

    .container {
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 2rem;
      width: 100%;
      height: 100vh;
      max-width: 800px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      justify-content: center;
      align-items: center;
    }

    .title {
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      color: #0073e6;
      margin-bottom: 10px;
    }

    .data-grid {
      display: flex;
      flex-direction: column;
      gap: 15px;
      justify-content: center;
      align-items: center;
    }

    .data-card {
      background-color: #e8f5e9;
      border-radius: 8px;
      padding: 3rem 2rem;
      text-align: center;
      border: 1px solid #c8e6c9;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      width: 100%;
      max-width: 350px;
    }

    .data-card-1 {
      background-color: #e8f5e9;
      border-radius: 8px;
      padding: 3rem 2rem;
      text-align: center;
      border: 1px solid #c8e6c9;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      width: 100%;
      max-width: 350px;
    }

    .data-card:active {
      transform: scale(0.98);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .data-card-2 {
      background-color: #e8f5e9;
      border-radius: 8px;
      padding: 3rem 2rem;
      text-align: center;
      border: 1px solid #c8e6c9;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      width: 100%;
      max-width: 350px;
      display: flex;
    justify-content: center;
    justify-content: space-around;

    }

    .data-card-2:active {
      transform: scale(0.98);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }


    .data-label {
      font-size: 1rem;
      color: #555;
      margin-bottom: 10px;
    }

    .data-value {
      font-size: 1.5rem;
      font-weight: bold;
      color: #388e3c;
    }

    .footer {
      text-align: center;
      font-size: 0.75rem;
      color: #888;
    }

    /* Scrollable console for monthly energy data */
    .sliding-console {
      width: 100%;
      max-height: 250px;
      overflow-y: scroll;
      background-color: #f1f1f1;
      border-radius: 8px;
      padding: 1rem;
      margin-top: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .console-item {
      background-color: #ffffff;
      padding: 1rem;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
    }

    .console-item .date {
      color: #888;
      font-size: 0.9rem;
    }

    .console-item .value {
      color: #388e3c;
      font-weight: bold;
    }


    body {
    font-family: Arial, sans-serif;
}

.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.slider {
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    min-width: 200px;
    text-align: center;
}

button {
    background-color: #e8f5e9;
    color: #0073e6;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 10px;
}

button:hover {
    background-color: #e8f5e9;
}

  </style>
</head>
 

<body>
  <div class="container">
    <!-- <div class="title">Solar Energy Dashboard</div> -->
    <div class="data-grid">


      <div class="data-card" style="display: none;" onclick="fetchData()">
        <div class="data-label">ਅੱਜ</div>
        <div id="energy-today" class="data-value">ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...</div>
      </div>



      <div class="data-card-2">
        <button id="next-btn" class="prev">&#10094;</button>
      <div class="data-center">
        <div id="data-label-1" class="data-label">ਅੱਜ</div>
        <div id="energy-month-1" class="data-value">ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...</div>
      </div>
        <button id="prev-btn" class="next">&#10095;</button>
      </div>



      <div class="data-card-2">
        <button id="next-btn-1" class="prev-1">&#10094;</button>
      <div class="data-center">
        <div id="data-label-2" class="data-label">ਮਹੀਨਾ</div>
        <div id="energy-month" class="data-value">ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...</div>
      </div>
        <button id="prev-btn-1" class="next-1">&#10095;</button>
      </div>
   
<!-- 
      <div class="data-card" onclick="yearTab()">
        <div class="data-label">ਮਹੀਨਾ</div>
        <div id="energy-month" class="data-value">ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...</div>
      </div> -->


      <div class="data-card" onclick="fetchData(); monthTab(); yearTab();">
        <div class="data-label">ਕੁੱਲ</div>
        <div id="energy-total" class="data-value">ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...</div>
      </div>
    </div>
    
    <!-- Sliding console for the daily energy data -->
    <div id="sliding-console" class="sliding-console" style="display:none;">
      <!-- Daily data will be appended here dynamically -->
    </div>
  </div>

</body>
</html>


