اخر المواضيع

آخر الأخبار
إختر لونك المفضل

عرض المحتوي

بحث
‏إظهار الرسائل ذات التسميات htm - css - js. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات htm - css - js. إظهار كافة الرسائل

السبت، 5 أكتوبر 2024

أخبر صديقك عن الصفحة Tell a friend about the page

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !
إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

أضع موقعك بلا شروط I put your site without conditions

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !

قريبا

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

اضف مقاله وبدون تسجيل Add an article without registration

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !

المثال

http://camel-carry-arab.atwebpages.com/HaYeF5-NeseaR3/index.html

تنزيل
https://top4top.io/downloadf-320035ouz1-rar.html
https://files.fm/u/586c7enkg4
الملفات المشروع
1- articles.csv
2- scripts
3- styles
4- index
5- صور

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

علم الدولة لزائر State flag for visitor برمجه ويب

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !

كيفية الاستخدام
أنشئ ملف HTML (مثل index.html) وضع فيه كود HTML
أنشئ ملف CSS (مثل styles.css) وضع فيه كود CSS
أنشئ ملف JavaScript (مثل script.js) وضع فيه كود JavaScript
افتح ملف index.html في المتصفح
ملاحظات
تأكد من أنك متصل بالإنترنت لأن الكود يستخدم خدمات خارجية للحصول على معلومات الموقع وعلم الدولة

الكود لـ styles.css

body {
font-family: Arial, sans-serif;
text-align: center;
}

.flag img {
width: 150px;
height: auto;
}

الكود لـ script.js
// استخدم واجهة برمجة التطبيقات للحصول على معلومات الموقع
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const countryCode = data.country.toLowerCase(); // رمز الدولة
const flagUrl = `https://restcountries.com/v3.1/flags/${countryCode}.svg`;

const flagContainer = document.getElementById('flag');
const img = document.createElement('img');
img.src = flagUrl;
img.alt = `علم ${data.country_name}`;

flagContainer.appendChild(img);
})
.catch(error => {
console.error('Error fetching data:', error);
});

الكود لـ index.html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>علم الدولة الزائر</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>علم دولتك</h1>
<div id="flag" class="flag"></div>

<script src="script.js"></script>
</body>
</html>

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

الجمعة، 26 يوليو 2024

ماشر الساحر بالالوان على الكتابه js و css

السفراني | يوليو 26, 2024 | لا يوجد تعليقات !

 HTML



<link rel="stylesheet" href="milinn-style-css.css" type="text/css" />

</head>

<body>

<p align="center">HaYeF N 101 KuwaiT

<div id='sparkler'></div></p>

<script async src="milinn-js.js"></script>

</body>

</html>


CSS


html {

  cursor: none;

  font-family: system-ui;

  display: grid;

  place-items: center;

  min-height: 100vh;

  user-select: none;

}

body {

  background: black;

  overflow: hidden;

  color: white;

  --color-spark: peru;

}


#sparkler {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 1px;

  height: 1px;

  transform: rotate(-25deg);

  border-radius: 50%;

  box-shadow: 0 0 2500px 100px var(--color-spark);

}

#sparkler:before {

  content: '';

  width: 10px;

  height: 25vh;

  background: linear-gradient(to right, dimgray, silver);

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 1rem;

}

#sparkler:after {

  content: '';

  width: 4px;

  height: 25vh;

  background: linear-gradient(to right, dimgray, gray);

  position: absolute;

  top: calc(25vh - 1px);

  left: 3px;

/*  border-radius: 1rem; */

}


.particle {

  height: 5px;

  border-radius: 50%;

  background: linear-gradient(to right, transparent, var(--color-spark), white, var(--color-spark), transparent);

  box-shadow: 0 0 30px var(--color-spark);

  position: absolute;

  transition: .5s linear;

  z-index: 100;

}



JS


const div = document.querySelector('#sparkler')


function sparkle() {

  var p = document.createElement('div')

  p.className = 'particle'

  p.style.left = div.getBoundingClientRect().x + 'px'

  p.style.top = div.getBoundingClientRect().y + 'px'

  let w = (Math.floor(Math.random() * 30)) + 20

  p.style.width = w + 'vh'

  p.style.transform = 'translateX('+((-1)*(w*.475))+'vh) rotate('+Math.random()*360+'deg)'

  document.body.appendChild(p)

  

  setTimeout(function(){

    let pp = document.querySelectorAll('.particle')[0]

    pp.remove() 

  }, 256)

}


let shiny = setInterval(sparkle, 16)


window.addEventListener('click', function() {

  let c = 'hsl('+Math.random()*360+'deg, 100%, 50%)'

  document.body.style.setProperty('--color-spark', c)

})


window.addEventListener('mousemove', function(e){

  let x = e.clientX,

      y = e.clientY

  

  div.style.left = x + 'px'

  div.style.top = y + 'px'

})

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

الوان متحركه حول اي كتابه HaYeF N 101 KuwaiT css

السفراني | يوليو 26, 2024 | لا يوجد تعليقات !

 يمكنك ربطها باي ويب او برمجه اخره

<link rel="stylesheet" href="zaear-style-css.css" type="text/css" />

والتكوين يكون

<body>


<button>

  <div>

    HaYeF N 101 KuwaiT


  </div>

</button>

</script>


</body>

</html>

وكود css

@property --border-angle-1 {

  syntax: "<angle>";

  inherits: true;

  initial-value: 0deg;

}


@property --border-angle-2 {

  syntax: "<angle>";

  inherits: true;

  initial-value: 90deg;

}


@property --border-angle-3 {

  syntax: "<angle>";

  inherits: true;

  initial-value: 180deg;

}



:root {

  --bright-blue: rgb(0, 100, 255);

  --bright-green: rgb(0, 255, 0);

  --bright-red: rgb(255, 0, 0);

  --background: black;

  --foreground: white;

  --border-size: 2px;

  --border-radius: 0.75em;

}


@supports (color: color(display-p3 1 1 1)) {

  :root {

    --bright-blue: color(display-p3 0 0.2 1);

    --bright-green: color(display-p3 0.4 1 0);

    --bright-red: color(display-p3 1 0 0);

  }

}


@keyframes rotateBackground {

  to { --border-angle-1: 360deg; }

}


@keyframes rotateBackground2 {

  to { --border-angle-2: -270deg; }

}


@keyframes rotateBackground3 {

  to { --border-angle-3: 540deg; }

}


body {

  background: var(--background);

  color: var(--foreground);

  min-height: 100dvh;

  display: grid;

  place-content: center;

  margin: 0;

  font-family: "Aspekta";

}


button {

  --border-angle-1: 0deg;

  --border-angle-2: 90deg;

  --border-angle-3: 180deg;

  color: inherit;

  font-size: calc(0.8rem + 4vmin);

  font-family: inherit;

  border: 0;

  padding: var(--border-size);

  display: flex;

  width: max-content;

  border-radius: var(--border-radius);

  background-color: transparent;

  background-image: conic-gradient(

      from var(--border-angle-1) at 10% 15%,

      transparent,

      var(--bright-blue) 10%,

      transparent 30%,

      transparent

    ),

    conic-gradient(

      from var(--border-angle-2) at 70% 60%,

      transparent,

      var(--bright-green) 10%,

      transparent 60%,

      transparent

    ),

    conic-gradient(

      from var(--border-angle-3) at 50% 20%,

      transparent,

      var(--bright-red) 10%,

      transparent 50%,

      transparent

    );

  animation: 

    rotateBackground 3s linear infinite,

    rotateBackground2 8s linear infinite,

    rotateBackground3 13s linear infinite;

}


button div {

  background: var(--background); 

  padding: 1em 1.5em;

  border-radius: calc(var(--border-radius) - var(--border-size));

  color: var(--foreground);

}


@font-face {

  font-family: "Aspekta";

  font-weight: normal;

  src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");

}

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

كود visitorCount بصيغه js عدد

السفراني | يوليو 26, 2024 | لا يوجد تعليقات !

 وضع الكود تحت

<body>

    <p> أنت الزائر رقم  <span id="visitorCount">0</span>HaYeF5</p>

وضع الكود ل js

</body>

فوقه

    <script src="visitorCounterHayef.js"></script>

لفاهمين يسهل عليهم التطبيق وهذا الكود

// فحص وتحديث عدد الزوار

let count = localStorage.getItem('visitorCount') || 0;

count++;

localStorage.setItem('visitorCount', count);

document.getElementById('visitorCount').textContent = count;

وسلامتكم


إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 20 يوليو 2024

خدمات بالصور Free HTML Website Templates htmlcodex

السفراني | يوليو 20, 2024 | لا يوجد تعليقات !

 فيه مجاني وفيه مدفوع

https://htmlcodex.com/

ممتاز

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author
الاشتراك في: الرسائل (Atom)