CodeMirror: Code Folding Demo

اختر اسم الملف

اختر تسمية للملف

<!DOCTYPE html>
<html>
<head>
<style>
 @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300&display=swap');
body{font-family: 'Almarai', sans-serif;}
.nav{text-align: center;
    background: #f1d111;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 2px 2px 7px 1px #cdc8c8;
    position: relative;
    color: #48494a;
    font-weight: 700;
  }
#delet {
    position: absolute;
    top: 17px;
    left: 17px;
    background: #e91e63;
    padding: 0px 6px 0px 6px;
    border-radius: 50%;
    line-height: 1.4;
    font-style: normal;
    color:#fff;
    cursor: pointer;
}
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #DDD;
  width:50%;
}
td:last-child {text-align:right; }
tr:hover {background-color: #D6EEEE;}
  tr:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body>
  <div class="nav"> <i id="delet" onclick='delet();'>x</i>
    تنبيه
 <p> قم بالسماح للمتصفح بنسخ الكود المنسوخ  </p>
<p>  يفضل استخدام متصفح جوجل كروم اذا لم يشتغل الكود  </p> 
<p>  لاينصح باستخدام متصفح فيسبوك   </p>
  </div>
<h1 style='text-align:center;'>  اختصارات لوحة المفاتيح </h1>

<table>
  
  <tr>
    <th>الاختصار</th>
    <th>الشرح</th>
    
  </tr>
   <tr>
    <td><b>ctrl-space (pc)</b></td>
    <td>عرض الإكمال التلقائي</td> 
  </tr>
  <tr>
    <td><b>Ctrl-A (PC) , Cmd-A (Mac)</b> </td>
    <td>تحديد المحتوى الكامل للمحرر.</td> 
  </tr>
  <tr>
    <td><b>Ctrl-D (PC)  , Cmd-D (Mac) </b></td>
    <td>يحذف السطر بالكامل    .</td>
   
  </tr>
  <tr>
    <td><b>Ctrl-Z (PC), Cmd-Z (Mac)</b></td>
    <td> التراجع عن التغيير الأخير. خطوة الى الخلف </td>
 
  </tr>
    <tr>
    <td><b>Ctrl-Y (PC), Shift-Cmd-Z (Mac), Cmd-Y (Mac)</b></td>
    <td>أعد إجراء آخر تغيير تم التراجع عنه. خطوة الى الامام</td> 
  </tr>
 
    <tr>
    <td><b> F11 </b></td>
    <td>للدخور والخروج من وضع ملئ الشاشة .</td> 
  </tr>
   
   
</table>
<script>
  var nav  = document.querySelector('.nav'); 
function delet(){ 
    nav.style.display = "none";
    localStorage.setItem("alert" , "yes");  
}
 (function(){
     var alert  = localStorage.getItem("alert"); 
       if(alert == "yes"){
         nav.style.display = "none";
       }
   
     //  localStorage.setItem("cunter" , 1); 
       var cunter  = localStorage.getItem("cunter");
   
       if(cunter != ''){
          cunter = Number(cunter)+1   ;
          localStorage.setItem("cunter" , cunter); 
          if(Number(cunter) == 5){
            localStorage.setItem("cunter" , ""); 
            nav.style.display = "block";
          }
       }else{
       localStorage.setItem("cunter" , 1); 
       }
   
 })();
  
</script>
</body>
 
</html>