Spaces:

dbeck22
/

error-coin-explorer

Running

App Files Files Community

dbeck22 commited on Nov 1, 2025

Commit

8922787

verified ·

1 Parent(s): c95fe7b

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

Browse files

Files changed (3) hide show

index.html +108 -31
script.js +33 -4
style.css +27 -4

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Error Coin Explorer</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>
@@ -25,47 +25,124 @@
     <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="dollar-sign" class="inline mr-2"></i>
-                Error Coin Explorer
             </h1>
             <p class="text-lg text-gray-600 max-w-2xl mx-auto">
-                Discover the fascinating world of error coins and learn how they can be valuable collectibles.
             </p>
-        </header>
         <main class="flex flex-col items-center">
-            <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md mb-8 text-center">
-                <i data-feather="search" class="w-12 h-12 text-primary mx-auto mb-4"></i>
-                <h2 class="text-2xl font-semibold text-gray-800 mb-4">Learn About Error Coins</h2>
-                <p class="text-gray-600 mb-6">
-                    Discover the most valuable error coins and what makes them special.
-                </p>
-                <a href="https://valuablecoinlist.com"
-                   class="inline-block bg-primary hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
-                    Explore Valuable Coins
-                </a>
-            </div>
-            <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md text-center">
-                <i data-feather="trending-up" class="w-12 h-12 text-secondary mx-auto mb-4"></i>
-                <h2 class="text-2xl font-semibold text-gray-800 mb-4">Profit from Error Coins</h2>
-                <p class="text-gray-600 mb-6">
-                    Learn how to identify and sell error coins for profit.
-                </p>
-                <a href="https://richofferrorcoins.com"
-                   class="inline-block bg-secondary hover:bg-secondary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
-                    Learn to Earn
-                </a>
             </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();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

 <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>
     <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>

script.js CHANGED Viewed

@@ -1,8 +1,34 @@
 // Document ready function
 document.addEventListener('DOMContentLoaded', function() {
-    // Add any JavaScript functionality here if needed
-    // Example: Smooth scroll for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();
@@ -11,4 +37,7 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     });
-});

+// Coin analysis API integration
+async function analyzeCoin(imageFile) {
+    // Replace with your actual API endpoint
+    const apiUrl = 'https://api.example.com/coin-analysis';
+    const formData = new FormData();
+    formData.append('image', imageFile);
+    try {
+        const response = await fetch(apiUrl, {
+            method: 'POST',
+            body: formData
+        });
+        if (!response.ok) {
+            throw new Error('Analysis failed');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Error analyzing coin:', error);
+        return {
+            error: 'Failed to analyze coin. Please try again.'
+        };
+    }
+}
 // Document ready function
 document.addEventListener('DOMContentLoaded', function() {
+    // Smooth scroll for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();
             });
         });
     });
+    // Real implementation would use the analyzeCoin function above
+    // Currently using mock data in the HTML file for demonstration
+});

style.css CHANGED Viewed

@@ -2,18 +2,41 @@
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
-/* Animation for buttons */
-a[href^="https://"] {
     transition: all 0.3s ease;
-    transform: translateY(0);
 }
-a[href^="https://"]:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 /* Responsive adjustments */
 @media (max-width: 640px) {
     .container {

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
+/* Coin upload area styling */
+#previewImage {
+    max-width: 100%;
+    border-radius: 0.5rem;
+}
+#coinImage + label:hover {
+    background-color: #f8fafc;
+}
+/* Analysis results styling */
+#results {
+    min-height: 200px;
     transition: all 0.3s ease;
 }
+/* Animation for buttons */
+button, a[href^="https://"] {
+transition: all 0.3s ease;
+    transform: translateY(0);
+}
+button:hover, a[href^="https://"]:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
+/* Loading spinner */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
 /* Responsive adjustments */
 @media (max-width: 640px) {
     .container {