Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TreeView - Rate and Burn Trees</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tree-card { | |
| transition: all 0.3s ease; | |
| } | |
| .tree-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .burn-progress { | |
| height: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| .burn-animation { | |
| animation: burn 0.5s infinite alternate; | |
| } | |
| @keyframes burn { | |
| from { box-shadow: 0 0 5px #ff4500; } | |
| to { box-shadow: 0 0 20px #ff4500, 0 0 10px #ff8c00; } | |
| } | |
| .flame { | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| background: linear-gradient(white 80%, transparent); | |
| border-radius: 50% 50% 20% 20%; | |
| transform: rotate(-45deg); | |
| filter: blur(1px); | |
| animation: flicker 0.3s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 100% { transform: rotate(-45deg) scale(1); opacity: 1; } | |
| 50% { transform: rotate(-45deg) scale(1.1); opacity: 0.8; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-green-50"> | |
| <header class="bg-green-800 text-white py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold flex items-center"> | |
| <i class="fas fa-tree mr-3"></i> TreeView | |
| </h1> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-green-200">Home</a></li> | |
| <li><a href="#" class="hover:text-green-200">Top Trees</a></li> | |
| <li><a href="#" class="hover:text-green-200">Worst Trees</a></li> | |
| <li><a href="#" class="hover:text-green-200">About</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="mb-12 text-center"> | |
| <h2 class="text-4xl font-bold text-green-900 mb-4">Rate Trees in Your Area</h2> | |
| <p class="text-xl text-green-700 max-w-2xl mx-auto"> | |
| Discover, review, and if you must... burn the trees around you. | |
| Each tree is identified by its coordinates for precise identification. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Tree Card 1 --> | |
| <div class="tree-card bg-white rounded-lg overflow-hidden shadow-md relative"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold text-green-900">Tree @ (40.7128° N, 74.0060° W)</h3> | |
| <div class="flex items-center bg-green-100 px-2 py-1 rounded"> | |
| <span class="text-green-800 font-bold mr-1">4.2</span> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| A majestic oak tree standing tall in Central Park. Known for its wide canopy that provides excellent shade during summer months. | |
| </p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Shade Quality</span> | |
| <span>4.5/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Aesthetic</span> | |
| <span>4.0/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">Recent Reviews</h4> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-50 p-3 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Sarah J.</span> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm mt-1">Perfect spot for a picnic! The shade is amazing in summer.</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Mike T.</span> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm mt-1">Great tree but the squirrels are too aggressive here.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-pen mr-2"></i> Write a Review | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tree Card 2 --> | |
| <div class="tree-card bg-white rounded-lg overflow-hidden shadow-md relative"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold text-green-900">Tree @ (34.0522° N, 118.2437° W)</h3> | |
| <div class="flex items-center bg-green-100 px-2 py-1 rounded"> | |
| <span class="text-green-800 font-bold mr-1">3.8</span> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| A palm tree on Venice Beach. Provides minimal shade but has great ocean views. Often has seagulls nesting in it. | |
| </p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Shade Quality</span> | |
| <span>2.0/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Aesthetic</span> | |
| <span>4.5/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">Recent Reviews</h4> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-50 p-3 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Lisa M.</span> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm mt-1">Iconic beach tree but watch out for bird droppings!</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Dave K.</span> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm mt-1">Too many tourists taking selfies with this tree.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-pen mr-2"></i> Write a Review | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tree Card 3 - With Burn Option --> | |
| <div class="tree-card bg-white rounded-lg overflow-hidden shadow-md relative"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold text-green-900">Tree @ (41.8781° N, 87.6298° W)</h3> | |
| <div class="flex items-center bg-red-100 px-2 py-1 rounded"> | |
| <span class="text-red-800 font-bold mr-1">1.4</span> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| A diseased elm tree in a Chicago alley. Leaning dangerously and dropping branches. Many complaints from neighbors. | |
| </p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Safety</span> | |
| <span>1.0/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Aesthetic</span> | |
| <span>2.0/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">Recent Reviews</h4> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-50 p-3 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Robert G.</span> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm mt-1">This tree dropped a branch on my car! Should be removed immediately.</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Emma L.</span> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm mt-1">It's ugly but at least the birds like it.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 space-y-3"> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-pen mr-2"></i> Write a Review | |
| </button> | |
| <!-- Burn Tree Section --> | |
| <div id="burn-section" class="border border-red-200 rounded-lg p-4 bg-red-50"> | |
| <h4 class="font-semibold text-red-800 mb-2 flex items-center"> | |
| <i class="fas fa-fire mr-2"></i> Burn This Tree? | |
| </h4> | |
| <p class="text-sm text-red-700 mb-3"> | |
| Rated this tree 1 star? Pay $5 to have it burned (not really, this is just for fun). | |
| </p> | |
| <button id="burn-btn" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-fire mr-2"></i> Burn It For $5 | |
| </button> | |
| </div> | |
| <!-- Burn Progress (Hidden Initially) --> | |
| <div id="burn-progress" class="hidden border border-red-200 rounded-lg p-4 bg-red-50"> | |
| <h4 class="font-semibold text-red-800 mb-2 flex items-center"> | |
| <i class="fas fa-fire mr-2"></i> Burn In Progress | |
| </h4> | |
| <div id="burn-status" class="text-sm font-medium text-red-800 mb-2"> | |
| Burn request created... | |
| </div> | |
| <div class="relative pt-1 mb-3"> | |
| <div class="flex mb-2 items-center justify-between"> | |
| <div> | |
| <span id="progress-percent" class="text-xs font-semibold inline-block text-red-600"> | |
| 0% | |
| </span> | |
| </div> | |
| </div> | |
| <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200"> | |
| <div id="progress-bar" style="width:0%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-600"></div> | |
| </div> | |
| </div> | |
| <div id="burn-steps" class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-200 flex items-center justify-center"> | |
| <i class="fas fa-check text-red-600"></i> | |
| </div> | |
| <div class="ml-3 text-sm font-medium text-red-800"> | |
| Burn request created | |
| </div> | |
| </div> | |
| <div id="crew-dispatched" class="flex items-center opacity-50"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-200 flex items-center justify-center"> | |
| <i class="fas fa-truck text-red-600"></i> | |
| </div> | |
| <div class="ml-3 text-sm font-medium text-red-800"> | |
| Burning crew dispatched | |
| </div> | |
| </div> | |
| <div id="crew-arrived" class="flex items-center opacity-50"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-200 flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-red-600"></i> | |
| </div> | |
| <div class="ml-3 text-sm font-medium text-red-800"> | |
| Crew arrived at tree | |
| </div> | |
| </div> | |
| <div id="tree-burning" class="flex items-center opacity-50"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-200 flex items-center justify-center"> | |
| <i class="fas fa-fire text-red-600"></i> | |
| </div> | |
| <div class="ml-3 text-sm font-medium text-red-800"> | |
| Tree is burning | |
| </div> | |
| </div> | |
| <div id="tree-gone" class="flex items-center opacity-50"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-200 flex items-center justify-center"> | |
| <i class="fas fa-check-double text-red-600"></i> | |
| </div> | |
| <div class="ml-3 text-sm font-medium text-red-800"> | |
| Tree is gone | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-green-900 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-tree mr-2"></i> TreeView | |
| </h3> | |
| <p class="text-green-200 max-w-md"> | |
| The premier platform for tree enthusiasts and arsonists alike. Rate your local trees or pay to have them burned (not really). | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-green-200 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Top Trees</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Worst Trees</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">About</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-green-200 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Disclaimer</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-green-800 mt-8 pt-6 text-center text-green-300"> | |
| <p>© 2023 TreeView. All rights reserved. (No trees were actually harmed in the making of this website)</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.getElementById('burn-btn').addEventListener('click', function() { | |
| // Hide the burn button | |
| document.getElementById('burn-section').classList.add('hidden'); | |
| // Show the progress section | |
| document.getElementById('burn-progress').classList.remove('hidden'); | |
| // Total time between 10-30 seconds | |
| const totalTime = Math.floor(Math.random() * 20000) + 10000; | |
| // Random intervals for each step | |
| const step1 = Math.floor(totalTime * 0.2); | |
| const step2 = step1 + Math.floor(totalTime * 0.3); | |
| const step3 = step2 + Math.floor(totalTime * 0.3); | |
| const step4 = totalTime; | |
| let currentProgress = 0; | |
| const progressInterval = setInterval(() => { | |
| currentProgress += 100; | |
| const percent = Math.min(100, Math.floor((currentProgress / totalTime) * 100)); | |
| document.getElementById('progress-bar').style.width = percent + '%'; | |
| document.getElementById('progress-percent').textContent = percent + '%'; | |
| if (percent >= 100) { | |
| clearInterval(progressInterval); | |
| } | |
| }, 100); | |
| // Update status messages at random intervals | |
| setTimeout(() => { | |
| document.getElementById('burn-status').textContent = 'Burning crew dispatched to location...'; | |
| document.getElementById('crew-dispatched').classList.remove('opacity-50'); | |
| }, step1); | |
| setTimeout(() => { | |
| document.getElementById('burn-status').textContent = 'Crew has arrived at the tree...'; | |
| document.getElementById('crew-arrived').classList.remove('opacity-50'); | |
| }, step2); | |
| setTimeout(() => { | |
| document.getElementById('burn-status').textContent = 'Tree is now burning!'; | |
| document.getElementById('tree-burning').classList.remove('opacity-50'); | |
| // Add flame animations | |
| for (let i = 0; i < 5; i++) { | |
| const flame = document.createElement('div'); | |
| flame.className = 'flame'; | |
| flame.style.left = Math.random() * 80 + 10 + '%'; | |
| flame.style.top = Math.random() * 50 + 10 + '%'; | |
| document.getElementById('burn-progress').appendChild(flame); | |
| } | |
| }, step3); | |
| setTimeout(() => { | |
| document.getElementById('burn-status').textContent = 'Tree has been successfully burned!'; | |
| document.getElementById('tree-gone').classList.remove('opacity-50'); | |
| // Change the tree card to show it's burned | |
| const treeCard = document.querySelector('.tree-card:nth-child(3)'); | |
| treeCard.classList.add('burn-animation'); | |
| treeCard.querySelector('h3').textContent += ' (BURNED)'; | |
| treeCard.querySelector('h3').classList.add('text-red-600'); | |
| // Remove flames after animation | |
| setTimeout(() => { | |
| const flames = document.querySelectorAll('.flame'); | |
| flames.forEach(flame => flame.remove()); | |
| treeCard.classList.remove('burn-animation'); | |
| }, 2000); | |
| clearInterval(progressInterval); | |
| }, step4); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Vanimal0221/treeburner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |