testsprite 전략 수립
This commit is contained in:
301
helper/index.html
Normal file
301
helper/index.html
Normal file
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SAM Project - AI 교차 검증 전략 브리핑</title>
|
||||
<meta name="description" content="AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 교차 검증 전략">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@400;600;800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="stars-container"></div>
|
||||
|
||||
<nav class="top-nav">
|
||||
<div class="container nav-container">
|
||||
<div class="logo">SAM Project</div>
|
||||
<div class="nav-links">
|
||||
<button class="nav-btn active" data-tab="briefing">전략 브리핑</button>
|
||||
<button class="nav-btn" data-tab="learning">퀴즈 & 학습</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Briefing Tab -->
|
||||
<div id="tab-briefing" class="tab-content active">
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<div class="badge animate-fade-in">Strategic Briefing</div>
|
||||
<h1 class="animate-slide-up">AI 협업 기반<br><span class="gradient-text">코드 교차 검증 전략</span></h1>
|
||||
<p class="subtitle animate-fade-in-delay">Maximize Quality | Optimize Cost | 5-Step Workflow</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="summary" class="section">
|
||||
<div class="container">
|
||||
<div class="glass-card summary-card">
|
||||
<div class="card-header">
|
||||
<span class="section-tag">Executive Summary</span>
|
||||
<h2>개요 및 핵심 가치</h2>
|
||||
</div>
|
||||
<p class="summary-text text-highlight">
|
||||
본 문서는 AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 <strong>'교차 검증 전략'</strong>을 종합적으로 분석합니다.
|
||||
</p>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-item">
|
||||
<div class="icon">🚀</div>
|
||||
<h3>5단계 사이클</h3>
|
||||
<p>계획 → 검증 → 구현 → 검증 → 테스트로 이어지는 완벽한 품질 관리 루프</p>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="icon">🤝</div>
|
||||
<h3>역할 최적화</h3>
|
||||
<p>Antigravity(실행)와 Claude Code(감리)의 조화로운 역할 분담</p>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="icon">💰</div>
|
||||
<h3>비용 절감</h3>
|
||||
<p>검증 단계에만 고성능 모델을 투입하여 전체 토큰 사용량 약 66% 절감</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="strategy-overview" class="section alt-bg">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">I. Strategy Overview</span>
|
||||
<h2 class="section-title">AI 교차 검증의 핵심 개념</h2>
|
||||
<p>고성능 모델의 초기 테스트 통과율(약 42%) 한계를 극복하기 위한 방법론</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container glass-card">
|
||||
<table class="strategy-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>단계</th>
|
||||
<th>주요 도구</th>
|
||||
<th>핵심 역할</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1. 계획 (Plan)</td>
|
||||
<td>Antigravity</td>
|
||||
<td>문제 해결을 위한 초기 계획 수립 및 문서화</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2. 검증 (Verify)</td>
|
||||
<td>Claude Code</td>
|
||||
<td>계획의 논리적 오류 및 프로젝트 원칙 검토</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3. 실행 (Execute)</td>
|
||||
<td>Antigravity</td>
|
||||
<td>검증된 계획에 따른 고속 코드 구현</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4. 검증 (Verify)</td>
|
||||
<td>Claude Code</td>
|
||||
<td>완성된 코드의 최종 검토 및 완성도 극대화</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5. 테스트 (Test)</td>
|
||||
<td>TestSprite MCP</td>
|
||||
<td>자동화 테스트 및 직관적인 스크린샷 피드백</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="metaphor-box glass-card animate-slide-up">
|
||||
<div class="metaphor-icon">🏠</div>
|
||||
<h3>전략적 비유</h3>
|
||||
<p>"<strong>Antigravity</strong>라는 숙련된 시공사가 집을 짓기 전과 후에, <strong>Claude Code</strong>라는 꼼꼼한 설계사가
|
||||
도면과 완공 상태를 철저히 감리하는 것과 같습니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="workflow-detail" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">II. Workflow Detail</span>
|
||||
<h2 class="section-title">5단계 교차 검증 상세 프로세스</h2>
|
||||
</div>
|
||||
|
||||
<div class="workflow-steps">
|
||||
<div class="workflow-card glass-card">
|
||||
<div class="step-badge">1단계</div>
|
||||
<h3>계획 수립 및 문서화</h3>
|
||||
<ul class="step-list">
|
||||
<li>문제 분석 및 구조 설계 (Antigravity)</li>
|
||||
<li>work-plan 폴더 내 마크다운(.md) 저장</li>
|
||||
<li>검토를 위한 물리적 근거 마련</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="workflow-card glass-card">
|
||||
<div class="step-badge">2단계</div>
|
||||
<h3>1차 계획 검증</h3>
|
||||
<ul class="step-list">
|
||||
<li>코드 작성 원칙 기반 논리 검토 (Claude Code)</li>
|
||||
<li>문서 하단에 보완 사항 추가 (덮어쓰기 금지)</li>
|
||||
<li>변경 이력의 명확한 추적 가능성 확보</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="workflow-card glass-card">
|
||||
<div class="step-badge">3단계</div>
|
||||
<h3>코드 구현</h3>
|
||||
<ul class="step-list">
|
||||
<li>보완된 최종 지시에 따른 구현 (Antigravity)</li>
|
||||
<li>잠재적 오류 제거로 인한 에러율 급감</li>
|
||||
<li>정제된 워크플로우를 통한 생산성 향상</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="workflow-card glass-card">
|
||||
<div class="step-badge">4단계</div>
|
||||
<h3>2차 최종 결과 검토</h3>
|
||||
<ul class="step-list">
|
||||
<li>계획 반영 여부 최종 점검 (Claude Code)</li>
|
||||
<li>전체 코드 완성도 및 코드 품질 확인</li>
|
||||
<li>최종 릴리스 준위의 결과물 확보</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="workflow-card glass-card">
|
||||
<div class="step-badge">5단계</div>
|
||||
<h3>자동 테스트 및 피드백</h3>
|
||||
<ul class="step-list">
|
||||
<li>TestSprite MCP 기반 자동화 테스트</li>
|
||||
<li>스크린샷 리포트를 통한 직관적 오류 파악</li>
|
||||
<li>100%에 수렴하는 품질 완성 사이클</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tools-setup" class="section alt-bg">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">III. Tool Roles & Setup</span>
|
||||
<h2 class="section-title">핵심 도구별 역할 및 설정</h2>
|
||||
</div>
|
||||
|
||||
<div class="tool-grid">
|
||||
<div class="tool-card glass-card">
|
||||
<div class="tool-header">
|
||||
<div class="tool-logo">A</div>
|
||||
<h3>Antigravity</h3>
|
||||
</div>
|
||||
<p class="tool-role">실무 실행자 (Doer)</p>
|
||||
<p>토큰 소모가 많은 초기 계획과 코드 구현 전담. VS Code 내 'Claude Code for VS Code'와 병행 설치 권장.</p>
|
||||
</div>
|
||||
<div class="tool-card glass-card">
|
||||
<div class="tool-header">
|
||||
<div class="tool-logo">C</div>
|
||||
<h3>Claude Code</h3>
|
||||
</div>
|
||||
<p class="tool-role">설계 및 감리자 (Reviewer)</p>
|
||||
<p>고비용 모델의 효율적 사용을 위해 검증에 집중. 메모리/에이전트/훅 설정에 프로젝트 규칙 정의 필수.</p>
|
||||
</div>
|
||||
<div class="tool-card glass-card full-width">
|
||||
<div class="tool-header">
|
||||
<div class="tool-logo">T</div>
|
||||
<h3>TestSprite MCP</h3>
|
||||
</div>
|
||||
<div class="tool-detail-grid">
|
||||
<div class="tool-desc">
|
||||
<p class="tool-role">최종 품질 검사관 (Inspector)</p>
|
||||
<p>자동 테스트 및 스크린샷 리포트를 통해 인간이 놓치는 논리적 결함 발견.</p>
|
||||
</div>
|
||||
<div class="setup-steps">
|
||||
<h4>설정 절차</h4>
|
||||
<ul>
|
||||
<li><strong>API 키:</strong> testsprite.com 발급 (유일 1회 노출)</li>
|
||||
<li><strong>Windows:</strong> 전용 명령어를 통한 MCP 연결</li>
|
||||
<li><strong>명세서:</strong> Claude Code를 통한 Product Spec 생성 및 제공</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="outcomes" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">IV. Expected Effects</span>
|
||||
<h2 class="section-title">기대 효과 및 실질적 이점</h2>
|
||||
</div>
|
||||
|
||||
<div class="outcome-grid">
|
||||
<div class="outcome-card glass-card">
|
||||
<div class="outcome-icon">✨</div>
|
||||
<h3>코드 품질 향상</h3>
|
||||
<p>상호 보완적 모델 협업과 전문 테스트 도구를 통한 안정적인 결과물 생산</p>
|
||||
</div>
|
||||
<div class="outcome-card glass-card highlight">
|
||||
<div class="outcome-icon">📉</div>
|
||||
<h3>비용 및 토큰 절감</h3>
|
||||
<p>고비용 모델을 검증에만 집중 배치하여 <strong>토큰 사용량 약 2/3(약 66%) 절감</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial glass-card">
|
||||
<blockquote>
|
||||
"Claude Max 200달러 요금제를 쓰다가 이 전략을 적용하고 나서 100달러 요금제로 낮췄습니다. 이제는 토큰 걱정 없이 편하게 작업하고 있습니다."
|
||||
</blockquote>
|
||||
<cite>— 실제 사례 사용자</cite>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Learning Tab (Quiz & Glossary) -->
|
||||
<div id="tab-learning" class="tab-content">
|
||||
<section id="quiz" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">Assessment</span>
|
||||
<h2 class="section-title">단답형 퀴즈</h2>
|
||||
<p>전략의 핵심 개념을 점검해 보세요. 카드를 클릭하면 정답이 표시됩니다.</p>
|
||||
</div>
|
||||
<div class="quiz-grid" id="quiz-container">
|
||||
<!-- Quiz items will be injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="glossary" class="section alt-bg">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">Dictionary</span>
|
||||
<h2 class="section-title">핵심 용어 정리</h2>
|
||||
</div>
|
||||
<div class="glossary-grid" id="glossary-container">
|
||||
<!-- Glossary items will be injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 AI Engineering Helper. SAM Strategy Briefing.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
146
helper/script.js
Normal file
146
helper/script.js
Normal file
@@ -0,0 +1,146 @@
|
||||
const quizData = [
|
||||
{
|
||||
q: "AI 협업 기반 코드 교차 검증 전략의 5단계 사이클은 무엇이며, 각 단계는 무엇으로 구성되어 있습니까?",
|
||||
a: "계획, 검증, 실행, 검증, 테스트로 구성됩니다. Antigravity가 계획을 수립하고, Claude Code가 검증하며, Antigravity가 코드를 구현하고, Claude Code가 최종 검토한 후, TestSprite MCP가 자동 테스트를 진행합니다."
|
||||
},
|
||||
{
|
||||
q: "첫 번째 단계에서 Antigravity가 수립한 계획을 별도의 문서 파일로 저장하는 이유는 무엇입니까?",
|
||||
a: "후속 단계에서 Claude Code가 검토할 수 있는 물리적인 근거를 만들기 위함입니다. 이는 AI 모델 간의 명확한 정보 전달과 이력 관리를 가능하게 합니다."
|
||||
},
|
||||
{
|
||||
q: "Claude Code는 1차 계획 검증 단계에서 어떤 기준을 바탕으로 계획을 검토하며, 그 역할은 무엇입니까?",
|
||||
a: "미리 설정된 코드 작성 원칙과 기준(메모리, 에이전트, 훅 등)을 바탕으로 검토합니다. 설계상의 오류를 사전에 파악하고 보안사항을 제시하는 '설계 감리' 역할을 수행합니다."
|
||||
},
|
||||
{
|
||||
q: "이 교차 검증 전략이 Claude Code의 토큰 사용량을 획기적으로 절감할 수 있는 핵심적인 이유 두 가지를 설명하시오.",
|
||||
a: "첫째, 비용이 높은 Claude Code를 실제 구현이 아닌 '검증'에만 집중 배치하기 때문입니다. 둘째, 구현(Antigravity) 및 자동 테스트(TestSprite) 단계에서는 Claude Code의 토큰이 소모되지 않습니다."
|
||||
},
|
||||
{
|
||||
q: "전체 사이클의 마지막 단계에서 TestSprite MCP가 수행하는 주요 역할은 무엇입니까?",
|
||||
a: "완성된 코드에 대해 자동화된 테스트를 실행합니다. 문제가 발견되면 상세 리포트를 생성하여 Antigravity에게 전달함으로써 피드백 루프를 시작합니다."
|
||||
},
|
||||
{
|
||||
q: "TestSprite MCP의 API 키를 발급받을 때 반드시 지켜야 할 중요한 보안 수칙은 무엇입니까?",
|
||||
a: "API 키는 단 한 번만 화면에 노출되므로, 즉시 복사하여 별도의 안전한 장소에 반드시 보관해야 합니다."
|
||||
},
|
||||
{
|
||||
q: "TestSprite MCP가 테스트 계획을 수립하기 위해 반드시 제공받아야 하는 문서는 무엇이며, 이 문서는 어떻게 생성할 수 있습니까?",
|
||||
a: "테스트할 기능의 동작을 설명하는 'Product specification Doc'(기능 명세서)가 필요합니다. 이는 Claude Code에게 요청하여 간단히 생성할 수 있습니다."
|
||||
},
|
||||
{
|
||||
q: "TestSprite MCP가 제공하는 테스트 리포트의 가장 강력하고 직관적인 특징은 무엇입니까?",
|
||||
a: "각 단계별 실행 화면을 스크린샷으로 제공하여, 어느 화면에서 어떤 문제가 발생했는지 마치 사람이 직접 테스트한 것처럼 파악할 수 있다는 점입니다."
|
||||
},
|
||||
{
|
||||
q: "Claude와 같은 고성능 AI 모델을 사용함에도 불구하고 교차 검증 전략이 필요한 근본적인 이유는 무엇입니까?",
|
||||
a: "최신 연구 기준 고성능 AI 모델의 초기 코드 테스트 통과율이 약 42%에 불과하기 때문입니다. 이러한 한계를 극복하고 완성도를 극대화하기 위해 상호 보완이 필요합니다."
|
||||
},
|
||||
{
|
||||
q: "이 교차 검증 전략의 전체 과정을 한 문장의 비유로 요약하여 설명하시오.",
|
||||
a: "Antigravity라는 숙련된 시공사가 집을 짓기 전과 후에, Claude Code라는 꼼꼼한 설계사가 도면과 완공 상태를 철철히 감리하는 것과 같습니다."
|
||||
}
|
||||
];
|
||||
|
||||
const glossaryData = [
|
||||
{ term: "AI 협업 기반의 코드 교차 검증 전략", def: "Antigravity와 Claude Code를 활용하여 계획-검증-실행-검증-테스트의 5단계 사이클을 통해 코드 품질을 극대화하고 비용을 절감하는 방법론." },
|
||||
{ term: "Antigravity", def: "구글의 AI 모델로, 초기 계획 수립과 실제 코드 구현(실행)을 담당하는 '숙련된 시공사' 역할." },
|
||||
{ term: "Claude Code", def: "앤스로픽의 AI 모델로, 계획과 결과물을 검증(Review)하고 감리하는 '꼼꼼한 설계사' 역할." },
|
||||
{ term: "TestSprite MCP", def: "자동화 테스트 실행 도구. 실행 화면 스크린샷을 포함한 상세 리포트를 제공하여 최종 테스트 단계를 수행함." },
|
||||
{ term: "교차 검증 (Cross-Validation)", def: "두 개 이상의 AI 모델이 상호 검토하여 논리적 오류를 줄이고 정교한 결과를 얻는 과정." },
|
||||
{ term: "토큰 (Token)", def: "AI 모델의 언어 처리 단위. 이 전략을 통해 고비용 모델의 토큰 사용량을 2/3 수준으로 절감할 수 있음." },
|
||||
{ term: "피드백 루프 (Feedback Loop)", def: "테스트 문제 발생 시 리포트를 Antigravity에게 전달하여 수정-재검증 사이클을 반복하는 것." },
|
||||
{ term: "코드 작성 원칙과 기준", def: "Claude Code에 설정된 프로젝트 고유 규칙(메모리, 에이전트, 훅 등)으로 검증의 기준이 됨." },
|
||||
{ term: "Product specification Doc", def: "TestSprite MCP가 테스트 계획 수립을 위해 필요로 하는 기능 명세서." }
|
||||
];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Tab Switching Logic
|
||||
const navBtns = document.querySelectorAll('.nav-btn');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
navBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tabId = btn.getAttribute('data-tab');
|
||||
|
||||
// Update Buttons
|
||||
navBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
// Update Content
|
||||
tabContents.forEach(content => {
|
||||
content.classList.remove('active');
|
||||
if (content.id === `tab-${tabId}`) {
|
||||
content.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to top when switching
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
// Inject Quiz
|
||||
const quizContainer = document.getElementById('quiz-container');
|
||||
quizData.forEach((item, index) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'quiz-card';
|
||||
card.innerHTML = `
|
||||
<div class="quiz-card-inner">
|
||||
<div class="quiz-card-front">
|
||||
<span class="quiz-number">Q${(index + 1).toString().padStart(2, '0')}</span>
|
||||
<p class="question-text">${item.q}</p>
|
||||
<p style="font-size: 0.8rem; opacity: 0.5; margin-top: 1rem;">Click to see answer</p>
|
||||
</div>
|
||||
<div class="quiz-card-back">
|
||||
<p class="answer-text">${item.a}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
card.addEventListener('click', () => {
|
||||
card.classList.toggle('flipped');
|
||||
});
|
||||
quizContainer.appendChild(card);
|
||||
});
|
||||
|
||||
// Inject Glossary
|
||||
const glossaryContainer = document.getElementById('glossary-container');
|
||||
glossaryData.forEach(item => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'glossary-card';
|
||||
card.innerHTML = `
|
||||
<h3>${item.term}</h3>
|
||||
<p>${item.def}</p>
|
||||
`;
|
||||
glossaryContainer.appendChild(card);
|
||||
});
|
||||
|
||||
// Background Stars
|
||||
const starsContainer = document.querySelector('.stars-container');
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
const size = Math.random() * 2;
|
||||
star.style.width = `${size}px`;
|
||||
star.style.height = `${size}px`;
|
||||
star.style.left = `${Math.random() * 100}%`;
|
||||
star.style.top = `${Math.random() * 100}%`;
|
||||
star.style.opacity = Math.random();
|
||||
star.style.position = 'absolute';
|
||||
star.style.backgroundColor = 'white';
|
||||
star.style.borderRadius = '50%';
|
||||
if (Math.random() > 0.8) {
|
||||
star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite alternate`;
|
||||
}
|
||||
starsContainer.appendChild(star);
|
||||
}
|
||||
});
|
||||
|
||||
// Twinkle Animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes twinkle {
|
||||
from { opacity: 0.2; transform: scale(1); }
|
||||
to { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
537
helper/style.css
Normal file
537
helper/style.css
Normal file
@@ -0,0 +1,537 @@
|
||||
:root {
|
||||
--bg-color: #0B0E14;
|
||||
--card-bg: rgba(255, 255, 255, 0.03);
|
||||
--card-border: rgba(255, 255, 255, 0.08);
|
||||
--primary: #7B61FF;
|
||||
--primary-glow: rgba(123, 97, 255, 0.4);
|
||||
--secondary: #00D1FF;
|
||||
--text-main: #E2E8F0;
|
||||
--text-muted: #94A3B8;
|
||||
--white: #FFFFFF;
|
||||
--gradient: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.gradient-text {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* Background Animation */
|
||||
.stars-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0B0E14 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.top-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(11, 14, 20, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
padding: 0.5rem 1.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
border-radius: 99px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
color: var(--white);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
box-shadow: 0 4px 15px var(--primary-glow);
|
||||
}
|
||||
|
||||
/* Tab Content Logic */
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.2rem;
|
||||
background: rgba(123, 97, 255, 0.1);
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: 99px;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 2.5rem;
|
||||
}
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
border-color: rgba(123, 97, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 6rem 0;
|
||||
}
|
||||
|
||||
.alt-bg {
|
||||
background: rgba(123, 97, 255, 0.02);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-tag {
|
||||
color: var(--secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Summary Grid */
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.summary-item .icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.summary-item h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.summary-item p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Strategy Table */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.strategy-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.strategy-table th,
|
||||
.strategy-table td {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.strategy-table th {
|
||||
color: var(--secondary);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.strategy-table td:first-child {
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* Metaphor Box */
|
||||
.metaphor-box {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.metaphor-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Workflow Steps */
|
||||
.workflow-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.workflow-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-badge {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.step-list {
|
||||
list-style: none;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.step-list li {
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.step-list li::before {
|
||||
content: "•";
|
||||
color: var(--secondary);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tool Grid */
|
||||
.tool-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.tool-card.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.tool-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tool-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--gradient);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-role {
|
||||
font-weight: 700;
|
||||
color: var(--secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.setup-steps h4 {
|
||||
color: var(--white);
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.setup-steps ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.setup-steps li {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Outcomes */
|
||||
.outcome-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.outcome-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.outcome-card.highlight {
|
||||
background: rgba(123, 97, 255, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.outcome-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.testimonial blockquote {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.testimonial cite {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Quiz & Glossary Styles (Inherited and Refined) */
|
||||
.quiz-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.quiz-card {
|
||||
perspective: 1000px;
|
||||
height: 240px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quiz-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.quiz-card.flipped .quiz-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.quiz-card-front,
|
||||
.quiz-card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.quiz-card-front {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.quiz-card-back {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.quiz-number {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Glossary Section */
|
||||
.glossary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.glossary-card {
|
||||
padding: 2rem;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 16px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.glossary-card h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--card-border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-slide-up { animation: slideUp 0.8s ease forwards; }
|
||||
.animate-fade-in { animation: fadeIn 1s ease forwards; }
|
||||
.animate-fade-in-delay { opacity: 0; animation: fadeIn 1s ease 0.3s forwards; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.tool-detail-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 2.5rem; }
|
||||
.hero { height: auto; padding: 6rem 0; }
|
||||
.section { padding: 4rem 0; }
|
||||
.outcome-grid { grid-template-columns: 1fr; }
|
||||
.nav-container { flex-direction: column; gap: 1rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user