| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Feedback Form</title>
|
|
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
| <style>
|
| @import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
|
| }
|
|
|
| body {
|
| background-color: #333333;
|
| color: #ffffff;
|
| padding: 20px;
|
| }
|
|
|
|
|
| .header {
|
| background-color: #ffed00;
|
| padding: 30px 20px;
|
| text-align: center;
|
| color: #333333;
|
|
|
| }
|
|
|
| .header h1 {
|
| font-size: 2.5rem;
|
| font-weight: 800;
|
| text-transform: uppercase;
|
| letter-spacing: 1px;
|
| text-shadow: 3px 3px 0 #333333;
|
| margin-bottom: 10px;
|
| font-family: 'Bungee Shade';
|
| }
|
|
|
| .header p {
|
| font-size: 1rem;
|
| margin-top: 15px;
|
| font-weight: 500;
|
| text-transform: uppercase;
|
| letter-spacing: 1px;
|
| font-family:'Courier New', Courier, monospace;
|
| font-weight: bolder;
|
| }
|
|
|
| .header-underline {
|
| width: 150px;
|
| height: 5px;
|
| background-color: #00b7ff;
|
| margin: 5px auto 15px;
|
| border-radius: 5px;
|
| }
|
|
|
|
|
| .form-container {
|
| padding: 30px;
|
| }
|
|
|
| .form-group {
|
| margin-bottom: 25px;
|
| }
|
|
|
| .form-group label {
|
| display: block;
|
| margin-bottom: 8px;
|
| font-weight: 600;
|
| color: #ffed00;
|
| }
|
|
|
| .form-control {
|
| width: 100%;
|
| padding: 12px 15px;
|
| background-color: #3a3a3a;
|
| border: 2px solid #ffed00;
|
| border-radius: 8px;
|
| color: #ffffff;
|
| font-size: 16px;
|
| }
|
|
|
| .form-control:focus {
|
| outline: none;
|
| border-color: #00b7ff;
|
| box-shadow: 0 0 5px rgba(0, 183, 255, 0.5);
|
| }
|
|
|
| textarea.form-control {
|
| min-height: 120px;
|
| resize: vertical;
|
| }
|
|
|
| .rating {
|
| display: flex;
|
| gap: 5px;
|
| margin-top: 10px;
|
| }
|
|
|
| .rating input[type="radio"] {
|
| display: none;
|
| }
|
|
|
| .rating label {
|
| cursor: pointer;
|
| width: 30px;
|
| height: 30px;
|
| background-color: #3a3a3a;
|
| border: 2px solid #ffed00;
|
| border-radius: 50%;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| color: #ffed00;
|
| font-weight: bold;
|
| transition: all 0.2s ease;
|
| }
|
|
|
| .rating input[type="radio"]:checked + label {
|
| background-color: #ffed00;
|
| color: #333333;
|
| transform: scale(1.1);
|
| }
|
|
|
| .submit-btn {
|
| display: block;
|
| width: 100%;
|
| padding: 15px;
|
| background-color: #ffed00;
|
| color: #333333;
|
| border: none;
|
| border-radius: 8px;
|
| font-size: 18px;
|
| font-weight: 700;
|
| text-transform: uppercase;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| margin-top: 10px;
|
| }
|
|
|
|
|
|
|
| .submit-btn:hover {
|
| background-color: #00b7ff;
|
| transform: translateY(-3px);
|
| }
|
|
|
|
|
|
|
| .form-section-title {
|
| display: flex;
|
| align-items: center;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .section-number {
|
| width: 40px;
|
| height: 40px;
|
| background-color: #ffed00;
|
| color: #333333;
|
| border-radius: 50%;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-weight: bold;
|
| font-size: 18px;
|
| margin-right: 15px;
|
| }
|
|
|
| .section-title {
|
| font-size: 1.3rem;
|
| color: #ffed00;
|
| }
|
|
|
|
|
| .paper-alert {
|
| background: #fff;
|
| border-radius: 2px;
|
| box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
| 0 0 0 1px rgba(0,0,0,0.05);
|
| min-width: 320px;
|
| max-width: 400px;
|
| position: fixed;
|
| right: 16px;
|
| top: 16px;
|
| overflow: hidden;
|
| opacity: 0;
|
| pointer-events: none;
|
| z-index: 10000;
|
| transform-origin: top right;
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| }
|
|
|
|
|
| .paper-alert::before {
|
| content: '';
|
| position: absolute;
|
| left: 0;
|
| bottom: -2px;
|
| width: 100%;
|
| height: 4px;
|
| background-color: #fff;
|
| background-image:
|
| radial-gradient(circle at 2px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
|
| radial-gradient(circle at 10px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
|
| radial-gradient(circle at 18px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
|
| radial-gradient(circle at 26px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
|
| radial-gradient(circle at 34px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
|
| radial-gradient(circle at 42px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px);
|
| background-size: 50px 10px;
|
| z-index: 2;
|
| }
|
|
|
|
|
| .paper-alert::after {
|
| content: '';
|
| position: absolute;
|
| left: 0;
|
| top: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
|
| pointer-events: none;
|
| z-index: 1;
|
| }
|
|
|
| .paper-alert.showAlert {
|
| opacity: 1;
|
| pointer-events: auto;
|
| }
|
|
|
| .paper-alert.show {
|
| animation: paper_enter 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
|
| }
|
|
|
| @keyframes paper_enter {
|
| 0% { transform: translateX(100%) rotate(5deg); }
|
| 50% { transform: translateX(-10%) rotate(-2deg); }
|
| 75% { transform: translateX(5%) rotate(1deg); }
|
| 100% { transform: translateX(0) rotate(0); }
|
| }
|
|
|
| .paper-alert.hide {
|
| animation: paper_exit 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
|
| }
|
|
|
| @keyframes paper_exit {
|
| 0% { transform: translateX(0) rotate(0); }
|
| 30% { transform: translateX(5%) rotate(1deg); }
|
| 100% { transform: translateX(110%) rotate(5deg); }
|
| }
|
|
|
| .paper-alert-content {
|
| position: relative;
|
| padding: 18px 15px;
|
| z-index: 3;
|
| }
|
|
|
| .paper-pin {
|
| position: absolute;
|
| width: 12px;
|
| height: 12px;
|
| background: #f44336;
|
| border-radius: 50%;
|
| top: 10px;
|
| left: 20px;
|
| box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.2);
|
| }
|
|
|
| .paper-pin:after {
|
| content: '';
|
| position: absolute;
|
| width: 6px;
|
| height: 6px;
|
| background: rgba(255,255,255,0.4);
|
| border-radius: 50%;
|
| top: 2px;
|
| left: 2px;
|
| }
|
|
|
| .paper-clip {
|
| position: absolute;
|
| top: -8px;
|
| right: 30px;
|
| width: 30px;
|
| height: 30px;
|
| border: 2px solid #5d9cec;
|
| border-radius: 0 0 0 10px;
|
| border-top: none;
|
| border-right: none;
|
| transform: rotate(45deg);
|
| z-index: 10;
|
| }
|
|
|
| .paper-clip:before {
|
| content: '';
|
| position: absolute;
|
| width: 15px;
|
| height: 10px;
|
| border: 2px solid #5d9cec;
|
| border-radius: 0 5px 0 5px;
|
| border-top: none;
|
| border-right: none;
|
| top: 0;
|
| left: 0;
|
| transform: rotate(0deg);
|
| }
|
|
|
| .alert-icon {
|
| display: flex;
|
| align-items: center;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .alert-icon i {
|
| font-size: 22px;
|
| color: #f44336;
|
| margin-right: 10px;
|
| }
|
|
|
| .alert-title {
|
| font-weight: 600;
|
| font-size: 16px;
|
| color: #333;
|
| margin: 0;
|
| }
|
|
|
| .paper-alert .msg {
|
| margin-top: 6px;
|
| margin-left: 32px;
|
| font-size: 14px;
|
| color: #555;
|
| line-height: 1.4;
|
| }
|
|
|
| .paper-alert .close-btn {
|
| position: absolute;
|
| top: 10px;
|
| right: 10px;
|
| width: 24px;
|
| height: 24px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| cursor: pointer;
|
| background: rgba(0,0,0,0.05);
|
| border-radius: 50%;
|
| color: #666;
|
| transition: all 0.2s;
|
| z-index: 5;
|
| }
|
|
|
| .paper-alert .close-btn:hover {
|
| background: rgba(0,0,0,0.1);
|
| color: #333;
|
| transform: rotate(90deg);
|
| }
|
|
|
| .alert-btn {
|
| position: fixed;
|
| top: 7rem;
|
| right: 2.5rem;
|
| z-index: 1201;
|
| font-size: 0.9rem;
|
| padding: 0.7rem 1.5rem;
|
| border-radius: 5px;
|
| background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
| color: white;
|
| border: none;
|
| box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
|
| cursor: pointer;
|
| font-family: 'Segoe UI', sans-serif;
|
| font-weight: 600;
|
| letter-spacing: 0.5px;
|
| transition: all 0.3s;
|
| }
|
|
|
| .alert-btn:hover {
|
| transform: translateY(-3px) scale(1.03);
|
| box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
|
| }
|
|
|
| .paper-lines {
|
| position: absolute;
|
| left: 0;
|
| top: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-image:
|
| linear-gradient(to bottom, transparent 0%, transparent 98%, #e0e0e0 99%, transparent 100%);
|
| background-size: 100% 24px;
|
| z-index: 0;
|
| pointer-events: none;
|
| }
|
|
|
| .handwritten {
|
| font-family: 'Segoe Script', 'Bradley Hand', cursive;
|
| transform: rotate(-1deg);
|
| color: #2c3e50;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="paper-alert hide" id="paperAlert">
|
| <div class="paper-pin"></div>
|
| <div class="paper-clip"></div>
|
| <div class="paper-lines"></div>
|
| <div class="paper-alert-content">
|
| <div class="alert-icon">
|
| <i class="fas fa-exclamation-circle" id="alertIcon"></i>
|
| <h4 class="alert-title" id="alertTitle">Authentication Required</h4>
|
| </div>
|
| <div class="msg handwritten" id="alertMessage">You must be Logged In to continue!</div>
|
| <div class="close-btn">
|
| <i class="fas fa-times"></i>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="header">
|
| <h1>Customer Feedback</h1>
|
| <div class="header-underline"></div>
|
| <p>Help us improve our service by sharing your experience</p>
|
| </div>
|
|
|
| <form class="form-container" id="feedbackForm">
|
| <div class="form-section-title">
|
| <div class="section-number">01</div>
|
| <h2 class="section-title">Your Information</h2>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="name">Full Name</label>
|
| <input type="text" id="name" class="form-control" placeholder="Enter your name" required>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="email">Email Address</label>
|
| <input type="email" id="email" class="form-control" placeholder="Enter your email" required>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="phone">Phone Number</label>
|
| <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number">
|
| </div>
|
|
|
| <div class="form-section-title">
|
| <div class="section-number">02</div>
|
| <h2 class="section-title">Your Experience</h2>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label>How would you rate your overall experience?</label>
|
| <div class="rating">
|
| <input type="radio" name="rating" id="star1" value="1">
|
| <label for="star1">1</label>
|
|
|
| <input type="radio" name="rating" id="star2" value="2">
|
| <label for="star2">2</label>
|
|
|
| <input type="radio" name="rating" id="star3" value="3">
|
| <label for="star3">3</label>
|
|
|
| <input type="radio" name="rating" id="star4" value="4">
|
| <label for="star4">4</label>
|
|
|
| <input type="radio" name="rating" id="star5" value="5">
|
| <label for="star5">5</label>
|
| </div>
|
| </div>
|
|
|
| <div class="form-section-title">
|
| <div class="section-number">03</div>
|
| <h2 class="section-title">Your Feedback</h2>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="comments">Please share your thoughts or suggestions</label>
|
| <textarea id="comments" class="form-control" placeholder="Your feedback is valuable to us..." required></textarea>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="improvements">How can we improve our service?</label>
|
| <textarea id="improvements" class="form-control" placeholder="Any suggestions for improvement..."></textarea>
|
| </div>
|
|
|
| <button type="submit" class="submit-btn" id="submitBtn">Submit Feedback</button>
|
| </form>
|
|
|
|
|
| <script>
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| console.log("DOM fully loaded");
|
|
|
|
|
| const form = document.getElementById('feedbackForm');
|
| console.log("Form element:", form);
|
|
|
|
|
| function showPaperAlert(message, title = "Alert", icon = "fa-exclamation-circle", duration = 7000) {
|
| console.log("Showing alert:", message);
|
| const paperAlert = document.getElementById('paperAlert');
|
| const alertMessage = document.getElementById('alertMessage');
|
| const alertTitle = document.getElementById('alertTitle');
|
| const alertIcon = document.getElementById('alertIcon');
|
|
|
|
|
| alertMessage.textContent = message;
|
| alertTitle.textContent = title;
|
|
|
|
|
| alertIcon.className = '';
|
| alertIcon.classList.add('fas', icon);
|
|
|
|
|
| paperAlert.classList.remove("hide");
|
| paperAlert.classList.add("show", "showAlert");
|
|
|
|
|
| setTimeout(() => {
|
| hideAlert();
|
| }, duration);
|
| }
|
|
|
|
|
| function hideAlert() {
|
| console.log("Hiding alert");
|
| const paperAlert = document.getElementById('paperAlert');
|
| paperAlert.classList.remove("show");
|
| paperAlert.classList.add("hide");
|
| setTimeout(() => {
|
| paperAlert.classList.remove("showAlert");
|
| }, 500);
|
| }
|
|
|
|
|
| document.querySelector('#paperAlert .close-btn').addEventListener('click', function() {
|
| hideAlert();
|
| });
|
|
|
|
|
|
|
| if (form) {
|
| form.addEventListener('submit', function(event) {
|
| event.preventDefault();
|
| console.log("Form submitted");
|
| showPaperAlert(
|
| "Thank you for your feedback!",
|
| "Submission Successful",
|
| "fa-check-circle",
|
| 7000
|
| );
|
| });
|
| } else {
|
| console.error("Form element not found!");
|
| }
|
| });
|
| </script>
|
| </body>
|
| </html> |
