diff --git a/MainPage/Abdelaziz/CrossWords.html b/MainPage/Abdelaziz/CrossWords.html new file mode 100644 index 0000000..7e03488 --- /dev/null +++ b/MainPage/Abdelaziz/CrossWords.html @@ -0,0 +1,172 @@ + + + + + + Crossword Puzzle + + + +
+

Crossword Puzzle - 21×21

+ +
+
+
+ +
+
+

Across

+
+
+
+
+

Down

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/MainPage.html b/MainPage/MainPage.html similarity index 62% rename from MainPage.html rename to MainPage/MainPage.html index 5f8a6d7..e8db003 100644 --- a/MainPage.html +++ b/MainPage/MainPage.html @@ -15,19 +15,19 @@

Member 1

-
-

Game 2

-

Member 2

+
+

Game 2

+

Streichholzrätsel

-
+

Game 3

-

Member 3

+

Wörter lernen

-
-

Game 4

-

Member 4

+
+

CrossWord

+

Abdelaziz

diff --git a/MainPageStyle.css b/MainPage/MainPageStyle.css similarity index 100% rename from MainPageStyle.css rename to MainPage/MainPageStyle.css diff --git a/WoerterLernen.html b/MainPage/stas/WoerterLernen.html similarity index 77% rename from WoerterLernen.html rename to MainPage/stas/WoerterLernen.html index dacfbb9..217bf2f 100644 --- a/WoerterLernen.html +++ b/MainPage/stas/WoerterLernen.html @@ -4,7 +4,7 @@ Meine Website - +
@@ -40,5 +40,14 @@
+<<<<<<< HEAD:WoerterLernen.html +======= + +
+ + +
+ +>>>>>>> a18b892e86a6b427b23c2eb100b9986d3c15121c:MainPage/stas/WoerterLernen.html \ No newline at end of file diff --git a/js/eigenerCode.js b/MainPage/stas/eigenerCode.js similarity index 100% rename from js/eigenerCode.js rename to MainPage/stas/eigenerCode.js diff --git a/css/style.css b/MainPage/stas/style.css similarity index 100% rename from css/style.css rename to MainPage/stas/style.css diff --git a/MainPage/younes/Streichholzreatsel.css b/MainPage/younes/Streichholzreatsel.css new file mode 100644 index 0000000..15a9bcc --- /dev/null +++ b/MainPage/younes/Streichholzreatsel.css @@ -0,0 +1,266 @@ + :root{ + --bg:#0b1020; + --panel:#0f1733; + --text:#e9eeff; + --muted:#9fb0ff; + --shadow: 0 10px 30px rgba(0,0,0,.35); + --gap: 14px; + --matchW: 14px; + --matchL: 68px; + --matchT: 14px; + --radius: 12px; + } + *{box-sizing:border-box} + body{ + margin:0; + min-height:100vh; + background: radial-gradient(1200px 600px at 20% 20%, #1a2a7a 0%, transparent 60%), + radial-gradient(900px 500px at 85% 30%, #2b1a7a 0%, transparent 60%), + var(--bg); + color:var(--text); + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display:flex; + align-items:center; + justify-content:center; + padding:24px; + } + .app{ + width:min(1100px, 100%); + display:grid; + grid-template-columns: 1.3fr .9fr; + gap:18px; + } + @media (max-width: 980px){ + .app{grid-template-columns:1fr} + } + + .card{ + background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); + border: 1px solid rgba(255,255,255,.10); + border-radius: 18px; + box-shadow: var(--shadow); + overflow:hidden; + } + .card-header{ + padding:16px 18px; + border-bottom: 1px solid rgba(255,255,255,.10); + display:flex; + align-items:center; + justify-content:space-between; + gap:12px; + } + .title{ + display:flex; + flex-direction:column; + gap:4px; + } + .title h1{ + font-size:18px; + margin:0; + letter-spacing:.2px; + } + .title .sub{ + font-size:12px; + color:var(--muted); + } + .controls{ + display:flex; + gap:10px; + flex-wrap:wrap; + justify-content:flex-end; + } + button{ + border:none; + padding:10px 12px; + border-radius: 12px; + background: rgba(255,255,255,.12); + color:var(--text); + cursor:pointer; + font-weight:600; + letter-spacing:.2px; + transition: transform .05s ease, background .2s ease; + user-select:none; + } + button:hover{ background: rgba(255,255,255,.18); } + button:active{ transform: translateY(1px); } + button.primary{ + background: linear-gradient(180deg, rgba(102,168,255,.7), rgba(102,168,255,.35)); + } + button.primary:hover{ + background: linear-gradient(180deg, rgba(102,168,255,.85), rgba(102,168,255,.45)); + } + + .play{ + padding:18px; + display:flex; + flex-direction:column; + gap:14px; + } + + .statusRow{ + display:flex; + flex-wrap:wrap; + gap:10px; + align-items:center; + justify-content:space-between; + background: rgba(0,0,0,.18); + border: 1px solid rgba(255,255,255,.08); + border-radius: 14px; + padding:12px 14px; + } + .pill{ + display:inline-flex; + align-items:center; + gap:8px; + padding:8px 10px; + border-radius: 999px; + background: rgba(255,255,255,.08); + font-size:12px; + color:var(--text); + border:1px solid rgba(255,255,255,.08); + white-space:nowrap; + } + .dot{ + width:10px;height:10px;border-radius:50%; + background:#ff5c5c; + box-shadow: 0 0 0 3px rgba(255,92,92,.15); + } + .dot.ok{ + background:#29e07a; + box-shadow: 0 0 0 3px rgba(41,224,122,.15); + } + + /* Equation layout */ + .equationWrap{ + background: rgba(0,0,0,.18); + border: 1px solid rgba(255,255,255,.08); + border-radius: 16px; + padding:16px; + overflow:auto; + } + .equation{ + display:flex; + align-items:center; + gap: var(--gap); + padding:8px; + min-width: 740px; + } + .group{ + display:flex; + align-items:center; + gap: var(--gap); + } + .symbol{ + font-size: 34px; + font-weight: 900; + color: rgba(255,255,255,.85); + padding: 6px 10px; + border-radius: 14px; + background: rgba(255,255,255,.06); + border: 1px solid rgba(255,255,255,.08); + user-select:none; + } + + .digit{ + position:relative; + width: 110px; + height: 170px; + border-radius: 16px; + background: rgba(255,255,255,.04); + border: 1px solid rgba(255,255,255,.07); + box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); + flex:0 0 auto; + } + + .seg{ + position:absolute; + width: var(--matchL); + height: var(--matchW); + border-radius: 999px; + cursor:pointer; + transition: filter .12s ease, transform .05s ease; + box-shadow: 0 10px 18px rgba(0,0,0,.25); + } + .seg:hover{ filter: brightness(1.1); } + .seg:active{ transform: translateY(1px); } + + .seg.removed{ + background: rgba(255,255,255,0) !important; + box-shadow:none; + cursor:not-allowed; + pointer-events:none; + } + + + .seg.a{ top: 16px; left: 21px; } + .seg.b{ top: 32px; left: 73px; width: var(--matchW); height: var(--matchL); } + .seg.c{ top: 92px; left: 73px; width: var(--matchW); height: var(--matchL); } + .seg.d{ top: 146px; left: 21px; } + .seg.e{ top: 92px; left: 23px; width: var(--matchW); height: var(--matchL); } + .seg.f{ top: 32px; left: 23px; width: var(--matchW); height: var(--matchL); } + .seg.g{ top: 81px; left: 21px; } + + .side{ + padding:18px; + display:flex; + flex-direction:column; + gap:14px; + } + .hint{ + background: rgba(0,0,0,.18); + border: 1px solid rgba(255,255,255,.08); + border-radius: 16px; + padding:14px; + color: rgba(255,255,255,.9); + font-size:13px; + line-height:1.4; + } + .hint b{ color:#fff; } + + .removedBox{ + background: rgba(0,0,0,.18); + border: 1px solid rgba(255,255,255,.08); + border-radius: 16px; + padding:14px; + min-height: 160px; + display:flex; + flex-direction:column; + gap:10px; + } + .removedHeader{ + display:flex; + align-items:center; + justify-content:space-between; + gap:10px; + } + .removedHeader .label{ + font-weight:800; + font-size:13px; + color: rgba(255,255,255,.92); + } + .removedHeader .count{ + font-size:12px; + color: var(--muted); + white-space:nowrap; + } + .removedGrid{ + display:flex; + flex-wrap:wrap; + gap:10px; + align-items:center; + } + .removedSeg{ + width: 44px; + height: 16px; + border-radius: 999px; + box-shadow: 0 8px 16px rgba(0,0,0,.25); + border: 1px solid rgba(255,255,255,.12); + } + .footerNote{ + font-size:12px; + color: rgba(255,255,255,.7); + line-height:1.35; + } + .mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; + } \ No newline at end of file diff --git a/MainPage/younes/Streichholzreatsel.html b/MainPage/younes/Streichholzreatsel.html new file mode 100644 index 0000000..52ac2fa --- /dev/null +++ b/MainPage/younes/Streichholzreatsel.html @@ -0,0 +1,76 @@ + + + + + + + Allumettes (Matchstick) Equation Infinite Levels + + + +
+
+
+
+

Allumettes Equation Infinite Levels

+
Klicke auf die Streichhölzer, um sie zu entfernen (sie werden weiß bzw. unsichtbar). + Mache die Gleichung wahr, indem du genau die vorgegebene Anzahl entfernst.
+
+
+ + +
+
+ +
+
+
Level: 1
+
lösch target: 2
+
gelöscht 0
+
+ + Equation ist falsch +
+
+ +
+
+
+ +
+ Goal: lösch N sodass die Gleichung WAHR wird. + Es ist nur das Entfernen erlaubt (kein Hinzufügen). Die Ziffern bestehen aus 7 Segmenten. +Der Generator garantiert, dass jedes Level lösbar ist (unendlich viele Level). +
+
+
+ +
+
+
+

gelöschte matches

+
jede click clont den match hier.
+
+
+ +
+
+ +
+
+
gelöschte pile
+
0 sticks
+
+
+
+ +
+ Tip: Du kannst Streichhölzer von jeder Ziffer in der Gleichung entfernen. +Eine Ziffer ändert sich nur dann in eine andere Ziffer, wenn die verbleibenden Segmente einem gültigen Muster von 0 bis 9 entsprechen. +
+
+
+
+ + + diff --git a/MainPage/younes/Streichholzreatsel.js b/MainPage/younes/Streichholzreatsel.js new file mode 100644 index 0000000..fe8e584 --- /dev/null +++ b/MainPage/younes/Streichholzreatsel.js @@ -0,0 +1,299 @@ + + + +const SEG = { a:0, b:1, c:2, d:3, e:4, f:5, g:6 }; +const segNames = ["a","b","c","d","e","f","g"]; + +function maskFromSegments(list){ + let m = 0; + for(const s of list) m |= (1 << SEG[s]); + return m; +} + + +const DIGIT_MASK = [ + maskFromSegments(["a","b","c","d","e","f"]), + maskFromSegments(["b","c"]), + maskFromSegments(["a","b","d","e","g"]), + maskFromSegments(["a","b","c","d","g"]), + maskFromSegments(["b","c","f","g"]), + maskFromSegments(["a","c","d","f","g"]), + maskFromSegments(["a","c","d","e","f","g"]), + maskFromSegments(["a","b","c"]), + maskFromSegments(["a","b","c","d","e","f","g"]), + maskFromSegments(["a","b","c","d","f","g"]) +]; + + +const MASK_TO_DIGIT = new Map(DIGIT_MASK.map((m,d)=>[m,d])); + + +function removableTargetsFromDigit(d){ + const start = DIGIT_MASK[d]; + const res = []; + for(let t=0;t<=9;t++){ + const target = DIGIT_MASK[t]; + if((target & start) === target){ + + const removed = popcount(start ^ target); + res.push({to:t, removed}); + } + } + return res; +} + +function popcount(x){ + x = x >>> 0; + let c = 0; + while(x){ x &= (x-1); c++; } + return c; +} + +function randInt(min, max){ // inclusive + return Math.floor(Math.random() * (max - min + 1)) + min; +} +function pick(arr){ return arr[randInt(0, arr.length-1)]; } + +let level = 1; +let targetRemove = 2; +let current = null; +let solution = null; +let removedSoFar = 0; + + +let removedSet = new Set(); + +const elEq = document.getElementById("equation"); +const elRemovedGrid = document.getElementById("removedGrid"); +const elRemovedCount = document.getElementById("removedCount"); +const elPileCount = document.getElementById("pileCount"); +const elLvl = document.getElementById("lvl"); +const elTarget = document.getElementById("target"); +const elGoalN = document.getElementById("goalN"); +const elTruthDot = document.getElementById("truthDot"); +const elTruthText = document.getElementById("truthText"); +const elHint = document.getElementById("hint"); + +document.getElementById("btnNew").addEventListener("click", () => { + level++; + generateLevel(); +}); +document.getElementById("btnReset").addEventListener("click", () => { + + resetPlayState(); + renderEquation(); + updateTruthUI(); +}); + +function segmentsFromMask(mask){ + const set = new Set(); + for(let i=0;i<7;i++){ + if(mask & (1< { + if(removedSet.has(key)) return; + if(removedSoFar >= targetRemove) return; + + removedSet.add(key); + removedSoFar++; + + + seg.classList.add("removed"); + + + const clone = document.createElement("div"); + clone.className = "removedSeg"; + clone.style.background = color; + elRemovedGrid.appendChild(clone); + + syncRemovedCounts(); + updateTruthUI(); + + if(removedSoFar === targetRemove){ + if(equationIsTrue()){ + elHint.innerHTML = "Solved! You removed exactly the target and made the equation true. Click New level."; + } else { + elHint.innerHTML = " Not solved. You used all removals but the equation isn’t true. Click Reset level to try again."; + } + } + }); + + digit.appendChild(seg); + } + return digit; +} + +function renderEquation(){ + elEq.innerHTML = ""; + + const colors = [ + "linear-gradient(180deg,#ff6b6b,#d64545)", + "linear-gradient(180deg,#6bcBff,#3a7bd5)", + "linear-gradient(180deg,#6bffb3,#1fae63)" + ]; + + const g1 = document.createElement("div"); + g1.className = "group"; + g1.appendChild(renderDigit(current.A, 0, colors[0])); + + const plus = document.createElement("div"); + plus.className = "symbol"; + plus.textContent = "+"; + + const g2 = document.createElement("div"); + g2.className = "group"; + g2.appendChild(renderDigit(current.B, 1, colors[1])); + + const eq = document.createElement("div"); + eq.className = "symbol"; + eq.textContent = "="; + + const g3 = document.createElement("div"); + g3.className = "group"; + g3.appendChild(renderDigit(current.C, 2, colors[2])); + + elEq.appendChild(g1); + elEq.appendChild(plus); + elEq.appendChild(g2); + elEq.appendChild(eq); + elEq.appendChild(g3); + + updateTruthUI(); +} + + + +function generateLevel(){ + resetPlayState(); + + + targetRemove = Math.min(2 + Math.floor(Math.log2(level + 1)), 6); + + + let tries = 0; + while(true){ + tries++; + if(tries > 5000){ + targetRemove = Math.max(2, targetRemove - 1); + tries = 0; + } + + const As = randInt(0, 9); + const Bs = randInt(0, 9); + const Cs = As + Bs; + if(Cs < 0 || Cs > 9) continue; + + + const Achoices = superDigits(As); + const Bchoices = superDigits(Bs); + const Cchoices = superDigits(Cs); + + const Ashow = pick(Achoices); + const Bshow = pick(Bchoices); + const Cshow = pick(Cchoices); + + const need = + popcount(DIGIT_MASK[Ashow] ^ DIGIT_MASK[As]) + + popcount(DIGIT_MASK[Bshow] ^ DIGIT_MASK[Bs]) + + popcount(DIGIT_MASK[Cshow] ^ DIGIT_MASK[Cs]); + + if(need !== targetRemove) continue; + + + const shownTrue = (Ashow + Bshow) === Cshow; + if(shownTrue) continue; + + solution = { A: As, B: Bs, C: Cs }; + current = { A: Ashow, B: Bshow, C: Cshow }; + break; + } + + elLvl.textContent = String(level); + elTarget.textContent = String(targetRemove); + elGoalN.textContent = String(targetRemove); + + elHint.innerHTML = + `Level ${level}: Make the equation true by removing ${targetRemove} match(es). ` + + `You can only remove sticks (click them).`; + + renderEquation(); + syncRemovedCounts(); + updateTruthUI(); +} + +function superDigits(baseDigit){ + const base = DIGIT_MASK[baseDigit]; + const res = []; + for(let d=0; d<=9; d++){ + const m = DIGIT_MASK[d]; + if((m & base) === base){ + res.push(d); + } + } + return res; +} +generateLevel(); \ No newline at end of file diff --git a/img/shared image (5).jfif b/img/shared image (5).jfif deleted file mode 100644 index bd61148..0000000 Binary files a/img/shared image (5).jfif and /dev/null differ diff --git a/img/shared image (6).jfif b/img/shared image (6).jfif deleted file mode 100644 index d28ee81..0000000 Binary files a/img/shared image (6).jfif and /dev/null differ