bg front.html

<!DOCTYPE html>
<html>
  <head>
    <title>Friend's Fries BG</title>
    <link rel="stylesheet" href="css/style3.css">
    <link
      href="https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css"
      rel="stylesheet"
    >
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    >
    <style>
      body {
        background-image: url("img/BG-2.jpg");
        text-align: center;
        background-size: cover;
      }
      
.login-form {
        display: none;
        padding: 30px;
        border-radius: 10px;
        width: 600px; 
        margin: 0 auto;
      }
.login-form label {
        display: block;
        margin-bottom: 15px;
        color: #fff;
      }

.login-form input[type="text"],
.login-form input[type="password"] {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
      }
.login-form .login-button {
        background-color: #333;
        color: white;
        padding: 20px 25px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        transition: background-color 0.3s ease;
      }
      .login-form .login-button:hover {
        background-color: #555;
      }

#termsPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    max-height: 70vh; 
    overflow-y: auto; 
}

#overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
        }


#closeBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        z-index: 1001; 
        }

.terms-conditions{
        text-align: left;
    }

    .x {
        font-size: 20px;
    }
    
.copyright-section {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    }

.copyright-image {
        width: 70px;
        height: 70px; 
        border-radius: 50%; 
}
.website {
    text-align: center; 
}


.website a {
    margin-top: 10px; 
}


.website i {
    margin-right: 10px;
    color: white;
}

.star-rating {
    font-size: 30px;
    cursor: pointer;
}

.star {
    color: #ddd;
    transition: color 0.2s;
    margin-right: 5px;
}

.star:hover,
.star.active {
    color: #ffc107;
}
.hr-container {
  text-align: center; 
  background: linear-gradient(270deg, #FF5733, #FFA07A);;
  margin-top: 900px;
}

    </style>
  </head>
  <body>
    <header>
      <div class="nav container">
        <i class="bx bxs-food-menu">
          <a class="logo" href="">Home</a>
        </i>
        <i class="bx bxs-contact">
          <a href="Contacts.html" class="logo">Contacts</a>
        </i>
        <i class="bx bx-user-pin">
          <a href="About Us.html" class="logo">About Us</a>
        </i>
<i class="bx bxs-user" id="cart-icon" onclick="toggleLoginForm()"></i>
        <div class="cart">
          <h2 class="cart-title">Your Cart</h2>
          <div class="cart-content"></div>
          <div class="total">
            <div class="total-title">Total</div>
            <div class="total-price">$0</div>
          </div>
          <i class="bx bx-x" id="close-cart"></i>
        </div>
      </div>
    </header>

    <div class="centered-button">
      <a href="Index.html">
        <button type="button" class="btn-stylish">Buy Now!</button>
      </a>
    </div>


    <div class="login-form" style="position: absolute; top: 50%; right: 25%; transform: translate(50%, -50%);">
     <form>

        <img src="img/dafuq.png" alt="Dafuq" width="100px" height="200px"/>

        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>

        <input type="button" class="login-button" value="Login" onclick="window.location.href='Index.html';">
        <p><i>Don't have an account?</i></p><a href="signup.html">Click here</a>
      </form>
    </div>
 <div class="hr-container">
    <div class="copyright-section">
    <img src="img/dafuq.png" class="copyright-image">
    <div class="terms-conditions">
        <p>Copyright @2023 Friend's Fries Philippines.</p>
        <p>
            <a href="#" id="showTerms">Terms and Conditions</a>│ Website usage
        </p>
    </div>
     <div class="website" style="margin-left: 450px;">
    <p><i>Follow us on: </i></p>
    <div class="social-icons-container">
        <a href="https://www.facebook.com/profile.php?id=61552793182697&mibextid=ZbWKwL" target="_blank"><i class="bx bxl-facebook" style="font-size: 30px; color: black; margin-top: 20px;"></i></a>
        &nbsp;&nbsp;
        <a href="https://instagram.com/fri_endsfries?igshid=OGQ5ZDc2ODk2ZA==" target="_blank"><i class="bx bxl-instagram" style="font-size: 30px; color: black; margin-top: 20px;"></i></a>
        &nbsp;&nbsp;
        <a href="https://x.com/frie_dsfries?t=D8onelENTYg2FAUO1pMpaQ&s=09" target="_blank"><i class="bx bxl-twitter" style="font-size: 30px; color: black; margin-top: 20px;"></i></a>
    </div>
</div>

<div class="feedbacks" style="margin-left: 600px;">
    <div class="star-rating" id="star-rating">
        <span class="star" data-rating="1">&#9733;</span>
        <span class="star" data-rating="2">&#9733;</span>
        <span class="star" data-rating="3">&#9733;</span>
        <span class="star" data-rating="4">&#9733;</span>
        <span class="star" data-rating="5">&#9733;</span>
    </div>
    <p><i>Please rate us</i></p>
</div>
</div>



<div id="overlay"></div>
    <div id="termsPopup" style="text-align: left; padding: 20px;">
    <div id="closeBtn" onclick="closePopup()"><i class='bx bx-x x'></i></div>
    <h2 style="text-align: center;">Terms and Conditions</h2>
     <p>
        1. Acceptance of Terms
        <br>
        By accessing or using our fast food e-commerce platform, you agree to comply with and be bound by these terms and conditions. If you do not agree to these terms, please do not use our platform.
    </p>

    <p>
        2. Ordering and Payment
        <br>
        2.1. You may place orders through our website or mobile application.
        <br>
        2.2. Payment must be made at the time of placing the order. We accept GCASH.
    </p>
    <p>
        3. Delivery
        <br>
        3.1. We will make best efforts to deliver orders within the estimated time frames, but we do not guarantee delivery times.
        <br>
        3.2. Delivery charges may apply, and they will be displayed during the checkout process.
    </p>

    <p>
        4. Cancellations and Refunds
        <br>
        4.1. Orders may be canceled before they are processed. Once an order is processed, it cannot be canceled.
        <br>
        4.2. Refunds may be issued for orders that are canceled before processing or for products that are unavailable. Refund requests must be made within 1 days of the order date.
    </p>

    <p>
        5. Quality and Satisfaction
        <br>
        5.1. We strive to provide high-quality food products. If you are dissatisfied with your order, please contact our customer service within +63927-336-7422 hours of receiving your order.
        <br>
        5.2. We reserve the right to refuse service, terminate accounts, or cancel orders at our discretion.
    </p>

    <p>
        6. Privacy Policy
        <br>
        6.1. Your privacy is important to us. Please review our Privacy Policy to understand how we collect, use, and disclose your personal information.
    </p>

    <p>
        7. Intellectual Property
        <br>
        7.1. All content on our platform, including images, text, logos, and graphics, is the property of Friend's Fries and is protected by copyright and other intellectual property laws.
    </p>

    <p>
        8. Governing Law
        <br>
        8.1. These terms and conditions are governed by and construed in accordance with the laws of Friend's Fries.
    </p>

    <p>
        9. Changes to Terms and Conditions
        <br>
        9.1. We reserve the right to update, change, or replace any part of these terms at our discretion. It is your responsibility to check our platform periodically for changes.
    </p>

    <p>
        10. Contact Information
        <br>
        If you have any questions about these terms and conditions, please contact us at [azucenajustianllen@gmail.com/+63927-336-7422].
    </p>

</div> 
</footer>
 <script>
     var cartIcon = document.getElementById('cart-icon');

      // Attach a click event listener to the cart icon
      cartIcon.addEventListener('click', function() {
        toggleLoginForm();
      });

      function toggleLoginForm() {
        var loginForm = document.querySelector('.login-form');
        loginForm.style.display = (loginForm.style.display === 'none') ? 'block' : 'none';
      }
       document.getElementById('showTerms').addEventListener('click', function (e) {
        e.preventDefault();
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('termsPopup').style.display = 'block';
    });

    function closePopup() {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('termsPopup').style.display = 'none';
    }
    document.addEventListener("DOMContentLoaded", function () {
  const stars = document.querySelectorAll(".star");

  stars.forEach((star) => {
    star.addEventListener("click", function () {
      const rating = this.getAttribute("data-rating");
      resetStars();
      highlightStars(rating);
    });
  });

  function resetStars() {
    stars.forEach((star) => {
      star.classList.remove("active");
    });
  }

  function highlightStars(count) {
    for (let i = 0; i < count; i++) {
      stars[i].classList.add("active");
    }
  }
});
    </script>
  </body>
</html>