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