<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>اكتب اسم راس الصفحة هنا</title>
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
margin: 0;
padding: 20px;
font-family: 'Amiri', serif;
font-size: 1rem;
position: relative;
min-height: 100vh;
animation: gradientAnimation 15s ease infinite;
background: linear-gradient(270deg, #003366, #000000, #6A0DAD, #8B0000);
background-size: 400% 400%;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.header {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 1rem;
}
.social-icons {
display: flex;
gap: 0.5rem;
}
.social-icons a {
color: #f0f0f0;
text-decoration: none;
font-size: 2rem;
}
.search-container {
text-align: center;
margin: 1rem 0;
position: relative;
}
.search-container input {
padding: 0.625rem;
width: 80%;
max-width: 400px;
font-size: 1rem;
border: 1px solid #444;
border-radius: 0.3125rem;
background-color: #222;
color: white;
}
.search-container button {
padding: 0.625rem 1rem;
font-size: 1rem;
background-color: #007BFF;
color: white;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.search-container button:hover {
background-color: #0056b3;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.game {
position: relative;
overflow: hidden;
background-color: #ffffff;
border: 2px solid #003366;
border-radius: 0.9375rem;
padding: 1rem;
margin: 0.625rem;
width: calc(24% - 1.25rem);
box-sizing: border-box;
text-align: center;
transition: transform 0.3s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.game:hover {
transform: scale(1.05);
}
.game img {
width: 100%;
max-width: 230px;
height: auto;
border-radius: 0.625rem;
}
.game h2 {
color: #006400;
}
.game p {
color: black;
}
.button {
padding: 0.625rem 1rem;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
margin: 0.3125rem 0;
font-weight: bold;
transition: transform 0.3s, background-color 0.3s;
}
.download-button {
background-color: #dc3545;
color: white;
font-size: 1rem;
font-weight: bold;
}
.download-button:hover {
background-color: #c82333;
transform: scale(1.1);
}
.pagination {
margin-top: 1rem;
text-align: center;
}
.pagination button {
padding: 0.9375rem 1.25rem;
font-size: 0.9375rem;
background-color: #6c757d;
color: white;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
margin: 0 0.625rem;
font-weight: bold;
}
.pagination button:hover {
background-color: #5a6268;
}
.page-numbers {
font-size: 0.9375rem;
background-color: #6c757d;
color: white;
padding: 0.625rem 1rem;
border-radius: 0.3125rem;
margin: 0 0.3125rem;
cursor: pointer;
}
.page-numbers.active {
background-color: #5a6268;
}
.footer {
position: relative;
text-align: center;
color: #aaa;
font-size: 0.875rem;
margin-top: 20px;
}
.scroll-button {
position: fixed;
right: 1rem;
border: none;
border-radius: 50%;
width: 3rem;
height: 3rem;
background-color: #fff;
color: black;
cursor: pointer;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.scroll-button:hover {
background-color: #ddd;
}
.scroll-to-top {
bottom: 5rem;
}
.scroll-to-bottom {
bottom: 1rem;
}
/* استعلامات الوسائط */
@media (max-width: 768px) {
.game {
width: calc(48% - 1.25rem);
}
}
@media (max-width: 480px) {
.game {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<div class="social-icons">
<a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fab fa-telegram-plane"></i></a>
<a href="#" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="search-container">
<input type="text" id="searchInput" placeholder="بحث..." oninput="searchGames()">
<button onclick="searchGames()">بحث</button>
</div>
<div class="container" id="gameContainer"></div>
<div class="pagination" id="pagination">
<button onclick="prevPage()" id="prevBtn" disabled>السابق</button>
<span id="pageNumbers"></span>
<button onclick="nextPage()" id="nextBtn">التالي</button>
</div>
<div class="footer">
:copyright: 2024 جميع الحقوق محفوظة صياد اليمام.
</div>
<button class="scroll-button scroll-to-top" id="scrollToTop" onclick="scrollToTop()">
<i class="fas fa-arrow-up"></i>
</button>
<button class="scroll-button scroll-to-bottom" id="scrollToBottom" onclick="scrollToBottom()">
<i class="fas fa-arrow-down"></i>
</button>
<script>
const gamesPerPage = 12;
let currentPage = 1;
let filteredGames = [];
const games = [
{ name: "soon", size: "000", logo: "https://up6.cc/2024/09/172686377894221.jpg", link: "#" },
{ name: "soon", size: "000", logo: "https://up6.cc/2024/09/172686377894221.jpg", link: "#" },
{ name: "soon", size: "000", logo: "https://up6.cc/2024/09/172686377894221.jpg", link: "#" },
{ name: "soon", size: "000", logo: "https://up6.cc/2024/09/172686377894221.jpg", link: "#" },
];
function displayGames() {
const start = (currentPage - 1) * gamesPerPage;
const end = start + gamesPerPage;
const gamesToDisplay = filteredGames.length > 0 ? filteredGames.slice(start, end) : games.slice(start, end);
const gameContainer = document.getElementById('gameContainer');
gameContainer.innerHTML = gamesToDisplay.map(game => `
<div class="game">
<img src="${game.logo}" alt="${game.name}">
<h2>${game.name}</h2>
<p>حجم الملف: <span style="color: black;">${game.size}</span></p>
<a href="${game.link}" class="button download-button" target="_blank">تحميل</a>
</div>
`).join('');
updatePagination();
}
function updatePagination() {
const totalPages = Math.ceil((filteredGames.length > 0 ? filteredGames.length : games.length) / gamesPerPage);
document.getElementById('prevBtn').disabled = currentPage === 1;
document.getElementById('nextBtn').disabled = currentPage === totalPages;
const pageNumbersContainer = document.getElementById('pageNumbers');
pageNumbersContainer.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const span = document.createElement('span');
span.textContent = i;
span.className = 'page-numbers' + (i === currentPage ? ' active' : '');
span.onclick = () => {
currentPage = i;
displayGames();
};
pageNumbersContainer.appendChild(span);
}
}
function nextPage() {
const totalPages = Math.ceil((filteredGames.length > 0 ? filteredGames.length : games.length) / gamesPerPage);
if (currentPage < totalPages) {
currentPage++;
displayGames();
}
}
function prevPage() {
if (currentPage > 1) {
currentPage--;
displayGames();
}
}
function searchGames() {
const query = document.getElementById('searchInput').value.toLowerCase();
filteredGames = games.filter(game => game.name.toLowerCase().includes(query));
currentPage = 1;
displayGames();
}
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function scrollToBottom() {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
window.onscroll = function() {
const scrollToTopButton = document.getElementById('scrollToTop');
const scrollToBottomButton = document.getElementById('scrollToBottom');
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopButton.style.display = "flex";
} else {
scrollToTopButton.style.display = "none";
}
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 20) {
scrollToBottomButton.style.display = "none";
} else {
scrollToBottomButton.style.display = "flex";
}
};
displayGames();
</script>
</body>
</html>
Facebook
Twitter
Youtube
