관리-도구
편집 파일: contactus.blade.php
@extends('layouts.appss') @section('content') <br> <!-- main-content --> <div class="main-content"> <div class="col-lg-12 mb-lg-30"> <div class="custom-contact-row"> <div class="custom-box"> <h5 class="mb_20" style="color:#cf3033;">Contact Info</h5> <h6 class="mb_8">Phone: <a href="tel:{{$address->phone}}">{{$address->phone}}</a></h6> <h6 class="mb_8">Email: <a href="mailto:{{$address->email}}">{{$address->email}}</a></h6> </div> <div class="custom-box"> <h5 class="mb_20" style="color:#cf3033;">Address</h5> <h6> {{$address->address}} </h6> </div> <div class="custom-box"> <h5 class="mb_20" style="color:#cf3033;">Opening Time</h5> <h6>{{$address->working_hours}}</h6> </div> </div> </div> <style> .custom-contact-row { display: flex; justify-content: center; gap: 1cm; /* gap between boxes */ padding: 0 0cm; /* space from left & right edges */ flex-wrap: wrap; } @media (max-width: 768px) { .custom-contact-row { gap: 0.5cm !important; } .custom-box { width: 9.5cm !important; } } @media (max-width: 768px) { .custom-contact-row { margin-top: 20px !important; /* adjust as you need */ } } .custom-box { width: 10cm; /* fixed width */ min-height: 0cm; /* equal height - adjust as you like */ border: 1px solid #e7e1e1; padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } @media (max-width: 768px) { .flat-spacing { padding-top: 20px !important; padding-bottom: 50px; } } </style> <section class="flat-spacing"> <div class="container"> <div class="contact-us-content" style="border: 1px solid #ddd; border-radius: 10px; padding: 30px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05);"> <div class="row"> <!-- LEFT SIDE - IMAGE --> <div class="col-lg-4 mb-lg-30"> <div style=" border-radius: 10px; overflow: hidden; height: 100%; "> <img src="images/gallery/a6.jpg" style="width: 100%; height: 100%; object-fit: cover;" alt="Contact Image"> </div> </div> <!-- RIGHT SIDE --> <div class="col-lg-7 offset-lg-1"> <h4 class="mb_7 wow fadeInUp">Join Us on this Journey</h4> <p class="text_secondary mb_24 wow fadeInUp" data-wow-delay="0.1s"> Experience the AK Furniture difference today. We invite you to embark on this journey with us—to explore, discover, and transform your living spaces with AK Furniture. Let us redefine comfort and elegance together. </p> <form id="contactform" action="{{ route('contact.store') }}" method="post" class="form-leave-comment"> @csrf <div class="wrap"> <div class="cols"> <fieldset> <input type="text" placeholder="Your Name*" name="name" id="name" required> </fieldset> </div> <div class="cols"> <fieldset> <input type="email" placeholder="Your Email*" name="email" id="email" required> </fieldset> </div> <fieldset> <textarea name="message" id="message" rows="4" placeholder="Your Message*" required></textarea> </fieldset> </div> <!-- ✅ reCAPTCHA --> <div class="mt-3"> <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}" data-callback="captchaVerified"></div> <small id="captchaError" style="color:red; display:none;"> Please verify that you are not a robot. </small> </div> <div class="button-submit send-wrap"> <button class="tf-btn btn-onsurface" type="submit"> Send Message <i class="icon-arrow-up-right"></i> </button> </div> <script> document.getElementById('contactform').addEventListener('submit', function (e) { var captchaResponse = grecaptcha.getResponse(); if (!captchaResponse) { e.preventDefault(); document.getElementById('captchaError').style.display = 'block'; } }); function captchaVerified() { document.getElementById('captchaError').style.display = 'none'; } </script> </form> </div> </div> </div> </div> </section> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <!-- map --> <div class="wrap-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3931.134442024289!2d76.5579099!3d9.4062945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b0625b717690b95%3A0xfabd3565ac03f19!2sA%20K%20Furniture%20Thiruvalla!5e0!3m2!1sen!2sin!4v1732018350000" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe> </div> <!-- /map --> </div><!-- main-content --> @endsection