1 changed files with 237 additions and 0 deletions
@ -0,0 +1,237 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|||
<title>Time Safari Theme Switcher</title> |
|||
<style> |
|||
:root { |
|||
--bg: #ffffff; |
|||
--text: #000000; |
|||
--primary: #dddddd; |
|||
--accent: #cccccc; |
|||
--highlight: #aaaaaa; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
padding: 2rem; |
|||
background-color: var(--bg); |
|||
color: var(--text); |
|||
font-family: system-ui, sans-serif; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
h2, h3 { |
|||
margin-top: 1.5rem; |
|||
} |
|||
|
|||
.theme-buttons { |
|||
margin: 1rem 0; |
|||
} |
|||
|
|||
button { |
|||
margin: 0.3rem; |
|||
padding: 0.5rem 1rem; |
|||
border: none; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
background: #eee; |
|||
transition: background 0.2s; |
|||
} |
|||
|
|||
button:hover { |
|||
background: #ddd; |
|||
} |
|||
|
|||
.swatch-bar { |
|||
display: flex; |
|||
height: 40px; |
|||
margin-bottom: 1.5rem; |
|||
border-radius: 6px; |
|||
overflow: hidden; |
|||
box-shadow: 0 2px 6px rgba(0,0,0,0.1); |
|||
} |
|||
|
|||
.swatch { |
|||
flex: 1; |
|||
} |
|||
|
|||
.card { |
|||
background: var(--primary); |
|||
padding: 1rem; |
|||
border-radius: 8px; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
.highlight { |
|||
background: var(--highlight); |
|||
padding: 0.5rem; |
|||
border-radius: 4px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.accent { |
|||
color: var(--accent); |
|||
} |
|||
|
|||
.color-vars { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); |
|||
gap: 1rem; |
|||
margin-top: 1rem; |
|||
} |
|||
|
|||
.color-tile { |
|||
border: 1px solid #ccc; |
|||
border-radius: 6px; |
|||
padding: 0.5rem; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
font-size: 0.9rem; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.tile-preview { |
|||
height: 40px; |
|||
border-radius: 4px; |
|||
margin-bottom: 0.3rem; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h2>🎨 Time Safari Theme Preview</h2> |
|||
|
|||
<!-- Theme Switch Buttons --> |
|||
<div class="theme-buttons"> |
|||
<button onclick="setTheme('op-calm')">🌼🧠 Optimistic Calm</button> |
|||
|
|||
<!-- |
|||
<button onclick="setTheme('pastel')">🌸 Warm Pastels</button> |
|||
<button onclick="setTheme('earth')">🌼 Optimistic Earth</button> |
|||
<button onclick="setTheme('bright')">✨ Bright Uplift</button> |
|||
<button onclick="setTheme('calm')">🧠 Productive Calm</button> |
|||
<button onclick="setTheme('garden')">🪴 Giving Garden</button> |
|||
<button onclick="setTheme('op-garden')">🌼🪴 Optimistic Garden</button> |
|||
--> |
|||
</div> |
|||
|
|||
<!-- Visual Designer Swatch Bar --> |
|||
<div class="swatch-bar"> |
|||
<div class="swatch" id="swatch-bg"></div> |
|||
<div class="swatch" id="swatch-text"></div> |
|||
<div class="swatch" id="swatch-primary"></div> |
|||
<div class="swatch" id="swatch-accent"></div> |
|||
<div class="swatch" id="swatch-highlight"></div> |
|||
</div> |
|||
|
|||
<!-- UI Preview Card --> |
|||
<div class="card"> |
|||
<h3>Sample Card</h3> |
|||
<p>This card reflects the current theme's <code>--primary</code> background color.</p> |
|||
<p class="highlight">This is a <code>--highlight</code> element.</p> |
|||
<p class="accent">This line uses the <code>--accent</code> color.</p> |
|||
</div> |
|||
|
|||
<!-- Variable Overview --> |
|||
<h3>Current Theme Colors</h3> |
|||
<div class="color-vars" id="colorVars"> |
|||
<!-- Filled by JavaScript --> |
|||
</div> |
|||
|
|||
<script> |
|||
const themes = { |
|||
"op-calm": { |
|||
'--bg': '#FAFAFA', |
|||
'--text': '#3E4C59', |
|||
'--primary': '#D0F0EF', |
|||
'--accent': '#E2725B', |
|||
'--highlight': '#6699CC' |
|||
}, |
|||
pastel: { |
|||
'--bg': '#fffafc', |
|||
'--text': '#444', |
|||
'--primary': '#CDE9F9', |
|||
'--accent': '#F7D6E0', |
|||
'--highlight': '#FBD38D' |
|||
}, |
|||
earth: { |
|||
'--bg': '#FAF3E0', |
|||
'--text': '#3A3A3A', |
|||
'--primary': '#FFCC70', |
|||
'--accent': '#E2725B', |
|||
'--highlight': '#7F9F80' |
|||
}, |
|||
bright: { |
|||
'--bg': '#FFF9F2', |
|||
'--text': '#2D2D2D', |
|||
'--primary': '#FFF685', |
|||
'--accent': '#FFB09E', |
|||
'--highlight': '#A7F2C1' |
|||
}, |
|||
calm: { |
|||
'--bg': '#FAFAFA', |
|||
'--text': '#3E4C59', |
|||
'--primary': '#D0F0EF', |
|||
'--accent': '#FFD8BE', |
|||
'--highlight': '#6699CC' |
|||
}, |
|||
garden: { |
|||
'--bg': '#F7FFF7', |
|||
'--text': '#3C3C3C', |
|||
'--primary': '#A8D5BA', |
|||
'--accent': '#E0A899', |
|||
'--highlight': '#F9DC5C' |
|||
}, |
|||
"op-garden": { |
|||
'--bg': '#F7FFF7', |
|||
'--text': '#3C3C3C', |
|||
'--primary': '#A8D5BA', |
|||
'--accent': '#E2725B', |
|||
'--highlight': '#F9DC5C' |
|||
}, |
|||
}; |
|||
|
|||
function setTheme(themeName) { |
|||
const theme = themes[themeName]; |
|||
for (let variable in theme) { |
|||
document.documentElement.style.setProperty(variable, theme[variable]); |
|||
} |
|||
localStorage.setItem('selectedTheme', themeName); |
|||
renderColorTiles(theme); |
|||
updateSwatchBar(theme); |
|||
} |
|||
|
|||
function loadTheme() { |
|||
const savedTheme = localStorage.getItem('selectedTheme') || 'op-calm'; |
|||
setTheme(savedTheme); |
|||
} |
|||
|
|||
function renderColorTiles(theme) { |
|||
const container = document.getElementById('colorVars'); |
|||
container.innerHTML = ''; |
|||
for (let variable in theme) { |
|||
const tile = document.createElement('div'); |
|||
tile.className = 'color-tile'; |
|||
tile.innerHTML = ` |
|||
<div class="tile-preview" style="background: ${theme[variable]}"></div> |
|||
<strong>${variable}</strong> |
|||
<code>${theme[variable]}</code> |
|||
`; |
|||
container.appendChild(tile); |
|||
} |
|||
} |
|||
|
|||
function updateSwatchBar(theme) { |
|||
document.getElementById('swatch-bg').style.background = theme['--bg']; |
|||
document.getElementById('swatch-text').style.background = theme['--text']; |
|||
document.getElementById('swatch-primary').style.background = theme['--primary']; |
|||
document.getElementById('swatch-accent').style.background = theme['--accent']; |
|||
document.getElementById('swatch-highlight').style.background = theme['--highlight']; |
|||
} |
|||
|
|||
window.onload = loadTheme; |
|||
</script> |
|||
</body> |
|||
</html> |
Loading…
Reference in new issue