Contacts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Friend's Fries Contacts</title>
    <link rel="stylesheet" href="css/style1.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/bglol.png');
    
}


@keyframes formFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container2 form {
  animation: formFadeIn 1.5s ease-in-out;
}
.info {
  animation: formFadeIn 1.5s ease-in-out;
}


@keyframes headerFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


header {
  animation: headerFadeIn 1s ease-in-out;
}
#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);;
}
</style>
</head>
<body>
    <header>
              <div class="nav container">
            <i class='bx bxs-food-menu'>
            <a href="index.html" class="logo">Home</a>
            </i>
            <!-- Cart-Icon -->
            <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"></i>
            <div class="cart">
                <h2 class="cart-title">Your Cart</h2>
                <div class="cart-content">

                </div>
                <!-- Total -->
                <div class="total">
                    <div class="total-title">Total</div>
                    <div class="total-price">$0</div>
                </div>
                <button type="button" class="btn-buy">Buy Now</button>

                <i class='bx bx-x' id="close-cart"></i>
            </div>
        </div>
    </header>
<div class="container2">
    <form onsubmit="sendEmail(); reset(); return false;">
        <h3>CONTACT US</h3>
        <input type="text" id="name" placeholder="Your Name" required>
        <input type="email" id="email" placeholder="Email" required>
        <input type="text" id="phone" placeholder="Phone Number" required>
        <textarea id="message" rows="4" placeholder="Enter your concerns"></textarea>
        <button type="submit">Send Message</button>
        
        <!-- Social Media Links -->
        <div class="social-media-contact">
            <a href="https://www.facebook.com/profile.php?id=61552793182697&mibextid=ZbWKwL" target="_blank"><i class="bx bxl-facebook" style="font-size: 30px; color: white; 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: white; 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: white; margin-top: 20px;"></i></a>
        </div>
    </form>
<div class="info">
    <h2>General Location</h2>
    <img src="img/info.png">
    <i>
    <p><b>Let us know how we can help you!</b></p>
    <p><b>Technical  Officer</b></p>
    <p>Email: azucenajustinallen@gmail.com<br> Number: +63927-336-7422</p>
    <p><b>Manager</b></p>
    <p>Email: rjvillegas47@gmail.com<br> Number: +63938-440-4437</p>
    </i>
    </div>
</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.youtube.com/watch?v=GmG4X9PGOXs&list=RDGmG4X9PGOXs&start_radio=1" 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>



<script src="https://smtpjs.com/v3/smtp.js"></script>
<script type="text/javascript">
    function sendEmail() {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var phone = document.getElementById("phone").value;
        var message = document.getElementById("message").value;

        var emailBody = "Name: " + name + "\n" +
                        "Email: " + email + "\n" +
                        "Phone: " + phone + "\n" +
                        "Message: " + message;

        Email.send({
            Host: "smtp.elasticemail.com",
            Username: "azucena.13652100021@depedqc.ph",
            Password: "B93BD86522006650F1E6B4A3AE2CF4AE933F",
            To: 'azucena.13652100021@depedqc.ph',
            From: email,
            Subject: "New Contact Form Inquiry",
            Body: emailBody
        }).then(
            message => alert(message)
        );
    }
     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>
</html>