|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Prompt Master Engineer 3.0 | QUANTUM BOX AI PRO TOOLS 5.0</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> |
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto+Mono:wght@300;400;500;600&display=swap'); |
|
|
|
:root { |
|
--primary: #6d28d9; |
|
--secondary: #10b981; |
|
--tertiary: #3b82f6; |
|
--dark: #0f172a; |
|
--darker: #020617; |
|
--light: #f8fafc; |
|
} |
|
|
|
body { |
|
font-family: 'Roboto Mono', monospace; |
|
background-color: var(--darker); |
|
color: var(--light); |
|
} |
|
|
|
.title-font { |
|
font-family: 'Orbitron', sans-serif; |
|
} |
|
|
|
.gradient-text { |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.gradient-border { |
|
position: relative; |
|
border-radius: 0.5rem; |
|
} |
|
|
|
.gradient-border::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
right: -2px; |
|
bottom: -2px; |
|
border-radius: 0.5rem; |
|
background: linear-gradient(45deg, var(--primary), var(--secondary)); |
|
z-index: -1; |
|
} |
|
|
|
.code-block { |
|
background-color: rgba(15, 23, 42, 0.7); |
|
border-left: 3px solid var(--primary); |
|
} |
|
|
|
.nav-item { |
|
position: relative; |
|
} |
|
|
|
.nav-item::after { |
|
content: ''; |
|
position: absolute; |
|
width: 0; |
|
height: 2px; |
|
bottom: -2px; |
|
left: 0; |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-item:hover::after { |
|
width: 100%; |
|
} |
|
|
|
.glow-effect { |
|
box-shadow: 0 0 15px rgba(109, 40, 217, 0.5); |
|
} |
|
|
|
.glow-effect:hover { |
|
box-shadow: 0 0 20px rgba(109, 40, 217, 0.7); |
|
} |
|
|
|
.tooltip { |
|
position: relative; |
|
} |
|
|
|
.tooltip .tooltip-text { |
|
visibility: hidden; |
|
width: 200px; |
|
background-color: var(--dark); |
|
color: var(--light); |
|
text-align: center; |
|
border-radius: 6px; |
|
padding: 5px; |
|
position: absolute; |
|
z-index: 1; |
|
bottom: 125%; |
|
left: 50%; |
|
margin-left: -100px; |
|
opacity: 0; |
|
transition: opacity 0.3s; |
|
border: 1px solid var(--primary); |
|
} |
|
|
|
.tooltip:hover .tooltip-text { |
|
visibility: visible; |
|
opacity: 1; |
|
} |
|
|
|
input[type="range"] { |
|
-webkit-appearance: none; |
|
height: 8px; |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
border-radius: 5px; |
|
} |
|
|
|
input[type="range"]::-webkit-slider-thumb { |
|
-webkit-appearance: none; |
|
appearance: none; |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 50%; |
|
background: var(--light); |
|
cursor: pointer; |
|
border: 2px solid var(--secondary); |
|
} |
|
|
|
.tab-active { |
|
border-bottom: 2px solid var(--secondary); |
|
} |
|
|
|
.quantum-pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { |
|
box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.7); |
|
} |
|
70% { |
|
box-shadow: 0 0 0 10px rgba(109, 40, 217, 0); |
|
} |
|
100% { |
|
box-shadow: 0 0 0 0 rgba(109, 40, 217, 0); |
|
} |
|
} |
|
|
|
.quantum-connection { |
|
position: relative; |
|
} |
|
|
|
.quantum-connection::after { |
|
content: ''; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
width: 100%; |
|
height: 100%; |
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0) 70%); |
|
transform: translate(-50%, -50%); |
|
border-radius: 50%; |
|
z-index: -1; |
|
} |
|
|
|
.floating-toolbar { |
|
position: fixed; |
|
bottom: 30px; |
|
right: 30px; |
|
z-index: 100; |
|
} |
|
|
|
.context-menu { |
|
display: none; |
|
position: absolute; |
|
background-color: var(--dark); |
|
border: 1px solid var(--primary); |
|
border-radius: 0.5rem; |
|
box-shadow: 0 0 15px rgba(109, 40, 217, 0.5); |
|
z-index: 1000; |
|
} |
|
|
|
.context-menu-item { |
|
padding: 0.5rem 1rem; |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
} |
|
|
|
.context-menu-item:hover { |
|
background-color: rgba(109, 40, 217, 0.3); |
|
} |
|
|
|
.ai-assistant-bubble { |
|
position: fixed; |
|
bottom: 100px; |
|
right: 30px; |
|
width: 60px; |
|
height: 60px; |
|
border-radius: 50%; |
|
background: linear-gradient(135deg, var(--primary), var(--tertiary)); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
z-index: 100; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.ai-assistant-bubble:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
.ai-assistant-panel { |
|
position: fixed; |
|
bottom: 170px; |
|
right: 30px; |
|
width: 350px; |
|
background-color: var(--dark); |
|
border: 1px solid var(--primary); |
|
border-radius: 0.5rem; |
|
box-shadow: 0 0 20px rgba(109, 40, 217, 0.5); |
|
z-index: 100; |
|
display: none; |
|
overflow: hidden; |
|
} |
|
|
|
.ai-assistant-header { |
|
background: linear-gradient(90deg, var(--primary), var(--tertiary)); |
|
padding: 0.75rem; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.ai-assistant-body { |
|
padding: 1rem; |
|
max-height: 400px; |
|
overflow-y: auto; |
|
} |
|
|
|
.ai-message { |
|
margin-bottom: 1rem; |
|
padding: 0.75rem; |
|
border-radius: 0.5rem; |
|
background-color: rgba(15, 23, 42, 0.7); |
|
border-left: 3px solid var(--secondary); |
|
} |
|
|
|
.user-message { |
|
background-color: rgba(59, 130, 246, 0.2); |
|
border-left: 3px solid var(--tertiary); |
|
margin-left: 2rem; |
|
} |
|
|
|
.ai-message-input { |
|
display: flex; |
|
padding: 0.75rem; |
|
border-top: 1px solid rgba(109, 40, 217, 0.3); |
|
} |
|
|
|
.tool-connection-dot { |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: var(--secondary); |
|
position: absolute; |
|
top: -5px; |
|
right: -5px; |
|
animation: pulse 1.5s infinite; |
|
} |
|
|
|
.quantum-network { |
|
position: relative; |
|
width: 100%; |
|
height: 200px; |
|
background-color: rgba(15, 23, 42, 0.5); |
|
border-radius: 0.5rem; |
|
overflow: hidden; |
|
} |
|
|
|
.network-node { |
|
position: absolute; |
|
width: 12px; |
|
height: 12px; |
|
border-radius: 50%; |
|
background-color: var(--primary); |
|
box-shadow: 0 0 10px var(--primary); |
|
} |
|
|
|
.network-line { |
|
position: absolute; |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
height: 1px; |
|
transform-origin: 0 0; |
|
} |
|
|
|
.progress-ring { |
|
position: relative; |
|
width: 60px; |
|
height: 60px; |
|
} |
|
|
|
.progress-ring-circle { |
|
transform: rotate(-90deg); |
|
transform-origin: 50% 50%; |
|
} |
|
|
|
.progress-ring-bg { |
|
stroke: rgba(109, 40, 217, 0.2); |
|
fill: none; |
|
stroke-width: 6; |
|
} |
|
|
|
.progress-ring-fill { |
|
stroke: var(--primary); |
|
fill: none; |
|
stroke-width: 6; |
|
stroke-dasharray: 0, 100; |
|
transition: stroke-dasharray 0.6s ease; |
|
} |
|
|
|
|
|
.quantum-sync { |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.quantum-sync::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: -100%; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(90deg, transparent, rgba(109, 40, 217, 0.2), transparent); |
|
animation: syncAnimation 2s infinite; |
|
} |
|
|
|
@keyframes syncAnimation { |
|
0% { left: -100%; } |
|
100% { left: 100%; } |
|
} |
|
|
|
|
|
.workflow-card { |
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.5)); |
|
border: 1px solid rgba(109, 40, 217, 0.3); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.workflow-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 20px rgba(109, 40, 217, 0.3); |
|
border-color: rgba(109, 40, 217, 0.7); |
|
} |
|
|
|
|
|
.flow-connector { |
|
position: relative; |
|
} |
|
|
|
.flow-connector::after { |
|
content: ""; |
|
position: absolute; |
|
top: 50%; |
|
right: -20px; |
|
width: 20px; |
|
height: 2px; |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
} |
|
|
|
|
|
.knowledge-graph { |
|
position: relative; |
|
width: 100%; |
|
height: 300px; |
|
background-color: rgba(15, 23, 42, 0.3); |
|
border-radius: 0.5rem; |
|
border: 1px solid rgba(109, 40, 217, 0.3); |
|
overflow: hidden; |
|
} |
|
|
|
.knowledge-node { |
|
position: absolute; |
|
width: 16px; |
|
height: 16px; |
|
border-radius: 50%; |
|
background-color: var(--secondary); |
|
box-shadow: 0 0 15px var(--secondary); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: var(--dark); |
|
font-size: 10px; |
|
font-weight: bold; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.knowledge-node:hover { |
|
transform: scale(1.5); |
|
z-index: 10; |
|
} |
|
|
|
.knowledge-link { |
|
position: absolute; |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
height: 1px; |
|
transform-origin: 0 0; |
|
opacity: 0.5; |
|
} |
|
|
|
|
|
.command-center { |
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7)); |
|
border: 1px solid rgba(109, 40, 217, 0.5); |
|
box-shadow: 0 0 30px rgba(109, 40, 217, 0.2); |
|
} |
|
|
|
.command-input { |
|
background: rgba(15, 23, 42, 0.7); |
|
border: 1px solid rgba(109, 40, 217, 0.5); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.command-input:focus { |
|
border-color: var(--secondary); |
|
box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); |
|
} |
|
|
|
|
|
.automation-node { |
|
background: rgba(15, 23, 42, 0.7); |
|
border: 1px solid rgba(59, 130, 246, 0.5); |
|
border-radius: 0.5rem; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.automation-node:hover { |
|
background: rgba(15, 23, 42, 0.9); |
|
border-color: var(--secondary); |
|
transform: translateY(-2px); |
|
} |
|
|
|
|
|
.learning-path { |
|
position: relative; |
|
} |
|
|
|
.learning-path::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
bottom: 0; |
|
left: 19px; |
|
width: 2px; |
|
background: linear-gradient(to bottom, var(--primary), var(--secondary)); |
|
} |
|
|
|
|
|
.collaboration-bubble { |
|
background: rgba(15, 23, 42, 0.7); |
|
border: 1px solid rgba(109, 40, 217, 0.5); |
|
border-radius: 1rem; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.collaboration-bubble:hover { |
|
background: rgba(15, 23, 42, 0.9); |
|
border-color: var(--secondary); |
|
box-shadow: 0 5px 15px rgba(109, 40, 217, 0.3); |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
|
|
<div class="fixed top-4 right-4 flex items-center space-x-2 z-50"> |
|
<div class="relative"> |
|
<div class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></div> |
|
<div class="absolute inset-0 rounded-full bg-emerald-500 opacity-0 quantum-pulse"></div> |
|
</div> |
|
<span class="text-sm text-gray-300">Quantum Network</span> |
|
</div> |
|
|
|
|
|
<header class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50"> |
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
<div class="flex items-center space-x-2"> |
|
<div class="w-10 h-10 rounded-full gradient-border flex items-center justify-center glow-effect"> |
|
<div class="w-8 h-8 rounded-full bg-gray-900 flex items-center justify-center"> |
|
<i class="fas fa-cube text-purple-500"></i> |
|
</div> |
|
</div> |
|
<h1 class="title-font text-xl gradient-text">QUANTUM BOX</h1> |
|
</div> |
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
<a href="#" class="nav-item text-gray-300 hover:text-white">Dashboard</a> |
|
<a href="#" class="nav-item text-gray-300 hover:text-white">Prompt Library</a> |
|
<a href="#" class="nav-item text-white font-medium flex items-center"> |
|
Prompt Master |
|
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gradient-to-r from-purple-600 to-emerald-500">3.0</span> |
|
</a> |
|
<a href="#" class="nav-item text-gray-300 hover:text-white">ROI Calculator</a> |
|
<a href="#" class="nav-item text-gray-300 hover:text-white">Settings</a> |
|
</nav> |
|
|
|
<div class="flex items-center space-x-4"> |
|
<button class="p-2 rounded-full hover:bg-gray-800 relative"> |
|
<i class="fas fa-bell text-gray-400"></i> |
|
<span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span> |
|
</button> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-emerald-500 flex items-center justify-center relative"> |
|
<span class="text-white text-sm font-medium">AI</span> |
|
<div class="tool-connection-dot"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
<aside class="lg:w-1/4 bg-gray-900 rounded-xl p-6 border border-gray-800 h-fit"> |
|
<div class="flex items-center space-x-3 mb-6"> |
|
<i class="fas fa-terminal text-purple-500"></i> |
|
<h2 class="title-font text-lg gradient-text">Prompt Master Engineer 3.0</h2> |
|
</div> |
|
|
|
<div class="space-y-4"> |
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-home text-emerald-400"></i> |
|
<span>Project Overview</span> |
|
</button> |
|
<span class="tooltip-text">View project architecture and components</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-server text-purple-400"></i> |
|
<span>Backend Setup</span> |
|
</button> |
|
<span class="tooltip-text">Configure Python/Flask backend</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-desktop text-blue-400"></i> |
|
<span>Frontend Setup</span> |
|
</button> |
|
<span class="tooltip-text">Configure Vue.js frontend</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-language text-yellow-400"></i> |
|
<span>Translation System</span> |
|
</button> |
|
<span class="tooltip-text">Multi-language support setup</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-purple-900 hover:bg-purple-800 transition"> |
|
<i class="fas fa-calculator text-emerald-400"></i> |
|
<span class="font-medium">ROI Calculator</span> |
|
</button> |
|
<span class="tooltip-text">Calculate return on investment</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-cloud text-blue-400"></i> |
|
<span>Deployment</span> |
|
</button> |
|
<span class="tooltip-text">Google Cloud deployment</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-vial text-red-400"></i> |
|
<span>Testing</span> |
|
</button> |
|
<span class="tooltip-text">Quality assurance</span> |
|
</div> |
|
|
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-brain text-purple-400"></i> |
|
<span>AI Orchestration</span> |
|
</button> |
|
<span class="tooltip-text">Manage AI model workflows</span> |
|
</div> |
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-network-wired text-blue-400"></i> |
|
<span>Quantum Network</span> |
|
</button> |
|
<span class="tooltip-text">Inter-tool communication system</span> |
|
</div> |
|
|
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-terminal text-emerald-400"></i> |
|
<span>Command Center</span> |
|
</button> |
|
<span class="tooltip-text">Centralized control for all tools</span> |
|
</div> |
|
|
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-project-diagram text-blue-400"></i> |
|
<span>Automation Workflows</span> |
|
</button> |
|
<span class="tooltip-text">Create automated processes across tools</span> |
|
</div> |
|
|
|
|
|
<div class="tooltip"> |
|
<button class="w-full flex items-center space-x-3 p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition"> |
|
<i class="fas fa-book text-yellow-400"></i> |
|
<span>Knowledge Graph</span> |
|
</button> |
|
<span class="tooltip-text">Connected knowledge across all tools</span> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-8 pt-6 border-t border-gray-800"> |
|
<h3 class="text-sm font-medium text-gray-400 mb-3">QUICK ACTIONS</h3> |
|
<button class="w-full flex items-center justify-center space-x-2 p-3 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90 transition mb-3"> |
|
<i class="fas fa-bolt"></i> |
|
<span>Generate API Key</span> |
|
</button> |
|
<button class="w-full flex items-center justify-center space-x-2 p-3 rounded-lg border border-purple-500 text-purple-400 hover:bg-purple-900 transition"> |
|
<i class="fas fa-book"></i> |
|
<span>View Documentation</span> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="mt-8 pt-6 border-t border-gray-800"> |
|
<h3 class="text-sm font-medium text-gray-400 mb-3">NETWORK STATUS</h3> |
|
<div class="quantum-network mb-3" id="quantumNetwork"></div> |
|
<div class="flex justify-between items-center text-xs text-gray-400"> |
|
<span>Connected Tools: 12/12</span> |
|
<span>Bandwidth: 92%</span> |
|
</div> |
|
</div> |
|
</aside> |
|
|
|
|
|
<div class="lg:w-3/4"> |
|
|
|
<div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-6 command-center"> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> |
|
<div> |
|
<h2 class="title-font text-2xl gradient-text mb-2">Quantum Command Center</h2> |
|
<p class="text-gray-400">Centralized control for all Quantum Box tools and workflows</p> |
|
</div> |
|
<div class="mt-4 md:mt-0 flex space-x-3"> |
|
<button class="px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700 flex items-center space-x-2"> |
|
<i class="fas fa-save text-blue-400"></i> |
|
<span>Save Workspace</span> |
|
</button> |
|
<button class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90 flex items-center space-x-2"> |
|
<i class="fas fa-share-alt"></i> |
|
<span>Share</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<div class="relative"> |
|
<input type="text" placeholder="Enter Quantum Command (e.g., 'connect all tools', 'create workflow', 'analyze data')" |
|
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 pl-12 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 command-input"> |
|
<div class="absolute inset-y-0 left-0 flex items-center pl-4"> |
|
<i class="fas fa-terminal text-purple-400"></i> |
|
</div> |
|
<div class="absolute inset-y-0 right-0 flex items-center pr-4"> |
|
<span class="text-xs text-gray-400">Ctrl+Space</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
|
<button class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700 flex flex-col items-center"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center mb-2"> |
|
<i class="fas fa-link text-white"></i> |
|
</div> |
|
<span class="text-sm text-center">Connect Tools</span> |
|
</button> |
|
<button class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700 flex flex-col items-center"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center mb-2"> |
|
<i class="fas fa-project-diagram text-white"></i> |
|
</div> |
|
<span class="text-sm text-center">Create Workflow</span> |
|
</button> |
|
<button class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700 flex flex-col items-center"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center mb-2"> |
|
<i class="fas fa-brain text-white"></i> |
|
</div> |
|
<span class="text-sm text-center">AI Analysis</span> |
|
</button> |
|
<button class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700 flex flex-col items-center"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-600 to-red-500 flex items-center justify-center mb-2"> |
|
<i class="fas fa-bolt text-white"></i> |
|
</div> |
|
<span class="text-sm text-center">Quick Actions</span> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
<i class="fas fa-plug text-purple-400 mr-2"></i> |
|
Connected Tools Status |
|
</h3> |
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-center space-x-3"> |
|
<div class="relative"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-brain text-white text-sm"></i> |
|
</div> |
|
<div class="absolute top-0 right-0 w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> |
|
</div> |
|
<div> |
|
<p class="text-sm">Prompt Master</p> |
|
<p class="text-xs text-gray-400">Active</p> |
|
</div> |
|
</div> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-center space-x-3"> |
|
<div class="relative"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-calculator text-white text-sm"></i> |
|
</div> |
|
<div class="absolute top-0 right-0 w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> |
|
</div> |
|
<div> |
|
<p class="text-sm">ROI Calculator</p> |
|
<p class="text-xs text-gray-400">Active</p> |
|
</div> |
|
</div> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-center space-x-3"> |
|
<div class="relative"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center"> |
|
<i class="fas fa-database text-white text-sm"></i> |
|
</div> |
|
<div class="absolute top-0 right-0 w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> |
|
</div> |
|
<div> |
|
<p class="text-sm">Data Warehouse</p> |
|
<p class="text-xs text-gray-400">Active</p> |
|
</div> |
|
</div> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-center space-x-3"> |
|
<div class="relative"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-yellow-600 to-red-500 flex items-center justify-center"> |
|
<i class="fas fa-project-diagram text-white text-sm"></i> |
|
</div> |
|
<div class="absolute top-0 right-0 w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> |
|
</div> |
|
<div> |
|
<p class="text-sm">Workflow Automator</p> |
|
<p class="text-xs text-gray-400">Active</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
<i class="fas fa-history text-purple-400 mr-2"></i> |
|
Recent Activities |
|
</h3> |
|
<div class="space-y-3"> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-start space-x-3"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-link text-white text-sm"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm">Connected "Prompt Master" to "Workflow Automator"</p> |
|
<p class="text-xs text-gray-400">2 minutes ago</p> |
|
</div> |
|
</div> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-start space-x-3"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-cog text-white text-sm"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm">Updated ROI Calculator parameters</p> |
|
<p class="text-xs text-gray-400">15 minutes ago</p> |
|
</div> |
|
</div> |
|
<div class="p-3 rounded-lg bg-gray-800 border border-gray-700 flex items-start space-x-3"> |
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-share-alt text-white text-sm"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm">Shared workflow with team</p> |
|
<p class="text-xs text-gray-400">1 hour ago</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-6"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="title-font text-2xl gradient-text">Automation Workflows</h2> |
|
<button class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90 flex items-center space-x-2"> |
|
<i class="fas fa-plus"></i> |
|
<span>New Workflow</span> |
|
</button> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="workflow-card rounded-xl p-5"> |
|
<div class="flex justify-between items-start mb-4"> |
|
<div> |
|
<h3 class="font-medium text-lg mb-1">Prompt Optimization</h3> |
|
<p class="text-sm text-gray-400">Automatically refine prompts based on results</p> |
|
</div> |
|
<div class="flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> |
|
<i class="fas fa-play text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="flex items-center space-x-2 text-xs text-gray-400 mb-4"> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">AI</span> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Automation</span> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Optimization</span> |
|
</div> |
|
<div class="flex items-center justify-between text-sm"> |
|
<div class="flex items-center space-x-1 text-emerald-400"> |
|
<i class="fas fa-check-circle"></i> |
|
<span>Active</span> |
|
</div> |
|
<div class="text-gray-400"> |
|
<i class="fas fa-history mr-1"></i> |
|
<span>Runs daily</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="workflow-card rounded-xl p-5"> |
|
<div class="flex justify-between items-start mb-4"> |
|
<div> |
|
<h3 class="font-medium text-lg mb-1">ROI Analysis</h3> |
|
<p class="text-sm text-gray-400">Calculate ROI for all new prompts</p> |
|
</div> |
|
<div class="flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> |
|
<i class="fas fa-play text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="flex items-center space-x-2 text-xs text-gray-400 mb-4"> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Finance</span> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Analysis</span> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Automation</span> |
|
</div> |
|
<div class="flex items-center justify-between text-sm"> |
|
<div class="flex items-center space-x-1 text-emerald-400"> |
|
<i class="fas fa-check-circle"></i> |
|
<span>Active</span> |
|
</div> |
|
<div class="text-gray-400"> |
|
<i class="fas fa-history mr-1"></i> |
|
<span>On prompt save</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="workflow-card rounded-xl p-5"> |
|
<div class="flex justify-between items-start mb-4"> |
|
<div> |
|
<h3 class="font-medium text-lg mb-1">Knowledge Sync</h3> |
|
<p class="text-sm text-gray-400">Sync data across all connected tools</p> |
|
</div> |
|
<div class="flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> |
|
<i class="fas fa-play text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="flex items-center space-x-2 text-xs text-gray-400 mb-4"> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Sync</span> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Data</span> |
|
<span class="px-2 py-1 rounded-full bg-gray-800">Integration</span> |
|
</div> |
|
<div class="flex items-center justify-between text-sm"> |
|
<div class="flex items-center space-x-1 text-emerald-400"> |
|
<i class="fas fa-check-circle"></i> |
|
<span>Active</span> |
|
</div> |
|
<div class="text-gray-400"> |
|
<i class="fas fa-history mr-1"></i> |
|
<span>Every 15 min</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-gray-800 rounded-xl p-6 border border-purple-700"> |
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
<i class="fas fa-plus-circle text-purple-400 mr-2"></i> |
|
Create New Workflow |
|
</h3> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
<div class="col-span-2"> |
|
<div class="space-y-4"> |
|
|
|
<div class="automation-node p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-brain text-white"></i> |
|
</div> |
|
<div class="flex-1"> |
|
<h4 class="font-medium">Prompt Master</h4> |
|
<p class="text-sm text-gray-400">Generate new prompt</p> |
|
<div class="mt-2"> |
|
<select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"> |
|
<option>Select action</option> |
|
<option>Create prompt from template</option> |
|
<option>Optimize existing prompt</option> |
|
<option>Generate prompt from description</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flow-connector flex justify-center"> |
|
<div class="w-8 h-8 rounded-full bg-gray-700 border border-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-arrow-down text-purple-400"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="automation-node p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-calculator text-white"></i> |
|
</div> |
|
<div class="flex-1"> |
|
<h4 class="font-medium">ROI Calculator</h4> |
|
<p class="text-sm text-gray-400">Analyze prompt performance</p> |
|
<div class="mt-2"> |
|
<select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"> |
|
<option>Select action</option> |
|
<option>Calculate ROI for prompt</option> |
|
<option>Compare with previous versions</option> |
|
<option>Predict future performance</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flow-connector flex justify-center"> |
|
<div class="w-8 h-8 rounded-full bg-gray-700 border border-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-arrow-down text-purple-400"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="automation-node p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-database text-white"></i> |
|
</div> |
|
<div class="flex-1"> |
|
<h4 class="font-medium">Data Warehouse</h4> |
|
<p class="text-sm text-gray-400">Store results</p> |
|
<div class="mt-2"> |
|
<select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"> |
|
<option>Select action</option> |
|
<option>Save to prompt history</option> |
|
<option>Add to performance dashboard</option> |
|
<option>Create report</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<div class="bg-gray-700 rounded-lg p-4 mb-4"> |
|
<h4 class="font-medium mb-3">Workflow Settings</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<label class="block text-sm text-gray-300 mb-1">Workflow Name</label> |
|
<input type="text" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-sm"> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-gray-300 mb-1">Trigger</label> |
|
<select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-sm"> |
|
<option>Manual</option> |
|
<option>On prompt creation</option> |
|
<option>On prompt update</option> |
|
<option>Scheduled</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-gray-300 mb-1">Tags</label> |
|
<input type="text" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-sm" placeholder="Add tags..."> |
|
</div> |
|
</div> |
|
</div> |
|
<button class="w-full py-2 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90"> |
|
Save Workflow |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-6"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="title-font text-2xl gradient-text">Knowledge Graph</h2> |
|
<div class="flex space-x-3"> |
|
<button class="px-3 py-1 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700 flex items-center space-x-2"> |
|
<i class="fas fa-sync-alt"></i> |
|
<span>Refresh</span> |
|
</button> |
|
<button class="px-3 py-1 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90 flex items-center space-x-2"> |
|
<i class="fas fa-plus"></i> |
|
<span>Add Node</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="knowledge-graph mb-4" id="knowledgeGraph"></div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700"> |
|
<h4 class="font-medium mb-2 flex items-center"> |
|
<i class="fas fa-project-diagram text-purple-400 mr-2"></i> |
|
Connected Concepts |
|
</h4> |
|
<ul class="space-y-2 text-sm"> |
|
<li class="flex items-center space-x-2"> |
|
<div class="w-2 h-2 rounded-full bg-emerald-400"></div> |
|
<span>Prompt Engineering</span> |
|
</li> |
|
<li class="flex items-center space-x-2"> |
|
<div class="w-2 h-2 rounded-full bg-blue-400"></div> |
|
<span>ROI Calculation</span> |
|
</li> |
|
<li class="flex items-center space-x-2"> |
|
<div class="w-2 h-2 rounded-full bg-yellow-400"></div> |
|
<span>AI Optimization</span> |
|
</li> |
|
<li class="flex items-center space-x-2"> |
|
<div class="w-2 h-2 rounded-full bg-red-400"></div> |
|
<span>Workflow Automation</span> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700"> |
|
<h4 class="font-medium mb-2 flex items-center"> |
|
<i class="fas fa-lightbulb text-yellow-400 mr-2"></i> |
|
Insights |
|
</h4> |
|
<div class="text-sm space-y-3"> |
|
<p>Prompt length correlates with ROI up to 250 words, then plateaus.</p> |
|
<p>Questions perform 23% better than statements in your niche.</p> |
|
<p>Emotional triggers increase engagement by 17% on average.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700"> |
|
<h4 class="font-medium mb-2 flex items-center"> |
|
<i class="fas fa-bolt text-emerald-400 mr-2"></i> |
|
Quick Actions |
|
</h4> |
|
<div class="space-y-2"> |
|
<button class="w-full text-left px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-sm flex items-center space-x-2"> |
|
<i class="fas fa-chart-line text-blue-400"></i> |
|
<span>Create Performance Dashboard</span> |
|
</button> |
|
<button class="w-full text-left px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-sm flex items-center space-x-2"> |
|
<i class="fas fa-robot text-purple-400"></i> |
|
<span>Generate Optimized Prompt</span> |
|
</button> |
|
<button class="w-full text-left px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-sm flex items-center space-x-2"> |
|
<i class="fas fa-calculator text-emerald-400"></i> |
|
<span>Predict ROI for New Prompt</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-6"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="title-font text-2xl gradient-text">Quantum Learning Hub</h2> |
|
<button class="px-3 py-1 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90 flex items-center space-x-2"> |
|
<i class="fas fa-plus"></i> |
|
<span>New Learning Path</span> |
|
</button> |
|
</div> |
|
|
|
<div class="learning-path space-y-6 pl-8"> |
|
|
|
<div class="relative"> |
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-graduation-cap text-white"></i> |
|
</div> |
|
<div class="ml-12"> |
|
<h3 class="font-medium text-lg mb-2">Prompt Engineering Mastery</h3> |
|
<p class="text-sm text-gray-400 mb-3">Master the art and science of crafting effective AI prompts</p> |
|
<div class="flex items-center space-x-4 text-sm"> |
|
<span class="flex items-center space-x-1 text-emerald-400"> |
|
<i class="fas fa-check-circle"></i> |
|
<span>5/8 completed</span> |
|
</span> |
|
<span class="text-gray-400">62%</span> |
|
</div> |
|
<div class="w-full bg-gray-800 rounded-full h-2 mt-2"> |
|
<div class="bg-gradient-to-r from-purple-600 to-blue-500 h-2 rounded-full" style="width: 62%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-calculator text-white"></i> |
|
</div> |
|
<div class="ml-12"> |
|
<h3 class="font-medium text-lg mb-2">ROI Analysis Fundamentals</h3> |
|
<p class="text-sm text-gray-400 mb-3">Learn to measure and optimize your AI investments</p> |
|
<div class="flex items-center space-x-4 text-sm"> |
|
<span class="flex items-center space-x-1 text-emerald-400"> |
|
<i class="fas fa-check-circle"></i> |
|
<span>2/6 completed</span> |
|
</span> |
|
<span class="text-gray-400">33%</span> |
|
</div> |
|
<div class="w-full bg-gray-800 rounded-full h-2 mt-2"> |
|
<div class="bg-gradient-to-r from-emerald-600 to-blue-500 h-2 rounded-full" style="width: 33%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center"> |
|
<i class="fas fa-project-diagram text-white"></i> |
|
</div> |
|
<div class="ml-12"> |
|
<h3 class="font-medium text-lg mb-2">Workflow Automation</h3> |
|
<p class="text-sm text-gray-400 mb-3">Connect tools and automate repetitive tasks</p> |
|
<div class="flex items-center space-x-4 text-sm"> |
|
<span class="flex items-center space-x-1 text-yellow-400"> |
|
<i class="fas fa-exclamation-circle"></i> |
|
<span>Not started</span> |
|
</span> |
|
<span class="text-gray-400">0%</span> |
|
</div> |
|
<div class="w-full bg-gray-800 rounded-full h-2 mt-2"> |
|
<div class="bg-gradient-to-r from-blue-600 to-purple-500 h-2 rounded-full" style="width: 0%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
<i class="fas fa-star text-yellow-400 mr-2"></i> |
|
Recommended Resources |
|
</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-video text-white"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Advanced Prompt Techniques</h4> |
|
<p class="text-sm text-gray-400">23 min video tutorial</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-book text-white"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">ROI Case Studies</h4> |
|
<p class="text-sm text-gray-400">5 real-world examples</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-file-code text-white"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Workflow Templates</h4> |
|
<p class="text-sm text-gray-400">Ready-to-use automations</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 border border-gray-800"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="title-font text-2xl gradient-text">Collaboration Hub</h2> |
|
<button class="px-3 py-1 rounded-lg bg-gradient-to-r from-purple-600 to-emerald-500 hover:opacity-90 flex items-center space-x-2"> |
|
<i class="fas fa-plus"></i> |
|
<span>New Discussion</span> |
|
</button> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
|
<div> |
|
<h3 class="font-medium mb-4 flex items-center"> |
|
<i class="fas fa-comments text-purple-400 mr-2"></i> |
|
Active Discussions |
|
</h3> |
|
<div class="space-y-4"> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">JD</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Prompt Optimization Techniques</h4> |
|
<p class="text-sm text-gray-400 mb-2">What's working best for everyone in prompt engineering?</p> |
|
<div class="flex items-center space-x-4 text-xs text-gray-400"> |
|
<span><i class="fas fa-comment mr-1"></i> 12 replies</span> |
|
<span><i class="fas fa-eye mr-1"></i> 45 views</span> |
|
<span>Last reply: 2h ago</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">AM</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">ROI Calculation Formulas</h4> |
|
<p class="text-sm text-gray-400 mb-2">Sharing my custom ROI formula that increased accuracy by 18%</p> |
|
<div class="flex items-center space-x-4 text-xs text-gray-400"> |
|
<span><i class="fas fa-comment mr-1"></i> 7 replies</span> |
|
<span><i class="fas fa-eye mr-1"></i> 32 views</span> |
|
<span>Last reply: 5h ago</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-start space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">TK</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Workflow Automation Tips</h4> |
|
<p class="text-sm text-gray-400 mb-2">How are you automating your prompt testing workflows?</p> |
|
<div class="flex items-center space-x-4 text-xs text-gray-400"> |
|
<span><i class="fas fa-comment mr-1"></i> 9 replies</span> |
|
<span><i class="fas fa-eye mr-1"></i> 28 views</span> |
|
<span>Last reply: 1d ago</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="font-medium mb-4 flex items-center"> |
|
<i class="fas fa-users text-emerald-400 mr-2"></i> |
|
Team Members |
|
</h3> |
|
<div class="space-y-4"> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">JD</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">John Doe</h4> |
|
<p class="text-sm text-gray-400">Prompt Engineer</p> |
|
</div> |
|
<div class="ml-auto flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-comment text-blue-400"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-tasks text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">AM</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Alice Miller</h4> |
|
<p class="text-sm text-gray-400">Data Analyst</p> |
|
</div> |
|
<div class="ml-auto flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-comment text-blue-400"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-tasks text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">TK</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Tom King</h4> |
|
<p class="text-sm text-gray-400">Automation Specialist</p> |
|
</div> |
|
<div class="ml-auto flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-comment text-blue-400"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-tasks text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="collaboration-bubble p-4"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-600 to-red-500 flex items-center justify-center flex-shrink-0"> |
|
<span class="text-white text-sm">SG</span> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Sarah Green</h4> |
|
<p class="text-sm text-gray-400">AI Trainer</p> |
|
</div> |
|
<div class="ml-auto flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-comment text-blue-400"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-tasks text-emerald-400"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-gray-800 rounded-lg p-4 border border-blue-700"> |
|
<h3 class="font-medium mb-3 flex items-center"> |
|
<i class="fas fa-edit text-blue-400 mr-2"></i> |
|
Start New Discussion |
|
</h3> |
|
<div class="space-y-4"> |
|
<div> |
|
<input type="text" placeholder="Discussion Title" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"> |
|
</div> |
|
<div> |
|
<textarea placeholder="What would you like to discuss?" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white h-24"></textarea> |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-paperclip text-gray-400"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-code text-gray-400"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
<i class="fas fa-chart-line text-gray-400"></i> |
|
</button> |
|
</div> |
|
<button class="px-4 py-2 rounded-lg bg-gradient-to-r from-blue-600 to-purple-500 hover:opacity-90"> |
|
Post Discussion |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
|
|
<div class="ai-assistant-bubble" id="aiAssistantBubble"> |
|
<i class="fas fa-robot text-white"></i> |
|
</div> |
|
|
|
|
|
<div class="ai-assistant-panel" id="aiAssistantPanel"> |
|
<div class="ai-assistant-header"> |
|
<h3 class="text-sm font-medium text-white">Quantum AI Assistant</h3> |
|
<button class="text-gray-300 hover:text-white" id="closeAIPanel"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<div class="ai-assistant-body"> |
|
<div class="ai-message"> |
|
<p class="text-sm">Hello! I'm your Quantum AI Assistant. How can I help you with your Quantum Box tools today?</p> |
|
</div> |
|
<div class="user-message"> |
|
<p class="text-sm">How can I create a workflow between Prompt Master and ROI Calculator?</p> |
|
</div> |
|
<div class="ai-message"> |
|
<p class="text-sm">To create a workflow:</p> |
|
<ol class="text-sm list-decimal list-inside mt-2 space-y-1"> |
|
<li>Go to Automation Workflows</li> |
|
<li>Click "New Workflow"</li> |
|
<li>Add Prompt Master as first step</li> |
|
<li>Connect ROI Calculator as second step</li> |
|
<li>Configure triggers and save</li> |
|
</ol> |
|
<p class="text-sm mt-2">Would you like me to create this workflow for you?</p> |
|
</div> |
|
</div> |
|
<div class="ai-message-input"> |
|
<input type="text" placeholder="Ask me anything..." class="flex-1 bg-gray-700 rounded-l-lg px-3 py-2 text-white focus:outline-none"> |
|
<button class="bg-purple-600 hover:bg-purple-700 rounded-r-lg px-3 py-2 text-white"> |
|
<i class="fas fa-paper-plane"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="floating-toolbar"> |
|
<div class="flex space-x-3"> |
|
<button class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-600 to-emerald-500 flex items-center justify-center text-white shadow-lg hover:opacity-90 transition"> |
|
<i class="fas fa-plus"></i> |
|
</button> |
|
<button class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-500 flex items-center justify-center text-white shadow-lg hover:opacity-90 transition"> |
|
<i class="fas fa-share-alt"></i> |
|
</button> |
|
<button class="w-12 h-12 rounded-full bg-gradient-to-r from-emerald-600 to-blue-500 flex items-center justify-center text-white shadow-lg hover:opacity-90 transition relative" id="contextMenuButton"> |
|
<i class="fas fa-ellipsis-v"></i> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="context-menu" id="contextMenu"> |
|
<div class="context-menu-item"> |
|
<i class="fas fa-cog text-purple-400 |
|
</html> |
