241 lines
12 KiB
HTML
241 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Commander AI Lab — Auto Deck Generator V3</title>
|
|
<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@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="global.css" />
|
|
<link rel="stylesheet" href="deckgenerator.css" />
|
|
</head>
|
|
<body>
|
|
<script src="nav.js"></script>
|
|
|
|
<div id="deckgen-page">
|
|
|
|
<!-- MAIN LAYOUT -->
|
|
<main class="dg-main">
|
|
|
|
<!-- LEFT: Configuration -->
|
|
<section class="dg-col-config">
|
|
|
|
<!-- Commander Search -->
|
|
<div class="dg-panel dg-panel-commander">
|
|
<div class="dg-panel-header">
|
|
<span class="dg-panel-title">Commander</span>
|
|
</div>
|
|
<div class="dg-panel-body">
|
|
<div class="dg-commander-search-wrap">
|
|
<input
|
|
type="text"
|
|
class="dg-input"
|
|
id="dg-commander-input"
|
|
placeholder="Search for a legendary creature..."
|
|
autocomplete="off"
|
|
/>
|
|
<div class="dg-commander-dropdown" id="dg-commander-dropdown"></div>
|
|
</div>
|
|
<div class="dg-commander-selected" id="dg-commander-selected" style="display:none">
|
|
<div class="dg-commander-card">
|
|
<button class="dg-commander-clear" id="dg-commander-clear" title="Clear commander">×</button>
|
|
<img class="dg-commander-img" id="dg-commander-img" src="" alt="" />
|
|
<div class="dg-commander-info">
|
|
<div class="dg-commander-name" id="dg-commander-name"></div>
|
|
<div class="dg-commander-type" id="dg-commander-type"></div>
|
|
<div class="dg-commander-colors" id="dg-commander-colors"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Strategy & Bracket -->
|
|
<div class="dg-panel">
|
|
<div class="dg-panel-header">
|
|
<span class="dg-panel-title">Strategy & Power</span>
|
|
</div>
|
|
<div class="dg-panel-body">
|
|
<input
|
|
type="text"
|
|
class="dg-input"
|
|
id="dg-strategy"
|
|
placeholder="e.g. zombie tokens, voltron, spellslinger..."
|
|
/>
|
|
<div class="dg-bracket-row">
|
|
<label class="dg-label">Target Bracket</label>
|
|
<div class="dg-bracket-btns" id="dg-bracket-btns">
|
|
<button class="dg-bracket-btn" data-bracket="1" title="Casual — precon level">B1</button>
|
|
<button class="dg-bracket-btn" data-bracket="2" title="Upgraded Casual">B2</button>
|
|
<button class="dg-bracket-btn dg-bracket-active" data-bracket="3" title="High Power">B3</button>
|
|
<button class="dg-bracket-btn" data-bracket="4" title="cEDH — maximum power">B4</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deck Name -->
|
|
<div class="dg-panel">
|
|
<div class="dg-panel-header">
|
|
<span class="dg-panel-title">Deck Name</span>
|
|
</div>
|
|
<div class="dg-panel-body">
|
|
<input
|
|
type="text"
|
|
class="dg-input"
|
|
id="dg-deck-name"
|
|
placeholder="Auto-generated from commander name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Budget -->
|
|
<div class="dg-panel">
|
|
<div class="dg-panel-header">
|
|
<span class="dg-panel-title">Budget</span>
|
|
</div>
|
|
<div class="dg-panel-body">
|
|
<div class="dg-budget-row">
|
|
<input
|
|
type="number"
|
|
class="dg-input dg-input-narrow"
|
|
id="dg-budget"
|
|
placeholder="No limit"
|
|
min="0"
|
|
step="25"
|
|
/>
|
|
<select class="dg-select" id="dg-budget-mode">
|
|
<option value="total">Total Deck $</option>
|
|
<option value="per_card">Per Card Max $</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Options -->
|
|
<div class="dg-panel">
|
|
<div class="dg-panel-header">
|
|
<span class="dg-panel-title">Options</span>
|
|
</div>
|
|
<div class="dg-panel-body">
|
|
<label class="dg-toggle-row">
|
|
<span class="dg-toggle-label">Use my collection</span>
|
|
<input type="checkbox" class="dg-toggle-check" id="dg-use-collection" checked />
|
|
<span class="dg-toggle-track"><span class="dg-toggle-thumb"></span></span>
|
|
</label>
|
|
<label class="dg-toggle-row">
|
|
<span class="dg-toggle-label">Smart Substitution</span>
|
|
<input type="checkbox" class="dg-toggle-check" id="dg-substitution" checked />
|
|
<span class="dg-toggle-track"><span class="dg-toggle-thumb"></span></span>
|
|
</label>
|
|
<div class="dg-model-row">
|
|
<label class="dg-label">AI Model</label>
|
|
<select class="dg-select" id="dg-model">
|
|
<option value="gpt-oss:20b" selected>gpt-oss:20b (Local Ollama)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Omit Cards (chips input) -->
|
|
<div class="dg-panel">
|
|
<div class="dg-panel-header">
|
|
<span class="dg-panel-title">Omit Cards</span>
|
|
</div>
|
|
<div class="dg-panel-body">
|
|
<div class="dg-omit-wrap" id="dg-omit-wrap">
|
|
<div class="dg-omit-chips" id="dg-omit-chips"></div>
|
|
<input
|
|
type="text"
|
|
class="dg-input dg-omit-input"
|
|
id="dg-omit-input"
|
|
placeholder="Type a card name and press Enter…"
|
|
/>
|
|
</div>
|
|
<small class="dg-hint">Cards listed here will be excluded from the generated deck.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="dg-actions">
|
|
<button class="dg-btn dg-btn-preview" id="dg-preview-btn" disabled>
|
|
<span class="dg-btn-icon">⚡</span> Generate Deck
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Conversation Log -->
|
|
<div id="dg-conversation-log" class="dg-conversation-log">
|
|
<div class="dg-log-entry dg-log-info"><span class="dg-log-ts">[Ready]</span> Waiting for deck generation...</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- RIGHT: Preview Results -->
|
|
<section class="dg-col-results">
|
|
<!-- Empty State -->
|
|
<div class="dg-empty-state" id="dg-empty-state">
|
|
<div class="dg-empty-icon">⚡</div>
|
|
<div class="dg-empty-title">V3 AI Deck Generator</div>
|
|
<div class="dg-empty-text">Select a commander, set your bracket and strategy, then click "Generate Deck" to build a complete 100-card deck using Perplexity AI with structured output.</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div class="dg-loading" id="dg-loading" style="display:none">
|
|
<div class="dg-spinner"></div>
|
|
<div class="dg-loading-text" id="dg-loading-text">Generating deck via Local AI...</div>
|
|
</div>
|
|
<div class="dg-progress-wrap" id="dg-progress-wrap" style="display:none">
|
|
<div class="dg-progress-bar">
|
|
<div class="dg-progress-fill" id="dg-progress-fill"></div>
|
|
</div>
|
|
<div class="dg-progress-meta">
|
|
<span class="dg-progress-phase" id="dg-progress-phase"></span>
|
|
<span class="dg-progress-elapsed" id="dg-progress-elapsed">0s elapsed</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results -->
|
|
<div class="dg-results" id="dg-results" style="display:none">
|
|
|
|
<!-- Strategy & Bracket Summary -->
|
|
<div class="dg-strategy-bar" id="dg-strategy-bar"></div>
|
|
|
|
<!-- Stats Bar -->
|
|
<div class="dg-stats-bar" id="dg-stats-bar"></div>
|
|
|
|
<!-- Substitution Summary -->
|
|
<div class="dg-sub-summary" id="dg-sub-summary" style="display:none"></div>
|
|
|
|
<!-- Card Groups -->
|
|
<div class="dg-card-groups" id="dg-card-groups"></div>
|
|
|
|
<!-- Export & Save Bar -->
|
|
<div class="dg-save-bar" id="dg-save-bar">
|
|
<button class="dg-btn dg-btn-save" id="dg-save-btn">
|
|
<span class="dg-btn-icon">💾</span> Save to Deck Builder
|
|
</button>
|
|
<button class="dg-btn dg-btn-ghost" id="dg-regenerate-btn">
|
|
<span class="dg-btn-icon">🔄</span> Regenerate
|
|
</button>
|
|
<div class="dg-export-group">
|
|
<button class="dg-btn dg-btn-export" id="dg-export-csv">📊 CSV</button>
|
|
<button class="dg-btn dg-btn-export" id="dg-export-dck">🎮 Forge .dck</button>
|
|
<button class="dg-btn dg-btn-export" id="dg-export-moxfield">📋 Moxfield</button>
|
|
<button class="dg-btn dg-btn-export" id="dg-export-shopping">🛒 Shopping List</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- TOAST CONTAINER -->
|
|
<div class="dg-toast-container" id="dg-toast-container"></div>
|
|
|
|
</div>
|
|
|
|
<script src="deckgenerator.js"></script>
|
|
</body>
|
|
</html>
|