43e2a2f78f
Features: - Welcome screen on first run (provider choice before LS starts) - 15+ AI providers (Google Gemini, OpenAI, Anthropic, DeepSeek, Ollama, etc.) - Provider config syncs to endpoints.json for translation proxy - Built-in Node.js translation proxy for non-native backends - Auto-update support, tray integration, URI scheme handler
177 lines
6.1 KiB
HTML
177 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welcome to AG X</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0a0a1a 100%);
|
|
color: #e0e0e0; min-height: 100vh;
|
|
display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.welcome-container {
|
|
text-align: center; max-width: 620px; width: 100%; padding: 40px;
|
|
}
|
|
.logo { font-size: 64px; margin-bottom: 8px; }
|
|
.app-name {
|
|
font-size: 42px; font-weight: 800;
|
|
background: linear-gradient(135deg, #e94560, #ff6b8a, #e94560);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
margin-bottom: 8px;
|
|
}
|
|
.app-version {
|
|
font-size: 13px; color: #555; margin-bottom: 32px;
|
|
letter-spacing: 2px; text-transform: uppercase;
|
|
}
|
|
.tagline {
|
|
font-size: 16px; color: #8892b0; margin-bottom: 40px;
|
|
line-height: 1.6;
|
|
}
|
|
.choice-grid {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.choice-card {
|
|
background: rgba(22, 33, 62, 0.8);
|
|
border: 2px solid #2a2a4a; border-radius: 16px;
|
|
padding: 28px 20px; cursor: pointer; transition: all 0.3s;
|
|
text-align: center; position: relative; overflow: hidden;
|
|
}
|
|
.choice-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
|
height: 3px; background: transparent; transition: background 0.3s;
|
|
}
|
|
.choice-card:hover {
|
|
border-color: #e94560; transform: translateY(-3px);
|
|
box-shadow: 0 8px 30px rgba(233, 69, 96, 0.15);
|
|
}
|
|
.choice-card:hover::before { background: linear-gradient(90deg, #e94560, #ff6b8a); }
|
|
.choice-card .icon { font-size: 40px; margin-bottom: 12px; }
|
|
.choice-card h3 { font-size: 16px; color: #fff; margin-bottom: 8px; }
|
|
.choice-card p { font-size: 12px; color: #8892b0; line-height: 1.5; }
|
|
.choice-card .badge {
|
|
display: inline-block; margin-top: 10px; padding: 3px 10px;
|
|
border-radius: 10px; font-size: 10px; font-weight: 600;
|
|
}
|
|
.badge-easy { background: #1a3a1a; color: #4caf50; }
|
|
.badge-power { background: #3a2a1a; color: #ffa726; }
|
|
|
|
.divider {
|
|
display: flex; align-items: center; margin: 24px 0;
|
|
color: #444; font-size: 12px; text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.divider::before, .divider::after {
|
|
content: ''; flex: 1; height: 1px; background: #2a2a4a;
|
|
}
|
|
.divider span { padding: 0 16px; }
|
|
|
|
.footer {
|
|
font-size: 11px; color: #444; margin-top: 20px;
|
|
}
|
|
.footer a { color: #e94560; text-decoration: none; }
|
|
.footer a:hover { text-decoration: underline; }
|
|
|
|
/* Animation */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.welcome-container > * {
|
|
animation: fadeIn 0.5s ease forwards;
|
|
opacity: 0;
|
|
}
|
|
.welcome-container > *:nth-child(1) { animation-delay: 0.1s; }
|
|
.welcome-container > *:nth-child(2) { animation-delay: 0.2s; }
|
|
.welcome-container > *:nth-child(3) { animation-delay: 0.25s; }
|
|
.welcome-container > *:nth-child(4) { animation-delay: 0.3s; }
|
|
.welcome-container > *:nth-child(5) { animation-delay: 0.4s; }
|
|
.welcome-container > *:nth-child(6) { animation-delay: 0.5s; }
|
|
|
|
/* Particles */
|
|
.particles {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
pointer-events: none; z-index: 0;
|
|
}
|
|
.particle {
|
|
position: absolute; width: 2px; height: 2px;
|
|
background: rgba(233, 69, 96, 0.3); border-radius: 50%;
|
|
animation: float linear infinite;
|
|
}
|
|
@keyframes float {
|
|
0% { transform: translateY(100vh) scale(0); opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<div class="welcome-container">
|
|
<div class="logo">⚡</div>
|
|
<div class="app-name">AG X</div>
|
|
<div class="app-version">AI-Powered Code Intelligence</div>
|
|
<div class="tagline">
|
|
Choose how you'd like to connect to AI.<br>
|
|
You can always change this later from the menu.
|
|
</div>
|
|
|
|
<div class="choice-grid">
|
|
<div class="choice-card" id="choiceGoogle" onclick="chooseGoogle()">
|
|
<div class="icon">🔮</div>
|
|
<h3>Google Gemini</h3>
|
|
<p>Sign in with your Google account for instant access to Gemini models. No API key needed.</p>
|
|
<span class="badge badge-easy">Easiest — zero config</span>
|
|
</div>
|
|
<div class="choice-card" id="choiceProvider" onclick="chooseProvider()">
|
|
<div class="icon">🔌</div>
|
|
<h3>Another AI Provider</h3>
|
|
<p>Use OpenAI, Anthropic, DeepSeek, Ollama, or 15+ other providers with your own API key.</p>
|
|
<span class="badge badge-power">Power users</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Provider settings are always available via <strong>Menu → AI Provider Settings</strong> or the <strong>tray icon</strong>.
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { ipcRenderer } = require('electron');
|
|
|
|
// Create particles
|
|
(function() {
|
|
const container = document.getElementById('particles');
|
|
for (let i = 0; i < 30; i++) {
|
|
const p = document.createElement('div');
|
|
p.className = 'particle';
|
|
p.style.left = Math.random() * 100 + '%';
|
|
p.style.animationDuration = (8 + Math.random() * 12) + 's';
|
|
p.style.animationDelay = Math.random() * 10 + 's';
|
|
p.style.width = p.style.height = (1 + Math.random() * 3) + 'px';
|
|
container.appendChild(p);
|
|
}
|
|
})();
|
|
|
|
function chooseGoogle() {
|
|
document.getElementById('choiceGoogle').style.borderColor = '#e94560';
|
|
document.getElementById('choiceGoogle').style.background = 'rgba(233,69,96,0.1)';
|
|
ipcRenderer.send('welcome:choice', { provider: 'google_gemini' });
|
|
}
|
|
|
|
function chooseProvider() {
|
|
document.getElementById('choiceProvider').style.borderColor = '#ffa726';
|
|
document.getElementById('choiceProvider').style.background = 'rgba(255,167,38,0.1)';
|
|
ipcRenderer.send('welcome:choice', { provider: 'custom' });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|