id
ابراهيم جمال شـــوق
بطاقة تعريف تفاعلية
ID CARD
عنوان المشروع البرمجي:
بطاقة تعريف شخصية تفاعلية
فكرة المشروع
بطاقة تعريف شخصية تفاعلية تعرض معلومات الطالب بشكل جذاب. يتميز التطبيق بوجود أزرار تفاعلية تسمح للمستخدم بإظهار أو إخفاء معلومات إضافية عن الطالب (الهوايات، المهارات)، تغيير لون خلفية البطاقة بشكل عشوائي، وعرض رسالة ترحيب ديناميكية تختلف حسب الوقت (صباحاً، مساءً). تم تصميم البطاقة بشكل عصري مع تأثيرات بصرية جميلة وألوان جذابة.
SOURCE CODE
<!-- بطاقة تعريف شخصية تفاعلية - إعداد ابراهيم جمال شوق -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بطاقتي الشخصية</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Tajawal', 'Cairo', sans-serif;
background: linear-gradient(135deg, #0B3526 0%, #1a4d3a 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.profile-card {
background: white;
border-radius: 35px;
padding: 35px;
max-width: 420px;
width: 100%;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
text-align: center;
transition: all 0.5s ease;
border: 1px solid rgba(255,215,0,0.3);
}
.profile-img {
width: 140px;
height: 140px;
border-radius: 50%;
background: linear-gradient(135deg, #0B3526, #1a4d3a);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: #D4AF37;
border: 4px solid #D4AF37;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
h2 {
color: #0B3526;
margin-bottom: 8px;
font-size: 1.8rem;
}
.title {
color: #666;
margin-bottom: 20px;
font-size: 1rem;
}
.info-section {
margin: 20px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 20px;
display: none;
text-align: right;
}
.info-section.show {
display: block;
animation: slideDown 0.4s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-item {
margin: 12px 0;
font-size: 1rem;
}
.info-item strong {
color: #0B3526;
}
.buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin: 25px 0;
}
button {
background: linear-gradient(135deg, #0B3526, #1a4d3a);
color: white;
border: none;
padding: 10px 18px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.3s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.greeting-box {
margin-top: 20px;
padding: 12px;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
border-radius: 15px;
color: #2e7d32;
font-weight: bold;
font-size: 1rem;
}
.social-links {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: center;
gap: 20px;
}
.social-links a {
color: #0B3526;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.social-links a:hover {
color: #D4AF37;
transform: scale(1.1);
}
@media (max-width: 500px) {
.profile-card { padding: 20px; }
.profile-img { width: 110px; height: 110px; font-size: 45px; }
h2 { font-size: 1.4rem; }
button { padding: 7px 14px; font-size: 12px; }
}
</style>
</head>
<body>
<div class="profile-card" id="profileCard">
<div class="profile-img">
👨💻
</div>
<h2>ابراهيم جمال شوق</h2>
<div class="title">طالب مبرمج | الصف الأول الثانوي</div>
<div class="buttons">
<button onclick="toggleInfo()">ℹ️ معلومات إضافية</button>
<button onclick="changeColor()">🎨 تغيير اللون</button>
<button onclick="showGreeting()">👋 رسالة ترحيب</button>
</div>
<div class="info-section" id="infoSection">
<div class="info-item">
<strong>🎂 العمر:</strong> 16 سنة
</div>
<div class="info-item">
<strong>📍 المدينة:</strong> قلين - كفر الشيخ - مصر
</div>
<div class="info-item">
<strong>🎯 الهدف:</strong> تطوير تطبيقات ويب مبتكرة
</div>
<div class="info-item">
<strong>💻 المهارات:</strong> HTML، CSS، JavaScript، Python
</div>
<div class="info-item">
<strong>⚽ الهوايات:</strong> البرمجة، كرة القدم، القراءة
</div>
</div>
<div class="greeting-box" id="greetingBox" style="display: none;"></div>
<div class="social-links">
<a href="#" target="_blank"><i class="bi bi-github"></i></a>
<a href="#" target="_blank"><i class="bi bi-linkedin"></i></a>
<a href="#" target="_blank"><i class="bi bi-twitter-x"></i></a>
<a href="#" target="_blank"><i class="bi bi-instagram"></i></a>
</div>
</div>
<script>
let colors = [
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
];
let colorIndex = 0;
function toggleInfo() {
const infoSection = document.getElementById('infoSection');
infoSection.classList.toggle('show');
const btn = event.target;
if (infoSection.classList.contains('show')) {
btn.innerHTML = '📖 إخفاء المعلومات';
} else {
btn.innerHTML = 'ℹ️ معلومات إضافية';
}
}
function changeColor() {
const card = document.getElementById('profileCard');
colorIndex = (colorIndex + 1) % colors.length;
card.style.background = colors[colorIndex];
card.style.color = '#fff';
if (colorIndex === 0) {
card.style.background = 'white';
card.style.color = '#333';
}
}
function showGreeting() {
const greetingBox = document.getElementById('greetingBox');
const hour = new Date().getHours();
let greetingText = '';
if (hour < 12) {
greetingText = '🌅 صباح الخير! نشكر المهندس محمد شاهين على مجهوداته معنا في مادة البرمجة';
} else if (hour < 18) {
greetingText = '☀️ مساء الخير! كيف كان يومك؟';
} else {
greetingText = '🌙 مساء الخير! أتمنى لك ليلة سعيدة';
}
greetingBox.textContent = greetingText + ' 😊';
greetingBox.style.display = 'block';
setTimeout(() => {
greetingBox.style.opacity = '0';
setTimeout(() => {
greetingBox.style.display = 'none';
greetingBox.style.opacity = '1';
}, 500);
}, 4000);
}
const card = document.getElementById('profileCard');
card.style.transition = 'all 0.5s ease';
</script>
</body>
</html>
نتيجة التنفيذ
اضغط على "تشغيل المشروع" لرؤية النتيجة
بطاقة تعريف تفاعلية - معلومات وألوان متغيرة
تم التنفيذ والمراجعة تحت إشراف معلم أول المادة:
المهندس/ محمد محمود شاهين
مدرسة الشهيد أحمد مالك الثانوية
إدارة قلين التعليمية