سكريبت شاشة توقف تفاعلية تنبيه المستخدم برسائل وصورة بطريق عند الخمول

هذا الكود عبارة عن سكريبت يعمل على مراقبة نشاط المستخدم على صفحة الويب. إذا كان المستخدم غير نشط لفترة معينة من الوقت، فإن الصفحة تعرض رسائل تحذيرية وصورة متحركة (في هذه الحالة، صورة بطريق) لتنبيه المستخدم بأن الصفحة ستذهب إلى وضع الخمول أو ستظهر شاشة توقف.

شرح الكود بالتفصيل

HTML1

<div class="atimer">
    <div class="atimer-text"></div>
    <div class="atimer-time"></div>
</div>	
<div class="atimer-pinguin"></div>

1. atimer: هذا العنصر يحتوي على رسالة تحذيرية وشريط تقدم progress bar يظهر عندما يكون المستخدم غير نشط.
2. atimer-text: هذا العنصر يستخدم لعرض النص التحذيري
3.  atimer-time: هذا العنصر هو شريط التقدم الذي يتحرك من اليسار إلى اليمين خلال فترة زمنية محددة.
4.  atimer-pinguin: هذا العنصر يستخدم لعرض صورة البطريق المتحركة عندما ينتهي الوقت المحدد.

Css 2

1. 
   .atimer {
       display: none;
       background: rgba(255,255,255,0.9);
       padding: 16px 20px;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 99998;
       text-align: center;
       box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%);
       box-sizing: border-box;
   }

   .atimer: يتم إخفاء هذا العنصر بشكل افتراضي (display: none;). عندما يظهر، يكون في أعلى الصفحة مع خلفية شبه شفافة ونص في المنتصف.

2. 
   .atimer-text p { 
       font-size: 16px;
       margin: 0 0 6px;
   }

   .atimer-text p: يحدد نمط النص داخل العنصر atimer-text.

3. 
       .atimer-time {
       margin-top: 10px;
       height: 8px;
       width: 0;
       background: #337AB7;
       transition: width 4.9s linear;
   }
   .atimer-time.timerun {
       width: 100%;
   }	

   .atimer-time: هذا هو شريط التقدم. يبدأ بعرض صفر width: 0; ويتوسع إلى عرض كامل width: 100%; خلال 4.9 ثواني عندما يتم إضافة الكلاس timerun.

4. 
       .atimer-pinguin {
       max-width: 100%;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 99999;	
       background: #F6FCFF;
       padding: 26px;
       border-radius: 50%;
       box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%);
       border: 8px solid #BFE2FF;
       overflow: hidden;
       display: none;
   }

   .atimer-pinguin: يتم إخفاء هذا العنصر بشكل افتراضي display: none;. عندما يظهر، يكون في وسط الصفحة مع صورة متحركة للبطريق.

JavaScript3

let aTimer1,
aTimer2,
aUser = false, 
aWait1 = 5000, // 5 ثواني حتى يظهر التحذير
aWait2 = 5000; // 5 ثواني حتى تظهر الصورة المتحركة

$(window).on('load click scroll', function(){
    clearTimeout(aTimer1);  
    clearTimeout(aTimer2); 
    if(aUser == true){ 
        // إذا عاد المستخدم للنشاط
        $('.atimer').fadeOut();
        $('.atimer-time').removeClass('timerun');
        $('.atimer-pinguin').fadeOut();
    }
    aUser = false;
    aTimer1 = setTimeout(function(){ 
        // إذا كان المستخدم غير نشط
        $('.atimer .atimer-text').html('<p>الصفحة في حالة خمول وسيتم عرض الشاشة قريبًا</p><p>للاستمرار، انقر فوق الصفحة</p>');
        $('.atimer').fadeIn();
        $('.atimer-time').addClass('timerun');
        aUser = true; 
        aTimer2 = setTimeout(function(){ 
            $('.atimer-pinguin').html('<img src="https://atuin.ru/upload/1492334767_ping.gif">');
            $('.atimer-pinguin').fadeIn();
            $('.atimer').fadeOut();
        }, aWait2);	
    }, aWait1);		
});

1. aTimer1 و aTimer2: هما مؤقتان (timers) يستخدمان لتأخير تنفيذ الأحداث.

2. aUser: متغير لتتبع حالة المستخدم (نشط أو غير نشط).

3. aWait1:5000 الوقت الذي يجب أن يمر قبل ظهور التحذير (5 ثواني).

4. aWait2:5000 الوقت الذي يجب أن يمر قبل ظهور الصورة المتحركة (5 ثواني أخرى).

عندما يقوم المستخدم بتحميل الصفحة أو النقر أو التمرير، يتم إعادة تعيين المؤقتات clearTimeout.

 إذا كان المستخدم غير نشط لمدة 5 ثواني aWait1، يتم عرض رسالة تحذيرية وشريط تقدم. إذا استمر المستخدم في عدم النشاط لمدة 5 ثواني إضافية aWait2، يتم عرض صورة البطريق المتحركة. إذا عاد المستخدم للنشاط (بالنقر أو التمرير)، يتم إخفاء الرسالة التحذيرية والصورة المتحركة.

 ملخص:

1.  الكود يعمل على مراقبة نشاط المستخدم.
2.  إذا كان المستخدم غير نشط لمدة 5 ثواني، يتم عرض رسالة تحذيرية.
3.  إذا استمر عدم النشاط لمدة 5 ثواني إضافية، يتم عرض صورة متحركة. 
4.  إذا عاد المستخدم للنشاط، يتم إخفاء الرسالة والصورة.

الكود كاملا

[HTML]
  <div class='atimer'>
	<div class='atimer-text'/>
	<div class='atimer-time'/>
</div>	
<div class='atimer-pinguin'/>

[CSS]
  <style>
.atimer {
	display: none;
	background: rgba(255,255,255,0.9);
	padding: 16px 20px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99998;
	text-align: center;
	box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%);
	box-sizing: border-box;
}
.atimer-text p { 
	font-size: 16px;
	margin: 0 0 6px;
}	
.atimer-time {
	margin-top: 10px;
	height: 8px;
	width: 0;
	background: #337AB7;
	transition: width 4.9s linear;
}
.atimer-time.timerun {
	width: 100%;
}	
.atimer-pinguin {
	max-width: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;	
	background: #F6FCFF;
	padding: 26px;
	border-radius: 50%;
	box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%);
	border: 8px solid #BFE2FF;
	overflow: hidden;
	display: none;
}
</style>

[JS] 
  <script type='text/javascript'>
  //<![CDATA[
			let aTimer1,
			aTimer2,
			aUser = false, 
			aWait1 = 6000, // 5 секунд до показа предупредительного окна
			aWait2 = 6000; // 5 секунд до основного действия
			$(window).on('load click scroll', function(){
				clearTimeout(aTimer1);  
				clearTimeout(aTimer2); 
				if(aUser == true){ 
					// Действия при возвращении пользователя
					$('.atimer').fadeOut();
					$('.atimer-time').removeClass('timerun');
					$('.atimer-pinguin').fadeOut();
				}
				aUser = false;
				aTimer1 = setTimeout(function(){ 
					// Действия при отсутствии пользователя
					$('.atimer .atimer-text').html('<p>استكشف في مدونة أوعي وشك عالم الابتكار</p><p>اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.</p>');
					$('.atimer').fadeIn();
					$('.atimer-time').addClass('timerun');
					aUser = true; 
					aTimer2 = setTimeout(function(){ 
					$('.atimer-pinguin').html('<img src="https://atuin.ru/upload/1492334767_ping.gif">');
					$('.atimer-pinguin').fadeIn();
					$('.atimer').fadeOut();
					}, aWait2);	
				}, aWait1);		
			});	
//]]>
		</script>