1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / onepluscosmetics /
Filename : product_view.php
back
<?php
$id = $_GET['id'];
$conn = new mysqli("localhost","root","1303","onepluscosmetics");
$result = $conn->query("SELECT *FROM products where id = '$id'");
$row = $result->fetch_assoc();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnePlus Cosmetics - Non Woven Solutions</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #2c5aa0;
            --secondary-color: #ff6b35;
            --accent-color: #f7f7f7;
            --text-dark: #333;
            --text-light: #666;
            --gradient-primary: linear-gradient(135deg, #2c5aa0, #4a7bc8);
            --gradient-secondary: linear-gradient(135deg, #ff6b35, #ff8a65);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* Navigation */
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(20px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            padding: 1rem 0;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.8rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            color: var(--text-dark) !important;
            margin: 0 10px;
            transition: all 0.3s ease;
            position: relative;
        }

        .navbar-nav .nav-link:hover {
            color: var(--primary-color) !important;
            transform: translateY(-2px);
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: var(--gradient-primary);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .navbar-nav .nav-link:hover::after,
        .navbar-nav .nav-link.active::after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,0 1000,300 1000,1000 0,700"/><polygon fill="rgba(255,255,255,0.03)" points="0,200 1000,0 1000,400 0,600"/></svg>');
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateX(0px) translateY(0px); }
            50% { transform: translateX(30px) translateY(-30px); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            color: white;
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            animation: fadeInUp 1s ease-out;
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        .btn-primary-custom {
            background: var(--gradient-secondary);
            border: none;
            padding: 15px 35px;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
            animation: fadeInUp 1s ease-out 0.6s both;
        }

        .btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Sections */
        .section {
            padding: 100px 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--gradient-secondary);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

        /* Cards */
        .card-custom {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            overflow: hidden;
            height: 100%;
        }

        .card-custom:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .card-icon {
            width: 80px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 2rem;
        }

        /* Product Cards */
        .product-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            overflow: hidden;
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .product-image {
            height: 250px;
            background: white;
			 
            display: flex;
            align-items: center;
            justify-content: center;
            
            font-size: 4rem;
            position: relative;
            overflow: hidden;
        }
		
		
	     .product-image img {
             border: 5px solid #0d6efd;
            border-radius: 5%; /* Optional: adds rounded corners */
			height: 250px;
            width: 70%;
         }
		 .card-icon{
		  border-radius:5%;
		  width:220px;
		  height:220px;
		  
		 }

        .product-image::before {
            content: '';
            position: absolute;
			border-color: blue;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .product-card:hover .product-image::before {

          left: 100%;
        }

        /* Team Cards */
        .team-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 2rem;
            transition: all 0.3s ease;
        }

        .team-card:hover {
            transform: translateY(-10px);
        }

        .team-avatar {
            width: 120px;
            height: 120px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 3rem;
        }

        /* Contact Section */
        .contact-info {
            background: var(--gradient-primary);
            color: white;
            padding: 2rem;
            border-radius: 20px;
            margin-bottom: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .contact-item i {
            font-size: 1.5rem;
            margin-right: 15px;
            width: 30px;
        }

        /* Footer */
        .footer {
            background: #1a1a1a;
            color: white;
            padding: 50px 0 20px;
        }

        .footer h5 {
            color: var(--secondary-color);
            margin-bottom: 20px;
        }

        .footer a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer a:hover {
            color: var(--secondary-color);
        }

        /* Page Content Container */
        .page-content {
            display: none;
            padding-top: 80px;
        }

        .page-content.active {
            display: block;
        }

        /* Product View Modal */
        .product-view-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            backdrop-filter: blur(10px);
        }

        .product-view-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 20px;
            padding: 2rem;
            max-width: 800px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }

        .close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 2rem;
            cursor: pointer;
            color: #666;
        }

        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                OnePlus Cosmetics
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="index.php" >Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.php" >About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.php" >Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.php" >Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Product View Section -->
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="mb-4 text-center">
                  <img src="image/<?php echo $row['product_image']; ?>" alt="<?php echo $row['product_name']; ?>" width="100%" class="img-fluid">
                </div>
                <h2 class="mb-3"><?php echo $row['product_name']; ?></h2>
               <p><?php echo $row['product_description']; ?></p>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS (Optional for dropdowns/navbar) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  <footer class="footer">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4">
                    <h5>OnePlus Cosmetics</h5>
                    <p>Leading manufacturer of Non Woven disposable products in Tamil Nadu since 2015.</p>
                    <div class="d-flex gap-3">
                        <a href="#" class="text-decoration-none">
                            <i class="fab fa-facebook fa-lg"></i>
                        </a>
                        <a href="#" class="text-decoration-none">
                            <i class="fab fa-twitter fa-lg"></i>
                        </a>
                        <a href="#" class="text-decoration-none">
                            <i class="fab fa-instagram fa-lg"></i>
                        </a>
                        <a href="#" class="text-decoration-none">
                            <i class="fab fa-linkedin fa-lg"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-2">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" onclick="showPage('home')">Home</a></li>
                        <li><a href="#" onclick="showPage('about')">About</a></li>
                        <li><a href="#" onclick="showPage('products')">Products</a></li>
                        <li><a href="#" onclick="showPage('contact')">Contact</a></li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5>Our Products</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Non Woven Under Garments</a></li>
                        <li><a href="#">Waxing Gowns</a></li>
                        <li><a href="#">Wax Stripes</a></li>
                        <li><a href="#">Custom Solutions</a></li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5>Contact Info</h5>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-map-marker-alt me-2"></i>4/139a, Idappadi, Salem</li>
                        <li><i class="fas fa-phone me-2"></i>+91 99440 44131</li>
                        <li><i class="fas fa-envelope me-2"></i>raja@onepluscosmetics.com</li>
                        <li><i class="fas fa-globe me-2"></i>www.onepluscosmetics.com</li>
                    </ul>
                </div>
            </div>
            <hr class="my-4">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-0">&copy; 2025 OnePlus Cosmetics. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">Designed with <i class="fas fa-heart text-danger"></i> <a href="www.addobyte.com">Addobyte Technologies</a></p>
                </div>
            </div>
        </div>
    </footer> 
	 <!-- Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Page Navigation
        function showPage(pageId) {
            // Hide all pages
            document.querySelectorAll('.page-content').forEach(page => {
                page.classList.remove('active');
            });
            
            // Show selected page
            document.getElementById(pageId + '-page').classList.add('active');
            
            // Update navigation
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // Find and activate the correct nav link
            document.querySelectorAll('.nav-link').forEach(link => {
                if (link.textContent.toLowerCase() === pageId.toLowerCase()) {
                    link.classList.add('active');
                }
            });
            
            // Scroll to top
            window.scrollTo(0, 0);
            
            // Close mobile menu if open
            const navbarCollapse = document.querySelector('.navbar-collapse');
            if (navbarCollapse.classList.contains('show')) {
                const bsCollapse = new bootstrap.Collapse(navbarCollapse);
                bsCollapse.hide();
            }
        }

        // Product View Modal
        const productData = {
            undergarments: {
                title: "Non Woven Under Garments",
                icon: "fas fa-tshirt",
                description: "Premium quality disposable undergarments designed for medical and beauty applications.",
                features: [
                    "Soft and comfortable non-woven fabric",
                    "Breathable and hygienic material",
                    "Available in multiple sizes",
                    "Easy to wear and dispose",
                    "Suitable for medical examinations",
                    "Perfect for beauty treatments"
                ],
                applications: [
                    "Medical clinics and hospitals",
                    "Beauty salons and spas",
                    "Massage therapy centers",
                    "Dermatology clinics",
                    "Physiotherapy centers"
                ],
                specifications: {
                    "Material": "Non-woven polypropylene",
                    "Weight": "25-30 GSM",
                    "Sizes Available": "S, M, L, XL, XXL",
                    "Color": "White, Blue (on request)",
                    "Packaging": "100 pieces per pack"
                }
            },
            gowns: {
                title: "Waxing Gowns",
                icon: "fas fa-user-md",
                description: "Comfortable and hygienic disposable gowns specifically designed for salon and spa treatments.",
                features: [
                    "Full coverage design for privacy",
                    "Tear-resistant material",
                    "Easy-to-wear wrap-around style",
                    "Lightweight and comfortable",
                    "Disposable for hygiene",
                    "Professional appearance"
                ],
                applications: [
                    "Waxing and hair removal services",
                    "Spa treatments and massages",
                    "Beauty salon procedures",
                    "Body treatments",
                    "Tanning salons"
                ],
                specifications: {
                    "Material": "Non-woven SMS fabric",
                    "Weight": "35-40 GSM",
                    "Sizes Available": "One size fits most",
                    "Color": "White, Pink (on request)",
                    "Packaging": "50 pieces per pack"
                }
            },
            stripes: {
                title: "Wax Stripes",
                icon: "fas fa-band-aid",
                description: "High-quality wax stripes designed for efficient and effective hair removal treatments.",
                features: [
                    "Strong adhesion for effective hair removal",
                    "Easy removal without residue",
                    "Pre-cut for convenience",
                    "Multiple sizes available",
                    "Suitable for all skin types",
                    "Professional salon quality"
                ],
                applications: [
                    "Professional waxing services",
                    "Beauty salons",
                    "Spa treatments",
                    "Home-use applications",
                    "Dermatology procedures"
                ],
                specifications: {
                    "Material": "High-grade fabric",
                    "Sizes Available": "Small, Medium, Large strips",
                    "Adhesion": "Strong but gentle",
                    "Color": "Natural fabric color",
                    "Packaging": "Various pack sizes available"
                }
            }
        };

        function showProductView(productId) {
            const product = productData[productId];
            const modal = document.getElementById('productViewModal');
            const content = document.getElementById('productViewContent');
            
            content.innerHTML = `
                <div class="row g-4">
                    <div class="col-lg-6">
                        <div class="product-image mb-4" style="height: 300px; border-radius: 15px;">
                            <i class="${product.icon}" style="font-size: 8rem;"></i>
							
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Specifications</h5>
                            </div>
                            <div class="card-body">
                                ${Object.entries(product.specifications).map(([key, value]) => 
                                    `<div class="row mb-2">
                                        <div class="col-5"><strong>${key}:</strong></div>
                                        <div class="col-7">${value}</div>
                                    </div>`
                                ).join('')}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <h2 class="mb-3">${product.title}</h2>
                        <p class="lead">${product.description}</p>
                        
                        <h4 class="mt-4 mb-3">Key Features</h4>
                        <ul class="list-unstyled">
                            ${product.features.map(feature => 
                                `<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>${feature}</li>`
                            ).join('')}
                        </ul>
                        
                        <h4 class="mt-4 mb-3">Applications</h4>
                        <ul class="list-unstyled">
                            ${product.applications.map(app => 
                                `<li class="mb-2"><i class="fas fa-arrow-right text-primary me-2"></i>${app}</li>`
                            ).join('')}
                        </ul>
                        
                        <div class="mt-4">
                            <button class="btn btn-primary-custom me-3" onclick="showPage('contact')">
                                <i class="fas fa-envelope me-2"></i>Request Quote
                            </button>
                            <button class="btn btn-outline-primary" onclick="closeProductView()">
                                <i class="fas fa-times me-2"></i>Close
                            </button>
                        </div>
                    </div>
                </div>
            `;
            
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        }

        function closeProductView() {
            document.getElementById('productViewModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Close modal when clicking outside
        document.getElementById('productViewModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeProductView();
            }
        });

        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
                navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.15)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
                navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
            }
        });

        // Fade in animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

        // Contact form submission
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show success message
            const alert = document.createElement('div');
            alert.className = 'alert alert-success alert-dismissible fade show mt-3';
            alert.innerHTML = `
                <i class="fas fa-check-circle me-2"></i>
                Thank you for your message! We'll get back to you soon.
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            this.appendChild(alert);
            this.reset();
            
            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                }
            }, 5000);
        });

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            // Trigger fade-in animations for elements already in view
            setTimeout(() => {
                document.querySelectorAll('.fade-in').forEach(el => {
                    const rect = el.getBoundingClientRect();
                    if (rect.top < window.innerHeight) {
                        el.classList.add('visible');
                    }
                });
            }, 100);
        });

        // Keyboard navigation for modal
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeProductView();
            }
        });

        // Mobile menu auto-close on link click
        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
            link.addEventListener('click', () => {
                const navbarCollapse = document.querySelector('.navbar-collapse');
                if (navbarCollapse.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(navbarCollapse);
                    bsCollapse.hide();
                }
            });
        });

        // Smooth scrolling for in-page links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                if (this.getAttribute('href') !== '#') {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                }
            });
        });

        // Add loading animation for page transitions
        function showPage(pageId) {
            // Add loading state
            document.body.style.opacity = '0.8';
            
            setTimeout(() => {
                // Hide all pages
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });
                
                // Show selected page
                document.getElementById(pageId + '-page').classList.add('active');
                
                // Update navigation
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.classList.remove('active');
                });
                
                // Find and activate the correct nav link
                document.querySelectorAll('.nav-link').forEach(link => {
                    if (link.textContent.toLowerCase() === pageId.toLowerCase()) {
                        link.classList.add('active');
                    }
                });
                
                // Scroll to top
                window.scrollTo(0, 0);
                
                // Remove loading state
                document.body.style.opacity = '1';
                
                // Close mobile menu if open
                const navbarCollapse = document.querySelector('.navbar-collapse');
                if (navbarCollapse.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(navbarCollapse);
                    bsCollapse.hide();
                }
                
                // Re-trigger animations for new page
                setTimeout(() => {
                    document.querySelectorAll('.fade-in').forEach(el => {
                        el.classList.remove('visible');
                        const rect = el.getBoundingClientRect();
                        if (rect.top < window.innerHeight) {
                            el.classList.add('visible');
                        }
                    });
                }, 50);
            }, 150);
        }
    </script>
</body>
</html>