<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dormitories - Form</title>
    <link rel="stylesheet" href="page-style.css">
</head>

<body>
    <div id="page-content">
        <h1 style="text-align:right;">טופס ביקור במעונות</h1>
        <img style="position:absolute;height:3.5rem;top:-0.5rem;display:block;text-align:left;direction:ltr;margin-right:auto;margin-left:0;left:0;"
            src="a/b/a/b/a/tau-logo.png">
        <div class="content-block">
            <div id="comments-container">
                <p class="comment">עקב מתקפות סייבר שכוונו כלפי האוניברסיטה ושותפיה לאחרונה, ננקטו צעדים לתחזוק ושדרוג
                    מערכת האבטחה של אתר האוניברסיטה. אנו מתנצלים על אי הנוחות הכרוכה בכך, ומקווים לימים רגועים יותר
                    לכולנו.
                </p>
                <p class="comment">~~~</p>
                <br>
                <p class="comment">אישור שמתקבל דרך עמוד זה תקף ליום יחיד לפי שעון בולגריה
                </p>
            </div>
            <form class="form">
                <div class="vertical-divider" style="display:flex">
                    <div style="width:2px; background-color:#999;margin:16px 0px 0px 10px;"></div>
                    <div>
                        <h3>פרטי המזמין</h3>
                        <div class="form-element" id="inviter-fname">
                            <p class="form-label">שם פרטי</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <div class="form-element" id="inviter-lname">
                            <p class="form-label">שם משפחה</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <div class="form-element" id="inviter-id">
                            <p class="form-label">ת.ז.</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                    </div>
                    <div style="width:2px; background-color:#999;margin:16px 0px 0px 10px;"></div>
                    <div>
                        <h3>פרטי המוזמן</h3>
                        <div class="form-element" id="invitee-fname">
                            <p class="form-label">שם פרטי</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <div class="form-element" id="invitee-lname">
                            <p class="form-label">שם משפחה</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <!-- <div class="form-element" id="invitee-nationality">
                            <p class="form-label">לאום</p>
                            <select class="input">
                                <option></option>
                            </select>
                            <p class="form-comment"></p>
                        </div> -->
                        <div class="form-element" id="invitee-criminal-record">
                            <p class="form-label">עבר פלילי</p>
                            <select class="input">
                                <option></option>
                                <option>קיים</option>
                                <option>אין</option>
                            </select>
                            <p class="form-comment"></p>
                        </div>
                    </div>
                </div>
                <div id="captcha-container" class="captcha-container center" style="position:relative;">
                    <div style="display:flex">
                        <span style="float:left" class="captcha-expansion-icon">▲</span>
                        <button id="i-am-human" form="---" class="center" style="display:inline-block;margin:auto;">אני
                            לא רובוט</button>
                        <span style="float:right" class="captcha-expansion-icon">▲</span>
                    </div>
                    <div id="captcha-table" class="center captcha-table-container -hidden"
                        style="margin-top:10px;width:0;height:0;display:none;">
                        <img class="captcha-background" id="wheres-waldo" src="a/b/a/b/a/wheres-waldo.webp">
                        <video class="captcha-background" id="happy-birthday-video" src="a/b/a/b/a/happy-birthday.mp4"
                            loop preload="auto" style="display:none;"></video>
                        <table cellspacing=" 0">
                            <!-- 3x3  -->
                            <tr>
                                <td>
                                    <div id="cell-0" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-1" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-2" class="captcha-cell"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="cell-3" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-4" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-5" class="captcha-cell"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="cell-6" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-7" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-8" class="captcha-cell"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="captcha-description" class="center" style="display:none;width:fit-content">
                        <p style="margin: 0;font-size:x-small;">צילום: מדשאות בניין שרייבר, צפון תל אביב</p>
                    </div>
                    <div class="center" style="width:fit-content">
                        <div id="captcha-characters"
                            style="display:none;width:100%;margin-top:0.4rem;padding:5px;background-color:#535352;box-sizing:border-box;border-radius:5px;">
                            <div>
                                <button id="submit-captcha" form="---" class="center"
                                    style="padding:10px;margin:5px;">הגש</button>
                                <p style="margin-top:0;">מצא את:</p>
                            </div>
                            <div class="captcha-character ltr">
                                <img src="a/b/a/b/a/waldo.png">
                                <p>שמעון</p>
                            </div>
                            <div class="captcha-character ltr">
                                <img src="a/b/a/b/a/wanda.png">
                                <p>רבקה</p>
                            </div>
                            <div class="captcha-character ltr">
                                <img src="a/b/a/b/a/odlaw.png">
                                <p>יהורם</p>
                            </div>
                        </div>
                    </div>
                    <div id="captcha-blocker"
                        style="display:none;z-index:3;position:absolute;top:0;left:0;width:100%;height:100%;">
                    </div>
                    <div id="captcha-loading"
                        style="display:none;z-index:3;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.3);">
                        <div class="center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
                                style="shape-rendering: auto; display: block; width:100%;">
                                <g data-idx="1" style="fill: rgb(0, 0, 0); stroke: none; transform: none; opacity: 1;">
                                    <g transform="matrix(1,0,0,1,0,0)" data-idx="2"
                                        style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="3" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.7660444378852844,0.6427876353263855,-0.6427876353263855,0.7660444378852844,43.837158203125,-20.44160270690918)"
                                        data-idx="5" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="6" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.1736481785774231,0.9848077297210693,-0.9848077297210693,0.1736481785774231,90.55797576904297,-7.922796726226807)"
                                        data-idx="8" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="9" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.5,0.8660253882408142,-0.8660253882408142,-0.5,118.30126953125,31.69873046875)"
                                        data-idx="11" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="12" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.9396926164627075,0.3420201539993286,-0.3420201539993286,-0.9396926164627075,114.08563995361328,79.88362121582031)"
                                        data-idx="14" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="15" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.9396926164627075,-0.3420201539993286,0.3420201539993286,-0.9396926164627075,79.88362121582031,114.08563995361328)"
                                        data-idx="17" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="18" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.5,-0.8660253882408142,0.8660253882408142,-0.5,31.69873046875,118.30126953125)"
                                        data-idx="20" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="21" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.1736481785774231,-0.9848077297210693,0.9848077297210693,0.1736481785774231,-7.922796726226807,90.55797576904297)"
                                        data-idx="23" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="24" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.7660444378852844,-0.6427876353263855,0.6427876353263855,0.7660444378852844,-20.44160270690918,43.837158203125)"
                                        data-idx="26" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="27" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g data-idx="29"
                                        style="fill: rgb(0, 0, 0); stroke: none; transform: none; opacity: 1;"></g>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
            </form>
            <button id="form-submit">הגש בקשה <span id="form-submit-checkmark" style="color:green;display:none;">
                    ✓</span></button>

        </div>
    </div>
    <script>
        const loadingScreen = document.getElementById("captcha-loading");
        const loadingParts = loadingScreen.children[0].children[0].children[0].children;
        const loadingSize = loadingParts.length;
        const FULL_CYCLE_MS = 700;
        const loadingSpeed = FULL_CYCLE_MS / loadingSize;
        let iter = 0;
        setInterval(() => {
            iter++;
            iter %= loadingSize;
            for (let i = 0; i < loadingSize; i++) {
                const part = loadingParts[i];
                const opacity = ((i + loadingSize - iter) % loadingSize) / loadingSize;
                part.style.opacity = opacity;
            }
        }, loadingSpeed);
        console.log(loadingParts);
    </script>
    <script src="countries.js"></script>
    <script src="script.js"></script>
</body>

</html>