Update index.html
Browse files- index.html +220 -17
index.html
CHANGED
|
@@ -1,19 +1,222 @@
|
|
| 1 |
<!doctype html>
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 |
+
<title>Reverse Face Search – Find Anyone Online From a Photo | SocialSleuth</title>
|
| 7 |
+
<meta name="description" content="Search a face online from a photo. Explore possible matches across public social profiles, websites, news, blogs, videos, and other publicly available sources.">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="script.js" defer></script>
|
| 10 |
+
</head>
|
| 11 |
+
<body>
|
| 12 |
+
<div class="page-glow page-glow--top" aria-hidden="true"></div>
|
| 13 |
+
<div class="page-glow page-glow--side" aria-hidden="true"></div>
|
| 14 |
+
|
| 15 |
+
<header class="site-header">
|
| 16 |
+
<div class="header-inner">
|
| 17 |
+
<a class="brand" href="https://www.socialsleuth.xyz/face-search" aria-label="SocialSleuth Face Search">
|
| 18 |
+
<span class="brand-icon">
|
| 19 |
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
| 20 |
+
<path d="M4 8V6a2 2 0 0 1 2-2h2M18 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M6 20H4a2 2 0 0 1-2-2v-2"></path>
|
| 21 |
+
<circle cx="9" cy="10" r="1"></circle>
|
| 22 |
+
<circle cx="15" cy="10" r="1"></circle>
|
| 23 |
+
<path d="M9 15c1 .8 5 .8 6 0"></path>
|
| 24 |
+
</svg>
|
| 25 |
+
</span>
|
| 26 |
+
<span>SocialSleuth <span class="brand-gradient">Face Search</span></span>
|
| 27 |
+
</a>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<main>
|
| 32 |
+
<section class="hero" aria-labelledby="hero-title">
|
| 33 |
+
<div class="network-pattern" aria-hidden="true"></div>
|
| 34 |
+
<div class="hero-node hero-node--left" aria-hidden="true"></div>
|
| 35 |
+
<div class="hero-node hero-node--right" aria-hidden="true"></div>
|
| 36 |
+
<div class="container hero-container">
|
| 37 |
+
<h1 id="hero-title">Find Anyone Online<span>From A Photo</span></h1>
|
| 38 |
+
<p class="hero-subtitle">Upload a photo and discover public matches across social media, websites, and online sources.</p>
|
| 39 |
+
|
| 40 |
+
<div class="upload-shell">
|
| 41 |
+
<div class="upload-card" id="upload-card" tabindex="0" role="button" aria-label="Upload a JPG or PNG photo">
|
| 42 |
+
<div class="upload-accent" aria-hidden="true"></div>
|
| 43 |
+
<input id="photo-input" type="file" accept="image/jpeg,image/png,.jpg,.jpeg,.png" hidden>
|
| 44 |
+
|
| 45 |
+
<div class="upload-empty" id="upload-empty">
|
| 46 |
+
<span class="upload-icon">
|
| 47 |
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
| 48 |
+
<path d="M7 18a4.5 4.5 0 0 1-.6-8.96A5.5 5.5 0 0 1 17.2 8.1 4 4 0 0 1 17 16"></path>
|
| 49 |
+
<path d="M12 12v6M9 15l3-3 3 3"></path>
|
| 50 |
+
</svg>
|
| 51 |
+
</span>
|
| 52 |
+
<div>
|
| 53 |
+
<p class="upload-title">Upload a photo</p>
|
| 54 |
+
<p class="upload-prompt">Drag & drop or <span>click to search</span></p>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
|
| 58 |
+
<div class="upload-preview" id="upload-preview" hidden>
|
| 59 |
+
<img id="preview-image" src="" alt="Preview of the selected photo">
|
| 60 |
+
<div class="preview-details">
|
| 61 |
+
<span id="file-name"></span>
|
| 62 |
+
<button class="change-photo" id="change-photo" type="button">Change photo</button>
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="upload-meta">
|
| 67 |
+
<span>Supported formats: <strong>JPG, PNG</strong></span>
|
| 68 |
+
<span class="meta-dot" aria-hidden="true">•</span>
|
| 69 |
+
<span>Straight from your phone camera — <strong>we optimize it automatically</strong></span>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
<p class="upload-error" id="upload-error" role="alert" hidden>Please choose a JPG or PNG image.</p>
|
| 73 |
+
<button class="primary-button hero-button" id="start-search" type="button" disabled>START SEARCH</button>
|
| 74 |
+
</div>
|
| 75 |
+
|
| 76 |
+
<div class="capabilities" aria-label="Search source types">
|
| 77 |
+
<span>✓ Social Media Profiles</span>
|
| 78 |
+
<span>✓ Scam Reports</span>
|
| 79 |
+
<span>✓ Public Websites</span>
|
| 80 |
+
<span>✓ News & Blogs</span>
|
| 81 |
+
<span>✓ Criminal Records</span>
|
| 82 |
+
<span>✓ Videos</span>
|
| 83 |
+
</div>
|
| 84 |
+
</div>
|
| 85 |
+
</section>
|
| 86 |
+
|
| 87 |
+
<section class="section features" aria-labelledby="features-title">
|
| 88 |
+
<div class="container">
|
| 89 |
+
<div class="section-heading">
|
| 90 |
+
<h2 id="features-title">What You Can Do With a Face Search</h2>
|
| 91 |
+
<p>One photo can reveal where the same face appears across publicly available online sources.</p>
|
| 92 |
+
</div>
|
| 93 |
+
<div class="feature-grid">
|
| 94 |
+
<article class="info-card">
|
| 95 |
+
<span class="card-icon">
|
| 96 |
+
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3"></circle><path d="M3.5 19c.5-4 2.4-6 5.5-6s5 2 5.5 6M16 8h5M18.5 5.5v5"></path></svg>
|
| 97 |
+
</span>
|
| 98 |
+
<h3>Find Social Profiles</h3>
|
| 99 |
+
<p>Discover public social media profiles that may use the same face across different platforms.</p>
|
| 100 |
+
</article>
|
| 101 |
+
<article class="info-card">
|
| 102 |
+
<span class="card-icon">
|
| 103 |
+
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4.5 6.2v5.6c0 4.4 3.1 7.7 7.5 9.2 4.4-1.5 7.5-4.8 7.5-9.2V6.2L12 3Z"></path><path d="m9 12 2 2 4-4"></path></svg>
|
| 104 |
+
</span>
|
| 105 |
+
<h3>Check for Catfishing</h3>
|
| 106 |
+
<p>See whether a dating or social profile photo appears elsewhere online under a different identity.</p>
|
| 107 |
+
</article>
|
| 108 |
+
<article class="info-card">
|
| 109 |
+
<span class="card-icon">
|
| 110 |
+
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8V6a2 2 0 0 1 2-2h2M18 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M6 20H4a2 2 0 0 1-2-2v-2"></path><path d="m9 12 2 2 4-4"></path></svg>
|
| 111 |
+
</span>
|
| 112 |
+
<h3>Verify Someone Online</h3>
|
| 113 |
+
<p>Compare a photo against publicly available sources before deciding whether an online identity looks consistent.</p>
|
| 114 |
+
</article>
|
| 115 |
+
<article class="info-card">
|
| 116 |
+
<span class="card-icon">
|
| 117 |
+
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2.5"></rect><circle cx="9" cy="10" r="1.5"></circle><path d="m4 17 4.5-4.5a1.5 1.5 0 0 1 2.1 0L15 17l2-2a1.5 1.5 0 0 1 2.1 0l1.9 1.9"></path></svg>
|
| 118 |
+
</span>
|
| 119 |
+
<h3>Find Your Photos</h3>
|
| 120 |
+
<p>Check where photos of you may appear across public websites, profiles, and other online sources.</p>
|
| 121 |
+
</article>
|
| 122 |
+
<article class="info-card">
|
| 123 |
+
<span class="card-icon">
|
| 124 |
+
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16 16 5 5M8 10a3 3 0 0 1 6 0M9 14c.8.7 3.2.7 4 0"></path></svg>
|
| 125 |
+
</span>
|
| 126 |
+
<h3>Reverse Face Search</h3>
|
| 127 |
+
<p>Search for the same person across different photos — not just exact copies of the image you uploaded.</p>
|
| 128 |
+
</article>
|
| 129 |
+
<article class="info-card">
|
| 130 |
+
<span class="card-icon">
|
| 131 |
+
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10" cy="8" r="3"></circle><path d="M4 19c.5-4 2.5-6 6-6s5.5 2 6 6M17 11h4M19 9v4"></path></svg>
|
| 132 |
+
</span>
|
| 133 |
+
<h3>Find Someone by Photo</h3>
|
| 134 |
+
<p>Start with a face when a photo is the only information you have and explore possible public matches online.</p>
|
| 135 |
+
</article>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</section>
|
| 139 |
+
|
| 140 |
+
<section class="section how-it-works" aria-labelledby="how-title">
|
| 141 |
+
<div class="container">
|
| 142 |
+
<div class="section-heading">
|
| 143 |
+
<h2 id="how-title">How Reverse Face Search Works</h2>
|
| 144 |
+
<p>Face search compares facial features across different images to help surface possible matches from publicly available online sources.</p>
|
| 145 |
+
</div>
|
| 146 |
+
<div class="steps">
|
| 147 |
+
<article class="step">
|
| 148 |
+
<span class="step-number">01</span>
|
| 149 |
+
<h3>Upload a Clear Photo</h3>
|
| 150 |
+
<p>Choose a clear photo where the face is visible. Front-facing images with good lighting usually work best.</p>
|
| 151 |
+
</article>
|
| 152 |
+
<article class="step">
|
| 153 |
+
<span class="step-number">02</span>
|
| 154 |
+
<h3>Search Public Sources</h3>
|
| 155 |
+
<p>Face matching compares facial features across publicly available images, websites, and social profiles to look for possible matches.</p>
|
| 156 |
+
</article>
|
| 157 |
+
<article class="step">
|
| 158 |
+
<span class="step-number">03</span>
|
| 159 |
+
<h3>Review Possible Matches</h3>
|
| 160 |
+
<p>Explore the results and open available source pages to compare photos and verify the context yourself.</p>
|
| 161 |
+
</article>
|
| 162 |
+
</div>
|
| 163 |
+
<a class="primary-button section-button" href="https://www.socialsleuth.xyz/face-search">SEARCH A FACE</a>
|
| 164 |
+
</div>
|
| 165 |
+
</section>
|
| 166 |
+
|
| 167 |
+
<section class="section faq-section" aria-labelledby="faq-title">
|
| 168 |
+
<div class="container faq-container">
|
| 169 |
+
<div class="section-heading">
|
| 170 |
+
<h2 id="faq-title">Frequently Asked Questions</h2>
|
| 171 |
+
</div>
|
| 172 |
+
<div class="faq-list">
|
| 173 |
+
<article class="faq-item">
|
| 174 |
+
<h3><button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-answer-1"><span>What is reverse face search?</span><span class="chevron" aria-hidden="true"></span></button></h3>
|
| 175 |
+
<div class="faq-answer" id="faq-answer-1" hidden><p>Reverse face search uses facial features in an uploaded photo to look for visually similar faces across publicly available online images. Unlike a standard reverse image search, it can help find different photos that may show the same person.</p></div>
|
| 176 |
+
</article>
|
| 177 |
+
<article class="faq-item">
|
| 178 |
+
<h3><button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-answer-2"><span>How is face search different from Google reverse image search?</span><span class="chevron" aria-hidden="true"></span></button></h3>
|
| 179 |
+
<div class="faq-answer" id="faq-answer-2" hidden><p>Traditional reverse image search is often best at finding the same image or visually similar copies. Face search focuses on facial features, which can help surface possible matches even when the person appears in a different photo.</p></div>
|
| 180 |
+
</article>
|
| 181 |
+
<article class="faq-item">
|
| 182 |
+
<h3><button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-answer-3"><span>What can I use reverse face search for?</span><span class="chevron" aria-hidden="true"></span></button></h3>
|
| 183 |
+
<div class="faq-answer" id="faq-answer-3" hidden><p>You can use it to look for public social profiles, check whether a photo appears under different identities, investigate possible catfishing, find your own photos online, or explore other publicly available sources connected to a face.</p></div>
|
| 184 |
+
</article>
|
| 185 |
+
<article class="faq-item">
|
| 186 |
+
<h3><button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-answer-4"><span>What kind of photo works best?</span><span class="chevron" aria-hidden="true"></span></button></h3>
|
| 187 |
+
<div class="faq-answer" id="faq-answer-4" hidden><p>A clear photo with one visible face usually works best. Good lighting, a front-facing angle, and minimal obstruction from sunglasses, masks, or heavy filters can improve the quality of possible matches.</p></div>
|
| 188 |
+
</article>
|
| 189 |
+
<article class="faq-item">
|
| 190 |
+
<h3><button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-answer-5"><span>Is my photo stored on this page?</span><span class="chevron" aria-hidden="true"></span></button></h3>
|
| 191 |
+
<div class="faq-answer" id="faq-answer-5" hidden><p>No. This Hugging Face page only previews the selected image locally in your browser. It does not perform the face search itself. When you choose to continue, you will be taken to SocialSleuth Face Search.</p></div>
|
| 192 |
+
</article>
|
| 193 |
+
<article class="faq-item">
|
| 194 |
+
<h3><button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-answer-6"><span>Where can face search results come from?</span><span class="chevron" aria-hidden="true"></span></button></h3>
|
| 195 |
+
<div class="faq-answer" id="faq-answer-6" hidden><p>Possible matches may come from publicly accessible sources such as social media profiles, websites, blogs, news pages, videos, and other indexed public web content.</p></div>
|
| 196 |
+
</article>
|
| 197 |
+
</div>
|
| 198 |
+
</div>
|
| 199 |
+
</section>
|
| 200 |
+
|
| 201 |
+
<section class="final-cta" aria-labelledby="final-cta-title">
|
| 202 |
+
<div class="container">
|
| 203 |
+
<h2 id="final-cta-title">Ready to Search a Face?</h2>
|
| 204 |
+
<p>Upload a photo and explore possible matches across publicly available online sources.</p>
|
| 205 |
+
<a class="primary-button" href="https://www.socialsleuth.xyz/face-search">START FACE SEARCH</a>
|
| 206 |
+
</div>
|
| 207 |
+
</section>
|
| 208 |
+
</main>
|
| 209 |
+
|
| 210 |
+
<footer class="site-footer">
|
| 211 |
+
<div class="container footer-inner">
|
| 212 |
+
<p class="footer-brand">SocialSleuth <span>Face Search</span></p>
|
| 213 |
+
<p class="footer-topics">
|
| 214 |
+
<span>Reverse Face Search</span><span aria-hidden="true">•</span>
|
| 215 |
+
<span>Find Someone by Photo</span><span aria-hidden="true">•</span>
|
| 216 |
+
<span>Public Web Face Search</span>
|
| 217 |
+
</p>
|
| 218 |
+
<p class="copyright">© 2026 SocialSleuth</p>
|
| 219 |
+
</div>
|
| 220 |
+
</footer>
|
| 221 |
+
</body>
|
| 222 |
</html>
|