اريد كود HTML واجهات مميزة

Saleh Kamal · 31 ديسمبر 2023

مع ازرار

تم التعديل في 31 ديسمبر 2023 بواسطة Saleh Kamal

كمال صالح2 · 31 ديسمبر 2023

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>اسم الموقع</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="اسم النظام">
        </div>
        <center>
            <div>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>5 </button>
                <button>6 </button>
            </div>
        </center>
    </header>

    
</body>
</html>

CSS:


*{
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height: 70px;
    background-color:lightskyblue;
    box-shadow: 0px 0px 12px skyblue;
}
header button{
    width:140px;
    padding:10px;
    margin-top:12px;
    border:none;
    background-color:lightblue;
    outline:none;
    font-size:18px;
    box-shadow:0px 0px 8px skyblue;
    font-family: "tajawal", sans-serif;
    font-weight: bold;
    transition: 1s;
    color:black;
    font-family: 'Tajawal', sans-serif;
}
header button:hover{
    color:mediumblue;
    background-color:skyblue;
    box-shadow:0px 0px 15px mediumblue
}
header img{
    width:70px;
    float:left;
    margin-top:0px;
    margin-left:10px;
}

بتاريخ 3 دقائق مضت قال كمال صالح محمد:

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>اسم الموقع</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="اسم النظام">
        </div>
        <center>
            <div>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>5 </button>
                <button>6 </button>
            </div>
        </center>
    </header>

    
</body>
</html>

CSS:


*{
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height: 70px;
    background-color:lightskyblue;
    box-shadow: 0px 0px 12px skyblue;
}
header button{
    width:140px;
    padding:10px;
    margin-top:12px;
    border:none;
    background-color:lightblue;
    outline:none;
    font-size:18px;
    box-shadow:0px 0px 8px skyblue;
    font-family: "tajawal", sans-serif;
    font-weight: bold;
    transition: 1s;
    color:black;
    font-family: 'Tajawal', sans-serif;
}
header button:hover{
    color:mediumblue;
    background-color:skyblue;
    box-shadow:0px 0px 15px mediumblue
}
header img{
    width:70px;
    float:left;
    margin-top:0px;
    margin-left:10px;
}

لازم يتم الربط بين HTML وCSS

Ali Alzhrani · 16 سبتمبر

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>شاشة الجدول</title>
<style>
body {font-family: Arial, sans-serif; text-align: center; background: #f4f4f4; direction: rtl;}
table {margin: 50px auto; border-collapse: collapse; width: 70%; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
th, td {padding: 15px; border: 1px solid #333;}
th {background: #4CAF50; color: white;}
td {font-size: 18px;}
</style>
</head>
<body>
<h2>📅 شاشة جدول قسم الحاسب الآلي</h2>
<table id="scheduleTable">
<tr>
<th>المقرر</th>
<th>الدكتور</th>
<th>اليوم</th>
<th>الوقت</th>
<th>القاعة</th>
</tr>
<tr>
<td colspan="5">سيتم عرض الجدول هنا...</td>
</tr>
</table>

let index = 0;

// أول عرض
showLecture();
// التغيير كل 5 ثواني للتجربة
setInterval(showLecture, 5000);
</script>
</body>
</html>

Ali Alzhrani · 16 سبتمبر

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>شاشة الجدول</title>
<style>
body {font-family: Arial, sans-serif; text-align: center; background: #f4f4f4; direction: rtl;}
table {margin: 50px auto; border-collapse: collapse; width: 70%; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
th, td {padding: 15px; border: 1px solid #333;}
th {background: #4CAF50; color: white;}
td {font-size: 18px;}
</style>
</head>
<body>
<h2>📅 شاشة جدول قسم الحاسب الآلي</h2>
<table id="scheduleTable">
<tr>
<th>المقرر</th>
<th>الدكتور</th>
<th>اليوم</th>
<th>الوقت</th>
<th>القاعة</th>
</tr>
<tr>
<td colspan="5">سيتم عرض الجدول هنا...</td>
</tr>
</table>

let index = 0;

// أول عرض
showLecture();
// التغيير كل 5 ثواني للتجربة
setInterval(showLecture, 5000);
</script>
</body>
</html>

ريان قرايري · 27 سبتمبر

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>طائرة العقبات ✈️</title>
<style>
body {
margin: 0;
background: #87CEEB;
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
background: #87CEEB;
display: block;
margin: auto;
border: 3px solid #000;
}
h1 {
margin: 10px;
}
</style>
</head>
<body>
<h1>✈️ لعبة الطائرة وتخطي الحواجز</h1>
<p>اضغط المسافة للقفز!</p>
<canvas id="gameCanvas" width="400" height="500"></canvas>

// اللاعب (الطائرة)
let plane = {
x: 80,
y: 200,
width: 30,
height: 30,
velocity: 0,
gravity: 0.6,
lift: -10
};

let score = 0;
let gameOver = false;

// الحواجز
let pipes = [];
const pipeWidth = 50;
const gap = 120;
let pipeSpeed = 2;

// أول حاجز
pipes.push({
x: canvas.width,
top: Math.random() * 200 + 20
});

// التحكم
document.addEventListener('keydown', function (e) {
if (e.code === 'Space' && !gameOver) {
plane.velocity = plane.lift;
} else if (gameOver && e.code === 'Space') {
location.reload(); // إعادة اللعبة
}
});

function drawPlane() {
ctx.fillStyle = 'red';
ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
}

function drawPipes() {
ctx.fillStyle = 'green';
pipes.forEach(pipe => {
// الجزء العلوي
ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top);
// الجزء السفلي
ctx.fillRect(pipe.x, pipe.top + gap, pipeWidth, canvas.height);
});
}

function update() {
if (gameOver) return;

// حركة الطائرة
plane.velocity += plane.gravity;
plane.y += plane.velocity;

// تحديث الحواجز
pipes.forEach(pipe => {
pipe.x -= pipeSpeed;
});

// إضافة حواجز جديدة
if (pipes[pipes.length - 1].x < canvas.width - 150) {
pipes.push({
x: canvas.width,
top: Math.random() * 200 + 20
});
}

// إزالة الحواجز القديمة
if (pipes[0].x + pipeWidth < 0) {
pipes.shift();
score++;
}

// تصادم
pipes.forEach(pipe => {
if (
plane.x < pipe.x + pipeWidth &&
plane.x + plane.width > pipe.x &&
(plane.y < pipe.top || plane.y + plane.height > pipe.top + gap)
) {
gameOver = true;
}
});

// اصطدام بالأرض أو السقف
if (plane.y + plane.height > canvas.height || plane.y < 0) {
gameOver = true;
}
}

function drawScore() {
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('النقاط: ' + score, 10, 30);
}

function drawGameOver() {
ctx.fillStyle = 'black';
ctx.font = '30px Arial';
ctx.fillText('انتهت اللعبة!', 100, canvas.height / 2 - 10);
ctx.font = '18px Arial';
ctx.fillText('اضغط المسافة لإعادة اللعب', 90, canvas.height / 2 + 20);
}

function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlane();
drawPipes();
drawScore();
update();

if (gameOver) {
drawGameOver();
} else {
requestAnimationFrame(loop);
}
}

loop();
</script>
</body>
</html>