כרטיס שחקן

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>טופס רישום</title>
    
    
    <script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
    
    
    
    
    
    
    
    <style>
        /* אפשור גלילה במידה והתוכן חורג */
        body { font-family: 'Assistant', sans-serif; background-color: #f3f4f6; overflow-y: auto; }
        
        /* עיצוב דף ה-PDF המוסתר - דיוק למקור - חשוב: רוחב קבוע גם בנייד */
        .pdf-page { 
            width: 210mm !important; /* Fixed width prevents mobile squashing */
            min-width: 210mm;
            min-height: 297mm; 
            padding: 15mm; 
            background: white; 
            color: black; 
            font-size: 10pt; 
            line-height: 1.2; 
            box-shadow: 0 0 10px rgba(0,0,0,0.1); 
            margin: 0 auto; 
            position: relative; 
            box-sizing: border-box;
            /* Ensure text layout doesn't break */
            white-space: normal;
        }
        
        /* קווים וכותרות כמו בטופס המקורי */
        .input-line { border-bottom: 1px solid #000; min-height: 20px; display: inline-block; width: 100%; }
        .input-value { position: absolute; bottom: 2px; right: 0; width: 100%; text-align: center; font-weight: bold; color: #00008b; font-family: sans-serif; }
        .field-container { position: relative; width: 100%; margin-bottom: 5px; }
        .field-label { font-weight: bold; font-size: 10pt; margin-left: 5px; white-space: nowrap; }
        
        .checkbox-circle { display: inline-block; width: 14px; height: 14px; border: 1px solid #000; border-radius: 50%; margin-left: 5px; position: relative; vertical-align: middle; }
        .checkbox-circle.checked::after { content: '✓'; position: absolute; top: -3px; right: 2px; font-size: 12px; font-weight: bold; }
        
        .section-box { border: 1px solid #000; padding: 10px; margin-top: 10px; height: 100%; }
        .legal-text { font-size: 8pt; text-align: justify; line-height: 1.1; }
        
        /* מניעת גלילה בעת חתימה */
        canvas { touch-action: none; }
        
        /* הסרנו את ה-media query שמשנה את רוחב ה-PDF בנייד */
        /* ה-PDF ייווצר תמיד בגודל מלא, המשתמש לא רואה אותו בכל מקרה */
    </style>
</head>
<body data-rsssl=1>
    <div id="root"></div>

// Signature Pad Component
        const SignaturePad = ({ label, onSave, onClear }) => {
            const canvasRef = useRef(null);
            const [isDrawing, setIsDrawing] = useState(false);
            const [hasContent, setHasContent] = useState(false);

useEffect(() => {
                const ctx = canvasRef.current.getContext('2d');
                ctx.strokeStyle = '#00008b'; ctx.lineWidth = 2; ctx.lineCap = 'round';
            }, []);

const getPos = (e) => {
                const rect = canvasRef.current.getBoundingClientRect();
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                const clientY = e.touches ? e.touches[0].clientY : e.clientY;
                return { x: clientX - rect.left, y: clientY - rect.top };
            };

return (
                <div className="border rounded-lg p-2 bg-gray-50">
                    <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
                    <div className="relative border-2 border-dashed border-gray-300 bg-white rounded cursor-crosshair">
                        <canvas ref={canvasRef} width={300} height={150} className="w-full h-32 touch-none"
                            onMouseDown={start} onMouseMove={draw} onMouseUp={stop} onMouseLeave={stop}
                            onTouchStart={start} onTouchMove={draw} onTouchEnd={stop} />
                        {!hasContent && <div className="absolute inset-0 flex items-center justify-center pointer-events-none text-gray-300">חתום כאן</div>}
                    </div>
                    <button type="button" onClick={clear} className="text-xs text-red-500 mt-1 hover:text-red-700 font-medium">נקה חתימה</button>
                </div>
            );
        };

const App = () => {
            const [isLoading, setIsLoading] = useState(false);
            const pdfRef = useRef(null);
            
            const [formData, setFormData] = useState({
                type: 'new', clubName: '', lastName: '', firstName: '', gender: '', dob: '', idNumber: '',
                city: '', street: '', houseNumber: '', zipCode: '', phone: '', mobile: '', email: '',
                signedElsewhere: false, parentName: '', agreeToTerms: false, agreeToInsurance: false, agreeToMedia: false,
                athleteSignature: null, parentSignature: null, signatureDate: new Date().toISOString().split('T')[0], passportPhoto: null
            });

return (
                <div className="min-h-screen pb-10">
                    <header className="bg-blue-800 text-white p-4 shadow-lg mb-8 sticky top-0 z-50">
                        <div className="container mx-auto flex items-center justify-between">
                            <h1 className="text-xl font-bold">רישום שחקן - איגוד טניס השולחן</h1>
                            <div className="text-xs opacity-80">2025-2026</div>
                        </div>
                    </header>

<div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8">
                        {/* FORM UI */}
                        <div className="bg-white rounded-xl shadow-md p-6">
                            <h2 className="text-xl font-bold mb-6 text-gray-800 border-b pb-2">מילוי פרטים</h2>
                            <form className="space-y-6">
                                <div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
                                    <div className="flex flex-col md:flex-row gap-6">
                                        <div className="flex-1">
                                            <label className="block text-sm font-medium mb-2">סוג רישום</label>
                                            <div className="flex gap-4 mb-4">
                                                <label className="flex items-center gap-2 cursor-pointer bg-white p-2 rounded border"><input type="radio" name="type" value="existing" checked={formData.type === 'existing'} onChange={handleInputChange} /> ספורטאי קיים</label>
                                                <label className="flex items-center gap-2 cursor-pointer bg-white p-2 rounded border"><input type="radio" name="type" value="new" checked={formData.type === 'new'} onChange={handleInputChange} /> ספורטאי חדש</label>
                                            </div>
                                            <input type="text" name="clubName" value={formData.clubName} onChange={handleInputChange} className="w-full border rounded p-2" placeholder="שם האגודה" />
                                        </div>
                                        <div className="flex-shrink-0">
                                            <label className="block text-sm font-medium mb-2 text-center">תמונת פספורט</label>
                                            <div className="relative w-32 h-40 border-2 border-dashed border-gray-400 rounded bg-white hover:bg-gray-50 cursor-pointer overflow-hidden">
                                                <input type="file" accept="image/*" onChange={handlePhotoUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
                                                {formData.passportPhoto ? <img src={formData.passportPhoto} className="w-full h-full object-cover" /> : <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-400 text-xs">לחץ להעלאה</div>}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div><label className="text-sm">שם פרטי</label><input type="text" name="firstName" value={formData.firstName} onChange={handleInputChange} className="w-full border rounded p-2" required /></div>
                                    <div><label className="text-sm">שם משפחה</label><input type="text" name="lastName" value={formData.lastName} onChange={handleInputChange} className="w-full border rounded p-2" required /></div>
                                    <div><label className="text-sm">ת.ז</label><input type="text" name="idNumber" value={formData.idNumber} onChange={handleInputChange} className="w-full border rounded p-2" required /></div>
                                    <div><label className="text-sm">תאריך לידה</label><input type="date" name="dob" value={formData.dob} onChange={handleInputChange} className="w-full border rounded p-2" required /></div>
                                    <div><label className="text-sm">מין</label><select name="gender" value={formData.gender} onChange={handleInputChange} className="w-full border rounded p-2"><option value="">בחר...</option><option value="זכר">זכר</option><option value="נקבה">נקבה</option></select></div>
                                </div>
                                <h3 className="font-semibold mt-4">כתובת ותקשורת</h3>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <input type="text" name="city" value={formData.city} onChange={handleInputChange} className="border rounded p-2" placeholder="יישוב" />
                                    <input type="text" name="street" value={formData.street} onChange={handleInputChange} className="border rounded p-2" placeholder="רחוב" />
                                    <div className="grid grid-cols-2 gap-2">
                                        <input type="text" name="houseNumber" value={formData.houseNumber} onChange={handleInputChange} className="border rounded p-2" placeholder="מספר" />
                                        <input type="text" name="zipCode" value={formData.zipCode} onChange={handleInputChange} className="border rounded p-2" placeholder="מיקוד" />
                                    </div>
                                    <input type="tel" name="mobile" value={formData.mobile} onChange={handleInputChange} className="border rounded p-2" placeholder="נייד" />
                                    <input type="email" name="email" value={formData.email} onChange={handleInputChange} className="border rounded p-2 md:col-span-2" placeholder="אימייל" />
                                </div>
                                <div className="bg-yellow-50 p-4 rounded text-sm space-y-3">
                                    <h3 className="font-bold">הצהרות</h3>
                                    <label className="flex gap-2 cursor-pointer"><input type="checkbox" name="signedElsewhere" checked={formData.signedElsewhere} onChange={handleInputChange} /> הנני מצהיר/ה כי לא חתמתי על טופס הרשמה נוסף</label>
                                    <input type="text" name="parentName" value={formData.parentName} onChange={handleInputChange} className="border rounded p-1 w-full" placeholder="שם הורה (אם קטין) / אני החתום מטה" />
                                    <label className="flex gap-2 cursor-pointer"><input type="checkbox" name="agreeToTerms" checked={formData.agreeToTerms} onChange={handleInputChange} /> מאשר את נכונות הפרטים ורישום לקבוצה</label>
                                    <label className="flex gap-2 cursor-pointer"><input type="checkbox" name="agreeToInsurance" checked={formData.agreeToInsurance} onChange={handleInputChange} /> קראתי והבנתי את הצהרת הביטוח</label>
                                    <label className="flex gap-2 cursor-pointer"><input type="checkbox" name="agreeToMedia" checked={formData.agreeToMedia} onChange={handleInputChange} /> מאשר פרסום תמונות ופרטים במדיה</label>
                                </div>
                                <div className="space-y-4">
                                    <SignaturePad label="חתימת ספורטאי/ת (מעל גיל 18)" onSave={(s)=>setFormData(p=>({...p, athleteSignature:s}))} onClear={()=>setFormData(p=>({...p, athleteSignature:null}))} />
                                    <SignaturePad label="חתימת הורים (לספורטאי קטין)" onSave={(s)=>setFormData(p=>({...p, parentSignature:s}))} onClear={()=>setFormData(p=>({...p, parentSignature:null}))} />
                                </div>
                            </form>
                        </div>

{/* DOWNLOAD AREA */}
                        <div className="flex flex-col gap-4">
                            <div className="bg-white rounded-xl shadow-md p-6 sticky top-20 text-center">
                                <h2 className="text-xl font-bold mb-4">הורדה</h2>
                                <p className="text-gray-500 mb-4 text-sm">הטופס נוצר אוטומטית כ-PDF מוכן להדפסה.</p>
                                <button onClick={downloadPDF} disabled={isLoading} className={`w-full py-4 rounded-lg text-white font-bold text-lg flex items-center justify-center gap-2 ${isLoading ? 'bg-gray-400' : 'bg-green-600 hover:bg-green-700 shadow-lg'}`}>
                                    {isLoading ? 'מכין קובץ...' : 'הורד טופס PDF חתום'}
                                </button>
                                <div className="mt-4 text-xs text-gray-400">* הקובץ יורד למכשיר שלך</div>
                            </div>
                        </div>
                    </div>

{/* HIDDEN PDF TEMPLATE - EXACT REPLICA */}
                    <div style={{position:'absolute', top:'-10000px', left:0}}>
                        <div ref={pdfRef} className="pdf-page">
                            {/* Header */}
                            <div className="text-center mb-6">
                                <h1 className="text-2xl font-bold">איגוד טניס השולחן בישראל</h1>
                                <h2 className="text-xl font-bold text-gray-600 tracking-wider">ISRAEL TABLE TENNIS ASSOCIATION</h2>
                                <div className="mt-4 inline-block px-4 border-b-2 border-black pb-1">
                                    <h3 className="text-xl font-bold">טופס רישום ספורטאי/ת 2025-2026</h3>
                                </div>
                            </div>
                            
                            {/* Passport Photo */}
                            <div className="absolute top-16 left-16 w-24 h-32 border-2 border-black flex items-center justify-center overflow-hidden bg-gray-50">
                                {formData.passportPhoto ? <img src={formData.passportPhoto} className="w-full h-full object-cover" /> : <span className="text-center text-xs">תמונת<br/>פספורט</span>}
                            </div>

{/* Section 1 */}
                            <div className="mb-4 pr-4">
                                <p className="mb-2 font-bold">הנני מבקש/ת להירשם כספורטאי/ת בענף טניס השולחן. יש להקיף בעיגול:</p>
                                <div className="flex gap-10 mb-3">
                                    <div className="flex items-center"><span className={`checkbox-circle ${formData.type==='existing'?'checked':''}`}></span><span className="mr-2">ספורטאי קיים</span></div>
                                    <div className="flex items-center"><span className={`checkbox-circle ${formData.type==='new'?'checked':''}`}></span><span className="mr-2">/ חדש (לספורטאי חדש)</span></div>
                                </div>
                                <div className="flex items-center w-2/3">
                                    <span className="field-label w-20">באגודה:</span>
                                    <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.clubName}</span></div>
                                </div>
                            </div>

{/* Details Grid */}
                            <div className="grid grid-cols-2 gap-x-12 gap-y-2 mb-4">
                                {/* Right Column */}
                                <div>
                                    <div className="flex items-center mb-2">
                                        <span className="field-label w-24">שם משפחה:</span>
                                        <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.lastName}</span></div>
                                    </div>
                                    <div className="flex items-center mb-2">
                                        <span className="field-label w-24">מין:</span>
                                        <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.gender}</span></div>
                                    </div>
                                    <div className="flex items-center mb-2">
                                        <span className="field-label w-24">תאריך לידה:</span>
                                        <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.dob}</span></div>
                                    </div>
                                </div>
                                {/* Left Column */}
                                <div>
                                    <div className="flex items-center mb-2">
                                        <span className="field-label w-24">שם פרטי:</span>
                                        <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.firstName}</span></div>
                                    </div>
                                    <div className="flex items-center mb-2">
                                        <span className="field-label w-24">תעודת זהות:</span>
                                        <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.idNumber}</span></div>
                                    </div>
                                    <div className="flex items-center mb-2">
                                        <span className="field-label w-24">טלפון סלולרי:</span>
                                        <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.mobile}</span></div>
                                    </div>
                                </div>
                            </div>

{/* Address */}
                            <div className="mb-2">
                                <div className="font-bold underline mb-1">כתובת:</div>
                                <div className="flex gap-4">
                                    <div className="flex items-center flex-grow"><span className="field-label w-12">יישוב:</span><div className="field-container"><span className="input-line"></span><span className="input-value">{formData.city}</span></div></div>
                                    <div className="flex items-center flex-grow"><span className="field-label w-12">רחוב:</span><div className="field-container"><span className="input-line"></span><span className="input-value">{formData.street}</span></div></div>
                                    <div className="flex items-center w-24"><span className="field-label w-12">מספר:</span><div className="field-container"><span className="input-line"></span><span className="input-value">{formData.houseNumber}</span></div></div>
                                    <div className="flex items-center w-32"><span className="field-label w-12">מיקוד:</span><div className="field-container"><span className="input-line"></span><span className="input-value">{formData.zipCode}</span></div></div>
                                </div>
                            </div>

{/* Communication */}
                            <div className="mb-4">
                                <div className="font-bold underline mb-1">תקשורת:</div>
                                <div className="flex gap-4">
                                    <div className="flex items-center w-1/3"><span className="field-label w-12">טלפון:</span><div className="field-container"><span className="input-line"></span><span className="input-value">{formData.phone}</span></div></div>
                                    <div className="flex items-center flex-grow"><span className="field-label w-24">דואר אלקטרוני:</span><div className="field-container"><span className="input-line"></span><span className="input-value">{formData.email}</span></div><span className="ml-1 text-lg font-bold">@</span></div>
                                </div>
                            </div>

{/* Declarations */}
                            <div className="mb-2 text-sm font-bold">
                                <div className="flex items-center">
                                    <span className={`checkbox-circle ${formData.signedElsewhere ? 'checked' : ''}`}></span>
                                    <span className="mr-2">הנני מצהיר/ה כי לא חתמתי על טופס הרשמה נוסף באגודה אחרת.</span>
                                </div>
                                <div className="mt-1 text-xs font-normal">
                                    ספורטאי/ת בוגר חייב/ת לחתום בעצמו, ספורטאי/ת מתחת לגיל 18 או שאינו מורשה חתימה חייב/ת בחתימת אחד ההורים\אופוטרופוס.
                                </div>
                            </div>

{/* Legal Block */}
                            <div className="legal-text mb-4">
                                <div className="flex items-end mb-1">
                                    <span className="font-bold ml-2">אני הח"מ:</span>
                                    <div className="field-container w-48 mx-2"><span className="input-line"></span><span className="input-value">{formData.parentName || (formData.firstName + ' ' + formData.lastName)}</span></div>
                                    <span className="mx-2">ת.ז</span>
                                    <div className="field-container w-32"><span className="input-line"></span><span className="input-value">{formData.parentName ? '' : formData.idNumber}</span></div>
                                </div>
                                <p>
                                    - אביו/ אימו/ אפוטרופוסו החוקי (מחק את המיותר) של השחקן, מאשר/ת בזאת את נכונות פרטי הספורטאי/ת הרשומים לעיל ואת רישומו לקבוצה הנזכרת לעיל.
                                    אני מאשר בזאת, כי אני מודע לכך שבהתאם לתיקון בחוק הספורט השחקנים אשר לומדים במסגרת בית ספרית, הספורטאים אשר לא מקבלים תמורה כלשהי עבור פעילותם וכמוכן ספורטאים אשר מקבלים מאגודתם תמורה מעל שכר מינימום במשק - אגודתם איננה מחוייבת לבצע עבורם ביטוח תאונות אישיות. השחקנים אשר מקבלים תמורה מתחת לגובה שכר מינימום - חובה על אגודתם לבטח אותם בביטוח על פי חוק הספורט.
                                    הנני מאשר שלא אבוא בעצמי ו/ או בשמו/ה, בכל טענה ו/או דרישה כנגד האיגוד בעניין זה. כמו כן ידוע לי ואני מסכים/מה כי פרטי בני/בתי: שם, תאריך לידה, תמונות, יפורסמו בפרסומים השונים בטלוויזיה, באינטרנט, בעיתונות ובאמצעי המדיה השונים.
                                </p>
                            </div>

{/* Signatures */}
                            <div className="flex justify-between items-end mb-6">
                                <div className="w-1/4 text-center">
                                    <div className="field-container"><span className="input-line"></span><span className="input-value">{formData.signatureDate}</span></div>
                                    <div className="text-xs font-bold">תאריך</div>
                                </div>
                                <div className="w-1/3 text-center">
                                    <div className="field-container h-12 relative">
                                        <span className="input-line absolute bottom-0 w-full"></span>
                                        {formData.athleteSignature && <img src={formData.athleteSignature} className="absolute bottom-1 left-0 right-0 mx-auto h-10 object-contain" />}
                                    </div>
                                    <div className="text-xs font-bold">חתימת הספורטאי/ת מעל גיל 18</div>
                                </div>
                                <div className="w-1/3 text-center">
                                    <div className="field-container h-12 relative">
                                        <span className="input-line absolute bottom-0 w-full"></span>
                                        {formData.parentSignature && <img src={formData.parentSignature} className="absolute bottom-1 left-0 right-0 mx-auto h-10 object-contain" />}
                                    </div>
                                    <div className="text-xs font-bold">חתימת ההורים לספורטאי קטין</div>
                                </div>
                            </div>

{/* Official Use Boxes */}
                            <div className="flex gap-4 h-48">
                                {/* Box 1: Institute */}
                                <div className="section-box w-1/2 flex flex-col justify-between">
                                    <div className="text-center font-bold underline mb-2">לשימוש מכון ספורט מורשה</div>
                                    <div className="text-xs mb-2">הנני מאשר כי הספורטאי/ת נבדק/ה עפ"י חוק הספורט ונמצא כשיר.</div>
                                    
                                    <div className="flex items-center mb-1"><span className="text-xs w-24">שם מכון הספורט:</span><span className="input-line flex-grow"></span></div>
                                    <div className="flex items-center mb-1"><span className="text-xs w-32">שם ושם משפחה הרופא:</span><span className="input-line flex-grow"></span></div>
                                    
                                    <div className="flex gap-2 mt-2">
                                        <div className="w-1/2">
                                            <span className="input-line"></span>
                                            <div className="text-xs text-center">תאריך</div>
                                        </div>
                                        <div className="w-1/2">
                                            <span className="input-line"></span>
                                            <div className="text-xs text-center">חתימת הרופא</div>
                                        </div>
                                    </div>
                                    <div className="mt-2">
                                        <span className="input-line"></span>
                                        <div className="text-xs text-center">חותמת מכון ספורט</div>
                                    </div>
                                </div>

{/* Box 2: Association */}
                                <div className="section-box w-1/2 flex flex-col justify-between">
                                    <div className="text-center font-bold underline mb-2">לשימוש האגודה</div>
                                    <div className="text-xs mb-2">הננו מבקשים לרשום כחבר/ה באגודתנו את הספורטאי/ת שפרטיו/יה מצוינים לעיל, ומצהירים כי הספורטאי/ת נבדק/ה עפ"י חוק הספורט.</div>
                                    
                                    <div className="flex gap-2 mt-4">
                                        <div className="w-1/2">
                                            <span className="input-line"></span>
                                            <div className="text-xs text-center">תאריך</div>
                                        </div>
                                        <div className="w-1/2">
                                            <span className="input-line"></span>
                                            <div className="text-xs text-center">חותמת האגודה</div>
                                        </div>
                                    </div>
                                    <div className="mt-auto">
                                        <div className="flex items-center"><span className="text-xs w-24">שם האחראי באגודה:</span><span className="input-line flex-grow"></span></div>
                                    </div>
                                </div>
                            </div>

{/* Footer Notes */}
                            <div className="mt-4 text-[9pt] leading-tight">
                                <div className="font-bold">טופס זה ייכנס לתוקף רק לאחר אישור האיגוד ובלבד וצורפו לו:</div>
                                <ul className="list-disc list-inside mr-2">
                                    <li>תמונה אחת</li>
                                    <li>צילום ספח תעודת זהות או תעודת לידה</li>
                                </ul>
                                <div className="font-bold mt-1">הטופס יהא חסר תוקף ובטל אם יבוצע בו שינוי ו/או תיקון כלשהם.</div>
                                <div>התוקף תקף אם הוטבעה עליו חותמת הרופא הבודק והשחקן.</div>
                            </div>

</div>
                    </div>
                </div>
            );
        };

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
<script src="https://table-tennis-israel.co.il/wp-content/cache/min/1/e3470f56fc733602f6d6019e74c903ac.js" data-minify="1" data-rocket-defer defer></script></body>
</html>

כרטיס שחקן

שתפו פוסט זה

תקנון

צרו קשר

נבנה ע"י מרקט-ביז - קידום דיגיטלי ובניית אתרים