0939fbfb33
Converted Activation Calendar to filename creator for digital banners. Features: - Filename format: JOBNUMBER_PROJECTNAME_SIZE_UNIT.png - Conversational AI with Google Gemini 2.0 - Voice recognition support - Auto-concatenation of filename parts - Campaign save/load functionality - WSJ styling: white background, black text, Georgia headlines - Export to CSV and copy filenames to clipboard 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
118 lines
5.8 KiB
PHP
118 lines
5.8 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>WSJ Filename Creator</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
|
||
<!-- Jspreadsheet & Jsuites -->
|
||
<script src="https://jsuites.net/v4/jsuites.js"></script>
|
||
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
|
||
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
|
||
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header style="display: flex; justify-content: space-between; align-items: center;">
|
||
<div>
|
||
<h1>WSJ FILENAME CREATOR</h1>
|
||
<p style="color: var(--text-secondary);">Generate filenames for digital banner campaigns</p>
|
||
</div>
|
||
<a href="help.php" class="btn btn-secondary" style="text-decoration: none;">Help</a>
|
||
</header>
|
||
|
||
<div class="command-bar-container">
|
||
<div class="input-group">
|
||
<input type="text" id="commandInput" placeholder='Try: "Create 10 filenames for newyear campaign, sizes 1080x1920 and 300x250"' autocomplete="off">
|
||
<button id="micBtn" class="btn btn-icon" title="Speak">🎤</button>
|
||
<button id="sendBtn" class="btn btn-primary">📤 Send</button>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
|
||
<label class="switch">
|
||
<input type="checkbox" id="yoloToggle">
|
||
<span class="slider round"></span>
|
||
</label>
|
||
<span style="font-weight: bold; color: var(--text-color);">YOLO Mode 🚀</span>
|
||
<span style="font-size: 0.8em; color: #888;">(Skip clarifying questions)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Starters -->
|
||
<div class="quick-starters">
|
||
<span style="color: var(--text-secondary); font-size: 0.85rem; margin-right: 10px;">Try:</span>
|
||
<button class="starter-chip" onclick="fillCommand('Create 10 filenames for newyear campaign, sizes 1080x1920 and 300x250')">New Year Campaign</button>
|
||
<button class="starter-chip" onclick="fillCommand('Add 5 Instagram and 5 Facebook banners for blackfriday')">Black Friday</button>
|
||
<button class="starter-chip" onclick="fillCommand('Change all sizes to 1080x1080')">Resize All</button>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<div style="display: flex; gap: 15px; align-items: center;">
|
||
<label style="font-weight: 600;">Campaign:</label>
|
||
<input type="text" id="campaignName" placeholder="e.g., newyear" style="padding: 8px; width: 150px; border: 1px solid var(--border-color); border-radius: 4px;">
|
||
<label style="font-weight: 600;">Job Number:</label>
|
||
<input type="text" id="globalJobNumber" placeholder="e.g., 0000123" style="padding: 8px; width: 120px; border: 1px solid var(--border-color); border-radius: 4px;">
|
||
</div>
|
||
<div style="display: flex; gap: 10px;">
|
||
<button id="loadCampaignBtn" class="btn btn-secondary">Load Campaign</button>
|
||
<button id="saveCampaignBtn" class="btn btn-primary">Save Campaign</button>
|
||
<button id="exportBtn" class="btn btn-secondary">Export CSV</button>
|
||
<button id="copyFilenamesBtn" class="btn btn-secondary">Copy Filenames</button>
|
||
<button id="clearSheetBtn" class="btn btn-danger">Clear All</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<div id="spreadsheet"></div>
|
||
</div>
|
||
|
||
<!-- AI Activity Log -->
|
||
<div class="ai-log">
|
||
<div class="ai-log-header" style="cursor: pointer;" onclick="document.getElementById('aiOutput').classList.toggle('collapsed'); this.querySelector('.collapse-icon').textContent = document.getElementById('aiOutput').classList.contains('collapsed') ? '▶' : '▼';">
|
||
<h3><span class="collapse-icon">▼</span> ✨ AI ACTIVITY LOG</h3>
|
||
<button id="clearLogBtn" class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.85rem;" onclick="event.stopPropagation();">Clear Log</button>
|
||
</div>
|
||
<div id="aiOutput" class="ai-output">Waiting for command...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function fillCommand(text) {
|
||
const input = document.getElementById('commandInput');
|
||
input.value = text;
|
||
input.focus();
|
||
}
|
||
</script>
|
||
|
||
<div id="loadingOverlay">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
|
||
<!-- AI Question Modal -->
|
||
<div id="aiQuestionModal" class="modal-overlay">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>🤖 AI Needs Clarification</h3>
|
||
<button class="close-modal-btn" onclick="closeAiModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="aiQuestionText" class="ai-question-text"></p>
|
||
|
||
<div class="modal-input-group">
|
||
<input type="text" id="aiModalInput" placeholder="Type your answer..." autocomplete="off">
|
||
<button id="aiModalMicBtn" class="btn btn-icon" title="Speak">🎤</button>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button id="aiModalSendBtn" class="btn btn-primary">Send Answer</button>
|
||
<button id="aiModalYoloBtn" class="btn btn-secondary">🚀 Do what you think (YOLO)</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</div> <!-- /container -->
|
||
</body>
|
||
</html>
|