Scribd
Upload
16 views7 pages

Message

Uploaded by

hamediliq7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views7 pages

Message

Uploaded by

hamediliq7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?
family=Tajawal:wght@400;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Tajawal', sans-serif;
}

body {
background: linear-gradient(-45deg, #0a0a0a, #1a1a1a, #2a2a2a,
#1a1a1a);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: white;
line-height: 1.6;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
overflow-y: auto;
padding: 20px;
}

.modal-content {
background: rgba(20, 20, 20, 0.95);
max-width: 800px;
margin: 50px auto;
padding: 30px;
border-radius: 15px;
position: relative;
border: 1px solid rgba(114, 137, 218, 0.3);
backdrop-filter: blur(10px);
}

.close-modal {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #7289da;
transition: color 0.3s ease;
}

.close-modal:hover {
color: #ffffff;
}

.project-details {
margin-top: 20px;
}

.project-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}

.gallery-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}

.gallery-image:hover {
transform: scale(1.05);
}

.project-progress {
margin: 20px 0;
background: rgba(114, 137, 218, 0.1);
padding: 15px;
border-radius: 8px;
}

.progress-bar {
width: 100%;
height: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #7289da, #5b6eae);
transition: width 0.3s ease;
}

.team-section {
margin: 20px 0;
}

.team-members {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 10px;
}
.team-member {
background: rgba(114, 137, 218, 0.1);
padding: 10px 15px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
}

.member-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}

@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
}

header {
text-align: center;
padding: 60px 0;
animation: fadeIn 1s ease-in;
background: rgba(0, 0, 0, 0.5);
border-radius: 15px;
backdrop-filter: blur(10px);
margin-bottom: 30px;
border: 1px solid rgba(114, 137, 218, 0.3);
}

.profile-pic {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px auto;
border: 5px solid #7289da;
transition: transform 0.3s ease;
animation: pulse 2s infinite;
object-fit: cover;
box-shadow: 0 0 20px rgba(114, 137, 218, 0.5);
}

.title {
font-size: 2.5em;
color: #7289da;
margin: 20px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: glow 2s ease-in-out infinite alternate;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 40px;
}

.project-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
cursor: pointer;
border: 1px solid rgba(114, 137, 218, 0.2);
}

.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
border-color: rgba(114, 137, 218, 0.5);
}
.project-image {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
}

.skills {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
backdrop-filter: blur(5px);
}

.skill-tag {
background: linear-gradient(135deg, #7289da, #5b6eae);
padding: 8px 20px;
border-radius: 25px;
font-size: 0.95em;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.skill-tag:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(114, 137, 218, 0.4);
}

@media (max-width: 768px) {


.container {
padding: 10px;
}
.modal-content {
margin: 20px;
padding: 15px;
}

.project-gallery {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<img src="api/placeholder/300/Def.gif" alt="d.png" class="profile-pic">
<h1 class="title">daeoof01</h1>
<p class="subtitle">‫ مطور ألعاب‬Roblox ‫<محترف‬/p>
</header>

<div class="skills">
<span class="skill-tag">Roblox Studio</span>
<span class="skill-tag">Lua</span>
<span class="skill-tag">‫<تصميم الألعاب‬/span>
<span class="skill-tag">‫<برمجة السيناريوهات‬/span>
<span class="skill-tag">‫<تطوير النظم‬/span>
</div>

<div class="projects">

<div class="project-card" onclick="showProjectDetails('project1')">

<img src="api/placeholder/300/project1.gif" alt="Slendy Tubbies


Classic" class="project-image">
<h3>SlendyTubbiesClassic REBORN</h3>
<p>‫<نسخة محاكاة كالسيكية للعبة الأصلية‬/p>
</div>

<div class="project-card" onclick="showProjectDetails('project2')">


<img src="/api/placeholder/300/200" alt="1 ‫"مشروع سري‬
class="project-image">
<h3>1# ‫<مشروع سري‬/h3>
<p>‫ مشروع جديد قيد التطوير‬...‫<قريبًا‬/p>
</div>

<div class="project-card" onclick="showProjectDetails('project3')">


<img src="/api/placeholder/300/200" alt="2 ‫"مشروع سري‬
class="project-image">
<h3>2# ‫<مشروع سري‬/h3>
<p>‫ مفاجأة جديدة‬...‫<قريبًا‬/p>
</div>

<div class="project-card" onclick="showProjectDetails('project4')">


<img src="/api/placeholder/300/200" alt="3 ‫"مشروع سري‬
class="project-image">
<h3>3# ‫<مشروع سري‬/h3>
<p>‫ مشروع مثير‬...‫<قريبًا‬/p>
</div>
<div class="project-card" onclick="showProjectDetails('project5')">
<img src="/api/placeholder/300/200" alt="4 ‫"مشروع سري‬
class="project-image">
<h3>4# ‫<مشروع سري‬/h3>
<p>‫ شيء مميز‬...‫<قريبًا‬/p>
</div>
</div>
</div>

<!-- Modal -->


<div id="projectModal" class="modal">
<div class="modal-content">
<span class="close-modal" onclick="closeModal()">&times;</span>
<div id="projectDetails" class="project-details">
<!-- Project details will be inserted here -->
</div>
</div>
</div>

<script>
function showProjectDetails(projectId) {
const modal = document.getElementById('projectModal');
const details = document.getElementById('projectDetails');

let content = '';

if (projectId === 'project1') {


content = `
<h2>Slendy Tubbies Classic</h2>
<div class="project-gallery">
<img src="/api/placeholder/300/200" alt="Screenshot 1"
class="gallery-image">
<img src="/api/placeholder/300/200" alt="Screenshot 2"
class="gallery-image">
<img src="/api/placeholder/300/200" alt="Screenshot 3"
class="gallery-image">
</div>
<p>‫ نسخة محاكاة كالسيكية للعبة‬Slendytubbies ‫ نعمل على‬.‫الأصلية‬
‫إعادة إحياء اللعبة مع إضافة لمسات عصرية‬.</p>
<div class="project-progress">
<h3>‫<تقدم المشروع‬/h3>
<div class="progress-bar">
<div class="progress-fill" style="width: 75%"></div>
</div>
<p>75 :‫نسبة الإنجاز‬%</p>
</div>
<div class="team-section">
<h3>‫<فريق العمل‬/h3>
<div class="team-members">
<div class="team-member">
<img src="api/placeholder/30/Def (online-video-
cutter.com).gif" alt="dev.png" class="member-avatar">
<span>daeoof01 - ‫<مطور رئيسي‬/span>
</div>
<div class="team-member">
<img src="api/placeholder/30/anim (online-video-
cutter.com).gif" alt="anim1.png" class="member-avatar">
<span>‫ انميتر ومصمم‬- 2 ‫<االنميتر‬/span>
</div>
</div>
</div>
`;
} else {
content = `
<h2>‫<مشروع قيد التطوير‬/h2>
<div class="project-gallery">
<img src="api/placeholder/300/v_id_or_.png" alt="Teaser"
class="gallery-image">
</div>
<p>‫ اسم المشروع هو‬.‫*&* هذا المشروع قيد التطوير حاليًا‬#&born!</p>
<div class="project-progress">
<h3>‫<تقدم المشروع‬/h3>
<div class="progress-bar">
<div class="progress-fill" style="width: 30%"></div>
</div>
<p>30 :‫نسبة الإنجاز‬%</p>
</div>
`;
}

details.innerHTML = content;
modal.style.display = 'block';
}

function closeModal() {
document.getElementById('projectModal').style.display = 'none';
}

// Close modal when clicking outside


window.onclick = function(event) {
const modal = document.getElementById('projectModal');
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
</body>
</html>

You might also like