Spaces:
Running
Running
temove the daoaas on top and replace it with a dropdown list containing the following options: Greenpeace, WWF, G4G, Foundation X - Follow Up Deployment
7d00e7c verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DAOaaS Platform</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> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 80px ; | |
| } | |
| .sidebar-collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .sidebar-icon { | |
| margin-right: 0; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .proposal-status-dot { | |
| width: 10px; | |
| height: 10px; | |
| display: inline-block; | |
| border-radius: 50%; | |
| margin-right: 6px; | |
| } | |
| .active-tab { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar bg-indigo-900 text-white w-64 flex flex-col"> | |
| <div id="dao-header" class="p-4 border-b border-indigo-700 flex items-center cursor-pointer hover:bg-indigo-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cubes text-2xl mr-2 text-indigo-300"></i> | |
| <span id="dao-title" class="sidebar-text text-xl font-bold">DAOaaS</span> | |
| </div> | |
| <div class="ml-auto"> | |
| <i id="dao-caret" class="fas fa-chevron-down text-indigo-300"></i> | |
| </div> | |
| </div> | |
| <!-- DAO List Section --> | |
| <div id="dao-list" class="p-4 border-b border-indigo-700 hidden"> | |
| <div class="space-y-2"> | |
| <div class="dao-item flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <div class="w-4 h-4 border border-white rounded-sm mr-3 opacity-50"></div> | |
| <span class="sidebar-text">Web3 Foundation</span> | |
| </div> | |
| <div class="dao-item flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <div class="w-4 h-4 border border-white rounded-sm mr-3 opacity-50"></div> | |
| <span class="sidebar-text">Crypto Art Collective</span> | |
| </div> | |
| <div class="dao-item flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <div class="w-4 h-4 border border-white rounded-sm mr-3 opacity-50"></div> | |
| <span class="sidebar-text">DeFi Alliance</span> | |
| </div> | |
| <div class="dao-item flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <div class="w-4 h-4 border border-white rounded-sm mr-3 opacity-50"></div> | |
| <span class="sidebar-text">NFT Creators</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Application Menu Section --> | |
| <div id="app-menu" class="border-b border-indigo-700"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-home sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Home</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-wallet sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Treasury</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-question-circle sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">FAQ</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-comments sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Chat</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-vote-yea sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Governance</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-users sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Social Network</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-user-friends sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Team</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-store sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Marketplace</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Admin Section --> | |
| <div class="p-4 flex-1"> | |
| <h3 class="sidebar-text text-xs uppercase tracking-wider text-indigo-400 mb-2">Admin</h3> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-cog sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Platform Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-users sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">User Management</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-chart-line sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Global Analytics</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-800 cursor-pointer"> | |
| <i class="fas fa-shield-alt sidebar-icon mr-3 text-indigo-300"></i> | |
| <span class="sidebar-text">Moderation Tools</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="p-4 border-t border-indigo-700 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-sm font-bold mr-3">JD</div> | |
| <div class="sidebar-text"> | |
| <div class="text-sm font-medium">John Doe</div> | |
| <div class="text-xs text-indigo-300">Admin</div> | |
| </div> | |
| <button class="ml-auto text-indigo-300 hover:text-white"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Header --> | |
| <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <h1 class="text-xl font-semibold text-gray-800">Web3 Foundation</h1> | |
| <span class="ml-2 px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Active</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-500"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-question-circle text-gray-500"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Tabs Navigation --> | |
| <div class="bg-white border-b border-gray-200"> | |
| <div class="flex overflow-x-auto"> | |
| <a href="#" class="tab-item px-6 py-3 text-sm font-medium" onclick="changeTab('dashboard')">Dashboard</a> | |
| <a href="#" class="tab-item px-6 py-3 text-sm font-medium active-tab" onclick="changeTab('governance')">Governance</a> | |
| <a href="#" class="tab-item px-6 py-3 text-sm font-medium" onclick="changeTab('treasury')">Treasury</a> | |
| <a href="#" class="tab-item px-6 py-3 text-sm font-medium" onclick="changeTab('marketplace')">Marketplace</a> | |
| <a href="#" class="tab-item px-6 py-3 text-sm font-medium" onclick="changeTab('settings')">Settings</a> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Governance Tab Content (Default Visible) --> | |
| <div id="governance-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Governance</h2> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Proposal | |
| </button> | |
| </div> | |
| <!-- Proposal Filters --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm mb-6"> | |
| <div class="flex flex-wrap items-center gap-3"> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Status</label> | |
| <select class="bg-gray-50 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm"> | |
| <option>All</option> | |
| <option>Active</option> | |
| <option>Pending</option> | |
| <option>Passed</option> | |
| <option>Rejected</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Category</label> | |
| <select class="bg-gray-50 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm"> | |
| <option>All Categories</option> | |
| <option>Funding</option> | |
| <option>Membership</option> | |
| <option>Policy</option> | |
| <option>Development</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Search</label> | |
| <div class="relative"> | |
| <input type="text" class="bg-gray-50 border border-gray-300 text-gray-700 py-2 pl-10 pr-4 rounded-md leading-tight focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full text-sm" placeholder="Search proposals..."> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proposals List --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Proposal</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Votes</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ends in</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50 cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Fund Developer Grants Program</div> | |
| <div class="text-sm text-gray-500">Proposed by alice.eth</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <span class="proposal-status-dot bg-green-500"></span> Active | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="w-20 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-green-500 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <span>78% For</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <i class="fas fa-clock text-gray-400 mr-1"></i> 2 days | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">Vote</a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Update Membership Guidelines</div> | |
| <div class="text-sm text-gray-500">Proposed by bob.eth</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| <span class="proposal-status-dot bg-yellow-500"></span> Pending | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <i class="fas fa-clock text-gray-400 mr-1"></i> Voting starts in 1 day | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Integrate Chainlink Oracle</div> | |
| <div class="text-sm text-gray-500">Proposed by carol.eth</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> | |
| <span class="proposal-status-dot bg-blue-500"></span> Passed | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="w-20 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-blue-500 rounded-full" style="width: 64%"></div> | |
| </div> | |
| <span>64% For</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <i class="fas fa-check-circle text-gray-400 mr-1"></i> Ended 5 days ago | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Treasury Tab Content --> | |
| <div id="treasury-tab" class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Treasury</h2> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Transaction | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white p-5 rounded-lg shadow-sm"> | |
| <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Total Balance</h3> | |
| <p class="text-3xl font-bold text-gray-800">$524,890.32</p> | |
| <p class="text-sm text-gray-500 mt-1">1,245.78 ETH</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-lg shadow-sm"> | |
| <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Monthly Spending</h3> | |
| <p class="text-3xl font-bold text-gray-800">$42,150.00</p> | |
| <p class="text-sm text-gray-500 mt-1">105.25 ETH</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-lg shadow-sm"> | |
| <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Available Budget</h3> | |
| <p class="text-3xl font-bold text-gray-800">$182,740.32</p> | |
| <p class="text-sm text-gray-500 mt-1">430.55 ETH</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-5 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Recent Transactions</h3> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">View All</a> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Developer Grant Payment</p> | |
| <p class="text-xs text-gray-500">To alice.eth</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-800">3.5 ETH</p> | |
| <p class="text-xs text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Infrastructure Costs</p> | |
| <p class="text-xs text-gray-500">To AWS</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-800">$2,500</p> | |
| <p class="text-xs text-gray-500">5 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Marketing Campaign</p> | |
| <p class="text-xs text-gray-500">To CoinGecko</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-800">15.25 ETH</p> | |
| <p class="text-xs text-gray-500">1 week ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-5 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Token Distribution</h3> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Details</a> | |
| </div> | |
| <div class="h-64"> | |
| <div class="bg-blue-50 h-full rounded-lg flex items-center justify-center text-gray-400"> | |
| [Token distribution chart would appear here in a real implementation] | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Marketplace Tab Content --> | |
| <div id="marketplace-tab" class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">AI Services Marketplace</h2> | |
| <div class="relative w-64"> | |
| <input type="text" class="bg-gray-50 border border-gray-300 text-gray-700 py-2 pl-10 pr-4 rounded-md leading-tight focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full text-sm" placeholder="Search services..."> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="module-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Proposal Analyzer</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">AI that analyzes governance proposals for potential risks and compliance with community guidelines.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Active</span> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Configure</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3"> | |
| <i class="fas fa-comment-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Community FAQ Bot</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">AI-powered chatbot that answers common questions about your DAO in community channels.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Not Installed</span> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Install</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-3"> | |
| <i class="fas fa-chart-bar"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Sentiment Analyzer</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Monitors community discussions across platforms and provides sentiment analysis reports.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Requires Token</span> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Meeting Summarizer</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Generates concise summaries and action items from community calls and governance meetings.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Not Installed</span> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Install</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600 mr-3"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Scam Detector</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Identifies potential scams and phishing attempts targeting your community members.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Active</span> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Configure</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mr-3"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Proposal Generator</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Helps draft governance proposals based on community suggestions and historical data.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Not Installed</span> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-900">Install</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Other tabs content would go here --> | |
| <div id="dashboard-tab" class="tab-content hidden"> | |
| <!-- Dashboard content --> | |
| </div> | |
| <div id="settings-tab" class="tab-content hidden"> | |
| <!-- Settings content --> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle DAO list visibility | |
| document.getElementById('dao-header').addEventListener('click', function() { | |
| const daoList = document.getElementById('dao-list'); | |
| const caret = document.getElementById('dao-caret'); | |
| daoList.classList.toggle('hidden'); | |
| caret.classList.toggle('fa-chevron-down'); | |
| caret.classList.toggle('fa-chevron-up'); | |
| }); | |
| // Toggle sidebar collapse | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebar.classList.toggle('sidebar-collapsed'); | |
| const icon = this.querySelector('i'); | |
| if (sidebar.classList.contains('sidebar-collapsed')) { | |
| icon.classList.remove('fa-chevron-left'); | |
| icon.classList.add('fa-chevron-right'); | |
| } else { | |
| icon.classList.remove('fa-chevron-right'); | |
| icon.classList.add('fa-chevron-left'); | |
| } | |
| }); | |
| // Change tab content | |
| function changeTab(tabName) { | |
| // Hide all tab contents and remove active class from all tab items | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.querySelectorAll('.tab-item').forEach(item => { | |
| item.classList.remove('active-tab'); | |
| }); | |
| // Show selected tab content and add active class to clicked tab item | |
| document.getElementById(`${tabName}-tab`).classList.remove('hidden'); | |
| event.target.classList.add('active-tab'); | |
| } | |
| // DAO item selection | |
| document.querySelectorAll('.dao-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| const selectedDao = this.getAttribute('data-dao-name'); | |
| // Update DAO titles | |
| document.getElementById('dao-title').textContent = selectedDao; | |
| document.querySelector('header h1').textContent = selectedDao; | |
| // Hide DAO list and reset caret | |
| document.getElementById('dao-list').classList.add('hidden'); | |
| document.getElementById('dao-caret').classList.remove('fa-chevron-up'); | |
| document.getElementById('dao-caret').classList.add('fa-chevron-down'); | |
| // Show application menu | |
| document.getElementById('app-menu').classList.remove('hidden'); | |
| // Update DAO selection indicators | |
| document.querySelectorAll('.dao-item').forEach(i => { | |
| const checkbox = i.querySelector('div:first-child'); | |
| checkbox.classList.add('border', 'border-white', 'opacity-50'); | |
| checkbox.classList.remove('bg-white'); | |
| }); | |
| const checkbox = this.querySelector('div:first-child'); | |
| checkbox.classList.remove('border', 'border-white', 'opacity-50'); | |
| checkbox.classList.add('bg-white'); | |
| // Update main header with selected DAO | |
| document.querySelector('header h1').textContent = selectedDao; | |
| }); | |
| }); | |
| </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=web3district/g4g" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |