Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/hifi11.in/public_html

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: demo-class.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Free AI-Powered Full Stack Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            padding-bottom: 60px;
            position: relative;
            overflow-x: hidden;
        }

/* Animated Gradient Background */
        .bg-animated {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
            background-size: 200% 200%;
            animation: gradient 15s ease infinite;
        }

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.hero-banner { background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%); }
        .date-highlight { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); }
        .feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .feature-card:hover { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
        .fixed-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #1E40AF; z-index: 50; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); }
        .trainer-photo { border: 3px solid #3B82F6; }
        .popup-form { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; }
        .popup-form.active { display: flex; }
        .popup-content { background: white; max-width: 480px; width: 90%; border-radius: 16px; padding: 1.5rem; position: relative; animation: slideIn 0.3s ease; }
        @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .close-popup { position: absolute; top: 1rem; right: 1rem; cursor: pointer; font-size: 1.5rem; color: #6B7280; }
        .progress-bar { width: 100%; height: 4px; background: #E5E7EB; border-radius: 2px; overflow: hidden; }
        .progress-fill { height: 100%; background: #3B82F6; transition: width 0.3s ease; width: 0%; }
        .btn-primary { transition: all 0.3s ease; }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        input:invalid:focus, select:invalid:focus { border-color: #EF4444; }
        input:focus, select:focus, textarea:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
        .logo { max-height: 40px; width: auto; }
        .faq-item { border-bottom: 1px solid #E5E7EB; }
        .faq-question { cursor: pointer; padding: 1rem 0; }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
        .faq-answer.active { max-height: 300px; padding-bottom: 1rem; }
        .rotate-180 { transform: rotate(180deg); }
        /* simple zoomIn placeholder for trainer photo */
        @keyframes zoomIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .animate-zoomIn { animation: zoomIn .4s ease both; }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    
    <div class="bg-animated"></div>

<header class="bg-white/80 backdrop-blur-sm shadow-sm py-3 px-4 sm:px-6 fixed top-0 left-0 right-0 z-50">
        <div class="max-w-6xl mx-auto flex items-center justify-between">
            <img src="HIFI11.png" alt="Hifi11 Technologies Logo" class="logo">
        </div>
    </header>
    <br><br>

<section class="hero-banner text-white pt-20 pb-12 px-4 sm:px-6">
        <div class="max-w-6xl mx-auto text-center">
            <span class="bg-white text-[#1E40AF] text-xs font-semibold py-1 px-3 rounded-full mb-3 inline-block">FREE LIVE DEMO</span>

<h1 class="text-2xl sm:text-4xl font-bold mb-2">Become an AI-Powered Full Stack Developer</h1>
            <p class="text-base sm:text-lg max-w-lg mx-auto mb-2 opacity-90">Organised by <strong>Tech Devil AK</strong> in association with <strong>Hifi11 Technologies</strong></p>
            <p class="text-sm max-w-lg mx-auto mb-2 opacity-90">Dharmapuri's most famous and leading IT company</p>
            <p class="text-sm max-w-lg mx-auto mb-4 opacity-90">Join our free demo to supercharge your coding with AI!</p>

<div class="flex justify-center gap-3 mb-5">
                <div class="date-highlight rounded-lg flex items-center p-3">
                    <div class="text-center mr-3">
                        <div class="text-xl font-bold">23</div>
                        <div class="text-xs">Dec</div>
                    </div>
                    <div class="text-left border-l border-white/30 pl-3">
                        <p class="font-medium text-sm">Tuesday, 08:00 PM IST</p>
                        <p class="text-xs opacity-90">60-Min Live Session</p>
                    </div>
                </div>
            </div>

<button class="open-popup btn-primary bg-white hover:bg-gray-100 text-[#1E40AF] font-semibold py-2 px-5 rounded-lg shadow-md text-base">Join Free Demo</button>
            <div class="mt-3 flex items-center justify-center space-x-2 text-xs opacity-80">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                <span>Earn a Certificate</span>
            </div>
        </div>
    </section>

<section class="py-8 px-4 sm:px-6 bg-white/80 backdrop-blur-sm">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-6">
                <h2 class="text-xl sm:text-2xl font-bold text-[#1E40AF] mb-2">What You'll Discover</h2>
                <p class="text-sm text-gray-600 max-w-lg mx-auto">Hands-on preview of AI-driven development</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white p-4 rounded-xl shadow-sm feature-card">
                    <div class="bg-blue-100 rounded-full w-10 h-10 flex items-center justify-center mb-3 text-[#1E40AF]">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-base mb-1">AI Coding</h3>
                    <p class="text-gray-600 text-xs">Automate 60% of your code with AI</p>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm feature-card">
                    <div class="bg-blue-100 rounded-full w-10 h-10 flex items-center justify-center mb-3 text-[#1E40AF]">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-base mb-1">Fast Prototyping</h3>
                    <p class="text-gray-600 text-xs">Build apps in minutes</p>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm feature-card">
                    <div class="bg-blue-100 rounded-full w-10 h-10 flex items-center justify-center mb-3 text-[#1E40AF]">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-base mb-1">Smart Debugging</h3>
                    <p class="text-gray-600 text-xs">AI finds and fixes errors</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-8 px-4 sm:px-6 bg-white/80 backdrop-blur-sm">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-6">
                <h2 class="text-xl sm:text-2xl font-bold text-[#1E40AF] mb-2">Course Content Overview</h2>
                <p class="text-sm text-gray-600 max-w-lg mx-auto">From Zero to Deployment - Project Based Learning</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white p-4 rounded-xl shadow-sm">
                    <h3 class="font-semibold text-base mb-3">Frontend Development</h3>
                    <ul class="space-y-2 text-xs">
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Landing Page Development</span>
                        </li>
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>E-commerce Page Development</span>
                        </li>
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Complete Website Pages (Home, Services, Products, About, Contact)</span>
                        </li>
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Form Creation (Frontend + Backend Integration)</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm">
                    <h3 class="font-semibold text-base mb-3">Backend & Professional Skills</h3>
                    <ul class="space-y-2 text-xs">
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Backend CRUD Operations (Create, Read, Update, Delete)</span>
                        </li>
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Complete CRM Project Development</span>
                        </li>
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Deployment Strategies (Zero to Deployment)</span>
                        </li>
                        <li class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span>Freelance Guidance & Digital Marketing Plan</span>
                        </li>
                    </ul>
                </div>
            </div>

<div class="mt-6 bg-white p-4 rounded-xl shadow-sm">
                <h3 class="font-semibold text-base mb-3">Unique Learning Approach</h3>
                <ul class="space-y-2 text-xs">
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span><strong>Day 1 Project-Based Learning:</strong> Start building real projects from the very first day</span>
                    </li>
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span><strong>Corporate-Style Team Tasks:</strong> Work in teams with roles like Team Leader and Developers</span>
                    </li>
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span><strong>AI-Powered Development:</strong> Learn to use ChatGPT, Deepseek and other AI tools</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

<section class="py-8 px-4 sm:px-6 bg-white/80 backdrop-blur-sm">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-6">
                <h2 class="text-xl sm:text-2xl font-bold text-[#1E40AF] mb-2">Who Should Attend?</h2>
                <p class="text-sm text-gray-600 max-w-lg mx-auto">This program is perfect for:</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white p-4 rounded-xl shadow-sm">
                    <div class="flex items-start mb-2">
                        <div class="bg-[#1E40AF] text-white p-1 rounded-full mr-3 flex-shrink-0">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base mb-1">Students & Freshers</h3>
                            <p class="text-gray-600 text-xs">Engineering/Any Graduate students looking to build real-world projects</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm">
                    <div class="flex items-start mb-2">
                        <div class="bg-[#1E40AF] text-white p-1 rounded-full mr-3 flex-shrink-0">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base mb-1">Junior Developers</h3>
                            <p class="text-gray-600 text-xs">1-3 years experience wanting to learn full stack with AI</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm">
                    <div class="flex items-start mb-2">
                        <div class="bg-[#1E40AF] text-white p-1 rounded-full mr-3 flex-shrink-0">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base mb-1">Career Changers</h3>
                            <p class="text-gray-600 text-xs">Professionals transitioning to tech with zero coding experience</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm">
                    <div class="flex items-start mb-2">
                        <div class="bg-[#1E40AF] text-white p-1 rounded-full mr-3 flex-shrink-0">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base mb-1">Entrepreneurs</h3>
                            <p class="text-gray-600 text-xs">Founders who want to build tech products without heavy coding</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-8 px-4 sm:px-6 bg-white/80 backdrop-blur-sm">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-6">
                <h2 class="text-xl sm:text-2xl font-bold text-[#1E40AF] mb-2">Frequently Asked Questions</h2>
                <p class="text-sm text-gray-600 max-w-lg mx-auto">Find answers to common questions</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="faq-item">
                    <div class="faq-question flex justify-between items-center px-4">
                        <h3 class="font-medium text-sm">Do I need prior coding experience?</h3>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#1E40AF] transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="text-xs text-gray-600 pb-3">No! We teach from absolute basics. Our AI-powered approach helps beginners learn faster by automating repetitive coding tasks.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question flex justify-between items-center px-4">
                        <h3 class="font-medium text-sm">What's the course duration?</h3>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#1E40AF] transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="text-xs text-gray-600 pb-3">The full course is 7 Days intensive training with daily live sessions. This demo will give you a complete overview of what to expect.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question flex justify-between items-center px-4">
                        <h3 class="font-medium text-sm">Will I get certificate?</h3>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#1E40AF] transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="text-xs text-gray-600 pb-3">Yes! All demo attendees receive a participation certificate. Course completers get a project-based certification.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question flex justify-between items-center px-4">
                        <h3 class="font-medium text-sm">What about placement support?</h3>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#1E40AF] transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="text-xs text-gray-600 pb-3">We provide complete freelancing guidance, portfolio building, and connect top performers with our hiring partners.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-8 px-4 sm:px-6 bg-white/80 backdrop-blur-sm">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-6">
                <h2 class="text-xl sm:text-2xl font-bold text-[#1E40AF] mb-2">Your Expert Instructor</h2>
                <p class="text-sm text-gray-600 max-w-lg mx-auto">Learn from an industry leader</p>
            </div>
            <div class="flex flex-col md:flex-row items-center gap-6 bg-white p-4 rounded-xl shadow-sm">
                <div class="w-40 h-40 rounded-full overflow-hidden flex-shrink-0 trainer-photo animate-zoomIn">
                    <img src="ari.png" alt="Ariharasudhan P" class="w-full h-full object-cover transition-transform hover:scale-105 hover:shadow-lg">
                </div>
                <div class="text-left">
                    <h3 class="text-lg font-bold mb-1">Ariharasudhan P</h3>
                    <p class="text-gray-700 mb-3 text-sm">AI & Full Stack Expert</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-3">
                        <div class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-xs">CEO, Hifi11 Technologies</span>
                        </div>
                        <div class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-xs">150+ Corporate Trainings</span>
                        </div>
                        <div class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-xs">Master Trainer, EDII-TN</span>
                        </div>
                        <div class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-[#1E40AF] mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-xs">Resource Person, SISCASO</span>
                        </div>
                    </div>
                    <blockquote class="border-l-4 border-[#3B82F6] pl-3 italic text-gray-700 text-xs">
                        "Empowering coders with AI to 10x their productivity."
                    </blockquote>
                </div>
            </div>
        </div>
    </section>

<div class="popup-form" id="registerPopup">
        <div class="popup-content">
            <span class="close-popup" aria-label="Close">×</span>
            <div class="text-center mb-4">
                <h2 class="text-xl font-bold text-[#1E40AF] mb-1">Join Free Demo</h2>
                <p class="text-xs text-gray-600">Secure your spot now!</p>
            </div>
            <div class="progress-bar mb-4">
                <div class="progress-fill" style="width: 0%"></div>
            </div>
            <form id="registerForm" class="space-y-3" action="process-register.php" method="POST">
                <div>
                    <label for="name" class="block text-xs font-medium text-gray-700 mb-1">Full Name*</label>
                    <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#3B82F6] focus:border-[#3B82F6] text-sm" required>
                </div>
                <div>
                    <label for="email" class="block text-xs font-medium text-gray-700 mb-1">Email Address*</label>
                    <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#3B82F6] focus:border-[#3B82F6] text-sm" required>
                </div>
                <div>
                    <label for="phone" class="block text-xs font-medium text-gray-700 mb-1">Phone Number*</label>
                    <input type="tel" id="phone" name="phone" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#3B82F6] focus:border-[#3B82F6] text-sm" required>
                </div>
                <div>
                    <label for="role" class="block text-xs font-medium text-gray-700 mb-1">Current Role*</label>
                    <select id="role" name="role" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#3B82F6] focus:border-[#3B82F6] text-sm" required>
                        <option value="">Select role</option>
                        <option value="student">Student</option>
                        <option value="developer">Developer</option>
                        <option value="professional">Professional</option>
                        <option value="entrepreneur">Entrepreneur</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label for="questions" class="block text-xs font-medium text-gray-700 mb-1">Questions?</label>
                    <textarea id="questions" name="questions" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#3B82F6] focus:border-[#3B82F6] text-sm"></textarea>
                </div>
                <div class="flex items-center">
                    <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-[#3B82F6] focus:ring-[#3B82F6] border-gray-300 rounded" required>
                    <label for="terms" class="ml-2 block text-xs text-gray-700">I agree to receive demo updates</label>
                </div>
                <button type="submit" class="btn-primary w-full bg-[#1E40AF] hover:bg-[#1a3a9a] text-white font-semibold py-2 px-4 rounded-lg shadow-md text-sm">Register Now</button>
            </form>
            <div class="mt-3 text-center text-xs text-gray-500">
                <p>Confirmation email sent instantly.</p>
            </div>
        </div>
    </div>

<div class="fixed-cta-bar py-3 px-4 sm:px-6" role="region" aria-label="Join Demo">
        <div class="max-w-6xl mx-auto flex items-center justify-center">
            <button class="open-popup btn-primary bg-white hover:bg-gray-100 text-[#1E40AF] font-semibold py-2 px-5 rounded-lg text-sm">Join Free Demo</button>
        </div>
    </div>

<footer class="bg-[#1E40AF] text-white py-5 px-4 sm:px-6">
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
            <p class="text-xs mb-2 md:mb-0">© 2025 Hifi11 Technologies. All rights reserved.</p>
            <div class="flex space-x-4 mb-2 md:mb-0">
                <a href="#" class="hover:text-blue-200 transition" aria-label="Twitter">
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                    </svg>
                </a>
                <a href="#" class="hover:text-blue-200 transition" aria-label="LinkedIn">
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd"></path>
                    </svg>
                </a>
                <a href="#" class="hover:text-blue-200 transition" aria-label="YouTube">
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
                    </svg>
                </a>
                <a href="mailto:hifi11technologies@gmail.com" class="text-xs hover:text-blue-200 transition">hifi11technologies@gmail.com</a>
            </div>
        </div>
    </footer>

// Google Analytics
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-3GDZNBFHXS');

// FAQ toggle functionality
        faqQuestions.forEach(question => {
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling;
                const icon = question.querySelector('svg');
                answer.classList.toggle('active');
                icon.classList.toggle('rotate-180');
            });
        });

// Popup form functionality
        openButtons.forEach(button => {
            button.addEventListener('click', () => {
                popup.classList.add('active');
                document.body.style.overflow = 'hidden';
            });
        });

closeButton.addEventListener('click', () => {
            popup.classList.remove('active');
            document.body.style.overflow = 'auto';
        });

popup.addEventListener('click', (e) => {
            if (e.target === popup) {
                popup.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        });

inputs.forEach(input => {
            input.addEventListener('input', () => {
                const filled = Array.from(inputs).filter(i => i.value).length;
                const progress = (filled / inputs.length) * 100;
                progressFill.style.width = `${progress}%`;
            });
        });
    </script>

<script>
        // Generate or retrieve session ID
        const getSessionId = () => {
            let sessionId = localStorage.getItem('user_tracking_id');
            if (!sessionId) {
                sessionId = Array.from(crypto.getRandomValues(new Uint8Array(16)))
                  .map(b => b.toString(16).padStart(2, '0')).join('');
                localStorage.setItem('user_tracking_id', sessionId);
            }
            return sessionId;
        };

// Collect all tracking data
        const collectTrackingData = () => {
            const urlParams = new URLSearchParams(window.location.search);
            return {
                session_id: getSessionId(),
                page: window.location.pathname + window.location.search,
                referrer: document.referrer || 'Direct',
                user_agent: navigator.userAgent,
                screen_width: screen.width,
                screen_height: screen.height,
                utm_source: urlParams.get('utm_source'),
                utm_medium: urlParams.get('utm_medium'),
                utm_campaign: urlParams.get('utm_campaign'),
                fbclid: urlParams.get('fbclid')
            };
        };

// Send data to PHP endpoint
        const sendTrackingData = async () => {
            try {
                const response = await fetch('https://hifi11.in/tracking.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(collectTrackingData())
                });
                if (!response.ok) {
                    console.error('Tracking failed:', await response.text());
                }
            } catch (error) {
                console.error('Tracking error:', error);
            }
        };

// Execute tracking
        document.addEventListener('DOMContentLoaded', sendTrackingData);
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: demo-class.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation