Commit 617c3fde by Hussain Mohamed

chnages

parent 4c4e5f7c
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
use App\Models\LanguageModel; use App\Models\LanguageModel;
use App\Models\ManageRequestModel; use App\Models\ManageRequestModel;
use App\Models\PagesModel; use App\Models\PagesModel;
use App\Models\ProductAttributeModel;
use App\Models\ProductBrandModel; use App\Models\ProductBrandModel;
use App\Models\ProductIndustryModel; use App\Models\ProductIndustryModel;
use App\Models\ProductModel; use App\Models\ProductModel;
...@@ -58,8 +59,11 @@ public function getProduct($name='') ...@@ -58,8 +59,11 @@ public function getProduct($name='')
$product = ProductModel::Where('product_slug',$name)->first(); $product = ProductModel::Where('product_slug',$name)->first();
$id = isset($product->id) ? $product->id:0; $id = isset($product->id) ? $product->id:0;
if($id != '') if($id != '')
{ {
$record = ProductModel::with('category')->Where('id',$id)->first();
$brands = BrandProduct::from('product_brand as pb') $brands = BrandProduct::from('product_brand as pb')
->leftJoin('brand as b', 'b.id', '=', 'pb.brand_id') ->leftJoin('brand as b', 'b.id', '=', 'pb.brand_id')
->where('pb.product_id', $id) ->where('pb.product_id', $id)
...@@ -76,7 +80,9 @@ public function getProduct($name='') ...@@ -76,7 +80,9 @@ public function getProduct($name='')
->select('b.size','b.id') ->select('b.size','b.id')
->get(); ->get();
return view('product_detail',compact('product','size','industrys','brands')); $productItems = ProductAttributeModel::Where('product_id', $id)->get();
return view('product_detail',compact('record','size','industrys','brands','productItems'));
} }
......
/**
* Template Name: Constructo
* Template URL: https://bootstrapmade.com/constructo-bootstrap-construction-template/
* Updated: Aug 30 2025 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
@charset "UTF-8"; @charset "UTF-8";
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */ /* Fonts */
:root { :root {
/* --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */ /* --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
...@@ -4416,6 +4405,7 @@ section, ...@@ -4416,6 +4405,7 @@ section,
border: none !important; border: none !important;
border-bottom: 2px solid #000 !important; border-bottom: 2px solid #000 !important;
box-shadow: none; box-shadow: none;
outline: none !important;
} }
.contact .form-container .form-floating .form-control::placeholder { .contact .form-container .form-floating .form-control::placeholder {
...@@ -4431,9 +4421,9 @@ section, ...@@ -4431,9 +4421,9 @@ section,
background-color: transparent; background-color: transparent;
} }
.contact .form-container .btn-submit { .contact ,.form-container ,.btn-submit {
background-color: #0bb7a7; background-color: #038c7f;
border: 2px solid #0bb7a7; border: 2px solid #038c7f;
padding: 12px 30px; padding: 12px 30px;
color: #ffffff; color: #ffffff;
border-radius: 0; border-radius: 0;
...@@ -4442,7 +4432,7 @@ section, ...@@ -4442,7 +4432,7 @@ section,
} }
.contact .form-container .btn-submit:hover { .contact .form-container .btn-submit:hover {
background: #0bb7a7; background: #038c7f;
color: #fff; color: #fff;
} }
...@@ -5355,4 +5345,45 @@ h2.htwo { ...@@ -5355,4 +5345,45 @@ h2.htwo {
} }
.plink:hover{ .plink:hover{
color:#282828; color:#282828;
} }
\ No newline at end of file
.enquiry {
background-color: #024959;
color: #fff;
padding: 15px;
border: none;
}
.tag-box-brand , .tag-box-size ,.tag-box-indus {
display: inline-block;
padding: 6px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
color: #282828;
}
.tag-box-brand:hover,
.tag-box-size:hover,
.tag-box-indus:hover {
border-color: #000;
}
.form-bord{
border-top-width: 0 !important;
border-right-width: 0 !important;
border-left-width: 0 !important;
border-radius: 0;
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
.form-control:focus {
border-color: #282828;
outline: 0;
box-shadow:none !important;
}
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
const selectBody = document.querySelector('body'); const selectBody = document.querySelector('body');
const selectHeader = document.querySelector('#header'); const selectHeader = document.querySelector('#header');
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return; if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
window.scrollY > 180 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled'); window.scrollY > 200 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
} }
document.addEventListener('scroll', toggleScrolled); document.addEventListener('scroll', toggleScrolled);
......
...@@ -87,6 +87,9 @@ ...@@ -87,6 +87,9 @@
}, },
}); });
}); });
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script> </script>
</body> </body>
......
@include('base.header')
<style>
/* ... (Your existing styles) ... */
/* New styles for centering the main form container */
.request_container {
/* Set a maximum width for the content to center it on wide screens */
max-width: 800px;
/* Adjust this value as needed for your design */
margin-left: auto;
margin-right: auto;
padding-left: 15px;
/* Add padding for mobile view */
padding-right: 15px;
/* Ensure no unwanted spacing from Flex/Grid that might break centering */
display: block;
}
/* Ensure the form itself respects the container */
form {
display: block;
width: 100%;
}
/* Ensure the main form content box respects the container */
.main_form-con {
/* Add shading/border if desired, but centering is handled by .request_container */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: #fff;
}
/* Optional: To ensure the header/footer stays fixed/full-width,
make sure your base.header and base.footer HTML is outside the main form container */
</style>
<div class="request_container">
<div class="home-title">
<h2 class="form-title text-center mb-4 mt-5">Welcome to <strong>Find Flicker</strong><br> Your Convenient
Service Connection</h2>
</div>
<form action="{{ route('sendRequest') }}" method="GET">
@csrf
<div class="row main_form-con px-4 py-4 ">
<input type="hidden" id="full_address">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<label class="form-label">Service*</label>
</div>
</div>
<div class="row">
<div class="col-lg-4 "> </div>
<div class="col-lg-4 mt-3 text-center ">
<button class="submit-btn w-100" id="sendRequestBtn">Send Request</button>
</div>
</div>
</div>
</form>
</div>
@include('base.footer')
@include('base.header')
<div class="row justify-content-center download-section mt-5">
<!-- IMAGE -->
<div class="col-12 mt-3">
<img src="{{ asset('assets') }}/image/post.webp" class="download-image" alt="Download Illustration">
</div>
<!-- TITLE -->
<div class="col-12">
<h2>
Join Find Flicker today and <br>
elevate your business!
</h2>
</div>
<!-- DESCRIPTION -->
<div class="col-12 col-md-10 col-lg-10">
<p>
For individuals offering premium companionship, massage, or call-based services,
Find Flicker offers a confidential way to reach and engage with discerning clients.
</p>
</div>
<!-- SUB-TEXT -->
<div class="col-12 sub-text">
<p class="mt-3">
Download the app using the button below, install it, and get started.
</p>
</div>
<!-- DOWNLOAD BUTTON -->
<div class="col-12 mt-3">
<a href="#" class="download-btn">
<i class="fa-solid fa-download me-2"></i>
Download Application
</a>
<div class="small-text">Currently available for Android users only</div>
</div>
</div>
<div class="post_ad2-con justify-content-center py-4">
<div class="row align-items-center mb-3">
<div>
<img src="{{ asset('assets') }}/image/post2.webp" alt="APK Icon" class="apk-icon mb-3">
</div>
<div>
<h3 class="apk-title mb-0">How to Install APK File:</h3>
</div>
</div>
<div class="row steps-list">
<div class="col-12">
<p><span class="emoji">📌</span> <strong>Step 1:</strong> Tap the “Download APK” button above.</p>
<p><span class="emoji">📁</span> <strong>Step 2:</strong> Open the downloaded file from your notification bar or file manager.</p>
<p><span class="emoji">🔐</span> <strong>Step 3:</strong> If prompted, enable “Install unknown apps” in your phone’s settings.</p>
<p><span class="emoji">📲</span> <strong>Step 4:</strong> Tap “Install” on the confirmation screen.</p>
<p><span class="emoji">🚀</span> <strong>Step 5:</strong> Once installed, tap “Open” to launch the app and get started.</p>
</div>
</div>
</div>
<!-- ================= FOOTER START ================= -->
@include('base.footer')
</body>
</html>
...@@ -3,24 +3,106 @@ ...@@ -3,24 +3,106 @@
@section('content') @section('content')
<main class="main"> <main class="main">
<div class="page-title "> <div class="page-title ">
<div class="container"> <div class="container mt-2">
<div class="row g-4"> <div class="row g-4">
<h1 class="hfive text-center">Products</h1> <div class="col-lg-7">
<div class="col-lg-6"> <?php
$image = isset($productItems[0]->product_image) ? $productItems[0]->product_image : '';
?>
<div class="service-image-block">
<img src="<?= $image ?>" alt="Construction Services" class="img-fluid">
</div>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-5">
<nav class="breadcrumbs d-flex">
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="index.html"><?= $record->category->category_name ?></a></li>
<li><a href="<?= route('products', [$record->product_slug]) ?>"><?= ucwords($record->product_name) ?></a></li>
</ol>
</nav>
<div class="container py-4"> <div class="container py-4">
<div class="row g-4" id="productList"> <div class="row g-4">
<h3 class="htitle "><?= ucwords($record->product_name) ?></h3>
<p>{!! $record->product_description !!}</p>
<div class="d-flex">
<a href="javascript:void(0)" onclick="showForm('enquiryForm','catalogForm')"><span class="enquiry">Enquiry Now</span></a>&nbsp;
<a href="javascript:void(0)" onclick="showForm('catalogForm','enquiryForm')"><span class="enquiry">Download Catalogue</span></a>
</div>
<form action="" method="post" class="enquiryForm">
<label>Fields marked with an * are required</label>
<div class="form-floating mb-3">
<input type="text" class="form-control form-bord" id="nameInput" name="name" placeholder="Name" required="">
<label for="nameInput"> Name *</label>
</div>
</div> <div class="form-floating mb-3">
<input type="email" class="form-control form-bord" id="emailInput" name="email" placeholder="Email Address" required="">
<label for="emailInput">Email *</label>
</div>
<div class="form-floating mb-3">
</div> <input type="text" class="form-control form-bord" id="emailInput" name="phone" placeholder="Phone" required="">
<label for="messageInput">Phone *</label>
</div>
<div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button>
</div>
</form>
<form action="" method="post" class="catalogForm">
<label>Fields marked with an * are required</label>
<div class="form-floating mb-3">
<input type="text" class="form-control form-bord" id="emailInput" name="phone" placeholder="Phone" required="">
<label for="messageInput">Phone *</label>
</div>
<div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button>
</div>
</form>
<div class="mb-1">
<h6 class=" text-muted">Brand</h6>
<?php foreach($brands as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->brand ?>" data-placement="top" class="tag-box-brand"><?= $val->brand ?></span></a>
<?php } ?>
</div>
<hr>
<div class="mb-1">
<h6 class=" text-muted">Size/Range/Capacity</h6>
<div class="d-flex flex-wrap gap-2">
<?php foreach($size as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->size ?>" data-placement="top" class="tag-box-size"><?= $val->size ?></span></a>
<?php } ?>
</div>
</div>
<hr>
<div class="mb-1">
<h6 class=" text-muted">Industry</h6>
<div class="d-flex flex-wrap gap-2">
<?php foreach($industrys as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->industry ?>" data-placement="top" class="tag-box-indus"><?= ucwords($val->industry) ?></span></a>
<?php } ?>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script>
$('.catalogForm , .enquiryForm').hide();
function showForm(showid,hideid)
{
$('.'+showid).show();
$('.'+hideid).hide();
}
</script>
@endsection @endsection
\ No newline at end of file
@include('base.header')
<style>
.loader-box {
width: 100%;
text-align: center;
padding: 120px 0;
}
.loader-box img {
width: 120px;
}
.main-content {
display: none;
padding: 40px 0;
}
.container {
display: flex;
gap: 40px;
justify-content: center;
align-items: flex-start;
padding: 30px;
}
.success-box {
background: #f0fff4;
border: 2px solid #38a169;
padding: 30px;
border-radius: 12px;
width: 370px;
text-align: center;
}
.success-icon {
font-size: 55px;
color: #38a169;
font-weight: bold;
}
.details-box {
background: #ffffff;
padding: 30px;
border-radius: 12px;
width: 380px;
border: 1px solid #e5e7eb;
}
.back-btn {
background: #ccc;
padding: 6px 14px;
border-radius: 8px;
border: none;
margin-bottom: 15px;
}
.warning-box {
margin-top: 20px;
padding: 12px;
font-size: 13px;
background: #fff3cd;
border-left: 5px solid #ff9800;
}
</style>
<body>
{{-- ================= LOADER WITH TIMER ================= --}}
<div class="loader-box" id="loaderBox">
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading...">
<h3 style="margin-top:20px;">
Please wait <span id="timer">60</span> seconds...
</h3>
</div>
{{-- ================= MAIN CONTENT ================= --}}
<div class="main-content" id="mainContent">
<div class="container">
{{-- LEFT BOX --}}
<div class="success-box">
<div class="success-icon">✔</div>
<h3>Thank You!</h3>
<p>Your request has been submitted successfully.</p>
</div>
{{-- RIGHT BOX --}}
<div class="details-box">
<button class="back-btn" onclick="window.history.back();">Back</button>
<h2>Request Summary</h2>
<span class="label">Spoken Languages:</span>
<p>{{ $languages_csv ?? 'N/A' }}</p>
<div class="warning-box">
NEVER pay in advance to anyone via Gift / Bing card, Transcash,
Neosurf / PCS coupons, Google Play card, etc.
They are scammers.
</div>
</div>
</div>
</div>
<script>
// ================= countdown timer =================
let timeLeft = 60; // 1 minute
let countdown = setInterval(() => {
timeLeft--;
document.getElementById("timer").innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdown);
// hide loader, show content
document.getElementById('loaderBox').style.display = 'none';
document.getElementById('mainContent').style.display = 'block';
}
}, 1000);
</script>
</body>
@include('base.footer')
</html>
@include('base.header')
<style>
body {
background: #f5f6f8;
font-family: 'Inter', sans-serif;
}
.loader-box {
width: 100%;
text-align: center;
padding: 150px 0;
}
.loader-box img {
width: 120px;
}
.main-content {
display: none;
padding-top: 20px;
}
/* Card grid */
.vendor-card {
background: white;
border-radius: 18px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
margin-bottom: 25px;
position: relative;
}
/* Service badge & online badge row */
.badge-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.service-badge {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #7918f2, #ac32e4);
color: white;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px;
line-height: 1.1;
}
.online-badge {
background: #00c853;
color: white;
font-size: 12px;
padding: 6px 14px;
border-radius: 20px;
font-weight: 600;
}
.hot-icon {
width: 65px;
height: 65px;
background: #ff1744;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 15px auto 0;
}
.hot-img {
width: 34px;
}
.user-name {
margin-top: 12px;
font-size: 17px;
font-weight: 600;
color: #222;
}
.languages {
color: #777;
margin-top: 5px;
font-size: 13px;
}
</style>
{{-- LOADER --}}
<div class="loader-box" id="loaderBox">
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading...">
<h3 style="margin-top:20px;">
Please wait <span id="timer">60</span> seconds...
</h3>
</div>
<div class="main-content" id="mainContent">
<a href="/" class="back-link">← Back to Home</a>
<div class="container">
<div class="row">
{{-- LOOP 10 CARDS --}}
@for ($i = 1; $i <= 10; $i++)
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="vendor-card">
<div class="badge-row">
<div class="service-badge">Audio/Video Calls</div>
<div class="online-badge">● Online</div>
</div>
<div class="tick-icon">
<img src="https://img.icons8.com/emoji/96/fire.png" class="hot-img" alt="Hot">
</div>
<div class="user-name">Test User {{ $i }}</div>
<div class="languages">Tamil, English</div>
</div>
</div>
@endfor
</div>
</div>
</div>
<script>
let timeLeft = 60;
let countdown = setInterval(() => {
timeLeft--;
document.getElementById("timer").innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdown);
document.getElementById('loaderBox').style.display = 'none';
document.getElementById('mainContent').style.display = 'block';
}
}, 1000);
</script>
@include('base.footer')
</html>
\ No newline at end of file
@include('base.header')
@if (session('mobileExists'))
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3 mt-4 alertpopup" style="">
<div id="errorToast" class="toast show" role="alert"
style="min-width: 250px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.2);">
<div class="d-flex align-items-center p-3">
<span class="me-3 text-danger fs-3">❗</span>
<span class="flex-grow-1 fs-5">{{ session('mobileExists') }}</span>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast"></button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
var toastEl = document.getElementById('errorToast');
var toast = new bootstrap.Toast(toastEl, {
delay: 3000
});
toast.show();
</script>
@endif
<section class="support-con py-5 mt-5">
<div class="row justify-content-center">
<div class="col-12 col-md-7 col-lg-5">
<h2 class="form-title text-center mb-4">Support Request Form</h2>
<p class="text-center mb-4 description-text">
Provide your details and issue description. Our support team will
get back to you as soon as possible.
</p>
<!-- FORM START -->
<form action="{{ route('supportRequest') }}" method="POST" enctype="multipart/form-data">
@csrf
<!-- Email -->
<div class="row">
<div class="col-md-1"></div>
{{-- <div class="col-md-10">
<label class="form-label">Enter Your Mail id</label>
<input type="hidden" name="email" class="form-control custom-input" required
placeholder="Your Email">
</div> --}}
</div>
<!-- Phone -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<label class="form-label mt-3">Vendor Phone Number</label>
<input type="text" name="mobile" class="form-control custom-input" required
placeholder="Enter Vendor Phone Number">
</div>
</div>
<!-- Description -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<label class="form-label mt-3">Description of the Issue</label>
<textarea name="issue" class="form-control custom-textarea" rows="4" required
placeholder="Enter Your Details Here"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<!-- Add Proof --> <div class="col-md-10">
<label class="form-label" style="margin-top:15px;">Add proof</label>
{{-- <div class="upload-box" onclick="document.getElementById('proofInput').click()">
<div class="upload-icon"></div>
<span>Add Photos</span>
</div> --}}
<div class=" " onclick="document.getElementById('proofInput').click()">
<img class="upload-box" src="{{ asset('assets') }}/image/support_photo.svg" >
</div>
<input type="file" id="proofInput" name="photo[]" multiple accept="image/*" style="display:none;"
onchange="previewProof()">
<div id="previewContainer" class="preview-container"></div>
</div>
</div>
<!-- Submit -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<button class="btn submit-btn w-100 mt-4" id="submitBtn" type="submit">Submit</button>
</div>
</div>
</form>
<!-- FORM END -->
</div>
</div>
</section>
@include('base.footer')
<script>
//const emailInput = document.getElementById("emailInput");
const phoneInput = document.getElementById("phoneInput");
const descInput = document.getElementById("descInput");
const proofInput = document.getElementById("proofInput");
const emailError = document.getElementById("emailError");
const phoneError = document.getElementById("phoneError");
const descError = document.getElementById("descError");
const proofError = document.getElementById("proofError");
const submitBtn = document.getElementById("submitBtn");
function validateForm() {
let valid = true;
// Email validation
// const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// if (!emailPattern.test(emailInput.value.trim())) {
// emailError.style.display = "block";
// valid = false;
// } else {
// emailError.style.display = "none";
// }
// Phone validation (10 digits only)
phoneInput.value = phoneInput.value.replace(/[^0-9]/g, '');
if (phoneInput.value.length !== 10) {
phoneError.style.display = "block";
valid = false;
} else {
phoneError.style.display = "none";
}
// Description validation
if (descInput.value.trim().length < 5) {
descError.style.display = "block";
valid = false;
} else {
descError.style.display = "none";
}
// Proof validation
if (proofInput.files.length === 0) {
proofError.style.display = "block";
valid = false;
} else {
proofError.style.display = "none";
}
// Enable or disable submit button
submitBtn.disabled = !valid;
}
// Event listeners
//emailInput.addEventListener("input", validateForm);
phoneInput.addEventListener("input", validateForm);
descInput.addEventListener("input", validateForm);
proofInput.addEventListener("change", validateForm);
function previewProof() {
let files = proofInput.files;
let container = document.getElementById("previewContainer");
container.innerHTML = "";
for (let file of files) {
let img = document.createElement("img");
img.src = URL.createObjectURL(file);
container.appendChild(img);
}
validateForm();
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment