-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
77 lines (76 loc) · 5.83 KB
/
Copy pathindex.html
File metadata and controls
77 lines (76 loc) · 5.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="תקיעות · הלכה · לוח חגים">
<title>שופר — גרסה מאוחדת</title>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Syne:wght@700&display=swap" rel="stylesheet">
<style>
:root{--gold:#f5c842;--accent:#7c6af5;--glass:rgba(255,255,255,.1);--border:rgba(255,255,255,.18)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Rubik,sans-serif;min-height:100vh;background:linear-gradient(135deg,#78350f,#451a03,#1c0a00);color:#fff;line-height:1.55}
.bg-mesh{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 80% 10%,rgba(255,255,255,.12),transparent),radial-gradient(ellipse 50% 30% at 10% 90%,rgba(0,0,0,.2),transparent)}
.nav{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px;background:rgba(8,8,16,.75);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav a,.nav button{color:#fff;text-decoration:none;font-weight:600;font-size:.85rem;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--border);cursor:pointer;font-family:inherit}
.nav a:hover,.nav button:hover,.tab.on{border-color:var(--gold);color:var(--gold)}
.badge{background:linear-gradient(135deg,var(--gold),#e0a820);color:#111;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:800}
.wrap{max-width:980px;margin:0 auto;padding:24px 18px 60px;position:relative;z-index:1}
.hero h1{font-family:Syne,sans-serif;font-size:clamp(1.7rem,4vw,2.5rem);margin:8px 0}
.hero .sub{opacity:.88;max-width:640px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 16px}
.tab{padding:10px 18px;border-radius:12px;border:1px solid var(--border);background:var(--glass);cursor:pointer;font-weight:600;font-size:.88rem}
.panel{display:none;background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:22px;backdrop-filter:blur(10px);margin-bottom:16px}
.panel.on{display:block}
.panel h2{font-size:1.15rem;margin-bottom:12px;color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.card{background:rgba(0,0,0,.22);border-radius:14px;padding:16px;border:1px solid var(--border);transition:.2s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
input,textarea,select{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:#fff;font-family:inherit;margin:8px 0}
label{font-size:.85rem;opacity:.9;display:block;margin-top:10px}
.btn{display:inline-block;margin:10px 6px 0 0;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#e0a820);color:#111;font-weight:800;border:none;cursor:pointer;font-size:.92rem}
.btn.ghost{background:var(--glass);color:#fff;border:1px solid var(--border)}
.stat-row{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.stat{flex:1;min-width:100px;text-align:center;padding:14px;background:rgba(0,0,0,.25);border-radius:14px}
.stat b{display:block;font-size:1.5rem;color:var(--gold)}
.meter{height:10px;background:rgba(0,0,0,.4);border-radius:999px;overflow:hidden;margin-top:8px}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:999px;transition:width .4s}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(245,200,66,.2);font-size:.75rem;margin:4px 0 0 4px}
canvas{display:block;max-width:100%;margin:12px auto;border-radius:14px;background:#0a0a12}
pre,code{font-family:Consolas,monospace;font-size:.85rem}
pre{background:rgba(0,0,0,.4);padding:14px;border-radius:12px;overflow:auto;max-height:280px}
.vers-list{font-size:.82rem;opacity:.75;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
</style>
</head>
<body>
<div class="bg-mesh"></div>
<nav class="nav">
<a href="https://storied-alfajores-6f10d2.netlify.app/portfolio.html">← תיק עבודות</a>
<span class="badge">גרסה מאוחדת v3</span>
</nav>
<div class="wrap">
<div class="hero"><h1>📯 שופר Ultimate</h1><p class="sub">מאחד: 30 תקיעות · הלכה · מצב הדרכה · לוח חגים</p></div>
<div class="tabs"><button class="tab" data-p="p1">🔊 תקיעות</button><button class="tab" data-p="p2">📖 הלכה</button></div>
<div class="panel on" id="p1"><h2>צלילי שופר</h2><div class="grid">
<div class="card" style="cursor:pointer" onclick="play('תקיעה')"><strong>תקיעה</strong></div>
<div class="card" style="cursor:pointer" onclick="play('שברים')"><strong>שברים</strong></div>
<div class="card" style="cursor:pointer" onclick="play('תרועה')"><strong>תרועה</strong></div>
<div class="card" style="cursor:pointer" onclick="play('תשלום')"><strong>תשלום תקיעה</strong></div></div><p id="snd" style="margin-top:12px"></p></div>
<div class="panel" id="p2"><h2>הלכה</h2><div class="card"><p>חייב כל אדם לשמוע תקיעת שופר בראש השנה. מצוות עשה מן התורה.</p></div></div>
<p class="vers-list">מאוחד: v1 תקיעות · v2 הלכה · Ultimate</p>
</div>
<script>
function tabs(ids) {
document.querySelectorAll('.tab').forEach(t=>t.onclick=()=>{
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('on'));
document.querySelectorAll('.panel').forEach(x=>x.classList.remove('on'));
t.classList.add('on');
document.getElementById(t.dataset.p).classList.add('on');
});
document.querySelector('.tab').classList.add('on');
document.getElementById(ids[0]).classList.add('on');
}
function play(n){document.getElementById('snd').textContent='🔊 מנגן: '+n+' (הדגמה — חיבור אודיו בגרסה מלאה)'};tabs(['p1']);
</script>
</body>
</html>