Spaces:
Running
Running
| | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>DMIM - Performance Art Trend Explorer</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"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800"> | |
| <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col"> | |
| <header class="dmim-bg p-4 shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-white text-xl font-bold">DMIM</h1> | |
| <div class="flex items-center space-x-3"> | |
| <button class="text-white" id="explainerBtn"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| <button class="text-white" id="dmimBalanceBtn"> | |
| <span id="dmimBalanceDisplay">0 DMIM</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-1 overflow-y-auto p-4" id="mainContent"> | |
| <div id="homeTab"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-4">Performance Art Trends</h2> | |
| <div class="grid grid-cols-1 gap-4" id="trendingCardsContainer"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Your Saved Trends</h2> | |
| <button id="stakeInfoBtn" class="text-xs text-dmim-bg font-medium flex items-center"> | |
| <i class="fas fa-question-circle mr-1"></i> How staking works | |
| </button> | |
| </div> | |
| <div class="space-y-3" id="savedTrendsContainer"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="searchTab" class="hidden"> | |
| <div class="mb-4"> | |
| <div class="relative"> | |
| <input type="text" id="trendSearchInput" placeholder="Search performance art trends..." | |
| class="w-full py-3 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-dmim-bg"> | |
| <button id="searchTrendBtn" class="absolute right-3 top-3 text-gray-500 hover:text-dmim-bg"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4" id="searchResultsContainer"> | |
| </div> | |
| </div> | |
| </main> | |
| <nav class="bg-white border-t border-gray-200 p-2"> | |
| <div class="flex justify-around"> | |
| <button class="tab-button active flex flex-col items-center text-dmim-bg" data-tab="homeTab"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button class="tab-button flex flex-col items-center text-gray-500" data-tab="searchTab"> | |
| <i class="fas fa-search text-lg"></i> | |
| <span class="text-xs mt-1">Search</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500" id="addTrendBtn"> | |
| <i class="fas fa-plus-circle text-lg"></i> | |
| <span class="text-xs mt-1">Add</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <div class="floating-btn" id="sentimentHelpBtn"> | |
| <i class="fas fa-smile-beam"></i> | |
| </div> | |
| <div id="addTrendModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="font-semibold text-lg">Add New Performance Trend</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Hashtag</label> | |
| <input type="text" id="newHashtag" placeholder="#trend" | |
| class="w-full py-2 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-dmim-bg"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Performance Category</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="music"> | |
| <i class="fas fa-music mr-1 text-purple-500"></i> Music | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="theater"> | |
| <i class="fas fa-theater-masks mr-1 text-yellow-500"></i> Theater | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="dance"> | |
| <i class="fas fa-child mr-1 text-pink-500"></i> Dance | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="comedy"> | |
| <i class="fas fa-laugh-squint mr-1 text-blue-500"></i> Comedy | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="emerging"> | |
| <i class="fas fa-star mr-1 text-green-500"></i> Emerging | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-end space-x-3"> | |
| <button id="cancelAddTrend" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700"> | |
| Cancel | |
| </button> | |
| <button id="saveTrend" class="px-4 py-2 dmim-bg text-white rounded-md text-sm font-medium"> | |
| Save Trend | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="dmimModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">DMIM Token</h3> | |
| <span class="inline-flex items-center bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"> | |
| <i class="fas fa-check-circle mr-1"></i> Verified | |
| </span> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full dmim-bg text-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-coins text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Bitcoin Cash CHIP Protocol</h4> | |
| <p class="text-sm text-gray-500">0.3% APY Yield Farming</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-700 mb-3"> | |
| DMIM is a private cryptocurrency token on the Bitcoin Cash network using the CHIP protocol. | |
| Stake DMIM to your saved trends to earn yield. | |
| </p> | |
| <div class="space-y-2"> | |
| <a href="https://tokenexplorer.cash/?tokenId=81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="flex items-center text-blue-500 text-sm"> | |
| <i class="fas fa-external-link-alt mr-2"></i> View on Token Explorer | |
| </a> | |
| <a href="https://app.cauldron.quest/swap/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="flex items-center text-blue-500 text-sm"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Swap on Cauldron | |
| </a> | |
| <a href="https://blockchair.com/bitcoin-cash/transaction/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="flex items-center text-blue-500 text-sm"> | |
| <i class="fas fa-link mr-2"></i> View Transaction | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3 mb-4"> | |
| <h4 class="font-medium text-sm mb-2">Your DMIM Balance</h4> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium" id="dmimBalance">0 DMIM</span> | |
| <button id="addDmimBtn" class="text-sm text-dmim-bg font-medium"> | |
| <i class="fas fa-plus-circle mr-1"></i> Add DMIM | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <h4 class="font-medium text-sm mb-2">Stake DMIM to Trend</h4> | |
| <div class="mb-2"> | |
| <select id="trendSelect" class="w-full p-2 rounded border border-gray-300 text-sm"> | |
| <option value="">-- Select a saved trend --</option> | |
| </select> | |
| </div> | |
| <div class="mb-2"> | |
| <input type="number" id="stakeAmount" placeholder="DMIM amount" class="w-full p-2 rounded border border-gray-300 text-sm"> | |
| </div> | |
| <button id="stakeBtn" class="w-full py-2 dmim-bg text-white rounded-lg text-sm font-medium"> | |
| Stake & Farm Yield | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-center"> | |
| <button id="closeDmimModal" class="px-4 py-2 dmim-bg text-white rounded-md text-sm font-medium"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="explainerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4 explainer-animate"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">Performance Art Trends</h3> | |
| <button id="closeExplainerModal" class="text-gray-500 hover:text-dmim-bg"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 overflow-y-auto max-h-[70vh]"> | |
| <div class="mb-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 rounded-full dmim-bg text-white flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-1">Market Share Algorithm</h4> | |
| <p class="text-sm text-gray-700"> | |
| Our algorithm calculates the percentage of total performance art searches that each hashtag represents. | |
| The percentage shows the trend's market share compared to all performance art categories. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 rounded-full dmim-bg text-white flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-percentage"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-1">Percentage Indicators</h4> | |
| <p class="text-sm text-gray-700"> | |
| <span class="percentage-up">Green percentages</span> indicate increasing popularity. | |
| <span class="percentage-down">Red percentages</span> show declining interest. | |
| <span class="percentage-neutral">Gray percentages</span> represent stable trends. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 rounded-full dmim-bg text-white flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-tags"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-1">Performance Categories</h4> | |
| <p class="text-sm text-gray-700"> | |
| We track five main performance art categories: Music, Theater, Dance, Comedy, and Emerging Art. | |
| Each hashtag is classified into one of these categories for market share calculation. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 rounded-full dmim-bg text-white flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-smile"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-1">Sentiment Analysis</h4> | |
| <p class="text-sm text-gray-700"> | |
| Our sentiment analysis adjusts trend percentages based on public perception. | |
| Positive sentiment boosts growth rates, while negative sentiment reduces them. | |
| You can adjust sentiment ratings for each trend. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 border border-blue-100 rounded-lg p-3"> | |
| <div class="flex"> | |
| <div class="text-blue-500 mr-2"> | |
| <i class="fas fa-lightbulb””></i> | |
| </div> | |
| <p class="text-sm text-blue-800"> | |
| <strong>Pro Tip:</strong> Look for emerging trends with small but rapidly increasing percentages. | |
| These often provide the best staking opportunities. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-center"> | |
| <button id="closeExplainerBtn" class="px-4 py-2 dmim-bg text-white rounded-md text-sm font-medium"> | |
| Got It! | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="sentimentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="font-semibold text-lg">Adjust Trend Sentiment</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <h4 class="font-medium mb-2" id="sentimentTrendName">#TaylorSwift</h4> | |
| <p class="text-sm text-gray-600 mb-4">Adjust the sentiment slider to reflect current public perception of this trend.</p> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-red-500">Negative</span> | |
| <span class="text-sm font-medium text-gray-500">Neutral</span> | |
| <span class="text-sm font-medium text-green-500">Positive</span> | |
| </div> | |
| <input type="range" min="-100" max="100" value="0" class="w-full sentiment-slider neutral" id="sentimentSlider"> | |
| <div class="flex justify-between mt-1"> | |
| <span class="text-xs text-gray-500">-100</span> | |
| <span class="text-xs text-gray-500">0</span> | |
| <span class="text-xs text-gray-500">100</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Recent News Headline</label> | |
| <input type="text" id="sentimentHeadline" placeholder="Enter recent news headline..." | |
| class="w-full py-2 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-dmim-bg"> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3 mb-4"> | |
| <h4 class="font-medium text-sm mb-2">Current Impact</h4> | |
| <p class="text-sm" id="sentimentImpactText">Neutral sentiment will not affect trend growth.</p> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-end space-x-3"> | |
| <button id="cancelSentiment" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700"> | |
| Cancel | |
| </button> | |
| <button id="saveSentiment" class="px-4 py-2 dmim-bg text-white rounded-md text-sm font-medium"> | |
| Save Sentiment | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="sentimentLegendModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">Sentiment & Icon Legend</h3> | |
| <button id="closeLegendModal" class="text-gray-500 hover:text-dmim-bg"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 overflow-y-auto max-h-[70vh]"> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-3">Sentiment Indicators</h4> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-green-500"> | |
| <i class="fas fa-smile text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Positive Sentiment</p> | |
| <p class="text-sm text-gray-600">Boosts trend growth rate</p> | |
| </div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-yellow-500"> | |
| <i class="fas fa-theater-masks text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Theater</p> | |
| <p class="text-sm text-gray-600">Stage plays and theatrical performances</p> | |
| </div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-pink-500"> | |
| <i class="fas fa-child text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Dance</p> | |
| <p class="text-sm text-gray-600">Dance performances and shows</p> | |
| </div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-blue-500"> | |
| <i class="fas fa-laugh-squint text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Comedy</p> | |
| <p class="text-sm text-gray-600">Stand-up and comedy performances</p> | |
| </div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-red-500"> | |
| <i class="fas fa-arrow-down text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Declining Trend</p> | |
| <p class="text-sm text-gray-600">Decreasing in popularity</p> | |
| </div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-gray-500"> | |
| <i class="fas fa-arrows-alt-h text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Stable Trend</p> | |
| <p class="text-sm text-gray-600">Consistent popularity</p> | |
| </div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-icon text-blue-500"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Staked Trend</p> | |
| <p class="text-sm text-gray-600">You have DMIM staked to this trend</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-center"> | |
| <button id="closeLegendBtn" class="px-4 py-2 dmim-bg text-white rounded-md text-sm font-medium"> | |
| Got It! | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="toast" class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg hidden z-50"> | |
| <div class="flex items-center"> | |
| <span id="toastMessage">Trend saved successfully</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></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=privateuserh/privdmi2-01pa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |