| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Crystal Identifier</title> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <style> |
| .camera-btn { |
| background: linear-gradient(135deg, #6b46c1 0%, #9f7aea 100%); |
| } |
| .result-card { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="text-center mb-8"> |
| <h1 class="text-3xl font-bold text-purple-800">Crystal Identifier</h1> |
| <p class="text-gray-600">Upload or take a photo to identify natural crystals</p> |
| </header> |
|
|
| <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> |
| <div class="text-center mb-6"> |
| <div class="w-full h-64 bg-gray-200 rounded-lg mb-4 flex items-center justify-center"> |
| <img id="previewImage" src="http://static.photos/mineral/640x360" class="w-full h-full object-cover rounded-lg hidden"> |
| <div id="placeholder" class="text-gray-500"> |
| <i class="fas fa-gem text-5xl mb-2"></i> |
| <p>No image selected</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex flex-col space-y-4"> |
| <input type="file" id="fileInput" accept="image/*" class="hidden"> |
| <button onclick="document.getElementById('fileInput').click()" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-medium transition"> |
| <i class="fas fa-upload mr-2"></i> Upload Crystal Photo |
| </button> |
| <button class="camera-btn hover:opacity-90 text-white py-3 px-4 rounded-lg font-medium transition"> |
| <i class="fas fa-camera mr-2"></i> Take Photo |
| </button> |
| </div> |
| </div> |
|
|
| <div id="results" class="max-w-md mx-auto mt-8 hidden"> |
| <div class="result-card bg-white rounded-xl p-6"> |
| <h2 class="text-xl font-semibold text-purple-800 mb-4">Identification Results</h2> |
| |
| <div id="loading" class="text-center py-4"> |
| <i class="fas fa-spinner fa-spin text-2xl text-purple-600"></i> |
| <p class="mt-2">Analyzing your crystal...</p> |
| </div> |
|
|
| <div id="resultContent" class="hidden"> |
| <div class="flex items-start mb-4"> |
| <img id="crystalImage" src="" class="w-24 h-24 rounded-lg object-cover mr-4"> |
| <div> |
| <h3 class="font-bold text-lg" id="crystalName">Quartz</h3> |
| <p class="text-gray-600" id="crystalType">Mineral: Silicon Dioxide</p> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <h4 class="font-semibold mb-2">Properties</h4> |
| <ul class="text-sm text-gray-700 space-y-1"> |
| <li id="hardness"><i class="fas fa-hard-hat text-purple-500 mr-2"></i> Hardness: 7 on Mohs scale</li> |
| <li id="color"><i class="fas fa-palette text-purple-500 mr-2"></i> Color: Transparent to white</li> |
| <li id="structure"><i class="fas fa-shapes text-purple-500 mr-2"></i> Crystal System: Hexagonal</li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-2">Description</h4> |
| <p id="description" class="text-sm text-gray-700">One of the most common minerals on Earth, quartz comes in many varieties including amethyst, citrine, and rose quartz.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const fileInput = document.getElementById('fileInput'); |
| const previewImage = document.getElementById('previewImage'); |
| const placeholder = document.getElementById('placeholder'); |
| const results = document.getElementById('results'); |
| |
| fileInput.addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| previewImage.src = event.target.result; |
| previewImage.classList.remove('hidden'); |
| placeholder.classList.add('hidden'); |
| results.classList.remove('hidden'); |
| |
| |
| document.getElementById('loading').classList.remove('hidden'); |
| document.getElementById('resultContent').classList.add('hidden'); |
| |
| setTimeout(() => { |
| document.getElementById('loading').classList.add('hidden'); |
| document.getElementById('resultContent').classList.remove('hidden'); |
| |
| simulateCrystalDetection(); |
| }, 2000); |
| } |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| function simulateCrystalDetection() { |
| |
| const crystals = [ |
| { |
| name: "Amethyst", |
| type: "Quartz Variant", |
| hardness: "7", |
| color: "Purple", |
| structure: "Hexagonal", |
| description: "A purple variety of quartz often used in jewelry. Its purple color comes from iron impurities and irradiation." |
| }, |
| { |
| name: "Rose Quartz", |
| type: "Quartz Variant", |
| hardness: "7", |
| color: "Pink", |
| structure: "Hexagonal", |
| description: "The pink variety of quartz, colored by trace amounts of titanium, iron, or manganese." |
| }, |
| { |
| name: "Citrine", |
| type: "Quartz Variant", |
| hardness: "7", |
| color: "Yellow to orange", |
| structure: "Hexagonal", |
| description: "A yellow to orange variety of quartz, often naturally occurring or heat-treated amethyst." |
| } |
| ]; |
| |
| const randomCrystal = crystals[Math.floor(Math.random() * crystals.length)]; |
| |
| document.getElementById('crystalName').textContent = randomCrystal.name; |
| document.getElementById('crystalType').textContent = `Mineral: ${randomCrystal.type}`; |
| document.getElementById('hardness').innerHTML = `<i class="fas fa-hard-hat text-purple-500 mr-2"></i> Hardness: ${randomCrystal.hardness} on Mohs scale`; |
| document.getElementById('color').innerHTML = `<i class="fas fa-palette text-purple-500 mr-2"></i> Color: ${randomCrystal.color}`; |
| document.getElementById('structure').innerHTML = `<i class="fas fa-shapes text-purple-500 mr-2"></i> Crystal System: ${randomCrystal.structure}`; |
| document.getElementById('description').textContent = randomCrystal.description; |
| document.getElementById('crystalImage').src = previewImage.src; |
| } |
| </script> |
| </body> |
| </html> |
