<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Zodiak i kamienie naturalne</title>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background: #0f0f1a;
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 650px;
margin: auto;
background: #1c1c2e;
padding: 20px;
border-radius: 15px;
}
select, button {
padding: 10px;
margin: 10px;
border-radius: 8px;
border: none;
}
button {
cursor: pointer;
background: #7c5cff;
color: white;
}
.card {
background: #2a2a44;
padding: 12px;
margin-top: 8px;
border-radius: 10px;
cursor: pointer;
}
.card:hover {
background: #3a3a5e;
}
#qr {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>🔮 Znak zodiaku i kamienie naturalne</h2>
<p>Wybierz swój znak:</p>
<select id="zodiac">
<option value="">-- wybierz --</option>
<option>Baran</option>
<option>Byk</option>
<option>Bliźnięta</option>
<option>Rak</option>
<option>Lew</option>
<option>Panna</option>
<option>Waga</option>
<option>Skorpion</option>
<option>Strzelec</option>
<option>Koziorożec</option>
<option>Wodnik</option>
<option>Ryby</option>
</select>
<br/>
<button onclick="showStones()">Pokaż kamienie</button>
<div id="stones"></div>
<div id="description"></div>
<hr/>
<h3>📱 QR kod do ankiety</h3>
<div id="qr"></div>
</div>
<script>
const data = {
"Baran": [
{name:"Granat", desc:"Dodaje odwagi, siły i determinacji."},
{name:"Hematyt", desc:"Uziemia energię i wzmacnia działanie."},
{name:"Jaspis", desc:"Stabilizuje emocje i wspiera wytrwałość."}
],
"Byk": [
{name:"Kwarc Różowy", desc:"Wzmacnia miłość, harmonię i spokój."},
{name:"Jadeit", desc:"Przynosi dobrobyt i równowagę."},
{name:"Chryzopraz", desc:"Wspiera serce i pozytywne emocje."}
],
"Bliźnięta": [
{name:"Chalcedon", desc:"Wspiera komunikację i jasność myśli."},
{name:"Sodalit", desc:"Pomaga w logicznym myśleniu."},
{name:"Tygrysie Oko", desc:"Wzmacnia koncentrację i decyzje."}
],
"Rak": [
{name:"Perła", desc:"Wzmacnia emocje i intuicję."},
{name:"Kwarc Różowy", desc:"Chroni serce i relacje."},
{name:"Kamień Słoneczny", desc:"Dodaje radości i lekkości emocjonalnej."}
],
"Lew": [
{name:"Rubin", desc:"Wzmacnia siłę, pasję i charyzmę."},
{name:"Piryt", desc:"Dodaje pewności siebie i sukcesu."},
{name:"Tygrysie Oko", desc:"Wzmacnia odwagę i działanie."}
],
"Panna": [
{name:"Amazonit", desc:"Uspokaja i porządkuje myśli."},
{name:"Ametyst", desc:"Wspiera koncentrację i spokój."},
{name:"Fosfosyderyt", desc:"Pomaga w regeneracji emocjonalnej."}
],
"Waga": [
{name:"Lapis Lazuli", desc:"Wspiera równowagę i decyzje."},
{name:"Kwarc Różowy", desc:"Wzmacnia relacje i harmonię."},
{name:"Sodalit", desc:"Pomaga w komunikacji i balansie."}
],
"Skorpion": [
{name:"Obsydian", desc:"Chroni i oczyszcza energię."},
{name:"Malachit", desc:"Wspiera transformację i zmiany."},
{name:"Granat", desc:"Dodaje siły emocjonalnej."}
],
"Strzelec": [
{name:"Turmalin", desc:"Chroni i wzmacnia podróże duchowe."},
{name:"Ametyst", desc:"Rozwija intuicję i duchowość."},
{name:"Kryształ Górski", desc:"Wzmacnia energię i cel."}
],
"Koziorożec": [
{name:"Onyks", desc:"Wzmacnia dyscyplinę i odporność."},
{name:"Hematyt", desc:"Stabilizuje i uziemia."},
{name:"Kwarc Dymny", desc:"Pomaga w ciężkich emocjach."}
],
"Wodnik": [
{name:"Amazonit", desc:"Wspiera niezależność i spokój."},
{name:"Ametyst", desc:"Rozwija intuicję i kreatywność."},
{name:"Lepidolit", desc:"Redukuje stres i napięcie."}
],
"Ryby": [
{name:"Akwamaryn (symbolicznie Kryształ Górski)", desc:"Wspiera emocje i
spokój."},
{name:"Ametyst", desc:"Chroni i rozwija duchowość."},
{name:"Kwarc Różowy", desc:"Wzmacnia empatię i miłość."}
]
};
function showStones(){
const zodiac = document.getElementById("zodiac").value;
const container = document.getElementById("stones");
const desc = document.getElementById("description");
container.innerHTML = "";
desc.innerHTML = "";
if(!zodiac) return;
data[zodiac].forEach(stone => {
const div = document.createElement("div");
div.className = "card";
div.innerText = stone.name;
div.onclick = () => {
desc.innerHTML = `
<h3>${stone.name}</h3>
<p>${stone.desc}</p>
`;
};
container.appendChild(div);
});
}
// QR code (zmień na swój link po wrzuceniu strony)
const url = "https://twoja-strona.pl";
QRCode.toCanvas(document.createElement('canvas'), url, function (error, canvas) {
if (!error) document.getElementById('qr').appendChild(canvas);
});
</script>
</body>
</html>
