|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mai Tawhiti | Digital Innovation Hub</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="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--dark-bg: #121212; |
|
|
--darker-bg: #0a0a0a; |
|
|
--accent: #FFD700; |
|
|
--text: #FFFFFF; |
|
|
--secondary-text: #B3B3B3; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
background-color: var(--dark-bg); |
|
|
color: var(--text); |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.mono { |
|
|
font-family: 'Space Mono', monospace; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
background-color: var(--darker-bg); |
|
|
border-right: 1px solid rgba(255, 215, 0, 0.1); |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
border-left: 3px solid var(--accent); |
|
|
background: rgba(255, 215, 0, 0.05); |
|
|
} |
|
|
|
|
|
.btn-accent { |
|
|
background-color: var(--accent); |
|
|
color: var(--dark-bg); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-accent:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); |
|
|
} |
|
|
|
|
|
.card { |
|
|
background-color: var(--darker-bg); |
|
|
border: 1px solid rgba(255, 215, 0, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
border-color: rgba(255, 215, 0, 0.3); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.ai-tool { |
|
|
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(18, 18, 18, 0.8) 100%); |
|
|
} |
|
|
|
|
|
.divider { |
|
|
border-color: rgba(255, 215, 0, 0.2); |
|
|
} |
|
|
|
|
|
input, textarea { |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
border: 1px solid rgba(255, 215, 0, 0.2); |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
input:focus, textarea:focus { |
|
|
outline: none; |
|
|
border-color: var(--accent); |
|
|
box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2); |
|
|
} |
|
|
|
|
|
.tag { |
|
|
background-color: rgba(255, 215, 0, 0.1); |
|
|
border: 1px solid rgba(255, 215, 0, 0.3); |
|
|
} |
|
|
|
|
|
.notification { |
|
|
animation: slideIn 0.5s forwards; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex"> |
|
|
|
|
|
<div class="sidebar w-64 min-h-screen hidden md:block fixed"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-3 mb-10"> |
|
|
<i class="fas fa-atom text-2xl" style="color: var(--accent);"></i> |
|
|
<h1 class="text-xl font-bold">MAI TAWHITI</h1> |
|
|
</div> |
|
|
|
|
|
<nav class="space-y-2"> |
|
|
<a href="#" class="block py-3 px-4 rounded tab-active" onclick="switchTab('dashboard')"> |
|
|
<i class="fas fa-chart-line mr-3"></i> Dashboard |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('projects')"> |
|
|
<i class="fas fa-code-branch mr-3"></i> Projects |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('ai-tools')"> |
|
|
<i class="fas fa-robot mr-3"></i> AI Tools |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('research')"> |
|
|
<i class="fas fa-flask mr-3"></i> Research |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('collaborate')"> |
|
|
<i class="fas fa-handshake mr-3"></i> Collaborate |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-20 pt-6 border-t divider"> |
|
|
<div class="flex items-center space-x-3 mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Mai Tawhiti</p> |
|
|
<p class="text-xs text-secondary-text">Digital Innovator</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 px-4 rounded border border-accent text-accent hover:bg-gray-800"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i> Sign Out |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden w-full fixed top-0 bg-darker-bg z-50 p-4 flex justify-between items-center border-b divider"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-atom text-xl" style="color: var(--accent);"></i> |
|
|
<h1 class="text-lg font-bold">MAI TAWHITI</h1> |
|
|
</div> |
|
|
<button id="mobileMenuButton" class="text-xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobileSidebar" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden"> |
|
|
<div class="w-3/4 h-full bg-darker-bg p-6"> |
|
|
<div class="flex justify-between items-center mb-10"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-atom text-2xl" style="color: var(--accent);"></i> |
|
|
<h1 class="text-xl font-bold">MAI TAWHITI</h1> |
|
|
</div> |
|
|
<button id="closeMobileMenu" class="text-xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<nav class="space-y-2"> |
|
|
<a href="#" class="block py-3 px-4 rounded tab-active" onclick="switchTab('dashboard')"> |
|
|
<i class="fas fa-chart-line mr-3"></i> Dashboard |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('projects')"> |
|
|
<i class="fas fa-code-branch mr-3"></i> Projects |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('ai-tools')"> |
|
|
<i class="fas fa-robot mr-3"></i> AI Tools |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('research')"> |
|
|
<i class="fas fa-flask mr-3"></i> Research |
|
|
</a> |
|
|
<a href="#" class="block py-3 px-4 rounded hover:bg-gray-800" onclick="switchTab('collaborate')"> |
|
|
<i class="fas fa-handshake mr-3"></i> Collaborate |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-20 pt-6 border-t divider"> |
|
|
<div class="flex items-center space-x-3 mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Mai Tawhiti</p> |
|
|
<p class="text-xs text-secondary-text">Digital Innovator</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 px-4 rounded border border-accent text-accent hover:bg-gray-800"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i> Sign Out |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 md:ml-64 pt-16 md:pt-0"> |
|
|
|
|
|
<div id="dashboard" class="tab-content p-6"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold">Innovation Dashboard</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="btn-accent py-2 px-4 rounded font-medium"> |
|
|
<i class="fas fa-plus mr-2"></i> New Project |
|
|
</button> |
|
|
<button class="py-2 px-4 rounded border border-accent text-accent hover:bg-gray-800"> |
|
|
<i class="fas fa-bell mr-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-secondary-text">Active Projects</p> |
|
|
<p class="text-3xl font-bold mt-2">12</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-code text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t divider"> |
|
|
<p class="text-sm text-secondary-text">+2 from last month</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-secondary-text">Collaborations</p> |
|
|
<p class="text-3xl font-bold mt-2">8</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t divider"> |
|
|
<p class="text-sm text-secondary-text">3 new requests</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-secondary-text">AI Concepts</p> |
|
|
<p class="text-3xl font-bold mt-2">24</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-robot text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t divider"> |
|
|
<p class="text-sm text-secondary-text">5 generated today</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-bold">Recent Activity</h3> |
|
|
<button class="text-sm text-accent">View All</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-800 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-code text-sm text-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Updated HANUMI project</p> |
|
|
<p class="text-sm text-secondary-text">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-800 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-robot text-sm text-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Generated new AI concept</p> |
|
|
<p class="text-sm text-secondary-text">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-800 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-sm text-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New collaboration request</p> |
|
|
<p class="text-sm text-secondary-text">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-bold">Quick Actions</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="py-4 px-4 rounded bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center" onclick="switchTab('ai-tools')"> |
|
|
<i class="fas fa-robot text-xl mb-2 text-accent"></i> |
|
|
<span class="text-sm">AI Tools</span> |
|
|
</button> |
|
|
<button class="py-4 px-4 rounded bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center" onclick="switchTab('collaborate')"> |
|
|
<i class="fas fa-handshake text-xl mb-2 text-accent"></i> |
|
|
<span class="text-sm">Collaborate</span> |
|
|
</button> |
|
|
<button class="py-4 px-4 rounded bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center"> |
|
|
<i class="fas fa-file-export text-xl mb-2 text-accent"></i> |
|
|
<span class="text-sm">Export Data</span> |
|
|
</button> |
|
|
<button class="py-4 px-4 rounded bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center"> |
|
|
<i class="fas fa-cog text-xl mb-2 text-accent"></i> |
|
|
<span class="text-sm">Settings</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-bold">Current Focus Areas</h3> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-4"> |
|
|
<div class="p-4 rounded bg-gray-800"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-accent bg-opacity-20 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-brain text-accent"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">AI Cultural Preservation</h4> |
|
|
</div> |
|
|
<p class="text-sm text-secondary-text">Developing intelligent systems that document and preserve indigenous knowledge using machine learning.</p> |
|
|
</div> |
|
|
<div class="p-4 rounded bg-gray-800"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-accent bg-opacity-20 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-language text-accent"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">Language Revitalization</h4> |
|
|
</div> |
|
|
<p class="text-sm text-secondary-text">Building tools for endangered language documentation and learning through technology.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="projects" class="tab-content p-6 hidden"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold">Innovation Projects</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="btn-accent py-2 px-4 rounded font-medium"> |
|
|
<i class="fas fa-plus mr-2"></i> New Project |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex space-x-4 overflow-x-auto pb-2"> |
|
|
<button class="tag px-4 py-1 rounded-full text-sm whitespace-nowrap">All Projects</button> |
|
|
<button class="tag px-4 py-1 rounded-full text-sm whitespace-nowrap">Cultural Tech</button> |
|
|
<button class="tag px-4 py-1 rounded-full text-sm whitespace-nowrap">Education</button> |
|
|
<button class="tag px-4 py-1 rounded-full text-sm whitespace-nowrap">AI Tools</button> |
|
|
<button class="tag px-4 py-1 rounded-full text-sm whitespace-nowrap">Community</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">HANUMI</h3> |
|
|
<p class="text-secondary-text">Te Ao Māori Digital Assistant</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-globe-americas text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">Indigenous knowledge preservation system with cultural event planning tools.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">AI</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Cultural Tech</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">React</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center pt-4 border-t divider"> |
|
|
<div class="text-sm text-secondary-text"> |
|
|
<i class="fas fa-clock mr-1"></i> Last updated 2 days ago |
|
|
</div> |
|
|
<button class="text-sm text-accent">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">Māori.AI</h3> |
|
|
<p class="text-secondary-text">Cultural Preservation Framework</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-project-diagram text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">Cultural preservation through code with integration of traditional knowledge.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">AI</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Framework</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Python</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center pt-4 border-t divider"> |
|
|
<div class="text-sm text-secondary-text"> |
|
|
<i class="fas fa-clock mr-1"></i> Last updated 1 week ago |
|
|
</div> |
|
|
<button class="text-sm text-accent">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">Te Whare Ako</h3> |
|
|
<p class="text-secondary-text">Learning Platform</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-graduation-cap text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">React-based component system with interactive learning modules.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Education</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">React</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Node.js</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center pt-4 border-t divider"> |
|
|
<div class="text-sm text-secondary-text"> |
|
|
<i class="fas fa-clock mr-1"></i> Last updated 3 days ago |
|
|
</div> |
|
|
<button class="text-sm text-accent">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-1">Kapa Haka Hub</h3> |
|
|
<p class="text-secondary-text">Performance Management</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">Digital tools for Kapa Haka groups including judging and event planning.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Community</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Vue.js</span> |
|
|
<span class="tag px-3 py-1 rounded-full text-xs">Firebase</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center pt-4 border-t divider"> |
|
|
<div class="text-sm text-secondary-text"> |
|
|
<i class="fas fa-clock mr-1"></i> Last updated 2 weeks ago |
|
|
</div> |
|
|
<button class="text-sm text-accent">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-tools" class="tab-content p-6 hidden"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold">AI Innovation Tools</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="btn-accent py-2 px-4 rounded font-medium" onclick="showHistory()"> |
|
|
<i class="fas fa-history mr-2"></i> History |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-lg font-bold">Concept Generator</h3> |
|
|
<div class="bg-gray-800 p-2 rounded-full"> |
|
|
<i class="fas fa-lightbulb text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-secondary-text mb-4">Generate innovative concepts blending culture and technology.</p> |
|
|
<button class="w-full btn-accent py-2 px-4 rounded font-medium" onclick="showGenerator('concept')"> |
|
|
<i class="fas fa-play mr-2"></i> Start Generating |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-lg font-bold">Project Outline</h3> |
|
|
<div class="bg-gray-800 p-2 rounded-full"> |
|
|
<i class="fas fa-project-diagram text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-secondary-text mb-4">Create detailed project outlines for cultural tech initiatives.</p> |
|
|
<button class="w-full btn-accent py-2 px-4 rounded font-medium" onclick="showGenerator('project')"> |
|
|
<i class="fas fa-play mr-2"></i> Start Generating |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-lg font-bold">Research Assistant</h3> |
|
|
<div class="bg-gray-800 p-2 rounded-full"> |
|
|
<i class="fas fa-search text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-secondary-text mb-4">Get research insights on cultural technology topics.</p> |
|
|
<button class="w-full btn-accent py-2 px-4 rounded font-medium" onclick="showGenerator('research')"> |
|
|
<i class="fas fa-play mr-2"></i> Start Generating |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-generator" class="hidden"> |
|
|
<div class="card p-6 rounded-lg ai-tool mb-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 id="generator-title" class="text-xl font-bold">Concept |
|
|
</html> |
