File size: 8,268 Bytes
ffe653b 8b67734 ffe653b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Started with VAI</title>
<link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
.glass-panel {
backdrop-filter: blur(16px);
background: rgba(16, 21, 27, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.progress-step {
width: 2rem;
height: 2rem;
border: 2px solid #3FF28C;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #3FF28C;
font-weight: bold;
}
.progress-step.completed {
background-color: #3FF28C;
color: #10151B;
}
.progress-step.active {
background-color: rgba(63, 242, 140, 0.2);
}
.progress-connector {
height: 2px;
background-color: rgba(255, 255, 255, 0.1);
flex-grow: 1;
margin: 0 0.5rem;
}
.progress-connector.completed {
background-color: #3FF28C;
}
</style>
</head>
<body class="bg-dark-900 text-gray-200 font-sans min-h-screen flex items-center justify-center">
<div class="container mx-auto px-4 max-w-3xl">
<!-- Progress Steps -->
<div class="flex items-center justify-between mb-12">
<div class="flex items-center">
<div class="progress-step completed">1</div>
<div class="progress-connector completed"></div>
<div class="progress-step active">2</div>
<div class="progress-connector"></div>
<div class="progress-step">3</div>
</div>
</div>
<!-- Main Card -->
<div class="glass-panel rounded-2xl p-8">
<h2 class="text-3xl font-bold mb-6 text-center">What would you like to automate?</h2>
<p class="text-gray-400 mb-8 text-center">VAI can handle repetitive tasks, manage communications, analyze data, and more. Let's start with something simple.</p>
<!-- Automation Options -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
<div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-primary-500/20 flex items-center justify-center mr-3">
<i data-feather="mail" class="text-primary-500"></i>
</div>
<h3 class="font-medium">Email Management</h3>
</div>
<p class="text-sm text-gray-400">Sort, prioritize, and respond to emails automatically</p>
</div>
<div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
<i data-feather="calendar" class="text-purple-500"></i>
</div>
<h3 class="font-medium">Meeting Scheduling</h3>
</div>
<p class="text-sm text-gray-400">Coordinate calendars and schedule meetings</p>
</div>
<div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-blue-400/20 flex items-center justify-center mr-3">
<i data-feather="trending-up" class="text-blue-400"></i>
</div>
<h3 class="font-medium">Data Analysis</h3>
</div>
<p class="text-sm text-gray-400">Process and visualize your data automatically</p>
</div>
<div class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg cursor-pointer transition">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3">
<i data-feather="clipboard" class="text-yellow-500"></i>
</div>
<h3 class="font-medium">Task Management</h3>
</div>
<p class="text-sm text-gray-400">Organize and prioritize your to-do list</p>
</div>
</div>
<!-- Custom Prompt -->
<div class="mb-6">
<label class="block text-sm font-medium mb-2">Or describe what you'd like to automate:</label>
<textarea class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-1 focus:ring-primary-500" rows="3" placeholder="e.g. Summarize all my meeting notes and extract action items"></textarea>
</div>
<!-- ChatGPT Script -->
<div class="mb-8">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-medium">Quick Start: Try this in ChatGPT</label>
<button class="text-xs bg-primary-500/10 text-primary-500 px-2 py-1 rounded" onclick="copyScript()">
<i data-feather="copy" class="w-3 h-3 mr-1 inline"></i> Copy
</button>
</div>
<div class="bg-dark-800 p-4 rounded-lg border border-gray-700">
<code class="text-sm text-gray-300">
"I have a project folder with multiple chat transcripts. Please analyze all conversations and provide:
<br>1. Key discussion points summarized
<br>2. Action items with owners
<br>3. Important decisions made
<br>4. Next steps with deadlines"
</code>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex justify-between">
<button class="px-6 py-2 border border-gray-600 text-gray-300 hover:bg-gray-800 rounded-lg transition" onclick="window.location.href='index.html'">
Skip for now
</button>
<button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 font-medium rounded-lg transition flex items-center" onclick="window.location.href='agents.html'">
Continue to Dashboard
<i data-feather="arrow-right" class="ml-2"></i>
</button>
</div>
</div>
</div>
<script>
feather.replace();
function copyScript() {
const script = `"I have a project folder with multiple chat transcripts. Please analyze all conversations and provide:
1. Key discussion points summarized
2. Action items with owners
3. Important decisions made
4. Next steps with deadlines"`;
navigator.clipboard.writeText(script);
// Show copied notification
const btn = event.target.closest('button');
if (btn) {
const originalHtml = btn.innerHTML;
btn.innerHTML = '<i data-feather="check" class="w-3 h-3 mr-1 inline"></i> Copied';
feather.replace();
setTimeout(() => {
btn.innerHTML = originalHtml;
feather.replace();
}, 2000);
}
}
</script>
</body>
</html> |