Spaces:

dbeck22
/

error-coin-explorer

Running

what happened to the error coin identifier? that is the most important part ! bring all that back! and it will be called Marcus Mint The ai Coin Expert

8922787 verified 4 months ago

raw

history blame contribute delete

6.95 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Marcus Mint - AI Coin Expert</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#3b82f6',
	secondary: '#10b981'
	}
	}
	}
	}
	</script>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<div class="container mx-auto px-4 py-12">
	<header class="text-center mb-16">
	<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
	<i data-feather="award" class="inline mr-2"></i>
	Marcus Mint
	</h1>
	<p class="text-lg text-gray-600 max-w-2xl mx-auto">
	AI-powered coin identification and valuation expert for collectors and investors.
	</p>
	</header>
	<main class="flex flex-col items-center">
	<div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-2xl mb-8">
	<div class="text-center mb-6">
	<i data-feather="camera" class="w-12 h-12 text-primary mx-auto mb-4"></i>
	<h2 class="text-2xl font-semibold text-gray-800 mb-2">Coin Identifier</h2>
	<p class="text-gray-600">Upload an image of your coin for instant analysis</p>
	</div>

	<div class="flex flex-col md:flex-row gap-6">
	<div class="flex-1">
	<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
	<div id="preview" class="hidden mb-4">
	<img id="previewImage" src="#" alt="Preview" class="max-h-64 mx-auto">
	</div>
	<label for="coinImage" class="cursor-pointer">
	<i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
	<p class="text-gray-500">Click to upload coin image</p>
	<input type="file" id="coinImage" accept="image/*" class="hidden">
	</label>
	</div>
	<button id="analyzeBtn" class="w-full bg-primary hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
	Analyze Coin
	</button>
	</div>

	<div class="flex-1">
	<div class="bg-gray-50 rounded-lg p-6 h-full">
	<h3 class="font-medium text-gray-700 mb-3">Analysis Results</h3>
	<div id="results" class="text-gray-600">
	<p class="text-center py-8">Your coin details will appear here after analysis</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<footer class="mt-20 text-center text-gray-500 text-sm">
	<p>© 2023 Error Coin Explorer. All rights reserved.</p>
	</footer>
	</div>
	<script>
	feather.replace();

	document.getElementById('coinImage').addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (file) {
	const reader = new FileReader();
	reader.onload = function(event) {
	const preview = document.getElementById('preview');
	const previewImage = document.getElementById('previewImage');
	previewImage.src = event.target.result;
	preview.classList.remove('hidden');
	}
	reader.readAsDataURL(file);
	}
	});

	document.getElementById('analyzeBtn').addEventListener('click', function() {
	const fileInput = document.getElementById('coinImage');
	if (!fileInput.files[0]) {
	alert('Please upload a coin image first');
	return;
	}

	// Show loading state
	const results = document.getElementById('results');
	results.innerHTML = `
	<div class="flex items-center justify-center py-8">
	<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mr-3"></div>
	<span>Analyzing your coin...</span>
	</div>
	`;

	// Simulate API call (replace with actual API integration)
	setTimeout(() => {
	// Mock response - replace with real data from your API
	const mockResponse = {
	coinType: "2005 Kansas State Quarter",
	errorType: "Die Break Error",
	rarity: "Rare (1 in 10,000)",
	estimatedValue: "$50 - $200",
	description: "This coin shows a clear die break error on the obverse side, creating an extra metal protrusion near the date. These errors occur when part of the die breaks off during the minting process."
	};

	results.innerHTML = `
	<div class="space-y-3">
	<div>
	<p class="text-sm text-gray-500">Coin Type</p>
	<p class="font-medium">${mockResponse.coinType}</p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Error Type</p>
	<p class="font-medium">${mockResponse.errorType}</p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Rarity</p>
	<p class="font-medium">${mockResponse.rarity}</p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Estimated Value</p>
	<p class="font-medium text-primary">${mockResponse.estimatedValue}</p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Description</p>
	<p>${mockResponse.description}</p>
	</div>
	</div>
	`;
	}, 2000);
	});
	</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>