Update emza.html

emza.html

@@ -1 +1,284 @@
-خ
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /><style type="text/css">body {
+            font-family: Tahoma, Arial, sans-serif;
+            direction: rtl;
+            text-align: right;
+            margin: 20px;
+            font-size: 14px;
+            background-color: #f9f9f9;
+        }
+        h2 {
+            color: #4CAF50;
+        }
+        .container {
+            margin-bottom: 20px;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            background-color: #fff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        input {
+            padding: 10px;
+            margin: 5px 0;
+            width: 100%;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            font-size: 16px;
+            text-align: right;
+            transition: border-color 0.3s;
+        }
+        input:focus {
+            border-color: #4CAF50;
+            outline: none;
+        }
+        .btn {
+            padding: 10px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 100%;
+            font-size: 16px;
+            transition: background-color 0.3s, transform 0.2s;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .btn:hover {
+            background-color: #45a049;
+            transform: translateY(-2px);
+        }
+        .btn-signature {
+            background-color: white;
+            color: black;
+            border: 1px solid #ccc;
+        }
+        .btn-signature:hover {
+            background-color: #f0f0f0;
+        }
+        .btn-print {
+            padding: 10px;
+            background-color: #4CAF50; /* رنگ اولیه */
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 100%;
+            font-size: 16px;
+            transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
+            margin-bottom: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* سایه */
+            display: flex; /* برای قرار دادن آیکون و متن در یک خط */
+            align-items: center; /* مرکز کردن عمودی */
+            justify-content: center; /* مرکز کردن افقی */
+        }
+        .btn-print i {
+            margin-right: 5px; /* فاصله بین آیکون و متن */
+        }
+        .btn-print:hover {
+            background-color: #66BB6A; /* رنگ روشن‌تر در حالت هاور */
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* سایه قوی‌تر در حالت هاور */
+            transform: scale(1.05); /* بزرگ‌تر شدن در حالت هاور */
+        }
+        /* انیمیشن فلش */
+        .arrow {
+            display: inline-block;
+            margin-right: 5px; /* فاصله بین فلش و آیکون */
+            animation: arrow-animation 1s infinite; /* انیمیشن بی‌نهایت */
+        }
+        @keyframes arrow-animation {
+            0%, 100% {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            50% {
+                opacity: 0; /* ناپدید شدن */
+                transform: translateX(5px); /* حرکت به سمت راست */
+            }
+        }
+        .output {
+            display: none;
+            margin-top: 20px;
+            border: 1px solid #000;
+            padding: 20px;
+            white-space: pre-wrap;
+            line-height: 1.6;
+            text-align: right;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .center-text {
+            text-align: center;
+        }
+        #signatureModal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: none;
+            justify-content: center;
+            align-items: center;
+        }
+        #signatureModal canvas {
+            background-color: #fff;
+            border: 2px solid #000;
+            border-radius: 5px;
+        }
+        .modal-buttons {
+            margin-top: 10px;
+        }
+        @media print {
+            @page {
+                size: A5;
+                margin: 20mm;
+            }
+            body {
+                direction: rtl;
+                text-align: right;
+                font-size: 20px;
+            }
+            .output {
+                margin-top: 0;
+                border: none;
+                padding: 0;
+                white-space: normal;
+                text-align: right;
+            }
+            img {
+                max-width: 100%;
+                max-height: 300px;
+            }
+        }</style><div class="container" id="fullnameContainer"><input type="text" id="fullname" placeholder="نام و نام خانوادگی را وارد کنید" required="" /></div><div class="container" id="idcodeContainer"><input type="tel" id="idcode" placeholder="کد ملی را وارد کنید" maxlength="10" required="" oninput="validateIdCode()" /> <small id="idcode-error" style="color: red; display: none;">کد ملی باید 10 رقمی و عددی باشد.</small></div><div class="container" id="signatureContainer"><button class="btn btn-signature" onclick="openSignatureModal()">امضا کنید</button><img id="signatureImage" alt="امضا" style="display: none; margin-top: 10px; border: 1px solid #000; max-width: 300px; max-height: 300px;" /></div><p><button class="btn" id="generateButton" onclick="generateText()">متن درخواست</button></p><div class="output" id="output"> </div><p><button class="btn-print" id="printButton" style="display: none;" onclick="printContent()">چاپ</button></p><div id="signatureModal"><div><canvas id="signatureCanvas" width="400" height="200"></canvas><div class="modal-buttons"><button class="btn" onclick="saveSignature()">تایید</button><button class="btn" onclick="clearSignature()">پاک کردن امضا</button><button class="btn" onclick="closeSignatureModal()">لغو</button></div></div></div><script>
+        let drawing = false;
+
+        function openSignatureModal() {
+            document.getElementById('signatureModal').style.display = 'flex';
+        }
+
+        function closeSignatureModal() {
+            document.getElementById('signatureModal').style.display = 'none';
+        }
+
+        const canvas = document.getElementById('signatureCanvas');
+        const ctx = canvas.getContext('2d');
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mouseup', stopDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('touchstart', startDrawing, { passive: false });
+        canvas.addEventListener('touchend', stopDrawing);
+        canvas.addEventListener('touchmove', draw, { passive: false });
+
+        canvas.addEventListener('touchmove', function(e) {
+            e.preventDefault();
+        }, { passive: false });
+
+        canvas.addEventListener('mousemove', function(e) {
+            e.preventDefault();
+        });
+
+        function startDrawing(e) {
+            drawing = true;
+            ctx.beginPath();
+            ctx.moveTo(getX(e), getY(e));
+        }
+
+        function stopDrawing() {
+            drawing = false;
+        }
+
+        function draw(e) {
+            if (!drawing) return;
+            ctx.lineWidth = 2;
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = '#00008B';
+            ctx.lineTo(getX(e), getY(e));
+            ctx.stroke();
+        }
+
+        function getX(e) {
+            return e.touches ? e.touches[0].clientX - canvas.getBoundingClientRect().left : e.clientX - canvas.getBoundingClientRect().left;
+        }
+
+        function getY(e) {
+            return e.touches ? e.touches[0].clientY - canvas.getBoundingClientRect().top : e.clientY - canvas.getBoundingClientRect().top;
+        }
+
+        function saveSignature() {
+            const signatureImage = document.getElementById('signatureImage');
+            signatureImage.src = canvas.toDataURL('image/png');
+            signatureImage.style.display = 'block';
+            closeSignatureModal();
+        }
+
+        function clearSignature() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const signatureImage = document.getElementById('signatureImage');
+            signatureImage.style.display = 'none';
+        }
+
+        function generateText() {
+            const fullname = document.getElementById('fullname').value;
+            const idcode = document.getElementById('idcode').value;
+            const signature = document.getElementById('signatureImage').src;
+
+            if (!fullname || !idcode || idcode.length !== 10 || !signature) {
+                alert('لطفاً تمام فیلدها را به‌طور صحیح پر کنید و امضا کنید.');
+                return;
+            }
+
+            const currentDate = new Date().toLocaleDateString('fa-IR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit'
+            });
+
+            const outputText = `
+<div class="center-text">
+<b>بسمه تعالی</b><br>
+<b>تأییدیه حضور و پذیرش شرایط دوره "تربیت مربی و مشاور نوجوان"</b><br>
+<b>موسسه تعالی اندیشه و رشد</b>
+</div>
+<br>
+اینجانب <b>${fullname}</b> دارای کد ملی <b>${idcode}</b> با آگاهی کامل تأیید می‌کنم که در دوره "تربیت مربی و مشاور نوجوان" که توسط مؤسسه تعالی اندیشه و رشد برگزار گردید، به‌طور کامل و فعال شرکت کرده‌ام. تمامی مطالب و مفاهیم ارائه‌شده در دوره را مطالعه و آموخته‌ام و درک کافی از آن‌ها دارم. همچنین خلاصه‌ای از مطالب و یادگیری‌های خود را طبق دستورالعمل‌ها ارسال کرده‌ام و در صورتیکه فعالیت یا تکلیفی خواسته شده، در تمامی فعالیت‌ها و تمرینات مشارکت فعال داشته‌ام.<br><br>
+علاوه بر این، با شرایط و ضوابط دریافت مدرک رسمی دوره آشنا هستم و به‌عنوان فردی که دوره فوق را به‌طور کامل گذرانده‌ام، درخواست دریافت مدرک رسمی دوره را دارم.<br><br>
+آگاه هستم که ممکن است برای ارتقاء مهارت‌ها و آگاهی‌های خود نیاز به شرکت در دوره‌های تکمیلی و یادگیری بیشتر داشته باشم، تأیید می‌کنم که در جهت ارتقای دانش و مهارت‌های خود در زمینه مربی‌گری و مشاوره نوجوانان، اهتمام جدی به فراگیری بیشتر و توسعه دانش خود داشته باشم.<br><br>
+<div class="center-text"><img src="${signature}" alt="امضا" style="max-width: 300px; max-height: 300px;"></div>
+<div class="center-text"> <b>${fullname}</b></div>
+<div class="center-text"> <b>${currentDate}</b></div>
+            `;
+            document.getElementById('output').innerHTML = outputText;
+
+            // پنهان کردن فیلدها و دکمه‌ها
+            document.getElementById('fullnameContainer').style.display = 'none';
+            document.getElementById('idcodeContainer').style.display = 'none';
+            document.getElementById('signatureContainer').style.display = 'none';
+            document.getElementById('generateButton').style.display = 'none';
+
+            // نمایش کادر متون و دکمه چاپ
+            document.getElementById('output').style.display = 'block';
+            document.getElementById('printButton').style.display = 'block';
+
+            // اسکرول به دکمه چاپ
+            document.getElementById('printButton').scrollIntoView({ behavior: 'smooth' });
+        }
+
+        function printContent() {
+            const content = document.getElementById('output').innerHTML;
+            const printWindow = window.open('', '', 'height=500,width=800');
+            printWindow.document.write('<html><head><title>درخواست گواهی</title><style>body { direction: rtl; text-align: right; font-size: 20px; } .center-text { text-align: center; }</style></head><body>' + content + '</body></html>');
+            printWindow.document.close();
+            printWindow.print();
+        }
+
+        function validateIdCode() {
+            const idcode = document.getElementById('idcode').value;
+            const errorMessage = document.getElementById('idcode-error');
+            errorMessage.style.display = idcode.length !== 10 || isNaN(idcode) ? 'inline' : 'none';
+        }
+    </script>