From 1aa14a7691876b1e2b0d81749025a3959eb665c4 Mon Sep 17 00:00:00 2001 From: lovely Date: Mon, 25 May 2026 14:01:12 +0300 Subject: [PATCH 1/2] my first joke --- src/students/index.ts | 9 ++ src/students/rachel-weinberger/Card.tsx | 23 +++++ src/students/rachel-weinberger/JokePage.tsx | 25 ++++++ .../rachel-weinberger/styles.module.css | 85 +++++++++++++++++++ 4 files changed, 142 insertions(+) create mode 100644 src/students/rachel-weinberger/Card.tsx create mode 100644 src/students/rachel-weinberger/JokePage.tsx create mode 100644 src/students/rachel-weinberger/styles.module.css diff --git a/src/students/index.ts b/src/students/index.ts index 5be78e7..e162a93 100644 --- a/src/students/index.ts +++ b/src/students/index.ts @@ -5,6 +5,8 @@ import DanaDuviJokePage from "./dana-duvi/JokePage"; import ChaniChanzinCard from "./chani-chanzin/Card"; import ChaniChanzinJokePage from "./chani-chanzin/JokePage"; +import RachelWeinbergerJokePage from "./rachel-weinberger/JokePage"; +import RachelWeinbergerCard from "./rachel-weinberger/Card"; // ⚠️ סדר הרשימה חייב להיות לפי סדר האלף-בית העברי לפי שם המשפחה. // כל תלמידה מוסיפה את עצמה במקום הנכון ידנית. @@ -24,6 +26,13 @@ const students: Student[] = [ CardComponent: ChaniChanzinCard, JokePageComponent: ChaniChanzinJokePage, }, + { + id: "rachel-weinberger", + name: "רחלי וינברגר", + jokeTitle: "כפית אחת יותר מדי", + CardComponent: RachelWeinbergerCard, + JokePageComponent: RachelWeinbergerJokePage, + }, ]; export default students; diff --git a/src/students/rachel-weinberger/Card.tsx b/src/students/rachel-weinberger/Card.tsx new file mode 100644 index 0000000..3550d7a --- /dev/null +++ b/src/students/rachel-weinberger/Card.tsx @@ -0,0 +1,23 @@ +import styles from "./styles.module.css"; +import { CardProps } from "../../types"; + +export default function RachelWeinbergerCard({ student, onClick }: CardProps) { + return ( +
+
+ HI 00847 + 00000 +
+
+
+
+
+
+
+
+

{student.jokeTitle}

+

{student.name}

+

— PRESS TO PLAY —

+
+ ); +} diff --git a/src/students/rachel-weinberger/JokePage.tsx b/src/students/rachel-weinberger/JokePage.tsx new file mode 100644 index 0000000..56cd295 --- /dev/null +++ b/src/students/rachel-weinberger/JokePage.tsx @@ -0,0 +1,25 @@ +import styles from "./styles.module.css"; +import { PageProps } from "../../types"; + +export default function RachelWeinbergerJokePage({ onBack }: PageProps) { + return ( +
+
+
+
+
+
x
+
+
+
+
+

אדם אחד מגיע לרופא ומלין: "דוקטור, כל פעם שאני שותה כוס תה, כואבת לי העין ימין באופן נוראי!"

+

הרופא חושב קצת, מביט בו ואומר: "ניסית אולי להוציא את הכפית מהכוס לפני שאתה שותה?"

+

🧑‍⚕️👨‍⚕️👩‍⚕️

+
+ +
+ ); +} diff --git a/src/students/rachel-weinberger/styles.module.css b/src/students/rachel-weinberger/styles.module.css new file mode 100644 index 0000000..d70b8b2 --- /dev/null +++ b/src/students/rachel-weinberger/styles.module.css @@ -0,0 +1,85 @@ +.card { + background: linear-gradient(160deg, #fff8e7 0%, #ffe0a3 100%); + border: 3px solid #f5a623; + box-shadow: 0 6px 20px rgba(245, 166, 35, 0.35); +} + +.avatar { + font-size: 3rem; + margin-bottom: 0.5rem; +} + +.title { + font-size: 1.4rem; + color: #7a4800; + margin-bottom: 0.4rem; +} + +.name { + font-size: 1rem; + color: #5a3400; + margin-bottom: 1rem; +} + +.badge { + display: inline-block; + background: #f5a623; + color: #fff; + border-radius: 20px; + padding: 0.3rem 1rem; + font-size: 0.85rem; + font-weight: bold; +} + +.jokePage { + background: linear-gradient(135deg, #fff3cd, #ffd77a); +} + +.jokeHeader { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; +} + +.bigEmoji { + font-size: 5rem; +} + +.jokeCard { + background: #fff; + border-radius: 20px; + padding: 2rem 2.5rem; + max-width: 500px; + width: 100%; + text-align: center; + box-shadow: 0 8px 24px rgba(245, 166, 35, 0.3); + color: #5a3400; +} + +.jokeCard h2 { + font-size: 1.3rem; + margin-bottom: 0.6rem; +} + +.jokeCard p { + font-size: 1.4rem; + line-height: 1.6; + margin-top: 0.8rem; +} + +.backBtn { + background: #f5a623; + color: #fff; + border: none; + border-radius: 30px; + padding: 0.7rem 2rem; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: background 0.2s; +} + +.backBtn:hover { + background: #d4891a; +} From 4c2e024671867b8a8ea869a74cc6b1ee42778459 Mon Sep 17 00:00:00 2001 From: yehudit Date: Mon, 25 May 2026 14:58:24 +0300 Subject: [PATCH 2/2] enter my joke --- package-lock.json | 11 + src/students/index.ts | 14 ++ src/students/yehudit/card.tsx | 16 ++ src/students/yehudit/jokePage.tsx | 49 ++++ src/students/yehudit/styles.module.css | 320 +++++++++++++++++++++++++ 5 files changed, 410 insertions(+) create mode 100644 src/students/yehudit/card.tsx create mode 100644 src/students/yehudit/jokePage.tsx create mode 100644 src/students/yehudit/styles.module.css diff --git a/package-lock.json b/package-lock.json index fc37715..c62c70c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1312,6 +1313,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz", "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==", "dev": true, + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -1368,6 +1370,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.59.0.tgz", "integrity": "sha512-TI1XGwKbDpo9tRW8UDIXCOeLk55qe9ZFGs8MTKU6/M08HWTw52DD/IYhfQtOEhEdPhLMT26Ka/x7p70nd3dzDg==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.59.0", "@typescript-eslint/types": "8.59.0", @@ -1630,6 +1633,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1730,6 +1734,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1932,6 +1937,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz", "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2551,6 +2557,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -2608,6 +2615,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2619,6 +2627,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -2835,6 +2844,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz", "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -2910,6 +2920,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz", "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==", "dev": true, + "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", diff --git a/src/students/index.ts b/src/students/index.ts index 5be78e7..2dabc65 100644 --- a/src/students/index.ts +++ b/src/students/index.ts @@ -1,4 +1,6 @@ import { Student } from "../types"; +import yehuditCard from "./yehudit/card"; +import yehuditJokePage from "./yehudit/jokePage"; import DanaDuviCard from "./dana-duvi/Card"; import DanaDuviJokePage from "./dana-duvi/JokePage"; @@ -6,10 +8,13 @@ import DanaDuviJokePage from "./dana-duvi/JokePage"; import ChaniChanzinCard from "./chani-chanzin/Card"; import ChaniChanzinJokePage from "./chani-chanzin/JokePage"; + + // ⚠️ סדר הרשימה חייב להיות לפי סדר האלף-בית העברי לפי שם המשפחה. // כל תלמידה מוסיפה את עצמה במקום הנכון ידנית. // אסור להשתמש בפונקציית-sort! const students: Student[] = [ + { id: "dana-duvi", name: "דנה דובי", @@ -24,6 +29,15 @@ const students: Student[] = [ CardComponent: ChaniChanzinCard, JokePageComponent: ChaniChanzinJokePage, }, + { + id:"yehudit", + name: "יהודית", + jokeTitle:"התירוץ המושלם לרופא", + CardComponent: yehuditCard, + JokePageComponent: yehuditJokePage, + }, + + ]; export default students; diff --git a/src/students/yehudit/card.tsx b/src/students/yehudit/card.tsx new file mode 100644 index 0000000..c0ff57e --- /dev/null +++ b/src/students/yehudit/card.tsx @@ -0,0 +1,16 @@ +import styles from "./styles.module.css"; +import { CardProps } from "../../types"; + +export default function Card({ student, onClick }: CardProps) { + return ( + + ); +} \ No newline at end of file diff --git a/src/students/yehudit/jokePage.tsx b/src/students/yehudit/jokePage.tsx new file mode 100644 index 0000000..c706269 --- /dev/null +++ b/src/students/yehudit/jokePage.tsx @@ -0,0 +1,49 @@ +import { PageProps } from "../../types"; +import styles from "./styles.module.css"; + +export default function JokePage({ onBack }: PageProps) { + return ( +
+
+
+
+

בדיחה חמה כמו קפה

+ +
+ ☕️ +
+ +
+
+
+
+
+
+
+
+ +
+ +
+

+ אדם אחד מגיע לרופא המשפחה שלו ומספר לו בדאגה: "דוקטור, יש לי בעיה חמורה. + כל פעם שאני שותה כוס קפה, אני מרגיש דקירה חדה וכואבת מאוד בעין ימין. מה זה יכול להיות?" +

+

+ הרופא מביט בו במבט רציני, חושב לרגע ואומר: "תשמע, לפי האבחנה שלי, הפתרון פשוט מאוד..." +

+

+ "באמת?!" שמח המטופל, "מה צריך לעשות?" +

+

+ הרופא משיב: "בפעם הבאה שאתה שותה קפה, פשוט תוציא את הכפית מהכוס." +

+
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/students/yehudit/styles.module.css b/src/students/yehudit/styles.module.css new file mode 100644 index 0000000..17eb97a --- /dev/null +++ b/src/students/yehudit/styles.module.css @@ -0,0 +1,320 @@ +.card { + width: 100%; + min-height: 260px; + border: none; + border-radius: 28px; + padding: 1.8rem; + display: flex; + flex-direction: column; + gap: 1rem; + text-align: left; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 232, 255, 0.9)); + box-shadow: 0 20px 45px rgba(46, 22, 77, 0.2); + color: #2d1b3d; + cursor: pointer; + transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; +} + +.card:hover, +.card:focus-visible { + transform: translateY(-6px); + box-shadow: 0 32px 60px rgba(46, 22, 77, 0.28); + background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(229, 220, 255, 1)); +} + +.cardTop { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 1rem; + border-radius: 999px; + background: rgba(116, 80, 255, 0.14); + color: #4e2a92; + font-weight: 700; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.emoji { + font-size: 1.5rem; +} + +.title { + font-size: clamp(1.35rem, 2.2vw, 1.85rem); + line-height: 1.15; + margin: 0; +} + +.name { + font-size: 1rem; + color: #6a4b8d; + font-weight: 600; +} + +.description { + font-size: 0.95rem; + line-height: 1.7; + color: #5d4d69; +} + +.jokePage { + min-height: 100vh; + padding: 2rem 1rem; + display: flex; + align-items: center; + justify-content: center; + background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.4), transparent 28%), + radial-gradient(circle at bottom right, rgba(135, 87, 255, 0.18), transparent 28%), + linear-gradient(135deg, #4a2f8d 0%, #1b1b3a 100%); +} + +.panel { + width: min(560px, 100%); + border-radius: 32px; + padding: 2.4rem; + background: rgba(255, 255, 255, 0.92); + box-shadow: 0 24px 80px rgba(15, 12, 47, 0.18); + backdrop-filter: blur(18px); + display: grid; + gap: 1.5rem; +} + +.header { + display: flex; + align-items: center; + gap: 1rem; +} + +.marker { + display: inline-flex; + width: 3rem; + height: 3rem; + border-radius: 50%; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #7b5cff 0%, #d1c3ff 100%); + box-shadow: 0 12px 30px rgba(125, 92, 255, 0.25); + font-size: 1.5rem; +} + +.header h1 { + font-size: clamp(1.8rem, 3vw, 2.4rem); + margin: 0; + color: #2b145b; +} + +.jokeText { + font-size: 1.05rem; + line-height: 1.9; + color: #3d2f5a; + padding: 1.2rem 1.4rem; + border-radius: 24px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 233, 255, 0.95)); + border: 1px solid rgba(117, 70, 255, 0.12); +} + +.backBtn { + width: fit-content; + border: none; + border-radius: 999px; + padding: 0.95rem 2rem; + background: linear-gradient(135deg, #7b5cff 0%, #5b3eb8 100%); + color: #fff; + font-size: 1rem; + font-weight: 700; + box-shadow: 0 12px 28px rgba(123, 92, 255, 0.28); + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.backBtn:hover { + transform: translateY(-2px); + box-shadow: 0 18px 32px rgba(123, 92, 255, 0.32); +} + +.coffeePanel { + width: min(640px, 100%); + border-radius: 32px; + padding: 2rem; + background: linear-gradient(180deg, #fff9f2, #fff3e7); + box-shadow: 0 32px 90px rgba(50, 30, 20, 0.16); + display: grid; + gap: 1.8rem; +} + +.coffeeHeader { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; +} + +.coffeeHeader h1 { + margin: 0; + font-size: clamp(1.8rem, 3vw, 2.4rem); + color: #4d3115; +} + +.subTitle { + margin-top: 0.5rem; + color: #6f4a2c; + font-size: 1rem; + line-height: 1.6; +} + +.coffeeStage { + display: grid; + gap: 1.3rem; + justify-items: center; +} + +.cupWrapper { + position: relative; + width: 210px; + height: 210px; + display: grid; + place-items: center; +} + +.cup { + width: 180px; + height: 120px; + border-radius: 0 0 90px 90px; + background: linear-gradient(180deg, #f7dccb 0%, #ecb983 100%); + box-shadow: inset 0 14px 28px rgba(255, 255, 255, 0.35), 0 18px 30px rgba(94, 57, 34, 0.2); + position: relative; + overflow: hidden; +} + +.cup::before { + content: ""; + position: absolute; + top: -30px; + left: 22px; + width: 70px; + height: 60px; + border-radius: 50% 50% 40% 40%; + background: #fff0e8; + border: 10px solid #f5d1b6; + border-bottom-color: transparent; +} + +.cupLiquid { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 56%; + background: linear-gradient(180deg, #7f4c27 0%, #4d2915 100%); +} + +.saucer { + width: 230px; + height: 24px; + background: radial-gradient(circle at center, #f8f0e8 35%, #d8b694 70%); + border-radius: 999px; + box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.75); +} + +.steam { + position: absolute; + top: 16px; + width: 20px; + height: 20px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.85); + filter: blur(4px); + animation: steamRise 3s infinite ease-in-out; +} + +.steam::before, +.steam::after { + content: ""; + position: absolute; + width: 18px; + height: 18px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.75); + filter: blur(4px); +} + +.steam::before { + left: -30px; + top: 6px; + animation: steamRise 3.2s infinite ease-in-out; +} + +.steam::after { + right: -26px; + top: 10px; + animation: steamRise 3.5s infinite ease-in-out; +} + +@keyframes steamRise { + 0% { + transform: translateY(0) scale(0.8); + opacity: 0.65; + } + 50% { + transform: translateY(-36px) scale(1.1); + opacity: 0.35; + } + 100% { + transform: translateY(-72px) scale(0.8); + opacity: 0; + } +} + +.tapHint { + display: inline-flex; + align-items: center; + gap: 0.75rem; + padding: 0.85rem 1.3rem; + border-radius: 999px; + background: rgba(77, 45, 15, 0.08); + color: #4d3115; + font-weight: 700; + border: 1px dashed rgba(77, 45, 15, 0.18); + animation: pulseHint 2.4s infinite ease-in-out; +} + +.tapHint span { + font-size: 1.4rem; +} + +@keyframes pulseHint { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 0 rgba(181, 123, 68, 0); + } + 50% { + transform: scale(1.02); + box-shadow: 0 0 0 12px rgba(181, 123, 68, 0.08); + } +} + +.jokeText { + background: #fff8f0; + padding: 1.6rem 1.8rem; + border-radius: 26px; + border: 1px solid rgba(145, 96, 56, 0.14); + color: #3c2a1c; + line-height: 1.9; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); +} + +.jokeText p { + margin: 0 0 1rem; +} + +.jokeText p:last-child { + margin-bottom: 0; +}