<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBc2ZA322XKDnQ5NTRDSCfU5oXrlltGncbLtfXfZJbuLNbTF-E_DN8DHIuBVWpXw0lyBLA5KOE1aIAkeWXvOs4YPGvITFj499UylqOiPrwpfRIwtVux2tQxRhzKDKbG5ZdIYCmMtD7YcJalOU60A1oRQxpmRWX8i78KGFfkzqxx5mUt4DIrUo9IWOcZ1Kv/s1672/95f0a639-8988-45e0-9dbf-2efc13874e21.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="941" data-original-width="1672" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBc2ZA322XKDnQ5NTRDSCfU5oXrlltGncbLtfXfZJbuLNbTF-E_DN8DHIuBVWpXw0lyBLA5KOE1aIAkeWXvOs4YPGvITFj499UylqOiPrwpfRIwtVux2tQxRhzKDKbG5ZdIYCmMtD7YcJalOU60A1oRQxpmRWX8i78KGFfkzqxx5mUt4DIrUo9IWOcZ1Kv/s600/95f0a639-8988-45e0-9dbf-2efc13874e21.png" width="600"/></a></div> <!--doctype html--> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>دفتر FLSAFA - ورقة Seyès تفاعلية</title> <style> *{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#172b3a;font-family:Tahoma,Arial,sans-serif} header{background:linear-gradient(135deg,#087f8c,#0b5fa5);color:#fff;padding:18px 5%;display:flex;justify-content:space-between;align-items:center;gap:15px} .logo{font-size:24px;font-weight:800}.sub{font-size:13px;opacity:.9} .toolbar{position:sticky;top:0;z-index:10;background:#fff;padding:12px;box-shadow:0 2px 12px #0001;display:flex;flex-wrap:wrap;gap:8px;justify-content:center} button,select,input{font:inherit;border:1px solid #d5dee8;border-radius:8px;padding:8px 12px;background:#fff;color:#173047} button{cursor:pointer}.primary{background:#087f8c;color:white;border:0}.danger{background:#c62828;color:#fff;border:0} .wrap{max-width:1050px;margin:20px auto;padding:0 14px}.paper{position:relative;margin:auto;background-color:#fff;width:min(100%,794px);min-height:1123px;padding:58px 55px 55px 95px;box-shadow:0 5px 25px #0002;overflow:hidden} .paper:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to bottom,transparent 0,transparent 7px,#b7d8ef 8px);background-size:100% 8px;pointer-events:none} .paper:after{content:"";position:absolute;top:0;bottom:0;left:73px;border-left:2px solid #e58b8b;pointer-events:none} .editor{position:relative;z-index:1;min-height:1000px;outline:none;font-size:18px;line-height:32px;white-space:pre-wrap} .info{background:#fff;border-radius:12px;padding:14px;margin-bottom:15px;border:1px solid #dce6ef} @media(max-width:650px){header{padding:14px;display:block;text-align:center}.paper{min-height:800px;padding:45px 25px 45px 55px}.paper:after{left:40px}.editor{font-size:16px;line-height:28px}.toolbar{position:static}} @media print{header,.toolbar,.info{display:none!important}body{background:#fff}.wrap{margin:0;padding:0}.paper{box-shadow:none;width:210mm;min-height:297mm;margin:0;padding:18mm 15mm 15mm 25mm}.paper:after{left:20mm}.editor{font-size:18px}} </style> </head> <body> <header><div class="logo">FLSAFA</div><div class="sub">دفتر تفاعلي للكتابة والتدريب المدرسي</div></header> <div class="toolbar"> <select id="layout"><option value="seyes">Seyès</option><option value="lines">سطور بسيطة</option><option value="grid">مربعات</option><option value="blank">ورقة بيضاء</option></select> <select id="font"><option>Tahoma</option><option>Arial</option><option>Georgia</option><option>Courier New</option></select> <input id="size" type="number" min="12" max="36" value="18" title="حجم الخط"> <input id="color" type="color" value="#173047" title="لون الكتابة"> <button onclick="cmd('bold')"><b>B</b></button><button onclick="cmd('underline')"><u>U</u></button> <button onclick="cmd('justifyRight')">يمين</button><button onclick="cmd('justifyCenter')">وسط</button> <button onclick="addPage()">صفحة جديدة</button><button onclick="save()">حفظ</button> <button onclick="load()">استرجاع</button><button class="primary" onclick="window.print()">طباعة / PDF</button> <button class="danger" onclick="clearPage()">مسح</button> </div> <div class="wrap"> <div class="info">اكتب مباشرة داخل الورقة. يتم حفظ المحتوى محليًا في متصفحك ولا يحتاج إلى حساب.</div> <div class="paper" id="paper"><div id="editor" class="editor" contenteditable="true" spellcheck="false">اكتب هنا...</div></div> </div> <script> const editor=document.getElementById('editor'),paper=document.getElementById('paper'); function cmd(x){document.execCommand(x,false,null);editor.focus()} document.getElementById('font').onchange=e=>{document.execCommand('fontName',false,e.target.value);editor.focus()} document.getElementById('size').oninput=e=>editor.style.fontSize=e.target.value+'px' document.getElementById('color').oninput=e=>{document.execCommand('foreColor',false,e.target.value);editor.focus()} document.getElementById('layout').onchange=e=>{ paper.classList.remove('lines','grid','blank'); if(e.target.value!=='seyes')paper.classList.add(e.target.value) if(e.target.value==='lines')paper.style.backgroundImage='linear-gradient(to bottom,transparent 0,transparent 7px,#b7d8ef 8px)'; else if(e.target.value==='grid')paper.style.backgroundImage='linear-gradient(#d8e5ef 1px,transparent 1px),linear-gradient(90deg,#d8e5ef 1px,transparent 1px)'; else paper.style.backgroundImage='none'; } function save(){localStorage.setItem('flsafaSeyes',editor.innerHTML);alert('تم الحفظ على هذا الجهاز.')} function load(){editor.innerHTML=localStorage.getItem('flsafaSeyes')||''} function clearPage(){if(confirm('هل تريد مسح محتوى الصفحة؟'))editor.innerHTML=''} function addPage(){window.scrollTo({top:0,behavior:'smooth'});editor.innerHTML+='<div style="page-break-before:always"></div>'} load() </script> </body> </html>