<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShareChat ShareChat: India's Digital Connection Hub</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="meenu.css">
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex flex-col text-gray-100 selection:bg-yellow-600 selection:text-gray-900">
  <div 
    id="background-container" 
    class="fixed inset-0 z-[-1] overflow-hidden"
    allow="fullscreen"
  >
    <video 
      autoplay 
      loop 
      muted 
      playsinline 
      class="absolute inset-0 w-full h-full object-cover opacity-30"
    >
      <source src="https://assets.mixkit.co/active_storage/clips/preview/preview-background-digital-abstract-flow-4k-4608-7f708b50f5617e9b5abb1b8cbe2c3b7d.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="absolute inset-0 bg-gradient-to-br from-gray-900/80 to-gray-800/80"></div>
  </div>
  
  <div class="container mx-auto max-w-md w-full flex-grow flex flex-col items-center justify-center p-4 relative">
    <!-- Login Form -->
    <div id="loginContainer" class="mb-6 w-full">
      <div class="bg-gray-800 shadow-2xl rounded-xl p-8 border border-gray-700 glow-effect text-center">
        <!-- Logo Section -->
        <div class="mb-6 flex justify-center">
          <img 
            src="https://dev-bjcoder.pantheonsite.io/uploads/BJ-Devs_679ca7384eca21.23197310.png" 
            alt="ShareChat: India's Digital Connection Hub Logo" 
            class="w-40 h-auto object-contain rounded-lg transition-transform duration-300 hover:scale-105 transform"
          >
        </div>
        
        <h2 class="text-3xl font-bold mb-6 text-yellow-500 tracking-tight">Login</h2>
        <form id="loginForm" class="space-y-4">
          <input 
            type="text" 
            id="usernameInput" 
            placeholder="Username" 
            class="w-full px-4 py-3 bg-gray-700 text-gray-100 border-2 border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition duration-300"
            required
          >
          <input 
            type="password" 
            id="passwordInput" 
            placeholder="Password" 
            class="w-full px-4 py-3 bg-gray-700 text-gray-100 border-2 border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition duration-300"
            required
          >
          <button 
            type="submit" 
            class="w-full bg-yellow-600 text-gray-900 py-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg uppercase tracking-wider font-semibold"
          >
            Sign In
          </button>
        </form>
      </div>
    </div>

    <!-- Language Selection Container -->
    <div id="languageContainer" class="hidden w-full">
      <h1 class="text-3xl font-bold text-center mb-6 text-yellow-600 tracking-tight">
        Choose Your Language
      </h1>
      
      <div class="grid grid-cols-3 gap-2 p-2">
        <button class="language-btn" data-language="Kannada">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-linecap="round" stroke-linejoin="round" class="stroke-royal-blue absolute top-0 right-[7%] translate-x-2/4 fill-white transition-opacity" width="28" height="28" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="m9 12 2 2 4-4"></path>
          </svg>
          <img loading="lazy" class="rounded-lg border-royal-blue border-3" alt="Language icon for Kannada" src="https://cdn4.sharechat.com/33d5318_1c8/tools/39f5caf_1723100567928_sc.webp">
        </button>
        <button class="language-btn" data-language="Hindi">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Hindi" src="https://cdn4.sharechat.com/33d5318_1c8/tools/31bebbea_1723100421736_sc.webp">
        </button>
        <button class="language-btn" data-language="Tamil">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Tamil" src="https://cdn4.sharechat.com/33d5318_1c8/tools/14495b50_1723100498441_sc.webp">
        </button>
        <button class="language-btn" data-language="Telugu">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Telugu" src="https://cdn4.sharechat.com/33d5318_1c8/tools/148104f0_1723100480759_sc.webp">
        </button>
        <button class="language-btn" data-language="Marathi">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Marathi" src="https://cdn4.sharechat.com/33d5318_1c8/tools/50c71e5_1723100549980_sc.webp">
        </button>
        <button class="language-btn" data-language="Malayalam">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Malayalam" src="https://cdn4.sharechat.com/33d5318_1c8/tools/2b9292d8_1723100638609_sc.webp">
        </button>
        <button class="language-btn" data-language="Bengali">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Bengali" src="https://cdn4.sharechat.com/33d5318_1c8/tools/1d68bb48_1723100679559_sc.webp">
        </button>
        <button class="language-btn" data-language="Odia">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Odia" src="https://cdn4.sharechat.com/33d5318_1c8/tools/1fe6daf1_1723100595961_sc.webp">
        </button>
        <button class="language-btn" data-language="Bhojpuri">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Bhojpuri" src="https://cdn4.sharechat.com/33d5318_1c8/tools/3a556ed1_1723100661662_sc.webp">
        </button>
        <button class="language-btn" data-language="Rajasthani">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Rajasthani" src="https://cdn4.sharechat.com/33d5318_1c8/tools/28988dcd_1723100516421_sc.webp">
        </button>
        <button class="language-btn" data-language="Gujarati">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Gujarati" src="https://cdn4.sharechat.com/33d5318_1c8/tools/e4e326_1723100533183_sc.webp">
        </button>
        <button class="language-btn" data-language="Assamese">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Assamese" src="https://cdn4.sharechat.com/33d5318_1c8/tools/208c8508_1723100693001_sc.webp">
        </button>
        <button class="language-btn" data-language="Punjabi">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Punjabi" src="https://cdn4.sharechat.com/33d5318_1c8/tools/b774b7a_1723100457228_sc.webp">
        </button>
        <button class="language-btn" data-language="Haryanvi">
          <img loading="lazy" class="rounded-lg" alt="Language icon for Haryanvi" src="https://cdn4.sharechat.com/33d5318_1c8/tools/81500dd_1723100618828_sc.webp">
        </button>
      </div>
    </div>

    <!-- Main App Container -->
    <div id="appContainer" class="hidden w-full">
      <div class="flex items-center justify-center mb-6">
        <img 
          src="https://dev-bjcoder.pantheonsite.io/uploads/BJ-Devs_679ca7384eca21.23197310.png" 
          alt="ShareChat: India's Digital Connection Hub Logo" 
          class="w-32 h-auto object-contain rounded-lg transition-transform duration-300 hover:scale-105 transform"
        >
      </div>
      
      <h1 class="text-4xl font-bold text-center mb-6 text-yellow-500 tracking-tight glow-text">
        ShareChat: India's Digital Connection Hub
      </h1>
      
      <!-- URL Input and Button Container -->
      <div class="flex space-x-2 mb-4">
        <div class="flex-grow group relative">
          <input 
            type="text" 
            id="urlInput" 
            placeholder="Enter ShareChat Profile URL" 
            class="w-full px-4 py-3 bg-gray-700 text-gray-100 border-2 border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition duration-300 shadow-md"
          >
          <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
            <i class="fas fa-link"></i>
          </div>
        </div>
        
        <button 
          id="filterButton"
          class="bg-yellow-600 text-gray-900 p-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center"
        >
          <i class="fas fa-filter"></i>
        </button>
      </div>
      
      <button 
        id="previewButton" 
        class="w-full bg-yellow-600 text-gray-900 py-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg uppercase tracking-wider font-semibold"
      >
        Generate Preview
      </button>
      
      <!-- Preview Container -->
      <div id="previewContainer" class="mt-6 hidden">
        <div id="previewContent" class="bg-gray-800 rounded-xl p-6 shadow-2xl border-2 border-gray-700 transform transition duration-500 hover:scale-[1.02] glow-effect">
          <!-- Preview results will be dynamically inserted here -->
        </div>
      </div>

      <!-- Filter Modal -->
      <div id="filterModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
        <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full shadow-2xl border border-gray-700 transform transition duration-300 scale-95 hover:scale-100 glow-effect">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-yellow-500 tracking-tight">Filters</h2>
            <button id="closeFilterModal" class="text-gray-500 hover:text-yellow-500 transition duration-300">
              <i class="fas fa-times text-xl"></i>
            </button>
          </div>
          
          <div class="space-y-4">
            <div>
              <label class="block text-gray-400 mb-2 font-semibold">Language</label>
              <select 
                id="languageFilter" 
                class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
              >
                <option value="">All Languages</option>
                <option value="Kannada">Kannada</option>
                <option value="Hindi">Hindi</option>
                <option value="Tamil">Tamil</option>
                <option value="Telugu">Telugu</option>
                <option value="Marathi">Marathi</option>
                <option value="Malayalam">Malayalam</option>
                <option value="Bengali">Bengali</option>
                <option value="Odia">Odia</option>
                <option value="Bhojpuri">Bhojpuri</option>
                <option value="Rajasthani">Rajasthani</option>
                <option value="Gujarati">Gujarati</option>
                <option value="Assamese">Assamese</option>
                <option value="Punjabi">Punjabi</option>
                <option value="Haryanvi">Haryanvi</option>
              </select>
            </div>
            
            <button 
              id="applyFilters" 
              class="w-full bg-yellow-600 text-gray-900 py-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg uppercase tracking-wider font-semibold"
            >
              Apply Filters
            </button>
          </div>
        </div>
      </div>

      <!-- Report Modal -->
      <div id="reportModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
        <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full shadow-2xl border border-gray-700 transform transition duration-300 scale-95 hover:scale-100 glow-effect">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-yellow-500 tracking-tight">Report User</h2>
            <button id="closeReportModal" class="text-gray-500 hover:text-yellow-500 transition duration-300">
              <i class="fas fa-times text-xl"></i>
            </button>
          </div>
          
          <form id="reportForm">
            <div class="mb-4">
              <label class="block text-gray-400 mb-2 font-semibold">Username</label>
              <input 
                type="text" 
                id="reportUsernameInput" 
                class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
                readonly
              >
            </div>
            
            <div class="mb-4">
              <label class="block text-gray-400 mb-2 font-semibold">Reason for Report</label>
              <select 
                id="reportReasonSelect" 
                class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
              >
                <option value="">Select a reason</option>
                <option value="harassment">1 / D</option>
                <option value="spam">7 / D</option>
                <option value="inappropriate">30 / D</option>
                <option value="other">100 / D & Permanent # Notice</option>
              </select>
            </div>
            
            <div id="otherReasonContainer" class="mb-4 hidden">
              <label class="block text-gray-400 mb-2 font-semibold">Please specify</label>
              <textarea 
                id="otherReasonText" 
                class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
                rows="3"
              ></textarea>
            </div>
            
            <button 
              type="submit" 
              class="w-full bg-yellow-600 text-gray-900 py-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg uppercase tracking-wider font-semibold"
            >
              Submit Report
            </button>
          </form>
        </div>
      </div>

      <!-- Success Dialog -->
      <div id="successDialog" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
        <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full shadow-2xl border border-yellow-500/30 transform transition duration-300 scale-95 hover:scale-100 glow-effect">
          <div class="text-center space-y-4">
            <div class="w-20 h-20 bg-yellow-500/20 rounded-full mx-auto flex items-center justify-center">
              <i class="fas fa-check text-4xl text-yellow-500"></i>
            </div>
            
            <h2 class="text-2xl font-bold text-yellow-500 tracking-tight">
              Report submitted successfully
            </h2>
            
            <p class="text-gray-400">
              Your report has been accepted. Register on the dashboard for more features.
            </p>

            <div class="pt-4">
              <button class="bg-yellow-600 text-gray-900 px-6 py-2 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 font-semibold">
                Go to Dashboard
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- Dashboard Registration Modal -->
    <div id="dashboardRegistrationModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
      <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full shadow-2xl border border-yellow-500/30 transform transition duration-300 scale-95 hover:scale-100 glow-effect">
        <div class="text-center space-y-4">
          <div class="w-20 h-20 bg-yellow-500/20 rounded-full mx-auto flex items-center justify-center">
            <i class="fas fa-user-plus text-4xl text-yellow-500"></i>
          </div>
          
          <h2 class="text-2xl font-bold text-yellow-500 tracking-tight">
            Dashboard Registration
          </h2>
          
          <p class="text-gray-400">
            Please fill in your details to create your personal dashboard.
          </p>

          <form id="dashboardRegistrationForm" class="space-y-4">
            <input 
              type="text" 
              placeholder="Name" 
              class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500"
              required
            >
            <input 
              type="tel" 
              placeholder="Mobile Number" 
              class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500"
              required
            >
            <input 
              type="email" 
              placeholder="Email" 
              class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500"
              required
            >
            
            <button 
              type="submit" 
              class="w-full bg-yellow-600 text-gray-900 py-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg uppercase tracking-wider font-semibold"
            >
              Register
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- Security Key Modal -->
    <div id="securityKeyModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
      <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full shadow-2xl border border-yellow-500/30 transform transition duration-300 scale-95 hover:scale-100 glow-effect">
        <div class="text-center space-y-4">
          <div class="w-20 h-20 bg-yellow-500/20 rounded-full mx-auto flex items-center justify-center">
            <i class="fas fa-shield-alt text-4xl text-yellow-500"></i>
          </div>
          
          <h2 class="text-2xl font-bold text-yellow-500 tracking-tight">
            Enter Security Key
          </h2>
          
          <p class="text-gray-400">
            Please enter a security key to secure your dashboard.
          </p>

          <form id="securityKeyForm" class="space-y-4">
            <input 
              type="text" 
              id="securityKeyInput" 
              placeholder="Security Key" 
              class="w-full px-4 py-2 bg-gray-700 text-gray-100 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-500"
              required
            >
            
            <button 
              type="submit" 
              class="w-full bg-yellow-600 text-gray-900 py-3 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg uppercase tracking-wider font-semibold"
            >
              Verify
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- Meenu Features Modal -->
    <div id="meenuFeaturesModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
      <div class="bg-gray-800 rounded-xl p-8 max-w-2xl w-full shadow-2xl border border-yellow-500/30 transform transition duration-300 scale-95 hover:scale-100 glow-effect">
        <div class="text-center space-y-4">
          <div class="w-24 h-24 bg-yellow-500/20 rounded-full mx-auto flex items-center justify-center">
            <i class="fas fa-magic text-5xl text-yellow-500"></i>
          </div>
          
          <h2 class="text-3xl font-bold text-yellow-500 tracking-tight">
            Meenu Features
          </h2>
          
          <p class="text-gray-400 text-lg">
            Expand your experience with new and exciting features!
          </p>

          <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition duration-300 transform hover:scale-105 cursor-pointer">
              <i class="fas fa-chart-line text-yellow-500 text-3xl mb-2"></i>
              <h3 class="text-lg font-semibold text-yellow-500">Analytics</h3>
              <p class="text-gray-400 text-sm">Complete details of your profile views</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition duration-300 transform hover:scale-105 cursor-pointer">
              <i class="fas fa-shield-alt text-yellow-500 text-3xl mb-2"></i>
              <h3 class="text-lg font-semibold text-yellow-500">Security</h3>
              <p class="text-gray-400 text-sm">Enhanced privacy and security controls</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition duration-300 transform hover:scale-105 cursor-pointer">
              <i class="fas fa-trophy text-yellow-500 text-3xl mb-2"></i>
              <h3 class="text-lg font-semibold text-yellow-500">Rewards</h3>
              <p class="text-gray-400 text-sm">Special rewards for your achievements</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition duration-300 transform hover:scale-105 cursor-pointer">
              <i class="fas fa-globe text-yellow-500 text-3xl mb-2"></i>
              <h3 class="text-lg font-semibold text-yellow-500">Global Connect</h3>
              <p class="text-gray-400 text-sm">Connect with other language communities</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition duration-300 transform hover:scale-105 cursor-pointer">
              <i class="fas fa-language text-yellow-500 text-3xl mb-2"></i>
              <h3 class="text-lg font-semibold text-yellow-500">Language Support</h3>
              <p class="text-gray-400 text-sm">Advanced translation and communication facilities</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition duration-300 transform hover:scale-105 cursor-pointer">
              <i class="fas fa-users text-yellow-500 text-3xl mb-2"></i>
              <h3 class="text-lg font-semibold text-yellow-500">Community</h3>
              <p class="text-gray-400 text-sm">Connect with your friends</p>
            </div>
          </div>

          <div class="pt-4 space-x-4">
            <button 
              id="closeMeenuFeaturesModal"
              class="bg-gray-600 text-gray-200 px-6 py-2 rounded-lg hover:bg-gray-500 transition duration-300 transform hover:scale-105 font-semibold"
            >
              Close
            </button>
            <button 
              id="activateMeenuFeatures"
              class="bg-yellow-600 text-gray-900 px-6 py-2 rounded-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105 font-semibold"
            >
              Activate
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Meenu Button in App Container -->
    <div class="absolute top-4 right-4">
      <button 
        id="meenuButton" 
        class="bg-yellow-600 text-gray-900 px-4 py-2 rounded-full hover:bg-yellow-500 transition duration-300 transform hover:scale-105 shadow-lg flex items-center space-x-2"
      >
        <i class="fas fa-magic"></i>
        <span>Meenu</span>
      </button>
    </div>

    <!-- Decorative Elements -->
    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-600 to-yellow-400 opacity-70"></div>
    <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-600 to-yellow-400 opacity-70"></div>
  </div>

  <!-- Copyright Footer -->
  <footer class="w-full py-4 text-center text-gray-400 text-sm bg-gray-800/50 backdrop-blur-sm border-t border-gray-700">
    &copy; Copyright. All Rights Reserved. sharechat.com
  </footer>

  <script src="meenu.js"></script>
  <script src="app.js"></script>
</body>
</html>