دعم أحلى منتدى

كود HTML صفحة لتحميل البرنامج

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد HTML

اذهب الى الأسفل

كود HTML صفحة لتحميل البرنامج Empty كود HTML صفحة لتحميل البرنامج

مُساهمة من طرف صياد اليمام السبت 19 أكتوبر 2024 - 22:02

السلام عليكم وحمة الله وبركاته

كود  HTML  صفحة تحميل البرامج - تعدد الصفحات تلقائيا -
__________________________________________________________
صورة للكود بعد التركيب 
كود HTML صفحة لتحميل البرنامج Page

_____________________________________________________


هذا الكود تستطيع من خلاله إنشاء صفحة تستطيع من خلالها اضافة - برامج - ألعاب - تطبيقات - دروس ..... إلخ للتحميل .. 

مميزات الكود 

* متوافق مع جميع المتصفحات و الهواتف المحمولة 
* تصميم بسيط بخلفية متحركة متعددة الألوان ومتحركة 
* تعدد الصفحات تلقائيا مع امكانية اختيار عدد الموضوعات في الصفحة الواحدة 
* زر الذهاب لأعلى وأسفل الصفحة - اضافة مواقع التواصل - خاصية البحث دقيقة جدا 

_____________________________________________________
الكود يتم إضافته لصفحات HTML  
طريقة الإضافة تابع الموضوع التالي --- صفحات HTML ---
_____________________________________________________
* خيارات يمكن تعديلها بالكود *

* لتعديل إسم الصفحة بالمتصفح إبحث عن التالي 
الكود:
   <title>إسم صفحتك هنا</title>

* لإضافة و/أو حذف إيقونات التواصل إبحث عن التالي 
الكود:
[right]<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>[/right]

* للإضافة فقط عدل على إسم - twitter - مع إضافة أي موقع تواصل تريده وسيتم إضافة الإيقونة تلقائيا 
* للتعديل على عدد المواضيع و/أو البرامج في الصفحة الواحدة إبحث عن --- وعدل على الرقم  12 الإفتراضي
الكود:
        const gamesPerPage = 12;

* لإضافة موضوع برامج لعبة .....إلخ إضافية فقط إنسخ الكود وعدل مكان - # بالرابط - ومكان صورة البرامج برابط الصورة 
رابط  الصورة  -----   

الكود 
الكود:
{ name: "soon", size: "000", logo: "https://up6.cc/2024/09/172686377894221.jpg", link: "#" },


----------------------------------------------------------------------
والآن وصلنا للكود -
الكود:

<!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>

--------------------------------------------------------------------------
تم إستخدام اللغات التالية لتصميم الصفحة  --  CSS - JAVA - HTML 
--------------------------------------------------------------------------
فكرة وكتابة الكود من قبل ---- صياد اليمام ----
_____________________________________________________
لأي إستفسار يمكن طرحه في قسم دعم مشاكل التومبلايت و الأكواد
صياد اليمام
صياد اليمام
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 110
معدل النشاط : 176
السُمعة : 2

https://help.ahlamontada.com/

كونان2000 يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد HTML

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى