151 lines
5.6 KiB
HTML
151 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ChatApp Redesign — 6 Varianten</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;800&family=Geist:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@600;700;800&family=Archivo+Black&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles/base.css">
|
|
<link rel="stylesheet" href="styles/variants.css">
|
|
<link rel="stylesheet" href="styles/rail.css">
|
|
<link rel="stylesheet" href="styles/call.css">
|
|
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- TWEAKS state -->
|
|
<script>
|
|
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
|
"showCall": false,
|
|
"density": "normal",
|
|
"font": "default"
|
|
}/*EDITMODE-END*/;
|
|
</script>
|
|
|
|
<!-- Variant switcher -->
|
|
<div class="variant-switcher" id="variant-switcher"></div>
|
|
|
|
<div class="variant-container" id="root"></div>
|
|
|
|
<!-- Tweaks panel -->
|
|
<div class="tweaks-panel" id="tweaks-panel">
|
|
<h3>Tweaks</h3>
|
|
<div class="tweaks-row">
|
|
<label>Incoming call overlay</label>
|
|
<select id="tweak-call">
|
|
<option value="false">Off</option>
|
|
<option value="true">Show</option>
|
|
</select>
|
|
</div>
|
|
<div class="tweaks-row">
|
|
<label>Content density</label>
|
|
<select id="tweak-density">
|
|
<option value="normal">Normal</option>
|
|
<option value="compact">Compact</option>
|
|
<option value="spacious">Spacious</option>
|
|
</select>
|
|
</div>
|
|
<div class="tweaks-row" style="font-size: 11px; opacity: 0.6; margin-top: 16px;">
|
|
Tipp: Klicke oben auf die Varianten um zu wechseln.
|
|
</div>
|
|
</div>
|
|
|
|
<script src="components/icons.jsx" type="text/babel"></script>
|
|
<script src="components/data.jsx" type="text/babel"></script>
|
|
<script src="components/call.jsx" type="text/babel"></script>
|
|
<script src="components/app.jsx" type="text/babel"></script>
|
|
|
|
<script type="text/babel">
|
|
const VARIANTS = [
|
|
{ key: 'clean', label: 'Clean Minimal', layout: 'topnav' },
|
|
{ key: 'clean-rail', label: 'Clean Rail', baseKey: 'clean', layout: 'rail' },
|
|
{ key: 'playful', label: 'Playful', layout: 'topnav' },
|
|
{ key: 'y2k', label: 'Y2K Glass', layout: 'topnav' },
|
|
{ key: 'cyber', label: 'Cyberpunk', layout: 'topnav' },
|
|
{ key: 'warm', label: 'Warm Soft', layout: 'topnav' },
|
|
{ key: 'brutal', label: 'Brutal Gaming', layout: 'topnav' },
|
|
];
|
|
|
|
const App = () => {
|
|
const [activeVariant, setActiveVariant] = React.useState(() => {
|
|
return localStorage.getItem('chatapp-variant') || 'clean';
|
|
});
|
|
const [isDark, setIsDark] = React.useState(() => {
|
|
return localStorage.getItem('chatapp-dark') === 'true';
|
|
});
|
|
const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
|
|
|
|
React.useEffect(() => {
|
|
localStorage.setItem('chatapp-variant', activeVariant);
|
|
}, [activeVariant]);
|
|
React.useEffect(() => {
|
|
localStorage.setItem('chatapp-dark', String(isDark));
|
|
}, [isDark]);
|
|
|
|
// Tweaks wiring
|
|
React.useEffect(() => {
|
|
const handler = (e) => {
|
|
if (e.data?.type === '__activate_edit_mode') {
|
|
document.getElementById('tweaks-panel').classList.add('open');
|
|
} else if (e.data?.type === '__deactivate_edit_mode') {
|
|
document.getElementById('tweaks-panel').classList.remove('open');
|
|
}
|
|
};
|
|
window.addEventListener('message', handler);
|
|
window.parent.postMessage({type: '__edit_mode_available'}, '*');
|
|
|
|
const callSel = document.getElementById('tweak-call');
|
|
const densSel = document.getElementById('tweak-density');
|
|
callSel.value = String(tweaks.showCall);
|
|
densSel.value = tweaks.density;
|
|
callSel.onchange = () => {
|
|
const v = callSel.value === 'true';
|
|
setTweaks(t => ({...t, showCall: v}));
|
|
window.parent.postMessage({type: '__edit_mode_set_keys', edits: {showCall: v}}, '*');
|
|
};
|
|
densSel.onchange = () => {
|
|
setTweaks(t => ({...t, density: densSel.value}));
|
|
window.parent.postMessage({type: '__edit_mode_set_keys', edits: {density: densSel.value}}, '*');
|
|
};
|
|
|
|
return () => window.removeEventListener('message', handler);
|
|
}, []);
|
|
|
|
// Render variant switcher buttons
|
|
React.useEffect(() => {
|
|
const sw = document.getElementById('variant-switcher');
|
|
sw.innerHTML = '';
|
|
VARIANTS.forEach((v, i) => {
|
|
const b = document.createElement('button');
|
|
b.textContent = `${String(i+1).padStart(2,'0')} ${v.label}`;
|
|
if (v.key === activeVariant) b.classList.add('active');
|
|
b.onclick = () => setActiveVariant(v.key);
|
|
sw.appendChild(b);
|
|
});
|
|
}, [activeVariant]);
|
|
|
|
const idx = VARIANTS.findIndex(v => v.key === activeVariant);
|
|
const variant = { ...VARIANTS[idx], idx };
|
|
|
|
return (
|
|
<ChatApp
|
|
key={activeVariant}
|
|
variant={variant}
|
|
showCall={tweaks.showCall}
|
|
showProfile={false}
|
|
isDark={isDark}
|
|
onToggleDark={() => setIsDark(d => !d)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|