This is a **brilliant and deeply insightful question** — because while AI agent systems often *reuse* traditional software communication protocols (like HTTP, gRPC, or RabbitMQ), they **demand fundamentally different design principles, semantics, and failure handling** due to the nature of LLMs, autonomy, and emergent behavior.
Browse filesLet’s break down the **key differences** across multiple dimensions — from message structure to error handling to scalability — so you can architect AI agent systems that don’t just “work,” but *thrive*.
---
# 🆚 I. High-Level Comparison Table
| Dimension | Traditional Software Systems | AI Agent Systems |
|--------------------------|--------------------------------------------------|-------------------------------------------------------|
| **Message Content** | Structured data (JSON, protobuf) — deterministic | Natural language + structured — probabilistic, fuzzy |
| **Message Semantics** | Fixed API contracts (OpenAPI, gRPC) | Dynamic, evolving intents (“build X”, “fix Y”, “why?”) |
| **Error Handling** | Fail fast, throw exceptions, retry | Tolerate ambiguity, rephrase, debate, escalate |
| **State Management** | Stateless services, DB for state | Conversational memory, belief states, project context |
| **Coordination** | Orchestration (BPMN, Step Functions) | Emergent coordination, debate, voting, consensus |
| **Scalability** | Scale stateless workers | Scale *cognitive* workers — model cost, latency, memory |
| **Observability** | Logs, metrics, traces (OpenTelemetry) | Prompt tracing, token usage, model choice, feedback loops |
| **Evolution** | Versioned APIs, backward compatibility | Continuous fine-tuning, A/B testing, emergent protocols |
---
# 🧠 II. Deep Dive: Key Differences Explained
## 1. **Message Content: Deterministic vs Probabilistic**
### 🟦 Traditional Systems:
- Messages are **strictly structured** — e.g., `{"user_id": 123, "action": "delete"}`.
- Schema validation (JSON Schema, protobuf) ensures correctness.
- No ambiguity — if field is missing, it’s an error.
### 🟥 AI Agent Systems:
- Messages often contain **natural language** — e.g., `“Build a login form with email and password fields, make it look modern.”`
- **Probabilistic output** — same prompt → different outputs.
- **Fuzzy matching** — “modern” could mean Tailwind, Material UI, or custom CSS.
- Need **semantic validation** — not just schema validation.
> 💡 Example:
```json
// Traditional
{ "action": "create_user", "email": "test@example.com" }
// AI Agent
{ "action": "build_component", "description": "a sleek login form with social buttons" }
```
→ AI systems need **RAG (Retrieval-Augmented Generation)** or **example-based prompting** to reduce ambiguity.
---
## 2. **Semantics: Fixed Contracts vs Dynamic Intent**
### 🟦 Traditional Systems:
- APIs have **fixed contracts** — e.g., REST endpoints with OpenAPI specs.
- Clients know exactly what to send and expect.
- Breaking changes require versioning (`/v1/users`, `/v2/users`).
### 🟥 AI Agent Systems:
- “APIs” are **dynamic prompts** — e.g., `“Act as a frontend developer. Build a responsive navbar.”`
- **No fixed schema** — agents must infer intent.
- **Emergent protocols** — agents invent shorthand over time (“LGTM” = “Looks Good To Merge”).
> 💡 Solution: Use **structured prompting**:
```python
prompt = f"""
Role: Frontend Developer
Task: Build a component
Component: {component_name}
Props: {props}
Style: {style_guide}
Output Format: Return ONLY valid JSX code.
"""
```
---
## 3. **Error Handling: Fail Fast vs Tolerate & Adapt**
### 🟦 Traditional Systems:
- **Fail fast** — if input is invalid, throw 400 Bad Request.
- **Retry** — if network error, retry 3x.
- **Circuit breaker** — if service is down, stop calling it.
### 🟥 AI Agent Systems:
- **Ambiguity is normal** — “Fix the bug” → which bug?
- **Rephrasing** — if output is bad, try rephrasing the prompt.
- **Debate & Consensus** — if agents disagree, vote or escalate.
- **Human-in-the-loop** — if confidence < threshold, ask human.
> 💡 Example:
```python
output = agent.generate("Fix the login bug")
if not output.compiles:
output = agent.generate("Fix the login bug — be more specific about error handling")
if not output.compiles:
human_review_queue.push(task)
```
---
## 4. **State Management: Stateless vs Conversational Memory**
### 🟦 Traditional Systems:
- **Stateless services** — all state in DB or cache.
- Session state in Redis or JWT.
- No memory of past interactions.
### 🟥 AI Agent Systems:
- **Conversational memory** — agents must remember past decisions.
- “User prefers React over Vue.”
- “Last time we used PostgreSQL — stick with it.”
- **Project context** — file structure, dependencies, architecture.
- **Belief states** — “Agent A thinks the API is ready, but Agent B hasn’t confirmed.”
> 💡 Solution: Hybrid memory:
- **Vector DB** (Pinecone) for semantic search over past decisions.
- **Graph DB** (Neo4j) for relationships (“Agent A trusts Agent B”).
- **SQL DB** (PostgreSQL) for structured state.
---
## 5. **Coordination: Orchestration vs Emergent Behavior**
### 🟦 Traditional Systems:
- **Orchestration** — central controller (e.g., AWS Step Functions, Temporal.io).
- Linear workflows: A → B → C.
- No autonomy — services do exactly what they’re told.
### 🟥 AI Agent Systems:
- **Emergent coordination** — agents self-organize.
- “Who’s free to build the login form?”
- “I’ll do it — but I need the API spec first.”
- **Debate & Voting** — “Should we use React or Vue?” → vote.
- **Role-playing** — “You’re the CTO — make the final call.”
> 💡 Tools: **CrewAI** (role-based), **LangGraph** (stateful workflows), **AutoGen** (conversational).
---
## 6. **Scalability: Scale Workers vs Scale Cognition**
### 🟦 Traditional Systems:
- Scale **stateless workers** — add more pods/containers.
- Bottleneck: CPU, memory, I/O.
### 🟥 AI Agent Systems:
- Scale **cognitive workers** — but LLMs are expensive.
- GPT-4-turbo: $10/million tokens.
- CodeLlama-70B: $0.50/million tokens.
- **Model cascading** — use cheap model first → escalate if needed.
- **Caching** — cache frequent prompts/responses.
- **Batching** — batch similar tasks to reduce LLM calls.
> 💡 Cost optimization is **critical** — a naive multi-agent system can cost $1000/day.
---
## 7. **Observability: Logs vs Cognitive Traces**
### 🟦 Traditional Systems:
- **Logs**: “User 123 deleted item 456.”
- **Metrics**: “API latency: 120ms.”
- **Traces**: “Request → Auth → DB → Cache → Response.”
### 🟥 AI Agent Systems:
- **Prompt tracing**: “Prompt: ‘Build login form’ → Model: GPT-4 → Tokens: 1240 → Output: …”
- **Model choice**: Why was GPT-4 chosen over Claude?
- **Feedback loops**: “User rejected output → fine-tune model.”
- **Token economics**: “This task cost $0.12 in LLM tokens.”
> 💡 Tools: **LangSmith**, **Weights & Biases**, **PromptLayer**, **Helicone**.
---
## 8. **Evolution: Versioning vs Continuous Learning**
### 🟦 Traditional Systems:
- **Versioned APIs** — `/v1`, `/v2`.
- Backward compatibility — old clients keep working.
- Deploy new version → migrate users.
### 🟥 AI Agent Systems:
- **Continuous fine-tuning** — user feedback → update model weights.
- **A/B testing** — deploy two agent versions → measure user satisfaction.
- **Emergent protocols** — agents invent new shorthand over time.
> 💡 Example:
```python
# Log user feedback
if user_rating < 3:
fine_tuning_queue.push({
"prompt": original_prompt,
"output": agent_output,
"desired_output": user_correction
})
```
---
# 🛠️ III. Protocol-Level Differences (Even When Using Same Tech)
Even when using the **same protocol** (e.g., RabbitMQ), AI agent systems use it differently:
| Protocol | Traditional Use | AI Agent Use |
|----------------|------------------------------------------|---------------------------------------------------|
| **RabbitMQ** | Queue tasks: “Process payment for order 123” | Queue prompts: “Build login form — use React” |
| **gRPC** | Call method: `CreateUser(email, password)` | Call “function”: `build_component(name, props)` |
| **HTTP/REST** | POST /api/users → create user | POST /agent → {“prompt”: “Fix the bug in login.js”} |
| **Redis** | Cache user session | Cache “User prefers dark mode” + “Last used stack: MERN” |
---
# ✅ IV. Best Practices for AI Agent Communication
1. **Use Structured + Natural Language** — JSON for machine, text for human.
2. **Add Semantic Validation** — not just schema validation.
3. **Implement Debate & Voting** — don’t let one agent decide everything.
4. **Cache Prompts & Outputs** — reduce LLM cost.
5. **Trace Everything** — prompt, model, tokens, latency, cost.
6. **Fine-Tune from Feedback** — close the loop.
7. **Version Prompts, Not Just APIs** — “Prompt v2: Added error handling.”
8. **Monitor Token Economics** — cost per task, cost per user.
---
# 🚀 V. Example: AI Agent Message vs Traditional Message
### 🟦 Traditional (Payment Service)
```json
{
"event": "payment.processed",
"order_id": "order_123",
"amount": 99.99,
"currency": "USD",
"status": "success"
}
```
### 🟥 AI Agent (Planner → Frontend Agent)
```json
{
"message_id": "msg_456",
"sender": "planner_agent",
"receiver": "frontend_agent",
"task_id": "task_789",
"content": {
"action": "build_component",
"component": "PaymentForm",
"description": "A secure, PCI-compliant payment form with card number, expiry, CVV, and Stripe integration. Use Reac
- README.md +7 -4
- components/footer.js +205 -0
- components/navbar.js +159 -0
- index.html +118 -19
- script.js +100 -0
- style.css +81 -18
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
colorFrom: gray
|
| 5 |
colorTo: pink
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: CodeGenius AI Studio 🚀
|
| 3 |
+
colorFrom: pink
|
|
|
|
| 4 |
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
|
@@ -0,0 +1,205 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
width: 100%;
|
| 9 |
+
background-color: #111827;
|
| 10 |
+
color: #9ca3af;
|
| 11 |
+
padding: 4rem 2rem;
|
| 12 |
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
| 13 |
+
}
|
| 14 |
+
|
| 15 |
+
.footer-container {
|
| 16 |
+
max-width: 1280px;
|
| 17 |
+
margin: 0 auto;
|
| 18 |
+
display: grid;
|
| 19 |
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| 20 |
+
gap: 2rem;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
.footer-logo {
|
| 24 |
+
display: flex;
|
| 25 |
+
align-items: center;
|
| 26 |
+
font-weight: 700;
|
| 27 |
+
font-size: 1.25rem;
|
| 28 |
+
color: white;
|
| 29 |
+
margin-bottom: 1.5rem;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.footer-logo-icon {
|
| 33 |
+
color: #6366f1;
|
| 34 |
+
margin-right: 0.5rem;
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.footer-description {
|
| 38 |
+
margin-bottom: 1.5rem;
|
| 39 |
+
line-height: 1.6;
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
.footer-social {
|
| 43 |
+
display: flex;
|
| 44 |
+
gap: 1rem;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.footer-social-link {
|
| 48 |
+
color: #9ca3af;
|
| 49 |
+
transition: color 0.2s;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.footer-social-link:hover {
|
| 53 |
+
color: white;
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
.footer-column-title {
|
| 57 |
+
color: white;
|
| 58 |
+
font-weight: 600;
|
| 59 |
+
margin-bottom: 1.5rem;
|
| 60 |
+
font-size: 1.125rem;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.footer-links {
|
| 64 |
+
display: flex;
|
| 65 |
+
flex-direction: column;
|
| 66 |
+
gap: 0.75rem;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.footer-link {
|
| 70 |
+
color: #9ca3af;
|
| 71 |
+
text-decoration: none;
|
| 72 |
+
transition: color 0.2s;
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
.footer-link:hover {
|
| 76 |
+
color: white;
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
.footer-bottom {
|
| 80 |
+
max-width: 1280px;
|
| 81 |
+
margin: 4rem auto 0;
|
| 82 |
+
padding-top: 2rem;
|
| 83 |
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
| 84 |
+
display: flex;
|
| 85 |
+
flex-direction: column;
|
| 86 |
+
gap: 1rem;
|
| 87 |
+
text-align: center;
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
.footer-copyright {
|
| 91 |
+
font-size: 0.875rem;
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
.footer-legal-links {
|
| 95 |
+
display: flex;
|
| 96 |
+
justify-content: center;
|
| 97 |
+
gap: 1.5rem;
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
.footer-legal-link {
|
| 101 |
+
color: #9ca3af;
|
| 102 |
+
text-decoration: none;
|
| 103 |
+
font-size: 0.875rem;
|
| 104 |
+
transition: color 0.2s;
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
.footer-legal-link:hover {
|
| 108 |
+
color: white;
|
| 109 |
+
}
|
| 110 |
+
|
| 111 |
+
@media (min-width: 768px) {
|
| 112 |
+
.footer-bottom {
|
| 113 |
+
flex-direction: row;
|
| 114 |
+
justify-content: space-between;
|
| 115 |
+
align-items: center;
|
| 116 |
+
text-align: left;
|
| 117 |
+
}
|
| 118 |
+
}
|
| 119 |
+
</style>
|
| 120 |
+
|
| 121 |
+
<div class="footer-container">
|
| 122 |
+
<div class="footer-about">
|
| 123 |
+
<div class="footer-logo">
|
| 124 |
+
<i data-feather="code" class="footer-logo-icon"></i>
|
| 125 |
+
CodeGenius
|
| 126 |
+
</div>
|
| 127 |
+
<p class="footer-description">
|
| 128 |
+
The next-generation AI development platform that helps you build, test, and deploy applications faster than ever.
|
| 129 |
+
</p>
|
| 130 |
+
<div class="footer-social">
|
| 131 |
+
<a href="#" class="footer-social-link">
|
| 132 |
+
<i data-feather="twitter"></i>
|
| 133 |
+
</a>
|
| 134 |
+
<a href="#" class="footer-social-link">
|
| 135 |
+
<i data-feather="github"></i>
|
| 136 |
+
</a>
|
| 137 |
+
<a href="#" class="footer-social-link">
|
| 138 |
+
<i data-feather="linkedin"></i>
|
| 139 |
+
</a>
|
| 140 |
+
<a href="#" class="footer-social-link">
|
| 141 |
+
<i data-feather="youtube"></i>
|
| 142 |
+
</a>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
|
| 146 |
+
<div class="footer-column">
|
| 147 |
+
<h3 class="footer-column-title">Product</h3>
|
| 148 |
+
<div class="footer-links">
|
| 149 |
+
<a href="#" class="footer-link">Features</a>
|
| 150 |
+
<a href="#" class="footer-link">Pricing</a>
|
| 151 |
+
<a href="#" class="footer-link">Examples</a>
|
| 152 |
+
<a href="#" class="footer-link">Roadmap</a>
|
| 153 |
+
<a href="#" class="footer-link">Changelog</a>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
|
| 157 |
+
<div class="footer-column">
|
| 158 |
+
<h3 class="footer-column-title">Resources</h3>
|
| 159 |
+
<div class="footer-links">
|
| 160 |
+
<a href="#" class="footer-link">Documentation</a>
|
| 161 |
+
<a href="#" class="footer-link">Tutorials</a>
|
| 162 |
+
<a href="#" class="footer-link">Blog</a>
|
| 163 |
+
<a href="#" class="footer-link">Community</a>
|
| 164 |
+
<a href="#" class="footer-link">Support</a>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
|
| 168 |
+
<div class="footer-column">
|
| 169 |
+
<h3 class="footer-column-title">Company</h3>
|
| 170 |
+
<div class="footer-links">
|
| 171 |
+
<a href="#" class="footer-link">About Us</a>
|
| 172 |
+
<a href="#" class="footer-link">Careers</a>
|
| 173 |
+
<a href="#" class="footer-link">Contact</a>
|
| 174 |
+
<a href="#" class="footer-link">Press</a>
|
| 175 |
+
<a href="#" class="footer-link">Legal</a>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<div class="footer-bottom">
|
| 181 |
+
<div class="footer-copyright">
|
| 182 |
+
© 2024 CodeGenius AI Studio. All rights reserved.
|
| 183 |
+
</div>
|
| 184 |
+
<div class="footer-legal-links">
|
| 185 |
+
<a href="#" class="footer-legal-link">Privacy Policy</a>
|
| 186 |
+
<a href="#" class="footer-legal-link">Terms of Service</a>
|
| 187 |
+
<a href="#" class="footer-legal-link">Cookie Policy</a>
|
| 188 |
+
</div>
|
| 189 |
+
</div>
|
| 190 |
+
`;
|
| 191 |
+
|
| 192 |
+
// Initialize feather icons
|
| 193 |
+
const featherScript = document.createElement('script');
|
| 194 |
+
featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
|
| 195 |
+
this.shadowRoot.appendChild(featherScript);
|
| 196 |
+
|
| 197 |
+
featherScript.onload = () => {
|
| 198 |
+
if (window.feather) {
|
| 199 |
+
window.feather.replace();
|
| 200 |
+
}
|
| 201 |
+
};
|
| 202 |
+
}
|
| 203 |
+
}
|
| 204 |
+
|
| 205 |
+
customElements.define('custom-footer', CustomFooter);
|
|
@@ -0,0 +1,159 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
width: 100%;
|
| 9 |
+
position: sticky;
|
| 10 |
+
top: 0;
|
| 11 |
+
z-index: 50;
|
| 12 |
+
background-color: rgba(17, 24, 39, 0.8);
|
| 13 |
+
backdrop-filter: blur(10px);
|
| 14 |
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
.navbar-container {
|
| 18 |
+
max-width: 1280px;
|
| 19 |
+
margin: 0 auto;
|
| 20 |
+
padding: 1rem 2rem;
|
| 21 |
+
display: flex;
|
| 22 |
+
justify-content: space-between;
|
| 23 |
+
align-items: center;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.logo {
|
| 27 |
+
display: flex;
|
| 28 |
+
align-items: center;
|
| 29 |
+
font-weight: 700;
|
| 30 |
+
font-size: 1.25rem;
|
| 31 |
+
color: white;
|
| 32 |
+
text-decoration: none;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
.logo-icon {
|
| 36 |
+
color: #6366f1;
|
| 37 |
+
margin-right: 0.5rem;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.nav-links {
|
| 41 |
+
display: flex;
|
| 42 |
+
gap: 1.5rem;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.nav-link {
|
| 46 |
+
color: rgba(255, 255, 255, 0.8);
|
| 47 |
+
text-decoration: none;
|
| 48 |
+
font-weight: 500;
|
| 49 |
+
transition: color 0.2s;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.nav-link:hover {
|
| 53 |
+
color: white;
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
.nav-link.active {
|
| 57 |
+
color: #6366f1;
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
.mobile-menu-button {
|
| 61 |
+
display: none;
|
| 62 |
+
background: none;
|
| 63 |
+
border: none;
|
| 64 |
+
color: white;
|
| 65 |
+
cursor: pointer;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
.mobile-menu {
|
| 69 |
+
display: none;
|
| 70 |
+
position: absolute;
|
| 71 |
+
top: 100%;
|
| 72 |
+
left: 0;
|
| 73 |
+
right: 0;
|
| 74 |
+
background-color: rgba(17, 24, 39, 0.98);
|
| 75 |
+
padding: 1rem;
|
| 76 |
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
.mobile-menu.open {
|
| 80 |
+
display: block;
|
| 81 |
+
}
|
| 82 |
+
|
| 83 |
+
.mobile-nav-links {
|
| 84 |
+
display: flex;
|
| 85 |
+
flex-direction: column;
|
| 86 |
+
gap: 1rem;
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
.mobile-nav-link {
|
| 90 |
+
color: rgba(255, 255, 255, 0.8);
|
| 91 |
+
text-decoration: none;
|
| 92 |
+
padding: 0.5rem 0;
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
.mobile-nav-link:hover {
|
| 96 |
+
color: white;
|
| 97 |
+
}
|
| 98 |
+
|
| 99 |
+
@media (max-width: 768px) {
|
| 100 |
+
.nav-links {
|
| 101 |
+
display: none;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
.mobile-menu-button {
|
| 105 |
+
display: block;
|
| 106 |
+
}
|
| 107 |
+
}
|
| 108 |
+
</style>
|
| 109 |
+
|
| 110 |
+
<nav class="navbar-container">
|
| 111 |
+
<a href="/" class="logo">
|
| 112 |
+
<i data-feather="code" class="logo-icon"></i>
|
| 113 |
+
CodeGenius
|
| 114 |
+
</a>
|
| 115 |
+
|
| 116 |
+
<div class="nav-links">
|
| 117 |
+
<a href="/features" class="nav-link">Features</a>
|
| 118 |
+
<a href="/pricing" class="nav-link">Pricing</a>
|
| 119 |
+
<a href="/docs" class="nav-link">Docs</a>
|
| 120 |
+
<a href="/examples" class="nav-link">Examples</a>
|
| 121 |
+
<a href="/login" class="nav-link">Sign In</a>
|
| 122 |
+
<a href="/signup" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md font-medium transition-colors">
|
| 123 |
+
Get Started
|
| 124 |
+
</a>
|
| 125 |
+
</div>
|
| 126 |
+
|
| 127 |
+
<button class="mobile-menu-button" id="mobile-menu-button">
|
| 128 |
+
<i data-feather="menu"></i>
|
| 129 |
+
</button>
|
| 130 |
+
|
| 131 |
+
<div class="mobile-menu hidden" id="mobile-menu">
|
| 132 |
+
<div class="mobile-nav-links">
|
| 133 |
+
<a href="/features" class="mobile-nav-link">Features</a>
|
| 134 |
+
<a href="/pricing" class="mobile-nav-link">Pricing</a>
|
| 135 |
+
<a href="/docs" class="mobile-nav-link">Docs</a>
|
| 136 |
+
<a href="/examples" class="mobile-nav-link">Examples</a>
|
| 137 |
+
<a href="/login" class="mobile-nav-link">Sign In</a>
|
| 138 |
+
<a href="/signup" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md font-medium transition-colors text-center mt-2">
|
| 139 |
+
Get Started
|
| 140 |
+
</a>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</nav>
|
| 144 |
+
`;
|
| 145 |
+
|
| 146 |
+
// Initialize feather icons
|
| 147 |
+
const featherScript = document.createElement('script');
|
| 148 |
+
featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
|
| 149 |
+
this.shadowRoot.appendChild(featherScript);
|
| 150 |
+
|
| 151 |
+
featherScript.onload = () => {
|
| 152 |
+
if (window.feather) {
|
| 153 |
+
window.feather.replace();
|
| 154 |
+
}
|
| 155 |
+
};
|
| 156 |
+
}
|
| 157 |
+
}
|
| 158 |
+
|
| 159 |
+
customElements.define('custom-navbar', CustomNavbar);
|
|
@@ -1,19 +1,118 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en" class="dark">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>CodeGenius AI Studio - Next-gen AI Development Platform</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
darkMode: 'class',
|
| 14 |
+
theme: {
|
| 15 |
+
extend: {
|
| 16 |
+
colors: {
|
| 17 |
+
primary: {
|
| 18 |
+
500: '#6366f1', // indigo-500 as default primary
|
| 19 |
+
},
|
| 20 |
+
secondary: {
|
| 21 |
+
500: '#f59e0b', // amber-500 as default secondary
|
| 22 |
+
}
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
</script>
|
| 28 |
+
</head>
|
| 29 |
+
<body class="bg-gray-900 text-gray-100 min-h-screen">
|
| 30 |
+
<custom-navbar></custom-navbar>
|
| 31 |
+
|
| 32 |
+
<main class="container mx-auto px-4 py-8">
|
| 33 |
+
<section class="hero-section mb-16">
|
| 34 |
+
<div class="flex flex-col md:flex-row items-center gap-8">
|
| 35 |
+
<div class="md:w-1/2">
|
| 36 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-6">Build Apps with <span class="text-primary-500">AI Agents</span></h1>
|
| 37 |
+
<p class="text-xl mb-8 text-gray-300">Describe your vision and let our AI team architect, code, test, and deploy your application autonomously.</p>
|
| 38 |
+
<div class="flex flex-col sm:flex-row gap-4">
|
| 39 |
+
<a href="/create" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium text-center transition-colors">
|
| 40 |
+
Start New Project
|
| 41 |
+
</a>
|
| 42 |
+
<a href="/demo" class="border border-gray-700 hover:border-gray-600 px-6 py-3 rounded-lg font-medium text-center transition-colors">
|
| 43 |
+
Watch Demo
|
| 44 |
+
</a>
|
| 45 |
+
</div>
|
| 46 |
+
</div>
|
| 47 |
+
<div class="md:w-1/2">
|
| 48 |
+
<div class="relative">
|
| 49 |
+
<div class="absolute -inset-4 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl opacity-20 blur"></div>
|
| 50 |
+
<div class="relative bg-gray-800 rounded-xl p-6 shadow-2xl">
|
| 51 |
+
<div class="flex items-center gap-2 mb-4">
|
| 52 |
+
<div class="h-3 w-3 rounded-full bg-red-500"></div>
|
| 53 |
+
<div class="h-3 w-3 rounded-full bg-yellow-500"></div>
|
| 54 |
+
<div class="h-3 w-3 rounded-full bg-green-500"></div>
|
| 55 |
+
<div class="ml-auto text-sm text-gray-400">AI Agent Terminal</div>
|
| 56 |
+
</div>
|
| 57 |
+
<div class="font-mono text-sm">
|
| 58 |
+
<div class="text-green-400">$ agent create react app with auth</div>
|
| 59 |
+
<div class="text-gray-400">→ Initializing project...</div>
|
| 60 |
+
<div class="text-gray-400">→ Creating React components</div>
|
| 61 |
+
<div class="text-gray-400">→ Setting up Firebase Auth</div>
|
| 62 |
+
<div class="text-green-400">✓ Project ready at https://my-app.codegenius.dev</div>
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
</div>
|
| 66 |
+
</div>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<section class="features-section mb-16">
|
| 71 |
+
<h2 class="text-3xl font-bold mb-12 text-center">Powered by AI Specialists</h2>
|
| 72 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 73 |
+
<div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-colors">
|
| 74 |
+
<div class="w-12 h-12 bg-primary-500/20 rounded-lg flex items-center justify-center mb-4">
|
| 75 |
+
<i data-feather="code" class="text-primary-500"></i>
|
| 76 |
+
</div>
|
| 77 |
+
<h3 class="text-xl font-semibold mb-2">Code Architect</h3>
|
| 78 |
+
<p class="text-gray-400">Designs efficient, scalable architecture tailored to your needs.</p>
|
| 79 |
+
</div>
|
| 80 |
+
<div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-colors">
|
| 81 |
+
<div class="w-12 h-12 bg-secondary-500/20 rounded-lg flex items-center justify-center mb-4">
|
| 82 |
+
<i data-feather="figma" class="text-secondary-500"></i>
|
| 83 |
+
</div>
|
| 84 |
+
<h3 class="text-xl font-semibold mb-2">UI Designer</h3>
|
| 85 |
+
<p class="text-gray-400">Transforms Figma designs into pixel-perfect responsive code.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-colors">
|
| 88 |
+
<div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
|
| 89 |
+
<i data-feather="shield" class="text-purple-500"></i>
|
| 90 |
+
</div>
|
| 91 |
+
<h3 class="text-xl font-semibold mb-2">Security Expert</h3>
|
| 92 |
+
<p class="text-gray-400">Ensures your app follows OWASP best practices and compliance.</p>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
</section>
|
| 96 |
+
|
| 97 |
+
<section class="cta-section bg-gradient-to-r from-gray-800 to-gray-850 rounded-2xl p-8 md:p-12 mb-16">
|
| 98 |
+
<div class="max-w-3xl mx-auto text-center">
|
| 99 |
+
<h2 class="text-3xl font-bold mb-6">Ready to Build the Future?</h2>
|
| 100 |
+
<p class="text-xl mb-8 text-gray-300">Join thousands of developers and teams shipping products faster with AI collaboration.</p>
|
| 101 |
+
<a href="/signup" class="inline-block bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-lg font-medium transition-colors">
|
| 102 |
+
Get Started Free
|
| 103 |
+
</a>
|
| 104 |
+
</div>
|
| 105 |
+
</section>
|
| 106 |
+
</main>
|
| 107 |
+
|
| 108 |
+
<custom-footer></custom-footer>
|
| 109 |
+
|
| 110 |
+
<script src="components/navbar.js"></script>
|
| 111 |
+
<script src="components/footer.js"></script>
|
| 112 |
+
<script src="script.js"></script>
|
| 113 |
+
<script>
|
| 114 |
+
feather.replace();
|
| 115 |
+
</script>
|
| 116 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 117 |
+
</body>
|
| 118 |
+
</html>
|
|
@@ -0,0 +1,100 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
// Smooth scrolling for anchor links
|
| 3 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 4 |
+
anchor.addEventListener('click', function (e) {
|
| 5 |
+
e.preventDefault();
|
| 6 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 7 |
+
behavior: 'smooth'
|
| 8 |
+
});
|
| 9 |
+
});
|
| 10 |
+
});
|
| 11 |
+
|
| 12 |
+
// Mobile menu toggle
|
| 13 |
+
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
| 14 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
| 15 |
+
|
| 16 |
+
if (mobileMenuButton && mobileMenu) {
|
| 17 |
+
mobileMenuButton.addEventListener('click', function() {
|
| 18 |
+
mobileMenu.classList.toggle('hidden');
|
| 19 |
+
});
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
// Animation triggers
|
| 23 |
+
const animateOnScroll = function() {
|
| 24 |
+
const elements = document.querySelectorAll('.slide-up, .fade-in');
|
| 25 |
+
|
| 26 |
+
elements.forEach(element => {
|
| 27 |
+
const elementPosition = element.getBoundingClientRect().top;
|
| 28 |
+
const screenPosition = window.innerHeight / 1.2;
|
| 29 |
+
|
| 30 |
+
if (elementPosition < screenPosition) {
|
| 31 |
+
element.style.opacity = '1';
|
| 32 |
+
element.style.transform = 'translateY(0)';
|
| 33 |
+
}
|
| 34 |
+
});
|
| 35 |
+
};
|
| 36 |
+
|
| 37 |
+
// Set initial state for animated elements
|
| 38 |
+
document.querySelectorAll('.slide-up').forEach(el => {
|
| 39 |
+
el.style.opacity = '0';
|
| 40 |
+
el.style.transform = 'translateY(20px)';
|
| 41 |
+
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
| 42 |
+
});
|
| 43 |
+
|
| 44 |
+
document.querySelectorAll('.fade-in').forEach(el => {
|
| 45 |
+
el.style.opacity = '0';
|
| 46 |
+
el.style.transition = 'opacity 0.5s ease';
|
| 47 |
+
});
|
| 48 |
+
|
| 49 |
+
// Run once on load
|
| 50 |
+
animateOnScroll();
|
| 51 |
+
|
| 52 |
+
// Run on scroll
|
| 53 |
+
window.addEventListener('scroll', animateOnScroll);
|
| 54 |
+
|
| 55 |
+
// Theme switcher (for future light/dark toggle)
|
| 56 |
+
const themeToggle = document.getElementById('theme-toggle');
|
| 57 |
+
if (themeToggle) {
|
| 58 |
+
themeToggle.addEventListener('click', function() {
|
| 59 |
+
document.documentElement.classList.toggle('dark');
|
| 60 |
+
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
|
| 61 |
+
});
|
| 62 |
+
}
|
| 63 |
+
});
|
| 64 |
+
|
| 65 |
+
// Dynamic agent terminal effect
|
| 66 |
+
const terminalLines = [
|
| 67 |
+
{ text: "$ agent create next.js e-commerce site", color: "text-green-400", delay: 1000 },
|
| 68 |
+
{ text: "→ Initializing project...", color: "text-gray-400", delay: 500 },
|
| 69 |
+
{ text: "→ Setting up Next.js with TypeScript", color: "text-gray-400", delay: 600 },
|
| 70 |
+
{ text: "→ Integrating Stripe payment system", color: "text-gray-400", delay: 700 },
|
| 71 |
+
{ text: "→ Generating product pages", color: "text-gray-400", delay: 600 },
|
| 72 |
+
{ text: "✓ Project ready at https://store.codegenius.dev", color: "text-green-400", delay: 800 }
|
| 73 |
+
];
|
| 74 |
+
|
| 75 |
+
function animateTerminal(terminalElement) {
|
| 76 |
+
terminalElement.innerHTML = '';
|
| 77 |
+
let cumulativeDelay = 0;
|
| 78 |
+
|
| 79 |
+
terminalLines.forEach(line => {
|
| 80 |
+
cumulativeDelay += line.delay;
|
| 81 |
+
setTimeout(() => {
|
| 82 |
+
const lineElement = document.createElement('div');
|
| 83 |
+
lineElement.className = line.color;
|
| 84 |
+
lineElement.textContent = line.text;
|
| 85 |
+
terminalElement.appendChild(lineElement);
|
| 86 |
+
}, cumulativeDelay);
|
| 87 |
+
});
|
| 88 |
+
|
| 89 |
+
// Restart animation after completion
|
| 90 |
+
setTimeout(() => {
|
| 91 |
+
terminalElement.innerHTML = '';
|
| 92 |
+
animateTerminal(terminalElement);
|
| 93 |
+
}, cumulativeDelay + 3000);
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
// Initialize terminal animation if element exists
|
| 97 |
+
const terminalElement = document.querySelector('.terminal-animation');
|
| 98 |
+
if (terminalElement) {
|
| 99 |
+
animateTerminal(terminalElement);
|
| 100 |
+
}
|
|
@@ -1,28 +1,91 @@
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
body {
|
| 4 |
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
| 5 |
+
line-height: 1.6;
|
| 6 |
+
}
|
| 7 |
+
|
| 8 |
+
/* Custom scrollbar */
|
| 9 |
+
::-webkit-scrollbar {
|
| 10 |
+
width: 8px;
|
| 11 |
+
height: 8px;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
::-webkit-scrollbar-track {
|
| 15 |
+
background: #1a1a1a;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
::-webkit-scrollbar-thumb {
|
| 19 |
+
background: #4b5563;
|
| 20 |
+
border-radius: 4px;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
::-webkit-scrollbar-thumb:hover {
|
| 24 |
+
background: #6366f1;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
/* Animation classes */
|
| 28 |
+
.fade-in {
|
| 29 |
+
animation: fadeIn 0.5s ease-in-out;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
@keyframes fadeIn {
|
| 33 |
+
from { opacity: 0; }
|
| 34 |
+
to { opacity: 1; }
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.slide-up {
|
| 38 |
+
animation: slideUp 0.6s ease-out;
|
| 39 |
}
|
| 40 |
|
| 41 |
+
@keyframes slideUp {
|
| 42 |
+
from {
|
| 43 |
+
opacity: 0;
|
| 44 |
+
transform: translateY(20px);
|
| 45 |
+
}
|
| 46 |
+
to {
|
| 47 |
+
opacity: 1;
|
| 48 |
+
transform: translateY(0);
|
| 49 |
+
}
|
| 50 |
}
|
| 51 |
|
| 52 |
+
/* Tooltip styles */
|
| 53 |
+
.tooltip {
|
| 54 |
+
position: relative;
|
|
|
|
|
|
|
| 55 |
}
|
| 56 |
|
| 57 |
+
.tooltip:hover .tooltip-text {
|
| 58 |
+
visibility: visible;
|
| 59 |
+
opacity: 1;
|
| 60 |
+
transform: translateY(0);
|
|
|
|
|
|
|
| 61 |
}
|
| 62 |
|
| 63 |
+
.tooltip-text {
|
| 64 |
+
visibility: hidden;
|
| 65 |
+
opacity: 0;
|
| 66 |
+
transform: translateY(10px);
|
| 67 |
+
transition: all 0.2s ease;
|
| 68 |
+
position: absolute;
|
| 69 |
+
z-index: 10;
|
| 70 |
+
bottom: 100%;
|
| 71 |
+
left: 50%;
|
| 72 |
+
transform: translateX(-50%);
|
| 73 |
+
background: #1f2937;
|
| 74 |
+
color: white;
|
| 75 |
+
padding: 0.5rem 0.75rem;
|
| 76 |
+
border-radius: 0.375rem;
|
| 77 |
+
font-size: 0.875rem;
|
| 78 |
+
white-space: nowrap;
|
| 79 |
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
| 80 |
}
|
| 81 |
+
|
| 82 |
+
.tooltip-text::after {
|
| 83 |
+
content: "";
|
| 84 |
+
position: absolute;
|
| 85 |
+
top: 100%;
|
| 86 |
+
left: 50%;
|
| 87 |
+
margin-left: -5px;
|
| 88 |
+
border-width: 5px;
|
| 89 |
+
border-style: solid;
|
| 90 |
+
border-color: #1f2937 transparent transparent transparent;
|
| 91 |
+
}
|