Spaces:

nextgensolutions8
/

yourimagesearch-v22

Running

App Files Files Community

nextgensolutions8 commited on Apr 13, 2025

Commit

34fbc07

verified ·

1 Parent(s): fc5b685

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +533 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Yourimagesearch V22
-emoji: 🏆
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: yourimagesearch-v22
+emoji: 🐳
+colorFrom: red
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,533 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YourImageSearch.com | Protect Your Digital Identity</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background-color: #0f172a;
+            color: #e2e8f0;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
+        }
+        .scan-animation {
+            position: relative;
+            overflow: hidden;
+        }
+        .scan-animation::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 5px;
+            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+            animation: scan 2s linear infinite;
+        }
+        @keyframes scan {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(100vh); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .ai-chatbot {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        .ai-chatbot.expanded {
+            width: 350px;
+            height: 500px;
+        }
+        .tos-checkbox:checked {
+            background-color: #3b82f6;
+        }
+        .camera-container {
+            position: relative;
+            width: 100%;
+            max-width: 500px;
+            margin: 0 auto;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        .camera-view {
+            width: 100%;
+            height: 400px;
+            background-color: #1e293b;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .capture-btn {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: #ef4444;
+            border: 4px solid white;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .capture-btn:hover {
+            transform: scale(1.05);
+        }
+        .capture-btn:active {
+            transform: scale(0.95);
+        }
+        .result-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .loading-dots::after {
+            content: '.';
+            animation: dots 1.5s steps(5, end) infinite;
+        }
+        @keyframes dots {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60% { content: '...'; }
+            80%, 100% { content: ''; }
+        }
+        .ad-image {
+            border-radius: 12px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+            transition: transform 0.3s ease;
+        }
+        .ad-image:hover {
+            transform: translateY(-5px);
+        }
+        .scanning-header {
+            position: relative;
+            overflow: hidden;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(90deg, #1e3a8a, #0f172a);
+        }
+        .scanning-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+            animation: scanning 2s linear infinite;
+        }
+        @keyframes scanning {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Scanning Header -->
+    <div class="scanning-header">
+        <div class="scanning-bar"></div>
+        <div class="text-center z-10">
+            <h2 class="text-xl md:text-2xl font-bold text-white">YourImageSearch.com - Scanning the Internet for Your Images</h2>
+            <p class="text-blue-300 text-sm">Protecting your digital identity 24/7</p>
+        </div>
+    </div>
+    <!-- Navigation -->
+    <nav class="gradient-bg border-b border-gray-800 py-4 px-6">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
+                    <i class="fas fa-search text-white text-xl"></i>
+                </div>
+                <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-600">YourImageSearch.com</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#features" class="text-gray-300 hover:text-white transition">Features</a>
+                <a href="#how-it-works" class="text-gray-300 hover:text-white transition">How It Works</a>
+                <a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a>
+                <a href="#blog" class="text-gray-300 hover:text-white transition">Blog</a>
+                <a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button class="px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 text-white font-medium transition">
+                    Sign In
+                </button>
+                <button class="md:hidden text-gray-300">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="gradient-bg py-20 px-6">
+        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
+                    Take Back Control of Your <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-600">Digital Identity</span>
+                </h1>
+                <p class="text-xl text-gray-300 mb-8">
+                    Our advanced biometric search scans the entire internet to find images of you, helping you identify and remove non-consensual content with our free DMCA takedown service.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <button id="start-sscan-btn" class="px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white font-bold text-lg transition flex items-center justify-center">
+                        <i class="fas fa-search mr-2"></i> Start Your Search - $9.99
+                    </button>
+                    <button class="px-8 py-4 rounded-full bg-gray-800 hover:bg-gray-700 text-white font-bold text-lg transition">
+                        Learn More
+                    </button>
+                </div>
+                <div class="mt-8 flex items-center space-x-4">
+                    <div class="flex -space-x-2">
+                        <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
+                        <img src="https://randomuser.me/api/portraits/women/24.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
+                        <img src="https://randomuser.me/api/portraits/women/33.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-300">Trusted by <span class="font-bold text-white">5,000+</span> users</p>
+                        <div class="flex items-center">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <span class="text-sm ml-1">4.9/5</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="scan-animation rounded-xl overflow-hidden shadow-2xl">
+                <div class="bg-gray-900 p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <div class="flex space-x-2">
+                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                        </div>
+                        <div class="text-sm text-gray-400">YourImageSearch Scan v2.4</div>
+                    </div>
+                    <div class="bg-black p-4 rounded-lg">
+                        <div class="text-green-400 font-mono text-sm mb-2">> Initializing biometric search...</div>
+                        <div class="text-green-400 font-mono text-sm mb-2">> Connecting to secure database...</div>
+                        <div class="text-green-400 font-mono text-sm mb-2">> Searching 12.7M+ indexed images...</div>
+                        <div class="text-blue-400 font-mono text-sm mb-2">> Analyzing facial recognition patterns...</div>
+                        <div class="text-green-400 font-mono text-sm">> Preparing results visualization...</div>
+                    </div>
+                    <div class="mt-4 grid grid-cols-3 gap-2">
+                        <div class="bg-gray-800 rounded p-2 text-center">
+                            <div class="text-xs text-gray-400">Social Media</div>
+                            <div class="text-blue-400 font-bold">87%</div>
+                        </div>
+                        <div class="bg-gray-800 rounded p-2 text-center">
+                            <div class="text-xs text-gray-400">Dating Sites</div>
+                            <div class="text-blue-400 font-bold">63%</div>
+                        </div>
+                        <div class="bg-gray-800 rounded p-2 text-center">
+                            <div class="text-xs text-gray-400">Forums</div>
+                            <div class="text-blue-400 font-bold">42%</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Take Back Control Ad Section -->
+    <section class="py-16 px-6 bg-gray-900">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row items-center gap-12">
+                <div class="md:w-1/2">
+                    <img src="https://i.postimg.cc/Z0tPNRK4/yourimagesaerch-take-back-control-image.png" alt="Take Back Control" class="w-full h-auto ad-image">
+                </div>
+                <div class="md:w-1/2">
+                    <h2 class="text-3xl font-bold mb-6">Reclaim Your Online Presence</h2>
+                    <p class="text-gray-400 mb-6">
+                        Every day, thousands of people discover their images being used without consent across the internet.
+                        Our powerful search technology helps you find where your images appear online and gives you the tools
+                        to take them down permanently.
+                    </p>
+                    <ul class="space-y-4 mb-8">
+                        <li class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
+                                    <i class="fas fa-check text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <span class="ml-3 text-gray-300">Comprehensive deep web search</span>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
+                                    <i class="fas fa-check text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <span class="ml-3 text-gray-300">Free DMCA takedown service</span>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
+                                    <i class="fas fa-check text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <span class="ml-3 text-gray-300">24/7 monitoring for new appearances</span>
+                        </li>
+                    </ul>
+                    <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-bold">
+                        Start Protecting Your Images Today
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20 px-6 bg-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Protect Your Digital Footprint</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    Our comprehensive suite of tools helps you monitor and control how your image appears online.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-900 rounded-xl p-8 hover:bg-gray-700 transition">
+                    <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-search text-blue-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Deep Web Search</h3>
+                    <p class="text-gray-400">
+                        Our proprietary algorithm searches through millions of images across social media, dating sites, forums, and more to find matches of your face.
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 hover:bg-gray-700 transition">
+                    <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-gavel text-blue-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">DMCA Takedowns</h3>
+                    <p class="text-gray-400">
+                        We handle the entire legal process of removing non-consensual images at no additional cost to you.
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 hover:bg-gray-700 transition">
+                    <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-shield-alt text-blue-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Ongoing Protection</h3>
+                    <p class="text-gray-400">
+                        Our subscription service continuously monitors for new appearances of your image and alerts you immediately.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- DMCA Takedown Section -->
+    <section class="py-16 px-6 bg-gray-900">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row items-center gap-12">
+                <div class="md:w-1/2">
+                    <h2 class="text-3xl font-bold mb-6">Free DMCA Takedown Service</h2>
+                    <p class="text-gray-400 mb-6">
+                        When we find unauthorized use of your images, we handle the entire DMCA takedown process for you at no cost.
+                        Our legal team drafts and submits all necessary documentation to have your images removed from websites, social
+                        media platforms, and search engine results.
+                    </p>
+                    <div class="bg-gray-800 rounded-lg p-6 mb-6">
+                        <h3 class="text-xl font-bold mb-3 text-blue-400">How Our DMCA Process Works:</h3>
+                        <ol class="list-decimal list-inside space-y-2 text-gray-300">
+                            <li>We identify unauthorized use of your images</li>
+                            <li>Our legal team prepares the takedown notice</li>
+                            <li>We submit to the website and their hosting provider</li>
+                            <li>We follow up until content is removed</li>
+                            <li>We monitor to prevent reposting</li>
+                        </ol>
+                    </div>
+                    <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-bold">
+                        Learn More About DMCA
+                    </button>
+                </div>
+                <div class="md:w-1/2">
+                    <img src="https://i.postimg.cc/tgCcJrMD/youriagesearch-com-landing-page-ideas.png" alt="DMCA Takedown Process" class="w-full h-auto ad-image">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works Section -->
+    <section id="how-it-works" class="py-20 px-6 bg-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">How YourImageSearch Works</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    A simple three-step process to reclaim your digital privacy.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="relative">
+                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
+                        1
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Upload Your Photo</h3>
+                    <p class="text-gray-400">
+                        Use our secure selfie capture tool or upload a clear photo of yourself. We'll verify your identity with a government-issued ID.
+                    </p>
+                    <div class="absolute top-0 right-0 text-gray-600 text-6xl font-bold -z-10">01</div>
+                </div>
+                <div class="relative">
+                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
+                        2
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Deep Biometric Search</h3>
+                    <p class="text-gray-400">
+                        Our system scans the entire internet using advanced facial recognition to find all images matching your biometric profile.
+                    </p>
+                    <div class="absolute top-0 right-0 text-gray-600 text-6xl font-bold -z-10">02</div>
+                </div>
+                <div class="relative">
+                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mb-4">
+                        3
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Review & Take Action</h3>
+                    <p class="text-gray-400">
+                        View all matches and request takedowns with one click. We handle all legal communications with platforms.
+                    </p>
+                    <div class="absolute top-0 right-0 text-gray-600 text-6xl font-bold -z-10">03</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Pricing Section -->
+    <section id="pricing" class="py-20 px-6 bg-gray-900">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    Choose the protection plan that works for you. Cancel anytime.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+                <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700">
+                    <h3 class="text-2xl font-bold mb-4">One-Time Search</h3>
+                    <div class="mb-6">
+                        <span class="text-4xl font-bold">$9.99</span>
+                        <span class="text-gray-400">/ one time</span>
+                    </div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Deep internet search for your images</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Detailed report of all matches</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Free DMCA takedown requests</span>
+                        </li>
+                        <li class="flex items-center text-gray-500">
+                            <i class="fas fa-times text-red-500 mr-2"></i>
+                            <span>Ongoing monitoring</span>
+                        </li>
+                        <li class="flex items-center text-gray-500">
+                            <i class="fas fa-times text-red-500 mr-2"></i>
+                            <span>Alerts for new matches</span>
+                        </li>
+                    </ul>
+                    <button class="w-full py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-bold">
+                        Get Started
+                    </button>
+                </div>
+                <div class="bg-gray-800 rounded-xl p-8 border-2 border-blue-600 relative">
+                    <div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
+                        MOST POPULAR
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Annual Protection</h3>
+                    <div class="mb-6">
+                        <span class="text-4xl font-bold">$48</span>
+                        <span class="text-gray-400">/ year</span>
+                        <div class="text-sm text-gray-400">($4/month, billed annually)</div>
+                    </div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Everything in One-Time Search</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Continuous monthly monitoring</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Immediate alerts for new matches</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>Priority takedown processing</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span>24/7 support</span>
+                        </li>
+                    </ul>
+                    <button class="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold">
+                        Subscribe Now
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Blog Section -->
+    <section id="blog" class="py-20 px-6 bg-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Latest Updates</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    Stay informed about digital privacy and our latest features.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8 mb-16">
+                <div class="bg-gray-900 rounded-xl overflow-hidden">
+                    <div class="aspect-w-16 aspect-h-9">
+                        <iframe width="100%" height="315" src="https://www.youtube.com/embed/auX3M7UX40U?si=24kFMB1UJBab35Jo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe
+</html>