NIT_Sri_Electricity_Management_System / apps / templates / home / user_profile.html
user_profile.html
Raw 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profile</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap");

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: "Roboto", sans-serif;
      }

      html,
      body {
        height: 100%;
        background-color: #f5f6fa;
        overflow-x: hidden;
      }

      .page-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      main {
        flex: 1;
        padding: 2rem;
        background-color: #eee;
        background: url("{{ ASSETS_ROOT }}/img/whiteModeUserBg.jpeg") center /
          cover no-repeat fixed;
      }
      nav {
        background-color: white;
        color: black;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 100px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.115);
      }

      .nav-logo {
        display: flex;
        align-items: center;
      }

      .nav-logo img {
        width: 60px;
        margin-right: 10px;
      }

      .nav-text {
        font-size: 30px;
        font-weight: bold;
      }
      nav .ul-container {
        list-style: none;
        display: flex;
        align-items: center;
      }
      nav ul {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      nav ul li {
        margin: 0 20px;
        overflow: hidden;
      }

      nav ul li:first-child {
        margin-left: 40px;
      }

      nav ul li:last-child {
        margin-right: 0;
      }

      nav ul li a {
        color: #333;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        transition: color 0.3s;
      }

      nav ul li a:hover {
        color: #6e67eb;
      }

      .menu-button-container {
        display: none;
        height: 100%;
        width: 30px;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #menu-toggle {
        display: none;
      }

      .menu-button,
      .menu-button::before,
      .menu-button::after {
        display: block;
        background-color: black;
        position: absolute;
        height: 3px;
        width: 30px;
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 2px;
      }

      .menu-button::before {
        content: "";
        margin-top: -8px;
      }

      .menu-button::after {
        content: "";
        margin-top: 8px;
      }

      #menu-toggle:checked + .menu-button-container .menu-button::before {
        margin-top: 0px;
        transform: rotate(405deg);
      }

      #menu-toggle:checked + .menu-button-container .menu-button {
        background: rgba(255, 255, 255, 0);
      }

      #menu-toggle:checked + .menu-button-container .menu-button::after {
        margin-top: 0px;
        transform: rotate(-405deg);
      }

      .user-profile {
        display: flex;
        min-height: calc(100vh - 300px);
        align-items: center;
      }

      .user-details-container,
      .room-details-container {
        flex: 1;
        padding: 50px 30px;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background-color: rgba(255, 255, 255, 0.45);
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(15px);
        min-height: 300px;
      }

      .user-details-container {
        margin-left: 100px;
        margin-right: 70px;
      }
      .room-details-container {
        margin-left: 0px;
        margin-right: 100px;
      }

      .user-profile p {
        font-size: 16px;
        margin: 5px 0;
        color: #224;
        padding: 5px 20px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
      }

      .user-profile span.value {
        font-weight: bold;
      }
      .user-profile hr {
        width: 100%;
        border: 0;
        height: 1px;
        background-image: linear-gradient(
          to right,
          rgba(46, 46, 46, 0.15),
          rgba(46, 46, 46, 0.6),
          rgba(46, 46, 46, 0.15)
        );
      }
      .user-profile p.user-type {
        text-transform: capitalize;
      }

      .theme-toggle-container {
        position: relative;
        width: 60px;
        height: 30px;
      }

      .theme-toggle {
        appearance: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #8e1f1f;
        border-radius: 30px;
        cursor: pointer;
        outline: none;
        transition: background-color 0.3s;
      }

      .theme-toggle:before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s, background-color 0.3s;
      }
      input[type="checkbox"] {
        visibility: hidden;
      }

      input[type="checkbox"]:checked + .theme-toggle:before {
        transform: translateX(30px);
        background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
      }
      .theme-toggle.dark {
        background-color: #eaeaea;
      }

      .theme-toggle.dark:before {
        background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
      }

      footer {
        background-color: rgba(255, 255, 255, 0.803);
        border-top: 1px solid rgba(0, 0, 0, 0.291);
        color: black;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
      }

      .footer-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .footer-text {
        font-size: 18px;
        margin-right: 10px;
      }

      /* dark mode code */
      body.dark-mode {
        color: #fff;
      }

      body.dark-mode main {
        background: url("{{ ASSETS_ROOT }}/img/darkModeUserBg.jpg") center /
          cover no-repeat fixed;
      }

      body.dark-mode .menu-button,
      body.dark-mode .menu-button::before,
      body.dark-mode .menu-button::after {
        background-color: white;
      }
      body.dark-mode .menu li {
        background: rgb(1, 3, 26);
      }
      body.dark-mode .menu.show li {
        border-top: 1px solid #9f9f9f54;
      }
      body.dark-mode .user-details-container,
      body.dark-mode .room-details-container {
        border: 1px solid rgba(53, 53, 53, 0.18);

        background-color: rgba(82, 82, 82, 0.45);
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

        backdrop-filter: blur(15px);
      }
      body.dark-mode .user-profile hr {
        background-image: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.15),
          rgba(255, 255, 255, 0.6),
          rgba(255, 255, 255, 0.15)
        );
      }

      body.dark-mode .user-profile p {
        color: #eee;
      }

      body.dark-mode .theme-toggle.dark {
        background: #3e3e3e;
      }
      body.dark-mode .theme-toggle.dark::before {
        box-shadow: inset -3px -2px 5px -2px #8983f7,
          inset -10px -4px 0 0 #a3dafb;
        background: #3e3e3e;
      }

      nav.dark-mode {
        background: rgb(1, 3, 26);
        color: white;
        box-shadow: none;
      }
      nav.dark-mode ul li a {
        color: white;
      }
      nav.dark-mode ul li a:hover {
        color: #b0acff;
      }
      footer.dark-mode {
        background: rgb(1, 3, 26);
        color: white;
      }
      @media screen and (max-width: 1200px) {
        nav {
          padding: 20px 35px;
        }

        nav ul li {
          margin: 0 12px;
        }
        .user-details-container {
          margin: 150px 20px 100px 20px;
        }
        .room-details-container {
          margin: 150px 20px 100px 0px;
        }
        .user-profile p {
          padding: 5px 0;
        }
      }
      @media screen and (max-width: 850px) {
        nav {
          padding: 20px 40px;
          position: relative;
        }

        .menu-button-container {
          display: flex;
        }
        .menu {
          position: absolute;
          top: 100%;
          left: 0;
          flex-direction: column;
          width: 100%;
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }

        .menu li {
          display: flex;
          justify-content: center;
          width: 100%;
          background-color: white;
          color: black;

          height: 0px;
          margin: 0;
          padding: 0;
          border: 0;
          transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        }
        .menu.show li {
          border-top: 1px solid #44444454;
          height: 2.5em;
          padding: 0.5em;
          transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        }
        /*.menu.show > li:not(:first-child) {
          border-bottom: 1px solid #444;
        }*/
        nav ul li:first-child {
          margin-left: 0px;
        }

        .user-profile {
          flex-direction: column;
          align-items: normal;
        }
        .user-details-container,
        .room-details-container {
          backdrop-filter: blur(50px);
          min-height: fit-content;
        }
        .user-profile p {
          color: rgb(10, 10, 16);
        }
        .user-details-container {
          margin: 0px 55px 30px 55px;
        }
        .room-details-container {
          margin: 0px 55px 0px 55px;
        }
      }
      @media screen and (max-width: 550px) {
        main {
          padding: 0;
        }
        nav {
          padding: 20px 15px;
        }

        .menu-button,
        .menu-button::before,
        .menu-button::after {
          height: 3px;
          width: 25px;
        }
        .menu li a {
          font-size: 16px;
        }
        .nav-logo img {
          width: 45px;
        }
        .nav-text {
          font-size: 20px;
        }
        .theme-toggle-container {
          width: 40px;
          height: 20px;
        }
        .theme-toggle:before {
          top: 1px;
          left: 0px;
          width: 18px;
          height: 18px;
        }
        input[type="checkbox"]:checked + .theme-toggle:before {
          transform: translateX(20px);
        }

        .user-profile p {
          font-size: 12px;
        }
        .user-details-container {
          margin: 50px 10px 30px 10px;
        }
        .room-details-container {
          margin: 0px 10px 60px 10px;
        }
        footer {
          padding: 12px 0;
        }
        .footer-text {
          font-size: 12px;
        }
      }
    </style>
  </head>
  <body>
    <div class="page-container">
      <header>
        <nav>
          <input id="menu-toggle" type="checkbox" />
          <label class="menu-button-container" for="menu-toggle">
            <div class="menu-button"></div>
          </label>
          <div class="nav-logo">
            <a
              href="user_profile"
              class="simple-text logo-mini-dark"
              style="display: none"
            >
              <img
                class="dark-mode-logo"
                src="{{ ASSETS_ROOT }}/img/nitLogoWhite.png"
                alt="Logo"
              />
            </a>
            <a href="user_profile" class="simple-text logo-mini">
              <img
                class="white-mode-logo"
                src="{{ ASSETS_ROOT }}/img/nitsriLogo.png"
                alt="Logo"
              />
            </a>
            <div class="nav-text">Profile</div>
          </div>
          <div class="ul-container">
            <div class="theme-toggle-container">
              <input type="checkbox" id="themeToggle" class="bsc" checked />
              <label class="theme-toggle dark" for="themeToggle"></label>
            </div>
            <ul class="menu">
              {% if user_role == 'user'%}
              <li>
                <a href="{% url 'user_profile'%}">Profile</a>
              </li>
              {% endif %}
              {% if user_role == 'user'%}
              <li>
                <a href="{% url 'user_bills'%}">Bills</a>
              </li>
              {% endif %}

              {% if user_role == 'admin' or user_role == 'operator' %}
              <li>
                <a href="/">Dashboard</a>
              </li>
              {% endif %}
              <li>
                <a href="{% url 'change_password.html'%}">Change Password</a>
              </li>
              <li>
                <a href="{% url 'logoutuser'%}">Logout</a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <main>
        <div class="user-profile">
          <div class="user-details-container">
            <hr />
            <p class="full-name">
              <span class="key">Full Name</span
              ><span class="value">{{ user_details.full_name }}</span>
            </p>
            <hr />
            <p class="email">
              <span class="key">Email</span
              ><span class="value">{{ user_details.email }}</span>
            </p>
            <hr />
            <p class="user-type">
              <span class="key">Balance</span>
              <span class="value">{{user_details.balance }}</span>
            </p>
            <hr />
            <p class="user-department">
              <span class="key">Department</span
              ><span class="value">{{ user_department }}</span>
            </p>
            <hr />
          </div>
          {% if room_details %}
          <div class="room-details-container">
            <hr />
            <p class="room-details">
              <span class="key">Room Number</span
              ><span class="value">Room {{ room_details.room_number }}</span>
            </p>
            <hr />
            <p class="quarter-type">
              <span class="key">Quarter Type</span
              ><span class="value">{{ quarter_type }}</span>
            </p>
            <hr />
            {% if room_details.is_metered %}
            <p class="metering-type">
              <span class="key">Metering Type</span>
              <span class="value">Metered</span>
            </p>
            <hr />

            <p class="sanctioned-load">
              <span class="key">Sanctioned Load</span
              ><span class="value">{{ room_details.sanctioned_load }}</span>
            </p>
            <hr />
            {% else %}
            <p class="metering-type">
              <span class="key">Metering Type</span
              ><span class="value">Unmetered</span>
            </p>
            <hr />
            {% endif %}
          </div>
          {% endif %}
        </div>
      </main>
      <footer>
        <div class="footer-container">
          <p class="footer-text">
            Team Z &copy; <span id="currentYear"></span> All rights reserved.
          </p>
        </div>
      </footer>
    </div>
    <script>
      function setThemePreference(theme) {
        localStorage.setItem("theme", theme);
      }

      function getThemePreference() {
        return localStorage.getItem("theme") || "dark";
      }

      function applyThemePreference() {
        const body = document.body;
        const nav = document.querySelector("nav");
        const footer = document.querySelector("footer");
        const whiteContentImg = document.querySelector(".logo-mini");
        const darkContentImg = document.querySelector(".logo-mini-dark");

        const themeToggle = document.getElementById("themeToggle");
        const menu = document.querySelector(".menu");

        const currentYearElement = document.getElementById("currentYear");
        const currentYear = new Date().getFullYear();
        currentYearElement.textContent = currentYear;

        const themePreference = getThemePreference();

        if (themePreference === "dark") {
          whiteContentImg.style.display = "none";
          darkContentImg.style.display = "inline";
          body.classList.add("dark-mode");
          nav.classList.add("dark-mode");
          footer.classList.add("dark-mode");
          themeToggle.checked = true;
        } else {
          whiteContentImg.style.display = "inline";
          darkContentImg.style.display = "none";
          body.classList.remove("dark-mode");
          nav.classList.remove("dark-mode");
          footer.classList.remove("dark-mode");
          themeToggle.checked = false;
        }
      }

      document.addEventListener("DOMContentLoaded", () => {
        applyThemePreference();
      });

      const themeToggle = document.getElementById("themeToggle");
      themeToggle.addEventListener("click", () => {
        if (themeToggle.checked) {
          setThemePreference("dark");
        } else {
          setThemePreference("light");
        }
        applyThemePreference();
      });

      const burgerBtn = document.getElementById("menu-toggle");
      const menu = document.querySelector(".menu");
      burgerBtn.addEventListener("click", () => {
        menu.classList.toggle("show");
      });
    </script>
  </body>
</html>
Powered by GitFront