<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Hřištěčko</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
font-family: "Segoe UI", system-ui, sans-serif;
background: #0a0a1a;
color: #e0e0e0;
padding: 2rem;
}
h1 {
text-align: center;
font-size: 2.2rem;
background: linear-gradient(to right, #00d4aa, #7b68ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
}
.widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.widget {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 2rem;
transition: all 0.3s;
}
.widget:hover {
border-color: rgba(0,212,170,0.3);
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.widget h2 {
color: #00d4aa;
font-size: 1.2rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Widget 1: Výběr barvy */
.color-preview {
width: 100%;
height: 80px;
border-radius: 12px;
margin-bottom: 1rem;
transition: background 0.5s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.1rem;
}
.color-controls {
display: grid;
gap: 0.8rem;
}
.color-controls label {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 0.9rem;
}
.color-controls input[type="range"] {
flex: 1;
accent-color: #00d4aa;
height: 6px;
}
.color-value { font-family: monospace; color: #a78bfa; min-width: 30px; }
/* Widget 2: Počítadlo kliků */
.counter-display {
font-size: 4rem;
text-align: center;
color: #00d4aa;
font-weight: 800;
margin: 1rem 0;
transition: transform 0.15s;
}
.counter-display.clicked { transform: scale(1.3); }
.counter-btns {
display: flex;
gap: 1rem;
justify-content: center;
}
.counter-btns button {
padding: 0.6rem 1.5rem;
border: none;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
}
.btn-plus {
background: linear-gradient(135deg, #00d4aa, #00b4d8);
color: #000;
}
.btn-minus {
background: rgba(255,107,157,0.2);
color: #ff6b9d;
border: 1px solid rgba(255,107,157,0.3) !important;
}
.btn-reset {
background: rgba(255,255,255,0.1);
color: #888;
}
.counter-btns button:hover { transform: scale(1.1); }
/* Widget 3: Generátor citátů */
.quote-text {
font-style: italic;
font-size: 1.1rem;
line-height: 1.8;
color: #c0c0c0;
min-height: 80px;
display: flex;
align-items: center;
text-align: center;
padding: 1rem;
background: rgba(123,104,238,0.05);
border-radius: 12px;
border-left: 3px solid #7b68ee;
margin-bottom: 1rem;
}
.quote-author {
text-align: right;
color: #7b68ee;
font-weight: 600;
margin-bottom: 1rem;
}
.quote-btn {
display: block;
width: 100%;
padding: 0.8rem;
background: linear-gradient(135deg, #7b68ee, #a78bfa);
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
}
.quote-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(123,104,238,0.4); }
@media (max-width: 600px) {
h1 { font-size: 1.8rem; }
body { padding: 1rem; }
}
</style>
</head>
<body>
<h1>⚡ JavaScript Hřištěčko</h1>
<div class="widgets">
<!-- VÝBĚR BARVY -->
<div class="widget">
<h2>🎨 Výběr barvy</h2>
<div class="color-preview" id="colorPreview" style="background: rgb(0, 212, 170);">#00d4aa</div>
<div class="color-controls">
<label>R <input type="range" id="redSlider" min="0" max="255" value="0"> <span class="color-value" id="redVal">0</span></label>
<label>G <input type="range" id="greenSlider" min="0" max="255" value="212"> <span class="color-value" id="greenVal">212</span></label>
<label>B <input type="range" id="blueSlider" min="0" max="255" value="170"> <span class="color-value" id="blueVal">170</span></label>
</div>
</div>
<!-- POČÍTADLO KLIKŮ -->
<div class="widget">
<h2>💯 Počítadlo kliků</h2>
<div class="counter-display" id="counter">0</div>
<div class="counter-btns">
<button class="btn-minus" onclick="changeCount(-1)">- 1</button>
<button class="btn-plus" onclick="changeCount(1)">+ 1</button>
<button class="btn-reset" onclick="resetCount()">Reset</button>
</div>
</div>
<!-- GENERÁTOR CITÁTŮ -->
<div class="widget">
<h2>💬 Náhodný citát</h2>
<div class="quote-text" id="quoteText">Klikni na tlačítko pro citát!</div>
<div class="quote-author" id="quoteAuthor"></div>
<button class="quote-btn" onclick="newQuote()">🔄 Nový citát</button>
</div>
</div>
<script>
// === VYBER BARVY ===
const preview = document.getElementById("colorPreview");
const sliders = {
red: document.getElementById("redSlider"),
green: document.getElementById("greenSlider"),
blue: document.getElementById("blueSlider")
};
const vals = {
red: document.getElementById("redVal"),
green: document.getElementById("greenVal"),
blue: document.getElementById("blueVal")
};
function updateColor() {
const r = sliders.red.value;
const g = sliders.green.value;
const b = sliders.blue.value;
vals.red.textContent = r;
vals.green.textContent = g;
vals.blue.textContent = b;
const hex = "#" + [r, g, b].map(x => parseInt(x).toString(16).padStart(2, "0")).join("");
preview.style.background = "rgb(" + r + "," + g + "," + b + ")";
preview.textContent = hex;
preview.style.color = (parseInt(r)*0.299 + parseInt(g)*0.587 + parseInt(b)*0.114) > 128 ? "#000" : "#fff";
document.body.style.borderTop = "4px solid " + hex;
}
Object.values(sliders).forEach(s => s.addEventListener("input", updateColor));
// === POČÍTADLO ===
let count = 0;
const counterEl = document.getElementById("counter");
function changeCount(val) {
count += val;
counterEl.textContent = count;
counterEl.classList.add("clicked");
setTimeout(() => counterEl.classList.remove("clicked"), 150);
if (count > 0) counterEl.style.color = "#00d4aa";
else if (count < 0) counterEl.style.color = "#ff6b9d";
else counterEl.style.color = "#888";
}
function resetCount() {
count = 0;
counterEl.textContent = "0";
counterEl.style.color = "#888";
}
// === CITÁTY ===
const quotes = [
{ text: "Jediný způsob, jak dělat skvělé věci, je milovat to, co děláte.", author: "Steve Jobs" },
{ text: "Budoucnost patří těm, kdo věří kráse svých snů.", author: "Eleanor Roosevelt" },
{ text: "Kód je jako humor. Když ho musíte vysvětlovat, je špatný.", author: "Cory House" },
{ text: "Nejlepší čas zasadit strom byl před 20 lety. Druhý nejlepší je teď.", author: "Čínské přísloví" },
{ text: "Každý expert byl jednou začátečník.", author: "Helen Hayes" },
{ text: "Jednoduchost je vrcholem sofistikovanosti.", author: "Leonardo da Vinci" },
{ text: "Programování není o tom, co víte. Je to o tom, co dokážete zjistit.", author: "Chris Pine" },
{ text: "Kreativita je inteligence, která se baví.", author: "Albert Einstein" }
];
function newQuote() {
const q = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quoteText").textContent = '""' + q.text + '"';
document.getElementById("quoteAuthor").textContent = "- " + q.author;
}
</script>
</body>
</html>