Customer Feedback - Gophine Services<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Reset and Base Styles - Optimized for Mobile *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n \r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n \r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n line-height: 1.6;\r\n color: #333333;\r\n background-color: #f8fafc;\r\n overflow-x: hidden;\r\n \/* Critical for mobile scrolling *\/\r\n -webkit-overflow-scrolling: touch;\r\n height: 100%;\r\n position: relative;\r\n }\r\n \r\n \/* Remove all GPU acceleration hacks - they can cause issues *\/\r\n .feedback-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n \r\n \/* Header - Fixed height for stability *\/\r\n .feedback-header {\r\n background: linear-gradient(135deg, #004d99 0%, #0066cc 50%, #4CAF50 100%);\r\n color: white;\r\n text-align: center;\r\n padding: 60px 20px;\r\n position: relative;\r\n overflow: hidden;\r\n margin-bottom: 40px;\r\n min-height: 200px;\r\n }\r\n \r\n .feedback-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.1) 0%, transparent 50%);\r\n }\r\n \r\n .feedback-header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 15px;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n position: relative;\r\n }\r\n \r\n .feedback-header p {\r\n font-size: 1.1rem;\r\n opacity: 0.95;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n \r\n \/* Main Content Layout - Simpler for mobile *\/\r\n .feedback-main {\r\n display: block;\r\n margin-bottom: 60px;\r\n }\r\n \r\n @media (min-width: 992px) {\r\n .feedback-main {\r\n display: grid;\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: 60px;\r\n }\r\n }\r\n \r\n \/* Feedback Form - Removed sticky completely *\/\r\n .feedback-form-container {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 30px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n margin-bottom: 40px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .form-title {\r\n font-size: 1.8rem;\r\n color: #004d99;\r\n margin-bottom: 10px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .form-subtitle {\r\n color: #6c757d;\r\n margin-bottom: 25px;\r\n font-size: 1rem;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .form-label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #333;\r\n font-size: 1rem;\r\n }\r\n \r\n .form-input, .form-textarea, .form-select {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #e2e8f0;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px; \/* Prevents iOS zoom *\/\r\n transition: border-color 0.2s ease;\r\n background: #f8fafc;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n }\r\n \r\n .form-input:focus, .form-textarea:focus, .form-select:focus {\r\n outline: none;\r\n border-color: #004d99;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.1);\r\n }\r\n \r\n .form-textarea {\r\n min-height: 120px;\r\n resize: vertical;\r\n line-height: 1.5;\r\n }\r\n \r\n \/* Rating System *\/\r\n .rating-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n \r\n .rating-label {\r\n font-weight: 600;\r\n color: #333;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .rating-stars {\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 5px;\r\n justify-content: center;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .rating-stars {\r\n justify-content: flex-start;\r\n }\r\n }\r\n \r\n .star {\r\n font-size: 2rem;\r\n color: #e2e8f0;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n padding: 5px;\r\n }\r\n \r\n .star.active {\r\n color: #FFD700;\r\n }\r\n \r\n .star-text {\r\n font-size: 0.9rem;\r\n color: #6c757d;\r\n font-style: italic;\r\n text-align: center;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .star-text {\r\n text-align: left;\r\n }\r\n }\r\n \r\n \/* Service Selection *\/\r\n .service-selection {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n margin-top: 10px;\r\n }\r\n \r\n @media (min-width: 480px) {\r\n .service-selection {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n .service-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 15px;\r\n background: #f8fafc;\r\n border: 2px solid #e2e8f0;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n user-select: none;\r\n min-height: 60px;\r\n }\r\n \r\n .service-option.selected {\r\n background: rgba(0, 77, 153, 0.1);\r\n border-color: #004d99;\r\n color: #004d99;\r\n font-weight: 600;\r\n }\r\n \r\n .service-icon {\r\n font-size: 1.3rem;\r\n width: 30px;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 8px;\r\n background: rgba(0, 77, 153, 0.1);\r\n color: #004d99;\r\n flex-shrink: 0;\r\n }\r\n \r\n .service-option.selected .service-icon {\r\n background: #004d99;\r\n color: white;\r\n }\r\n \r\n \/* Other Service Input *\/\r\n .other-service-container {\r\n margin-top: 15px;\r\n display: none;\r\n }\r\n \r\n .other-service-container.show {\r\n display: block;\r\n animation: fadeIn 0.3s ease;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n \r\n \/* Checkbox Group *\/\r\n .checkbox-group {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n margin-top: 10px;\r\n }\r\n \r\n @media (min-width: 480px) {\r\n .checkbox-group {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n .checkbox-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px;\r\n background: #f8fafc;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n user-select: none;\r\n min-height: 50px;\r\n }\r\n \r\n .checkbox-option input {\r\n width: 18px;\r\n height: 18px;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n }\r\n \r\n \/* Submit Button *\/\r\n .submit-btn {\r\n width: 100%;\r\n padding: 16px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n margin-top: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n -webkit-appearance: none;\r\n touch-action: manipulation;\r\n min-height: 56px;\r\n }\r\n \r\n .submit-btn:active {\r\n transform: scale(0.98);\r\n }\r\n \r\n .submit-btn.loading {\r\n opacity: 0.7;\r\n cursor: not-allowed;\r\n }\r\n \r\n \/* Testimonials Sidebar *\/\r\n .testimonials-sidebar {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 30px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .sidebar-title {\r\n font-size: 1.8rem;\r\n color: #004d99;\r\n margin-bottom: 25px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n text-align: center;\r\n }\r\n \r\n .testimonial-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n \r\n .testimonial-card {\r\n background: #f8fafc;\r\n border-radius: 15px;\r\n padding: 20px;\r\n border-left: 4px solid #004d99;\r\n transition: transform 0.2s ease;\r\n }\r\n \r\n .testimonial-card:active {\r\n transform: scale(0.99);\r\n }\r\n \r\n .testimonial-rating {\r\n color: #FFD700;\r\n margin-bottom: 12px;\r\n font-size: 1.1rem;\r\n }\r\n \r\n .testimonial-text {\r\n font-style: italic;\r\n margin-bottom: 15px;\r\n line-height: 1.6;\r\n }\r\n \r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n \r\n .author-avatar {\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-weight: bold;\r\n font-size: 1rem;\r\n flex-shrink: 0;\r\n }\r\n \r\n .author-info h4 {\r\n font-weight: 600;\r\n margin-bottom: 3px;\r\n font-size: 1rem;\r\n }\r\n \r\n .author-info p {\r\n color: #6c757d;\r\n font-size: 0.85rem;\r\n }\r\n \r\n \/* Feedback Stats *\/\r\n .feedback-stats {\r\n background: linear-gradient(135deg, #004d99, #0066cc);\r\n color: white;\r\n border-radius: 20px;\r\n padding: 40px 20px;\r\n margin: 50px 0;\r\n text-align: center;\r\n box-shadow: 0 15px 30px rgba(0, 77, 153, 0.15);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .stats-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n margin-top: 30px;\r\n }\r\n \r\n .stat-item {\r\n text-align: center;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n margin-bottom: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .stat-label {\r\n font-size: 1rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* Success Modal - Fixed positioning fix *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n padding: 20px;\r\n }\r\n \r\n .modal-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n \r\n .success-modal {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n max-width: 500px;\r\n width: 100%;\r\n text-align: center;\r\n transform: translateY(20px);\r\n transition: all 0.3s ease;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .modal-overlay.active .success-modal {\r\n transform: translateY(0);\r\n }\r\n \r\n .modal-icon {\r\n font-size: 4rem;\r\n color: #4CAF50;\r\n margin-bottom: 20px;\r\n animation: bounce 1s ease;\r\n }\r\n \r\n @keyframes bounce {\r\n 0%, 20%, 60%, 100% {\r\n transform: translateY(0);\r\n }\r\n 40% {\r\n transform: translateY(-15px);\r\n }\r\n 80% {\r\n transform: translateY(-7px);\r\n }\r\n }\r\n \r\n .modal-title {\r\n font-size: 1.8rem;\r\n color: #004d99;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .modal-message {\r\n color: #6c757d;\r\n margin-bottom: 30px;\r\n line-height: 1.6;\r\n }\r\n \r\n .modal-btn {\r\n padding: 15px 40px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n touch-action: manipulation;\r\n min-height: 50px;\r\n }\r\n \r\n .modal-btn:active {\r\n transform: scale(0.95);\r\n }\r\n \r\n \/* Footer *\/\r\n .feedback-footer {\r\n background: #1a202c;\r\n color: white;\r\n padding: 50px 0;\r\n margin-top: 60px;\r\n }\r\n \r\n .footer-content {\r\n text-align: center;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n \r\n .footer-logo {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n margin-bottom: 20px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n \r\n .footer-text {\r\n color: #a0aec0;\r\n margin-bottom: 30px;\r\n line-height: 1.7;\r\n }\r\n \r\n .footer-contact {\r\n display: flex;\r\n justify-content: center;\r\n gap: 30px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .contact-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n color: #a0aec0;\r\n }\r\n \r\n .contact-item i {\r\n color: #4CAF50;\r\n }\r\n \r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .feedback-header {\r\n padding: 50px 20px;\r\n min-height: 180px;\r\n }\r\n \r\n .feedback-header h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .feedback-header p {\r\n font-size: 1rem;\r\n }\r\n \r\n .feedback-form-container,\r\n .testimonials-sidebar {\r\n padding: 25px 20px;\r\n }\r\n \r\n .form-title,\r\n .sidebar-title {\r\n font-size: 1.6rem;\r\n }\r\n \r\n .stats-title {\r\n font-size: 1.6rem;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2rem;\r\n }\r\n \r\n .modal-title {\r\n font-size: 1.6rem;\r\n }\r\n \r\n .modal-icon {\r\n font-size: 3.5rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .feedback-header {\r\n padding: 40px 20px;\r\n min-height: 160px;\r\n }\r\n \r\n .feedback-header h1 {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .feedback-header p {\r\n font-size: 0.95rem;\r\n }\r\n \r\n .feedback-form-container,\r\n .testimonials-sidebar {\r\n padding: 20px 15px;\r\n border-radius: 15px;\r\n }\r\n \r\n .form-title,\r\n .sidebar-title {\r\n font-size: 1.4rem;\r\n }\r\n \r\n .form-input, .form-textarea, .form-select {\r\n padding: 12px;\r\n }\r\n \r\n .service-selection {\r\n gap: 10px;\r\n }\r\n \r\n .service-option {\r\n padding: 12px;\r\n min-height: 55px;\r\n }\r\n \r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n gap: 25px;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .modal-title {\r\n font-size: 1.4rem;\r\n }\r\n \r\n .modal-message {\r\n font-size: 0.95rem;\r\n }\r\n \r\n .modal-btn {\r\n padding: 12px 30px;\r\n width: 100%;\r\n }\r\n }\r\n \r\n \/* Mobile-specific optimizations *\/\r\n @media (hover: none) and (pointer: coarse) {\r\n \/* Remove hover effects completely on touch devices *\/\r\n .submit-btn:hover,\r\n .service-option:hover,\r\n .testimonial-card:hover,\r\n .modal-btn:hover {\r\n transform: none;\r\n }\r\n \r\n \/* Use :active states instead *\/\r\n .submit-btn:active,\r\n .service-option:active,\r\n .testimonial-card:active,\r\n .modal-btn:active {\r\n opacity: 0.9;\r\n }\r\n \r\n \/* Prevent accidental text selection *\/\r\n .service-option,\r\n .checkbox-option,\r\n .submit-btn,\r\n .modal-btn {\r\n -webkit-user-select: none;\r\n user-select: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <header class=\"feedback-header\">\r\n <div class=\"feedback-container\">\r\n <h1>Share Your Experience<\/h1>\r\n <p>Your feedback helps us improve and deliver exceptional service. We value every opinion and suggestion.<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"feedback-container\">\r\n \r\n <main class=\"feedback-main\">\r\n \r\n <section class=\"feedback-form-container\">\r\n <h2 class=\"form-title\">Share Your Feedback<\/h2>\r\n <p class=\"form-subtitle\">Please take a moment to tell us about your experience<\/p>\r\n \r\n <form id=\"feedbackForm\">\r\n \r\n <div class=\"form-group\">\r\n <label for=\"name\" class=\"form-label\">Full Name *<\/label>\r\n <input type=\"text\" id=\"name\" class=\"form-input\" placeholder=\"Enter your full name\" required>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\" class=\"form-label\">Email Address *<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-input\" placeholder=\"Enter your email address\" required>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Which service did you use? *<\/label>\r\n <div class=\"service-selection\">\r\n <div class=\"service-option\" data-service=\"web\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-laptop-code\"><\/i>\r\n <\/div>\r\n <span>Web Development<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"training\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-chalkboard-teacher\"><\/i>\r\n <\/div>\r\n <span>Computer Training<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"photography\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-camera-retro\"><\/i>\r\n <\/div>\r\n <span>Photography<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"secretarial\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-file-alt\"><\/i>\r\n <\/div>\r\n <span>Secretarial Service<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"other\" id=\"other-service-option\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-plus-circle\"><\/i>\r\n <\/div>\r\n <span>Other Service<\/span>\r\n <\/div>\r\n <\/div>\r\n <input type=\"hidden\" id=\"service\" required>\r\n <input type=\"hidden\" id=\"service-display\">\r\n \r\n \r\n <div class=\"other-service-container\" id=\"other-service-input\">\r\n <label for=\"other-service-text\" class=\"form-label\">Please specify the service:<\/label>\r\n <input type=\"text\" id=\"other-service-text\" class=\"form-input\" placeholder=\"Enter the specific service you used...\">\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Overall Satisfaction *<\/label>\r\n <div class=\"rating-container\">\r\n <div class=\"rating-stars\" id=\"ratingStars\">\r\n <i class=\"fas fa-star star\" data-rating=\"1\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"2\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"3\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"4\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"5\"><\/i>\r\n <\/div>\r\n <div class=\"star-text\" id=\"starText\">Click to rate your experience<\/div>\r\n <input type=\"hidden\" id=\"rating\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">What type of feedback are you providing?<\/label>\r\n <div class=\"checkbox-group\">\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"praise\">\r\n <span>Praise<\/span>\r\n <\/label>\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"suggestion\">\r\n <span>Suggestion<\/span>\r\n <\/label>\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"issue\">\r\n <span>Issue<\/span>\r\n <\/label>\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"general\">\r\n <span>General Feedback<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label for=\"project\" class=\"form-label\">Project\/Service Details<\/label>\r\n <input type=\"text\" id=\"project\" class=\"form-input\" placeholder=\"e.g., Gophine Online Store, Brand Identity Design\">\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label for=\"message\" class=\"form-label\">Your Feedback *<\/label>\r\n <textarea id=\"message\" class=\"form-textarea\" placeholder=\"Please share your detailed feedback, suggestions, or experience with our service...\" required><\/textarea>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"contactPermission\">\r\n <span>I give permission to contact me regarding this feedback<\/span>\r\n <\/label>\r\n <\/div>\r\n \r\n \r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\r\n <i class=\"fas fa-paper-plane\"><\/i>\r\n Submit Feedback\r\n <\/button>\r\n <\/form>\r\n <\/section>\r\n \r\n \r\n <aside class=\"testimonials-sidebar\">\r\n <h2 class=\"sidebar-title\">What Others Say<\/h2>\r\n \r\n <div class=\"testimonial-list\">\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-rating\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"Gophine Services exceeded our expectations with their web development project. The team was professional, responsive, and delivered ahead of schedule.\"\r\n <\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">SO<\/div>\r\n <div class=\"author-info\">\r\n <h4>Scovia Ocokoru<\/h4>\r\n <p>Head Teacher, Okufura SS<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-rating\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"The computer training program was excellent! The instructors were knowledgeable and patient. I've significantly improved my skills in computing.\"\r\n <\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">EJ<\/div>\r\n <div class=\"author-info\">\r\n <h4>Endriyo John<\/h4>\r\n <p>Student, Computer Training<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-rating\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star-half-alt\"><\/i>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"Their secretarial services helped streamline our office operations. Very professional and efficient team with practical solutions.\"\r\n <\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">GK<\/div>\r\n <div class=\"author-info\">\r\n <h4>George Katuntu<\/h4>\r\n <p>WML, Administrator<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n <\/main>\r\n \r\n \r\n <section class=\"feedback-stats\">\r\n <h2 class=\"stats-title\">Your Feedback Matters<\/h2>\r\n <p>Join thousands of satisfied clients who have helped us improve through their valuable feedback<\/p>\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"feedbackCount\">1,250+<\/div>\r\n <div class=\"stat-label\">Feedback Submitted<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"avgRating\">4.8<\/div>\r\n <div class=\"stat-label\">Average Rating<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"responseRate\">98%<\/div>\r\n <div class=\"stat-label\">Response Rate<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"improvements\">45+<\/div>\r\n <div class=\"stat-label\">Improvements Made<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n \r\n \r\n <div class=\"modal-overlay\" id=\"successModal\">\r\n <div class=\"success-modal\">\r\n <div class=\"modal-icon\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"modal-title\">Thank You!<\/h3>\r\n <p class=\"modal-message\">Your feedback has been successfully submitted. We truly appreciate you taking the time to share your experience with us.<\/p>\r\n <button class=\"modal-btn\" id=\"closeModal\">Close<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ===== CONFIGURATION =====\r\n const GOOGLE_SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycby8Hdg-7XEA9Rh9SVnTbnnnJ7PAfSUYjHm6LVze4PJGyghg-NEriHF_oQ5C50ytWn27\/exec';\r\n \r\n \/\/ Simple flag to prevent multiple form submissions\r\n let isSubmitting = false;\r\n \r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Feedback form initialized');\r\n \r\n \/\/ Get DOM elements\r\n const feedbackForm = document.getElementById('feedbackForm');\r\n const submitBtn = document.getElementById('submitBtn');\r\n const successModal = document.getElementById('successModal');\r\n const closeModalBtn = document.getElementById('closeModal');\r\n \r\n \/\/ ===== STAR RATING SYSTEM - Simplified for mobile =====\r\n const stars = document.querySelectorAll('.star');\r\n const starText = document.getElementById('starText');\r\n const ratingInput = document.getElementById('rating');\r\n \r\n const ratingTexts = {\r\n 1: \"Poor - Very dissatisfied\",\r\n 2: \"Fair - Could be better\",\r\n 3: \"Good - Met expectations\",\r\n 4: \"Very Good - Exceeded expectations\",\r\n 5: \"Excellent - Absolutely outstanding!\"\r\n };\r\n \r\n stars.forEach(star => {\r\n \/\/ Use click event for both touch and mouse\r\n star.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n \r\n const rating = parseInt(this.getAttribute('data-rating'));\r\n ratingInput.value = rating;\r\n \r\n \/\/ Update stars\r\n stars.forEach(s => {\r\n if (parseInt(s.getAttribute('data-rating')) <= rating) {\r\n s.classList.add('active');\r\n } else {\r\n s.classList.remove('active');\r\n }\r\n });\r\n \r\n \/\/ Update text\r\n starText.textContent = ratingTexts[rating];\r\n console.log('\u2b50 Rating selected:', rating);\r\n });\r\n });\r\n \r\n \/\/ ===== SERVICE SELECTION =====\r\n const serviceOptions = document.querySelectorAll('.service-option');\r\n const serviceInput = document.getElementById('service');\r\n const serviceDisplayInput = document.getElementById('service-display');\r\n const otherServiceOption = document.getElementById('other-service-option');\r\n const otherServiceInput = document.getElementById('other-service-input');\r\n const otherServiceText = document.getElementById('other-service-text');\r\n \r\n const serviceDisplayNames = {\r\n 'web': 'Web Development',\r\n 'training': 'Computer Training',\r\n 'photography': 'Photography',\r\n 'secretarial': 'Secretarial Service',\r\n 'other': 'Other'\r\n };\r\n \r\n serviceOptions.forEach(option => {\r\n option.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n \r\n const serviceValue = this.getAttribute('data-service');\r\n \r\n \/\/ Remove selected class from all options\r\n serviceOptions.forEach(opt => opt.classList.remove('selected'));\r\n \r\n \/\/ Add selected class to clicked option\r\n this.classList.add('selected');\r\n \r\n \/\/ Update hidden input with service value\r\n serviceInput.value = serviceValue;\r\n \r\n \/\/ Set display name for predefined services\r\n if (serviceValue !== 'other') {\r\n serviceDisplayInput.value = serviceDisplayNames[serviceValue];\r\n otherServiceInput.classList.remove('show');\r\n otherServiceText.required = false;\r\n } else {\r\n \/\/ For \"Other\" option, show the input field\r\n otherServiceInput.classList.add('show');\r\n otherServiceText.required = true;\r\n setTimeout(() => {\r\n otherServiceText.focus();\r\n }, 50);\r\n serviceDisplayInput.value = '';\r\n }\r\n \r\n console.log('\ud83d\udd27 Service selected:', serviceValue);\r\n });\r\n });\r\n \r\n \/\/ Update display name when user types in \"Other\" field\r\n otherServiceText.addEventListener('input', function() {\r\n if (this.value.trim() !== '') {\r\n serviceDisplayInput.value = this.value.trim();\r\n }\r\n });\r\n \r\n \/\/ ===== FORM SUBMISSION =====\r\n feedbackForm.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n if (isSubmitting) return;\r\n isSubmitting = true;\r\n \r\n console.log('\ud83d\udce4 Starting form submission...');\r\n \r\n \/\/ Validate form\r\n if (!validateForm()) {\r\n console.log('\u274c Form validation failed');\r\n isSubmitting = false;\r\n return;\r\n }\r\n \r\n console.log('\u2705 Form validation passed');\r\n \r\n \/\/ Show loading state\r\n const originalText = submitBtn.innerHTML;\r\n submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Sending...';\r\n submitBtn.classList.add('loading');\r\n submitBtn.disabled = true;\r\n \r\n try {\r\n \/\/ Prepare data object\r\n const formData = {\r\n timestamp: new Date().toISOString(),\r\n name: document.getElementById('name').value.trim(),\r\n email: document.getElementById('email').value.trim(),\r\n service: serviceInput.value,\r\n service_display: serviceDisplayInput.value || \r\n (serviceInput.value === 'other' ? \r\n otherServiceText.value.trim() : \r\n serviceDisplayNames[serviceInput.value] || serviceInput.value),\r\n rating: ratingInput.value,\r\n feedback_types: Array.from(document.querySelectorAll('input[name=\"feedback_type\"]:checked'))\r\n .map(cb => cb.value).join(', '),\r\n project: document.getElementById('project').value.trim(),\r\n message: document.getElementById('message').value.trim(),\r\n contact_permission: document.getElementById('contactPermission').checked ? 'Yes' : 'No'\r\n };\r\n \r\n console.log('\ud83d\udcca Form data:', formData);\r\n \r\n \/\/ Send to Google Sheets\r\n const formDataToSend = new FormData();\r\n Object.keys(formData).forEach(key => {\r\n formDataToSend.append(key, formData[key]);\r\n });\r\n \r\n \/\/ Use fetch with no-cors for Google Apps Script\r\n await fetch(GOOGLE_SCRIPT_URL, {\r\n method: 'POST',\r\n body: formDataToSend,\r\n mode: 'no-cors'\r\n });\r\n \r\n console.log('\u2705 Form submitted successfully');\r\n \r\n \/\/ Show success modal\r\n showSuccessModal();\r\n \r\n \/\/ Reset form\r\n feedbackForm.reset();\r\n resetFormUI();\r\n \r\n \/\/ Update stats\r\n updateFeedbackStats();\r\n \r\n } catch (error) {\r\n console.error('\u274c Submission error:', error);\r\n \r\n \/\/ Fallback: Show success anyway (no-cors prevents error detection)\r\n showSuccessModal();\r\n feedbackForm.reset();\r\n resetFormUI();\r\n \r\n } finally {\r\n \/\/ Reset button state\r\n submitBtn.innerHTML = originalText;\r\n submitBtn.classList.remove('loading');\r\n submitBtn.disabled = false;\r\n isSubmitting = false;\r\n console.log('\ud83d\udd04 Button reset');\r\n }\r\n });\r\n \r\n \/\/ ===== FORM VALIDATION =====\r\n function validateForm() {\r\n const name = document.getElementById('name').value.trim();\r\n const email = document.getElementById('email').value.trim();\r\n const service = serviceInput.value;\r\n const rating = ratingInput.value;\r\n const message = document.getElementById('message').value.trim();\r\n const isOtherService = service === 'other';\r\n const otherServiceValue = otherServiceText.value.trim();\r\n \r\n let isValid = true;\r\n let errorMessage = '';\r\n \r\n \/\/ Validate name\r\n if (!name) {\r\n errorMessage = 'Please enter your name';\r\n document.getElementById('name').focus();\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate email\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!email || !emailRegex.test(email)) {\r\n if (isValid) {\r\n errorMessage = 'Please enter a valid email address';\r\n document.getElementById('email').focus();\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate service\r\n if (!service) {\r\n if (isValid) {\r\n errorMessage = 'Please select a service you used';\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate other service text if \"Other\" is selected\r\n if (isOtherService && !otherServiceValue) {\r\n if (isValid) {\r\n errorMessage = 'Please specify the service you used';\r\n otherServiceText.focus();\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate rating\r\n if (!rating) {\r\n if (isValid) {\r\n errorMessage = 'Please provide a rating by clicking on the stars';\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate message\r\n if (!message) {\r\n if (isValid) {\r\n errorMessage = 'Please enter your feedback message';\r\n document.getElementById('message').focus();\r\n }\r\n isValid = false;\r\n }\r\n \r\n if (!isValid && errorMessage) {\r\n alert(errorMessage);\r\n }\r\n \r\n return isValid;\r\n }\r\n \r\n \/\/ ===== RESET FORM UI =====\r\n function resetFormUI() {\r\n console.log('\ud83d\udd04 Resetting form UI...');\r\n \r\n \/\/ Reset stars\r\n stars.forEach(star => {\r\n star.classList.remove('active');\r\n });\r\n starText.textContent = 'Click to rate your experience';\r\n ratingInput.value = '';\r\n \r\n \/\/ Reset service selection\r\n serviceOptions.forEach(opt => opt.classList.remove('selected'));\r\n serviceInput.value = '';\r\n serviceDisplayInput.value = '';\r\n otherServiceInput.classList.remove('show');\r\n otherServiceText.value = '';\r\n otherServiceText.required = false;\r\n \r\n \/\/ Reset checkboxes\r\n document.querySelectorAll('input[name=\"feedback_type\"]').forEach(cb => {\r\n cb.checked = false;\r\n });\r\n \r\n document.getElementById('contactPermission').checked = false;\r\n \r\n console.log('\u2705 Form UI reset complete');\r\n }\r\n \r\n \/\/ ===== ANIMATED STATS =====\r\n function updateFeedbackStats() {\r\n const feedbackCount = document.getElementById('feedbackCount');\r\n const currentText = feedbackCount.textContent;\r\n const currentCount = parseInt(currentText.replace(\/[^0-9]\/g, ''));\r\n \r\n \/\/ Simulate increment\r\n if (currentCount === 1250) {\r\n feedbackCount.textContent = '1,255+';\r\n }\r\n }\r\n \r\n \/\/ ===== MODAL CONTROLS =====\r\n function showSuccessModal() {\r\n successModal.classList.add('active');\r\n \/\/ Prevent body scrolling when modal is open\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n function hideSuccessModal() {\r\n successModal.classList.remove('active');\r\n \/\/ Restore scrolling\r\n document.body.style.overflow = '';\r\n }\r\n \r\n closeModalBtn.addEventListener('click', hideSuccessModal);\r\n \r\n successModal.addEventListener('click', function(e) {\r\n if (e.target === successModal) {\r\n hideSuccessModal();\r\n }\r\n });\r\n \r\n \/\/ Close modal with Escape key\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && successModal.classList.contains('active')) {\r\n hideSuccessModal();\r\n }\r\n });\r\n \r\n \/\/ ===== TESTIMONIAL INTERACTIVITY =====\r\n const testimonialCards = document.querySelectorAll('.testimonial-card');\r\n testimonialCards.forEach(card => {\r\n card.addEventListener('click', function() {\r\n this.style.transform = 'scale(0.99)';\r\n setTimeout(() => {\r\n this.style.transform = '';\r\n }, 200);\r\n });\r\n });\r\n \r\n \/\/ ===== MOBILE-SPECIFIC OPTIMIZATIONS =====\r\n \r\n \/\/ Prevent zoom on input focus in iOS\r\n document.addEventListener('touchstart', function() {}, {passive: true});\r\n \r\n \/\/ Improve touch scrolling\r\n let touchStartY = 0;\r\n \r\n document.addEventListener('touchstart', function(e) {\r\n touchStartY = e.touches[0].clientY;\r\n }, {passive: true});\r\n \r\n \/\/ Test connection on load\r\n testConnection();\r\n });\r\n \r\n \/\/ Test Google Apps Script connection\r\n async function testConnection() {\r\n try {\r\n console.log('\ud83d\udd17 Testing connection to Google Apps Script...');\r\n await fetch(GOOGLE_SCRIPT_URL, { \r\n method: 'GET',\r\n mode: 'no-cors'\r\n });\r\n console.log('\u2705 Connection test initiated');\r\n } catch (error) {\r\n console.log('\u26a0\ufe0f Connection test note:', error.message || 'no-cors mode prevents response reading');\r\n }\r\n }\r\n \r\n \/\/ Simple debounce for resize events\r\n let resizeTimeout;\r\n window.addEventListener('resize', function() {\r\n clearTimeout(resizeTimeout);\r\n resizeTimeout = setTimeout(function() {\r\n \/\/ Force reflow to fix any layout issues\r\n document.body.style.overflow = 'hidden';\r\n setTimeout(() => {\r\n document.body.style.overflow = '';\r\n }, 100);\r\n }, 250);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Customer Feedback – Gophine Services Share Your Experience Your feedback helps us improve and deliver exceptional service. We value every opinion and suggestion. Share Your Feedback Please take a moment to tell us about your experience Full Name * Email Address * Which service did you use? * Web Development Computer Training Photography Secretarial Service […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1441","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/comments?post=1441"}],"version-history":[{"count":22,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1441\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1441\/revisions\/1463"}],"wp:attachment":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/media?parent=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Customer Feedback - Gophine Services<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Reset and Base Styles - Optimized for Mobile *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n \r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n \r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n line-height: 1.6;\r\n color: #333333;\r\n background-color: #f8fafc;\r\n overflow-x: hidden;\r\n \/* Critical for mobile scrolling *\/\r\n -webkit-overflow-scrolling: touch;\r\n height: 100%;\r\n position: relative;\r\n }\r\n \r\n \/* Remove all GPU acceleration hacks - they can cause issues *\/\r\n .feedback-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n \r\n \/* Header - Fixed height for stability *\/\r\n .feedback-header {\r\n background: linear-gradient(135deg, #004d99 0%, #0066cc 50%, #4CAF50 100%);\r\n color: white;\r\n text-align: center;\r\n padding: 60px 20px;\r\n position: relative;\r\n overflow: hidden;\r\n margin-bottom: 40px;\r\n min-height: 200px;\r\n }\r\n \r\n .feedback-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.1) 0%, transparent 50%);\r\n }\r\n \r\n .feedback-header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 15px;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n position: relative;\r\n }\r\n \r\n .feedback-header p {\r\n font-size: 1.1rem;\r\n opacity: 0.95;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n \r\n \/* Main Content Layout - Simpler for mobile *\/\r\n .feedback-main {\r\n display: block;\r\n margin-bottom: 60px;\r\n }\r\n \r\n @media (min-width: 992px) {\r\n .feedback-main {\r\n display: grid;\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: 60px;\r\n }\r\n }\r\n \r\n \/* Feedback Form - Removed sticky completely *\/\r\n .feedback-form-container {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 30px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n margin-bottom: 40px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .form-title {\r\n font-size: 1.8rem;\r\n color: #004d99;\r\n margin-bottom: 10px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .form-subtitle {\r\n color: #6c757d;\r\n margin-bottom: 25px;\r\n font-size: 1rem;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .form-label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #333;\r\n font-size: 1rem;\r\n }\r\n \r\n .form-input, .form-textarea, .form-select {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #e2e8f0;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px; \/* Prevents iOS zoom *\/\r\n transition: border-color 0.2s ease;\r\n background: #f8fafc;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n }\r\n \r\n .form-input:focus, .form-textarea:focus, .form-select:focus {\r\n outline: none;\r\n border-color: #004d99;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.1);\r\n }\r\n \r\n .form-textarea {\r\n min-height: 120px;\r\n resize: vertical;\r\n line-height: 1.5;\r\n }\r\n \r\n \/* Rating System *\/\r\n .rating-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n \r\n .rating-label {\r\n font-weight: 600;\r\n color: #333;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .rating-stars {\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 5px;\r\n justify-content: center;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .rating-stars {\r\n justify-content: flex-start;\r\n }\r\n }\r\n \r\n .star {\r\n font-size: 2rem;\r\n color: #e2e8f0;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n padding: 5px;\r\n }\r\n \r\n .star.active {\r\n color: #FFD700;\r\n }\r\n \r\n .star-text {\r\n font-size: 0.9rem;\r\n color: #6c757d;\r\n font-style: italic;\r\n text-align: center;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .star-text {\r\n text-align: left;\r\n }\r\n }\r\n \r\n \/* Service Selection *\/\r\n .service-selection {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n margin-top: 10px;\r\n }\r\n \r\n @media (min-width: 480px) {\r\n .service-selection {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n .service-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 15px;\r\n background: #f8fafc;\r\n border: 2px solid #e2e8f0;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n user-select: none;\r\n min-height: 60px;\r\n }\r\n \r\n .service-option.selected {\r\n background: rgba(0, 77, 153, 0.1);\r\n border-color: #004d99;\r\n color: #004d99;\r\n font-weight: 600;\r\n }\r\n \r\n .service-icon {\r\n font-size: 1.3rem;\r\n width: 30px;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 8px;\r\n background: rgba(0, 77, 153, 0.1);\r\n color: #004d99;\r\n flex-shrink: 0;\r\n }\r\n \r\n .service-option.selected .service-icon {\r\n background: #004d99;\r\n color: white;\r\n }\r\n \r\n \/* Other Service Input *\/\r\n .other-service-container {\r\n margin-top: 15px;\r\n display: none;\r\n }\r\n \r\n .other-service-container.show {\r\n display: block;\r\n animation: fadeIn 0.3s ease;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n \r\n \/* Checkbox Group *\/\r\n .checkbox-group {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n margin-top: 10px;\r\n }\r\n \r\n @media (min-width: 480px) {\r\n .checkbox-group {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n .checkbox-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px;\r\n background: #f8fafc;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n user-select: none;\r\n min-height: 50px;\r\n }\r\n \r\n .checkbox-option input {\r\n width: 18px;\r\n height: 18px;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n }\r\n \r\n \/* Submit Button *\/\r\n .submit-btn {\r\n width: 100%;\r\n padding: 16px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n margin-top: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n -webkit-appearance: none;\r\n touch-action: manipulation;\r\n min-height: 56px;\r\n }\r\n \r\n .submit-btn:active {\r\n transform: scale(0.98);\r\n }\r\n \r\n .submit-btn.loading {\r\n opacity: 0.7;\r\n cursor: not-allowed;\r\n }\r\n \r\n \/* Testimonials Sidebar *\/\r\n .testimonials-sidebar {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 30px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .sidebar-title {\r\n font-size: 1.8rem;\r\n color: #004d99;\r\n margin-bottom: 25px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n text-align: center;\r\n }\r\n \r\n .testimonial-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n \r\n .testimonial-card {\r\n background: #f8fafc;\r\n border-radius: 15px;\r\n padding: 20px;\r\n border-left: 4px solid #004d99;\r\n transition: transform 0.2s ease;\r\n }\r\n \r\n .testimonial-card:active {\r\n transform: scale(0.99);\r\n }\r\n \r\n .testimonial-rating {\r\n color: #FFD700;\r\n margin-bottom: 12px;\r\n font-size: 1.1rem;\r\n }\r\n \r\n .testimonial-text {\r\n font-style: italic;\r\n margin-bottom: 15px;\r\n line-height: 1.6;\r\n }\r\n \r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n \r\n .author-avatar {\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-weight: bold;\r\n font-size: 1rem;\r\n flex-shrink: 0;\r\n }\r\n \r\n .author-info h4 {\r\n font-weight: 600;\r\n margin-bottom: 3px;\r\n font-size: 1rem;\r\n }\r\n \r\n .author-info p {\r\n color: #6c757d;\r\n font-size: 0.85rem;\r\n }\r\n \r\n \/* Feedback Stats *\/\r\n .feedback-stats {\r\n background: linear-gradient(135deg, #004d99, #0066cc);\r\n color: white;\r\n border-radius: 20px;\r\n padding: 40px 20px;\r\n margin: 50px 0;\r\n text-align: center;\r\n box-shadow: 0 15px 30px rgba(0, 77, 153, 0.15);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .stats-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n margin-top: 30px;\r\n }\r\n \r\n .stat-item {\r\n text-align: center;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n margin-bottom: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .stat-label {\r\n font-size: 1rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* Success Modal - Fixed positioning fix *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n padding: 20px;\r\n }\r\n \r\n .modal-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n \r\n .success-modal {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n max-width: 500px;\r\n width: 100%;\r\n text-align: center;\r\n transform: translateY(20px);\r\n transition: all 0.3s ease;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .modal-overlay.active .success-modal {\r\n transform: translateY(0);\r\n }\r\n \r\n .modal-icon {\r\n font-size: 4rem;\r\n color: #4CAF50;\r\n margin-bottom: 20px;\r\n animation: bounce 1s ease;\r\n }\r\n \r\n @keyframes bounce {\r\n 0%, 20%, 60%, 100% {\r\n transform: translateY(0);\r\n }\r\n 40% {\r\n transform: translateY(-15px);\r\n }\r\n 80% {\r\n transform: translateY(-7px);\r\n }\r\n }\r\n \r\n .modal-title {\r\n font-size: 1.8rem;\r\n color: #004d99;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .modal-message {\r\n color: #6c757d;\r\n margin-bottom: 30px;\r\n line-height: 1.6;\r\n }\r\n \r\n .modal-btn {\r\n padding: 15px 40px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n touch-action: manipulation;\r\n min-height: 50px;\r\n }\r\n \r\n .modal-btn:active {\r\n transform: scale(0.95);\r\n }\r\n \r\n \/* Footer *\/\r\n .feedback-footer {\r\n background: #1a202c;\r\n color: white;\r\n padding: 50px 0;\r\n margin-top: 60px;\r\n }\r\n \r\n .footer-content {\r\n text-align: center;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n \r\n .footer-logo {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n margin-bottom: 20px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n \r\n .footer-text {\r\n color: #a0aec0;\r\n margin-bottom: 30px;\r\n line-height: 1.7;\r\n }\r\n \r\n .footer-contact {\r\n display: flex;\r\n justify-content: center;\r\n gap: 30px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .contact-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n color: #a0aec0;\r\n }\r\n \r\n .contact-item i {\r\n color: #4CAF50;\r\n }\r\n \r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .feedback-header {\r\n padding: 50px 20px;\r\n min-height: 180px;\r\n }\r\n \r\n .feedback-header h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .feedback-header p {\r\n font-size: 1rem;\r\n }\r\n \r\n .feedback-form-container,\r\n .testimonials-sidebar {\r\n padding: 25px 20px;\r\n }\r\n \r\n .form-title,\r\n .sidebar-title {\r\n font-size: 1.6rem;\r\n }\r\n \r\n .stats-title {\r\n font-size: 1.6rem;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2rem;\r\n }\r\n \r\n .modal-title {\r\n font-size: 1.6rem;\r\n }\r\n \r\n .modal-icon {\r\n font-size: 3.5rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .feedback-header {\r\n padding: 40px 20px;\r\n min-height: 160px;\r\n }\r\n \r\n .feedback-header h1 {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .feedback-header p {\r\n font-size: 0.95rem;\r\n }\r\n \r\n .feedback-form-container,\r\n .testimonials-sidebar {\r\n padding: 20px 15px;\r\n border-radius: 15px;\r\n }\r\n \r\n .form-title,\r\n .sidebar-title {\r\n font-size: 1.4rem;\r\n }\r\n \r\n .form-input, .form-textarea, .form-select {\r\n padding: 12px;\r\n }\r\n \r\n .service-selection {\r\n gap: 10px;\r\n }\r\n \r\n .service-option {\r\n padding: 12px;\r\n min-height: 55px;\r\n }\r\n \r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n gap: 25px;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .modal-title {\r\n font-size: 1.4rem;\r\n }\r\n \r\n .modal-message {\r\n font-size: 0.95rem;\r\n }\r\n \r\n .modal-btn {\r\n padding: 12px 30px;\r\n width: 100%;\r\n }\r\n }\r\n \r\n \/* Mobile-specific optimizations *\/\r\n @media (hover: none) and (pointer: coarse) {\r\n \/* Remove hover effects completely on touch devices *\/\r\n .submit-btn:hover,\r\n .service-option:hover,\r\n .testimonial-card:hover,\r\n .modal-btn:hover {\r\n transform: none;\r\n }\r\n \r\n \/* Use :active states instead *\/\r\n .submit-btn:active,\r\n .service-option:active,\r\n .testimonial-card:active,\r\n .modal-btn:active {\r\n opacity: 0.9;\r\n }\r\n \r\n \/* Prevent accidental text selection *\/\r\n .service-option,\r\n .checkbox-option,\r\n .submit-btn,\r\n .modal-btn {\r\n -webkit-user-select: none;\r\n user-select: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <header class=\"feedback-header\">\r\n <div class=\"feedback-container\">\r\n <h1>Share Your Experience<\/h1>\r\n <p>Your feedback helps us improve and deliver exceptional service. We value every opinion and suggestion.<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"feedback-container\">\r\n \r\n <main class=\"feedback-main\">\r\n \r\n <section class=\"feedback-form-container\">\r\n <h2 class=\"form-title\">Share Your Feedback<\/h2>\r\n <p class=\"form-subtitle\">Please take a moment to tell us about your experience<\/p>\r\n \r\n <form id=\"feedbackForm\">\r\n \r\n <div class=\"form-group\">\r\n <label for=\"name\" class=\"form-label\">Full Name *<\/label>\r\n <input type=\"text\" id=\"name\" class=\"form-input\" placeholder=\"Enter your full name\" required>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\" class=\"form-label\">Email Address *<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-input\" placeholder=\"Enter your email address\" required>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Which service did you use? *<\/label>\r\n <div class=\"service-selection\">\r\n <div class=\"service-option\" data-service=\"web\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-laptop-code\"><\/i>\r\n <\/div>\r\n <span>Web Development<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"training\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-chalkboard-teacher\"><\/i>\r\n <\/div>\r\n <span>Computer Training<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"photography\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-camera-retro\"><\/i>\r\n <\/div>\r\n <span>Photography<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"secretarial\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-file-alt\"><\/i>\r\n <\/div>\r\n <span>Secretarial Service<\/span>\r\n <\/div>\r\n <div class=\"service-option\" data-service=\"other\" id=\"other-service-option\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-plus-circle\"><\/i>\r\n <\/div>\r\n <span>Other Service<\/span>\r\n <\/div>\r\n <\/div>\r\n <input type=\"hidden\" id=\"service\" required>\r\n <input type=\"hidden\" id=\"service-display\">\r\n \r\n \r\n <div class=\"other-service-container\" id=\"other-service-input\">\r\n <label for=\"other-service-text\" class=\"form-label\">Please specify the service:<\/label>\r\n <input type=\"text\" id=\"other-service-text\" class=\"form-input\" placeholder=\"Enter the specific service you used...\">\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Overall Satisfaction *<\/label>\r\n <div class=\"rating-container\">\r\n <div class=\"rating-stars\" id=\"ratingStars\">\r\n <i class=\"fas fa-star star\" data-rating=\"1\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"2\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"3\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"4\"><\/i>\r\n <i class=\"fas fa-star star\" data-rating=\"5\"><\/i>\r\n <\/div>\r\n <div class=\"star-text\" id=\"starText\">Click to rate your experience<\/div>\r\n <input type=\"hidden\" id=\"rating\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">What type of feedback are you providing?<\/label>\r\n <div class=\"checkbox-group\">\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"praise\">\r\n <span>Praise<\/span>\r\n <\/label>\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"suggestion\">\r\n <span>Suggestion<\/span>\r\n <\/label>\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"issue\">\r\n <span>Issue<\/span>\r\n <\/label>\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" name=\"feedback_type\" value=\"general\">\r\n <span>General Feedback<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label for=\"project\" class=\"form-label\">Project\/Service Details<\/label>\r\n <input type=\"text\" id=\"project\" class=\"form-input\" placeholder=\"e.g., Gophine Online Store, Brand Identity Design\">\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label for=\"message\" class=\"form-label\">Your Feedback *<\/label>\r\n <textarea id=\"message\" class=\"form-textarea\" placeholder=\"Please share your detailed feedback, suggestions, or experience with our service...\" required><\/textarea>\r\n <\/div>\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"contactPermission\">\r\n <span>I give permission to contact me regarding this feedback<\/span>\r\n <\/label>\r\n <\/div>\r\n \r\n \r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\r\n <i class=\"fas fa-paper-plane\"><\/i>\r\n Submit Feedback\r\n <\/button>\r\n <\/form>\r\n <\/section>\r\n \r\n \r\n <aside class=\"testimonials-sidebar\">\r\n <h2 class=\"sidebar-title\">What Others Say<\/h2>\r\n \r\n <div class=\"testimonial-list\">\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-rating\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"Gophine Services exceeded our expectations with their web development project. The team was professional, responsive, and delivered ahead of schedule.\"\r\n <\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">SO<\/div>\r\n <div class=\"author-info\">\r\n <h4>Scovia Ocokoru<\/h4>\r\n <p>Head Teacher, Okufura SS<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-rating\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"The computer training program was excellent! The instructors were knowledgeable and patient. I've significantly improved my skills in computing.\"\r\n <\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">EJ<\/div>\r\n <div class=\"author-info\">\r\n <h4>Endriyo John<\/h4>\r\n <p>Student, Computer Training<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-rating\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star\"><\/i>\r\n <i class=\"fas fa-star-half-alt\"><\/i>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"Their secretarial services helped streamline our office operations. Very professional and efficient team with practical solutions.\"\r\n <\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">GK<\/div>\r\n <div class=\"author-info\">\r\n <h4>George Katuntu<\/h4>\r\n <p>WML, Administrator<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n <\/main>\r\n \r\n \r\n <section class=\"feedback-stats\">\r\n <h2 class=\"stats-title\">Your Feedback Matters<\/h2>\r\n <p>Join thousands of satisfied clients who have helped us improve through their valuable feedback<\/p>\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"feedbackCount\">1,250+<\/div>\r\n <div class=\"stat-label\">Feedback Submitted<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"avgRating\">4.8<\/div>\r\n <div class=\"stat-label\">Average Rating<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"responseRate\">98%<\/div>\r\n <div class=\"stat-label\">Response Rate<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" id=\"improvements\">45+<\/div>\r\n <div class=\"stat-label\">Improvements Made<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n \r\n \r\n <div class=\"modal-overlay\" id=\"successModal\">\r\n <div class=\"success-modal\">\r\n <div class=\"modal-icon\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"modal-title\">Thank You!<\/h3>\r\n <p class=\"modal-message\">Your feedback has been successfully submitted. We truly appreciate you taking the time to share your experience with us.<\/p>\r\n <button class=\"modal-btn\" id=\"closeModal\">Close<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ===== CONFIGURATION =====\r\n const GOOGLE_SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycby8Hdg-7XEA9Rh9SVnTbnnnJ7PAfSUYjHm6LVze4PJGyghg-NEriHF_oQ5C50ytWn27\/exec';\r\n \r\n \/\/ Simple flag to prevent multiple form submissions\r\n let isSubmitting = false;\r\n \r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Feedback form initialized');\r\n \r\n \/\/ Get DOM elements\r\n const feedbackForm = document.getElementById('feedbackForm');\r\n const submitBtn = document.getElementById('submitBtn');\r\n const successModal = document.getElementById('successModal');\r\n const closeModalBtn = document.getElementById('closeModal');\r\n \r\n \/\/ ===== STAR RATING SYSTEM - Simplified for mobile =====\r\n const stars = document.querySelectorAll('.star');\r\n const starText = document.getElementById('starText');\r\n const ratingInput = document.getElementById('rating');\r\n \r\n const ratingTexts = {\r\n 1: \"Poor - Very dissatisfied\",\r\n 2: \"Fair - Could be better\",\r\n 3: \"Good - Met expectations\",\r\n 4: \"Very Good - Exceeded expectations\",\r\n 5: \"Excellent - Absolutely outstanding!\"\r\n };\r\n \r\n stars.forEach(star => {\r\n \/\/ Use click event for both touch and mouse\r\n star.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n \r\n const rating = parseInt(this.getAttribute('data-rating'));\r\n ratingInput.value = rating;\r\n \r\n \/\/ Update stars\r\n stars.forEach(s => {\r\n if (parseInt(s.getAttribute('data-rating')) <= rating) {\r\n s.classList.add('active');\r\n } else {\r\n s.classList.remove('active');\r\n }\r\n });\r\n \r\n \/\/ Update text\r\n starText.textContent = ratingTexts[rating];\r\n console.log('\u2b50 Rating selected:', rating);\r\n });\r\n });\r\n \r\n \/\/ ===== SERVICE SELECTION =====\r\n const serviceOptions = document.querySelectorAll('.service-option');\r\n const serviceInput = document.getElementById('service');\r\n const serviceDisplayInput = document.getElementById('service-display');\r\n const otherServiceOption = document.getElementById('other-service-option');\r\n const otherServiceInput = document.getElementById('other-service-input');\r\n const otherServiceText = document.getElementById('other-service-text');\r\n \r\n const serviceDisplayNames = {\r\n 'web': 'Web Development',\r\n 'training': 'Computer Training',\r\n 'photography': 'Photography',\r\n 'secretarial': 'Secretarial Service',\r\n 'other': 'Other'\r\n };\r\n \r\n serviceOptions.forEach(option => {\r\n option.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n \r\n const serviceValue = this.getAttribute('data-service');\r\n \r\n \/\/ Remove selected class from all options\r\n serviceOptions.forEach(opt => opt.classList.remove('selected'));\r\n \r\n \/\/ Add selected class to clicked option\r\n this.classList.add('selected');\r\n \r\n \/\/ Update hidden input with service value\r\n serviceInput.value = serviceValue;\r\n \r\n \/\/ Set display name for predefined services\r\n if (serviceValue !== 'other') {\r\n serviceDisplayInput.value = serviceDisplayNames[serviceValue];\r\n otherServiceInput.classList.remove('show');\r\n otherServiceText.required = false;\r\n } else {\r\n \/\/ For \"Other\" option, show the input field\r\n otherServiceInput.classList.add('show');\r\n otherServiceText.required = true;\r\n setTimeout(() => {\r\n otherServiceText.focus();\r\n }, 50);\r\n serviceDisplayInput.value = '';\r\n }\r\n \r\n console.log('\ud83d\udd27 Service selected:', serviceValue);\r\n });\r\n });\r\n \r\n \/\/ Update display name when user types in \"Other\" field\r\n otherServiceText.addEventListener('input', function() {\r\n if (this.value.trim() !== '') {\r\n serviceDisplayInput.value = this.value.trim();\r\n }\r\n });\r\n \r\n \/\/ ===== FORM SUBMISSION =====\r\n feedbackForm.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n if (isSubmitting) return;\r\n isSubmitting = true;\r\n \r\n console.log('\ud83d\udce4 Starting form submission...');\r\n \r\n \/\/ Validate form\r\n if (!validateForm()) {\r\n console.log('\u274c Form validation failed');\r\n isSubmitting = false;\r\n return;\r\n }\r\n \r\n console.log('\u2705 Form validation passed');\r\n \r\n \/\/ Show loading state\r\n const originalText = submitBtn.innerHTML;\r\n submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Sending...';\r\n submitBtn.classList.add('loading');\r\n submitBtn.disabled = true;\r\n \r\n try {\r\n \/\/ Prepare data object\r\n const formData = {\r\n timestamp: new Date().toISOString(),\r\n name: document.getElementById('name').value.trim(),\r\n email: document.getElementById('email').value.trim(),\r\n service: serviceInput.value,\r\n service_display: serviceDisplayInput.value || \r\n (serviceInput.value === 'other' ? \r\n otherServiceText.value.trim() : \r\n serviceDisplayNames[serviceInput.value] || serviceInput.value),\r\n rating: ratingInput.value,\r\n feedback_types: Array.from(document.querySelectorAll('input[name=\"feedback_type\"]:checked'))\r\n .map(cb => cb.value).join(', '),\r\n project: document.getElementById('project').value.trim(),\r\n message: document.getElementById('message').value.trim(),\r\n contact_permission: document.getElementById('contactPermission').checked ? 'Yes' : 'No'\r\n };\r\n \r\n console.log('\ud83d\udcca Form data:', formData);\r\n \r\n \/\/ Send to Google Sheets\r\n const formDataToSend = new FormData();\r\n Object.keys(formData).forEach(key => {\r\n formDataToSend.append(key, formData[key]);\r\n });\r\n \r\n \/\/ Use fetch with no-cors for Google Apps Script\r\n await fetch(GOOGLE_SCRIPT_URL, {\r\n method: 'POST',\r\n body: formDataToSend,\r\n mode: 'no-cors'\r\n });\r\n \r\n console.log('\u2705 Form submitted successfully');\r\n \r\n \/\/ Show success modal\r\n showSuccessModal();\r\n \r\n \/\/ Reset form\r\n feedbackForm.reset();\r\n resetFormUI();\r\n \r\n \/\/ Update stats\r\n updateFeedbackStats();\r\n \r\n } catch (error) {\r\n console.error('\u274c Submission error:', error);\r\n \r\n \/\/ Fallback: Show success anyway (no-cors prevents error detection)\r\n showSuccessModal();\r\n feedbackForm.reset();\r\n resetFormUI();\r\n \r\n } finally {\r\n \/\/ Reset button state\r\n submitBtn.innerHTML = originalText;\r\n submitBtn.classList.remove('loading');\r\n submitBtn.disabled = false;\r\n isSubmitting = false;\r\n console.log('\ud83d\udd04 Button reset');\r\n }\r\n });\r\n \r\n \/\/ ===== FORM VALIDATION =====\r\n function validateForm() {\r\n const name = document.getElementById('name').value.trim();\r\n const email = document.getElementById('email').value.trim();\r\n const service = serviceInput.value;\r\n const rating = ratingInput.value;\r\n const message = document.getElementById('message').value.trim();\r\n const isOtherService = service === 'other';\r\n const otherServiceValue = otherServiceText.value.trim();\r\n \r\n let isValid = true;\r\n let errorMessage = '';\r\n \r\n \/\/ Validate name\r\n if (!name) {\r\n errorMessage = 'Please enter your name';\r\n document.getElementById('name').focus();\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate email\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!email || !emailRegex.test(email)) {\r\n if (isValid) {\r\n errorMessage = 'Please enter a valid email address';\r\n document.getElementById('email').focus();\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate service\r\n if (!service) {\r\n if (isValid) {\r\n errorMessage = 'Please select a service you used';\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate other service text if \"Other\" is selected\r\n if (isOtherService && !otherServiceValue) {\r\n if (isValid) {\r\n errorMessage = 'Please specify the service you used';\r\n otherServiceText.focus();\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate rating\r\n if (!rating) {\r\n if (isValid) {\r\n errorMessage = 'Please provide a rating by clicking on the stars';\r\n }\r\n isValid = false;\r\n }\r\n \r\n \/\/ Validate message\r\n if (!message) {\r\n if (isValid) {\r\n errorMessage = 'Please enter your feedback message';\r\n document.getElementById('message').focus();\r\n }\r\n isValid = false;\r\n }\r\n \r\n if (!isValid && errorMessage) {\r\n alert(errorMessage);\r\n }\r\n \r\n return isValid;\r\n }\r\n \r\n \/\/ ===== RESET FORM UI =====\r\n function resetFormUI() {\r\n console.log('\ud83d\udd04 Resetting form UI...');\r\n \r\n \/\/ Reset stars\r\n stars.forEach(star => {\r\n star.classList.remove('active');\r\n });\r\n starText.textContent = 'Click to rate your experience';\r\n ratingInput.value = '';\r\n \r\n \/\/ Reset service selection\r\n serviceOptions.forEach(opt => opt.classList.remove('selected'));\r\n serviceInput.value = '';\r\n serviceDisplayInput.value = '';\r\n otherServiceInput.classList.remove('show');\r\n otherServiceText.value = '';\r\n otherServiceText.required = false;\r\n \r\n \/\/ Reset checkboxes\r\n document.querySelectorAll('input[name=\"feedback_type\"]').forEach(cb => {\r\n cb.checked = false;\r\n });\r\n \r\n document.getElementById('contactPermission').checked = false;\r\n \r\n console.log('\u2705 Form UI reset complete');\r\n }\r\n \r\n \/\/ ===== ANIMATED STATS =====\r\n function updateFeedbackStats() {\r\n const feedbackCount = document.getElementById('feedbackCount');\r\n const currentText = feedbackCount.textContent;\r\n const currentCount = parseInt(currentText.replace(\/[^0-9]\/g, ''));\r\n \r\n \/\/ Simulate increment\r\n if (currentCount === 1250) {\r\n feedbackCount.textContent = '1,255+';\r\n }\r\n }\r\n \r\n \/\/ ===== MODAL CONTROLS =====\r\n function showSuccessModal() {\r\n successModal.classList.add('active');\r\n \/\/ Prevent body scrolling when modal is open\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n function hideSuccessModal() {\r\n successModal.classList.remove('active');\r\n \/\/ Restore scrolling\r\n document.body.style.overflow = '';\r\n }\r\n \r\n closeModalBtn.addEventListener('click', hideSuccessModal);\r\n \r\n successModal.addEventListener('click', function(e) {\r\n if (e.target === successModal) {\r\n hideSuccessModal();\r\n }\r\n });\r\n \r\n \/\/ Close modal with Escape key\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && successModal.classList.contains('active')) {\r\n hideSuccessModal();\r\n }\r\n });\r\n \r\n \/\/ ===== TESTIMONIAL INTERACTIVITY =====\r\n const testimonialCards = document.querySelectorAll('.testimonial-card');\r\n testimonialCards.forEach(card => {\r\n card.addEventListener('click', function() {\r\n this.style.transform = 'scale(0.99)';\r\n setTimeout(() => {\r\n this.style.transform = '';\r\n }, 200);\r\n });\r\n });\r\n \r\n \/\/ ===== MOBILE-SPECIFIC OPTIMIZATIONS =====\r\n \r\n \/\/ Prevent zoom on input focus in iOS\r\n document.addEventListener('touchstart', function() {}, {passive: true});\r\n \r\n \/\/ Improve touch scrolling\r\n let touchStartY = 0;\r\n \r\n document.addEventListener('touchstart', function(e) {\r\n touchStartY = e.touches[0].clientY;\r\n }, {passive: true});\r\n \r\n \/\/ Test connection on load\r\n testConnection();\r\n });\r\n \r\n \/\/ Test Google Apps Script connection\r\n async function testConnection() {\r\n try {\r\n console.log('\ud83d\udd17 Testing connection to Google Apps Script...');\r\n await fetch(GOOGLE_SCRIPT_URL, { \r\n method: 'GET',\r\n mode: 'no-cors'\r\n });\r\n console.log('\u2705 Connection test initiated');\r\n } catch (error) {\r\n console.log('\u26a0\ufe0f Connection test note:', error.message || 'no-cors mode prevents response reading');\r\n }\r\n }\r\n \r\n \/\/ Simple debounce for resize events\r\n let resizeTimeout;\r\n window.addEventListener('resize', function() {\r\n clearTimeout(resizeTimeout);\r\n resizeTimeout = setTimeout(function() {\r\n \/\/ Force reflow to fix any layout issues\r\n document.body.style.overflow = 'hidden';\r\n setTimeout(() => {\r\n document.body.style.overflow = '';\r\n }, 100);\r\n }, 250);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Customer Feedback – Gophine Services Share Your Experience Your feedback helps us improve and deliver exceptional service. We value every opinion and suggestion. Share Your Feedback Please take a moment to tell us about your experience Full Name * Email Address * Which service did you use? * Web Development Computer Training Photography Secretarial Service […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1441","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/comments?post=1441"}],"version-history":[{"count":22,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1441\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1441\/revisions\/1463"}],"wp:attachment":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/media?parent=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}