Skip to content

Instantly share code, notes, and snippets.

@Ayman-jakan

Ayman-jakan/.markdown

Created May 7, 2025 06:01
Show Gist options
  • Save Ayman-jakan/3e631d3b3378963feee172c8135c74eb to your computer and use it in GitHub Desktop.
Save Ayman-jakan/3e631d3b3378963feee172c8135c74eb to your computer and use it in GitHub Desktop.
Download ZIP
أولى باك علوم تجريبية
Raw
.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>شباب المستقبل</title>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Tajawal', sans-serif;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: white;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
position: relative;
}
#loader {
position: fixed;
width: 100%;
height: 100%;
background: white url('https://i.gifer.com/ZZ5H.gif') no-repeat center center;
background-size: 100px 100px;
z-index: 9999;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
color: #f1c40f;
text-shadow: 0 0 10px #f39c12;
}
p {
font-size: 22px;
margin-bottom: 30px;
color: #ecf0f1;
padding: 0 25px;
}
.enter-button {
padding: 15px 45px;
font-size: 22px;
color: white;
background: linear-gradient(45deg, #ff416c, #ff4b2b);
border: none;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
box-shadow: 0 0 15px rgba(255, 65, 108, 0.7);
transition: transform 0.3s, box-shadow 0.3s;
z-index: 1;
}
.enter-button:hover {
transform: scale(1.07);
box-shadow: 0 0 25px rgba(255, 75, 43, 0.9);
}
.scrolling-emojis {
width: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
padding: 12px 0;
}
.scrolling-emojis span {
display: inline-block;
font-size: 34px;
padding: 0 25px;
animation: scroll 18s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('loader').style.display = 'none';
});
function playSoundAndRedirect() {
const audio = new Audio('https://cdn.pixabay.com/audio/2023/03/14/audio_91c8ce3205.mp3'); // صوت فخم
audio.play();
setTimeout(() => {
window.location.href = "home.html";
}, 1000); // تأخير الانتقال حتى يسمع المستخدم الصوت
}
</script>
</head>
<body>
<div id="loader"></div>
<h1>منظومة شباب المستقبل ترحب بك في تطبيقنا 🎓</h1>
<p>منصة تعليمية شاملة لجميع الدروس الموجودة والمحذوفة الخاصة بمقرر أولى باك علوم تجريبية ✨</p>
<button class="enter-button" onclick="playSoundAndRedirect()">دخول 🚀</button>
<div class="scrolling-emojis">
<span>🚀......🎓......📖......✨......🧠.....📚......🎯......💡......🫴</span>
</div>
</body>
</html>
<body>
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
Raw
script.js
document.addEventListener('DOMContentLoaded', () => {
showWelcome();
initLoader();
});
function showWelcome() {
const welcome = document.createElement('div');
welcome.textContent = 'أهلاً بك في منصة شباب المستقبل!';
welcome.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #f1c40f, #f39c12);
color: white;
padding: 15px 25px;
border-radius: 12px;
font-family: 'Tajawal', sans-serif;
font-size: 18px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
z-index: 9999;
opacity: 0;
transform: translateY(-20px);
transition: all 0.6s ease;
`;
document.body.appendChild(welcome);
setTimeout(() => {
welcome.style.opacity = 1;
welcome.style.transform = 'translateY(0)';
}, 100);
setTimeout(() => {
welcome.style.opacity = 0;
welcome.style.transform = 'translateY(-20px)';
setTimeout(() => welcome.remove(), 600);
}, 4000);
}
function initLoader() {
const loader = document.getElementById('loader');
if (loader) {
setTimeout(() => {
loader.style.opacity = 0;
loader.style.transition = 'opacity 0.5s ease';
setTimeout(() => loader.style.display = 'none', 500);
}, 1500);
}
}
function showMessage() {
const msg = document.createElement('div');
msg.textContent = 'شكراً لزيارتك!';
msg.style.cssText = `
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #2ecc71;
color: white;
padding: 12px 24px;
border-radius: 10px;
font-size: 16px;
font-family: 'Tajawal', sans-serif;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
z-index: 9999;
opacity: 0;
transition: all 0.4s ease;
`;
document.body.appendChild(msg);
setTimeout(() => msg.style.opacity = 1, 100);
setTimeout(() => {
msg.style.opacity = 0;
setTimeout(() => msg.remove(), 400);
}, 3000);
}
function animateText() {
const title = document.getElementById('animatedTitle');
if (title) {
title.style.transition = 'transform 0.4s ease';
title.style.transform = 'scale(1.2)';
setTimeout(() => title.style.transform = 'scale(1)', 400);
}
}
Raw
style.css
body {
font-family: 'Tajawal', sans-serif;
background: linear-gradient(145deg, #f3f4f6, #ffffff);
color: #222;
margin: 0;
min-height: 100vh;
position: relative;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
}
.main-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
width: 90%;
max-width: 850px;
padding: 35px;
background: linear-gradient(135deg, rgba(173, 216, 230, 0.7), rgba(70, 130, 180, 0.7));
border-radius: 24px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.15);
z-index: 2;
}
.tile {
display: inline-block;
background: linear-gradient(135deg, #f39c12, #f1c40f);
padding: 22px;
font-size: 18px;
text-align: center;
border-radius: 18px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
font-weight: bold;
box-shadow: 0 0 15px rgba(243, 156, 18, 0.4);
animation: pulse-tile 2.8s infinite;
}
.tile:hover {
transform: translateY(-6px);
box-shadow: 0 0 30px rgba(243, 156, 18, 0.7);
}
.tile.small {
font-size: 15px;
padding: 18px;
}
@keyframes pulse-tile {
0%, 100% {
box-shadow: 0 0 12px rgba(243, 156, 18, 0.4);
}
50% {
box-shadow: 0 0 25px rgba(243, 156, 18, 0.9);
}
}
#stars,
#stars2,
#stars3 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url('https://raw.githubusercontent.com/VincentGarreau/particles.js/master/demo/media/starfield.png') repeat;
animation: moveStars 200s linear infinite;
z-index: 0;
pointer-events: none;
}
#stars2 {
background-size: 50%;
opacity: 0.5;
animation-duration: 300s;
}
#stars3 {
background-size: 25%;
opacity: 0.2;
animation-duration: 500s;
}
@keyframes moveStars {
0% {
background-position: 0 0;
}
100% {
background-position: 10000px 10000px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment