Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AuthentiCheck - AI Product Authentication</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="hero"> | |
| <div class="hero-content"> | |
| <h1 class="hero-title"> | |
| <span class="gradient-text">AuthentiCheck</span> | |
| </h1> | |
| <p class="hero-subtitle">AI-powered product authentication in seconds. Check if the product is real or fake!</p> | |
| <div class="hero-visual"> | |
| <div class="scan-animation"> | |
| <div class="scan-line"></div> | |
| <div class="scan-grid"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main-content"> | |
| <div class="auth-section"> | |
| <div class="card glass"> | |
| <div class="card-header"> | |
| <h2>API Configuration</h2> | |
| <div class="status-indicator" id="apiStatus"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">API Key Required</span> | |
| </div> | |
| </div> | |
| <div class="api-info"> | |
| <p>Get your free API key from <a href="https://rapidapi.com/projectunpack/api/product-authentication-api-fake-vs-real-item-detector" target="_blank" rel="noopener noreferrer">RapidAPI</a></p> | |
| </div> | |
| <div class="input-group"> | |
| <input | |
| type="password" | |
| id="apiKey" | |
| placeholder="Enter your RapidAPI key..." | |
| class="api-input" | |
| > | |
| <button class="btn btn-primary" onclick="saveApiKey()"> | |
| <span class="btn-text">Save Key</span> | |
| <div class="btn-loader"></div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="check-section"> | |
| <div class="card glass"> | |
| <div class="card-header"> | |
| <h2>Product Authentication</h2> | |
| <div class="upload-stats"> | |
| <span id="uploadCount">0</span> items checked | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <input | |
| type="text" | |
| id="imageUrlInput" | |
| placeholder="Enter product image URL..." | |
| class="api-input" | |
| > | |
| <!-- No direct upload button needed here, it's for URL input --> | |
| </div> | |
| <p class="input-hint">Supports JPG, PNG, WebP up to 10MB</p> | |
| <div class="action-buttons"> | |
| <button class="btn btn-secondary" onclick="clearAll()"> | |
| Clear | |
| </button> | |
| <button class="btn btn-primary btn-large" onclick="checkAuthenticity()" disabled id="checkBtn"> | |
| <span class="btn-text">Analyze Product</span> | |
| <div class="btn-loader"></div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="result-section" id="resultSection" style="display: none;"> | |
| <div class="card glass"> | |
| <div class="result-header"> | |
| <h2>Authentication Result</h2> | |
| <div class="result-badge" id="resultBadge"> | |
| <span class="badge-icon"></span> | |
| <span class="badge-text">Analyzing...</span> | |
| </div> | |
| </div> | |
| <div class="result-content"> | |
| <div class="result-image"> | |
| <img id="resultImage" src="" alt="Analyzed product"> | |
| </div> | |
| <div class="result-details"> | |
| <div class="detail-item"> | |
| <label>Brand</label> | |
| <span id="resultBrand">-</span> | |
| </div> | |
| <div class="detail-item"> | |
| <label>Status</label> | |
| <span id="resultStatus">-</span> | |
| </div> | |
| <div class="detail-item"> | |
| <label>Description</label> | |
| <p id="resultDescription">-</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |