commit 92cd5167320e3f06a2f488951284ebb8661fbc01 Author: Momaher Date: Mon Dec 30 02:56:16 2024 +0200 Initial commit diff --git a/assets/icons/3521496.png b/assets/icons/3521496.png new file mode 100644 index 0000000..db467cb Binary files /dev/null and b/assets/icons/3521496.png differ diff --git a/assets/icons/aapanel.svg b/assets/icons/aapanel.svg new file mode 100644 index 0000000..bd4cafd --- /dev/null +++ b/assets/icons/aapanel.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/icons/adguard.svg b/assets/icons/adguard.svg new file mode 100644 index 0000000..9fe052b --- /dev/null +++ b/assets/icons/adguard.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/casaos.svg b/assets/icons/casaos.svg new file mode 100644 index 0000000..eb16d88 --- /dev/null +++ b/assets/icons/casaos.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/cloudflare.svg b/assets/icons/cloudflare.svg new file mode 100644 index 0000000..d934719 --- /dev/null +++ b/assets/icons/cloudflare.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/fa.svg b/assets/icons/fa.svg new file mode 100644 index 0000000..2608638 Binary files /dev/null and b/assets/icons/fa.svg differ diff --git a/assets/icons/jellyfin.svg b/assets/icons/jellyfin.svg new file mode 100644 index 0000000..cfc6d38 Binary files /dev/null and b/assets/icons/jellyfin.svg differ diff --git a/assets/icons/kavita.svg b/assets/icons/kavita.svg new file mode 100644 index 0000000..d973653 Binary files /dev/null and b/assets/icons/kavita.svg differ diff --git a/assets/icons/linkding.svg b/assets/icons/linkding.svg new file mode 100644 index 0000000..eb34641 --- /dev/null +++ b/assets/icons/linkding.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/miniflux.svg b/assets/icons/miniflux.svg new file mode 100644 index 0000000..7ec7e31 --- /dev/null +++ b/assets/icons/miniflux.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/mycloud.svg b/assets/icons/mycloud.svg new file mode 100644 index 0000000..f8388b9 --- /dev/null +++ b/assets/icons/mycloud.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/n8n.svg b/assets/icons/n8n.svg new file mode 100644 index 0000000..401c725 --- /dev/null +++ b/assets/icons/n8n.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/nextcloud.svg b/assets/icons/nextcloud.svg new file mode 100644 index 0000000..dbd1cba --- /dev/null +++ b/assets/icons/nextcloud.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/nginx-proxy-manager.svg b/assets/icons/nginx-proxy-manager.svg new file mode 100644 index 0000000..774a2de --- /dev/null +++ b/assets/icons/nginx-proxy-manager.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/openwrt.svg b/assets/icons/openwrt.svg new file mode 100644 index 0000000..6089de9 --- /dev/null +++ b/assets/icons/openwrt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/pihole.svg b/assets/icons/pihole.svg new file mode 100644 index 0000000..7e56dc4 --- /dev/null +++ b/assets/icons/pihole.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/portainer.svg b/assets/icons/portainer.svg new file mode 100644 index 0000000..216f458 --- /dev/null +++ b/assets/icons/portainer.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/proxmox-backup.svg b/assets/icons/proxmox-backup.svg new file mode 100644 index 0000000..0e97348 --- /dev/null +++ b/assets/icons/proxmox-backup.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/proxmox.svg b/assets/icons/proxmox.svg new file mode 100644 index 0000000..bf60bdf --- /dev/null +++ b/assets/icons/proxmox.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/public-data.png b/assets/icons/public-data.png new file mode 100644 index 0000000..b2fab16 Binary files /dev/null and b/assets/icons/public-data.png differ diff --git a/assets/icons/pylot.svg b/assets/icons/pylot.svg new file mode 100644 index 0000000..db467cb Binary files /dev/null and b/assets/icons/pylot.svg differ diff --git a/assets/icons/qbittorrent.svg b/assets/icons/qbittorrent.svg new file mode 100644 index 0000000..aa5d1b4 --- /dev/null +++ b/assets/icons/qbittorrent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/synology.svg b/assets/icons/synology.svg new file mode 100644 index 0000000..791dee6 --- /dev/null +++ b/assets/icons/synology.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/transmission.svg b/assets/icons/transmission.svg new file mode 100644 index 0000000..aad9be4 --- /dev/null +++ b/assets/icons/transmission.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/vikunja.svg b/assets/icons/vikunja.svg new file mode 100644 index 0000000..58ad8c2 --- /dev/null +++ b/assets/icons/vikunja.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/wallabag.svg b/assets/icons/wallabag.svg new file mode 100644 index 0000000..b50c41b --- /dev/null +++ b/assets/icons/wallabag.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/wireguard.svg b/assets/icons/wireguard.svg new file mode 100644 index 0000000..3e92430 --- /dev/null +++ b/assets/icons/wireguard.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/script.js b/script.js new file mode 100644 index 0000000..8fe954a --- /dev/null +++ b/script.js @@ -0,0 +1,27 @@ +// تهيئة مكتبة AOS للتأثيرات الحركية +AOS.init({ + duration: 800, + once: true +}); + +// تبديل السمة (الوضع الليلي/النهاري) +const themeToggle = document.getElementById('themeToggle'); +const body = document.body; +const icon = themeToggle.querySelector('i'); + +// التحقق من وجود تفضيل سابق للسمة +const savedTheme = localStorage.getItem('theme'); +if (savedTheme) { + body.classList.toggle('dark-theme', savedTheme === 'dark'); + icon.classList.toggle('bi-sun', savedTheme === 'dark'); + icon.classList.toggle('bi-moon-stars', savedTheme === 'light'); +} + +// إضافة مستمع حدث للزر +themeToggle.addEventListener('click', () => { + body.classList.toggle('dark-theme'); + const isDark = body.classList.contains('dark-theme'); + icon.classList.toggle('bi-sun', isDark); + icon.classList.toggle('bi-moon-stars', !isDark); + localStorage.setItem('theme', isDark ? 'dark' : 'light'); +}); diff --git a/services.txt b/services.txt new file mode 100644 index 0000000..4cd493f --- /dev/null +++ b/services.txt @@ -0,0 +1,32 @@ +الخدمات : + +1- proxmox EV server +https://196.221.197.24:8006/ +2- nginx prox manger +https://momaher.site/ +3- n8n +https://n8n.momaher.site/ +4-synology +https://196.221.197.24:5001/#/signin +5-pylod + +6- kavita +https://kav.momaher.site/ +7-portainer +https://por.momaher.site/ +8-proxmox backup server +https://196.221.197.24:8007 +9-open wrt +http://wrt.momaher.site/ +10-adgaurd +https://adg.momaher.site/ +11-cloud flear tunel web ui +https://clf.momaher.site/ +12-pi hole +https://pi.momaher.site/admin +13-widegaurd +https://wgd.momaher.site/ +14-MyCloud +https://home.mycloud.com/ +15-aapanal +https://196.221.197.24:18328/41469af9 diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..2d1585b --- /dev/null +++ b/styles.css @@ -0,0 +1,398 @@ +:root { + --primary: #3b82f6; + --primary-dark: #2563eb; + --secondary: #10b981; + --background: #f8fafc; + --surface: #ffffff; + --text: #1e293b; + --text-secondary: #64748b; + --border: #e2e8f0; + --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); +} + +.dark-theme { + --background: #0f172a; + --surface: #1e293b; + --text: #f8fafc; + --text-secondary: #94a3b8; + --border: #334155; + --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2); + --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2); +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: var(--background); + color: var(--text); + transition: background-color 0.3s, color 0.3s; + min-height: 100vh; + display: flex; + flex-direction: column; + margin: 0; +} + +/* Navbar */ +.navbar { + background: var(--surface); + border-bottom: 1px solid var(--border); + padding: 1rem 0; + position: sticky; + top: 0; + z-index: 1000; + backdrop-filter: blur(10px); +} + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar-brand { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text); + text-decoration: none; + font-size: 1.25rem; +} + +.navbar-brand i { + font-size: 1.5rem; + color: var(--primary); +} + +.gradient-text { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font-weight: bold; +} + +.theme-toggle { + background: none; + border: none; + color: var(--text); + font-size: 1.2rem; + cursor: pointer; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s; +} + +.theme-toggle:hover { + background-color: var(--border); +} + +/* Dashboard */ +.dashboard-container { + flex: 1; + padding: 2rem 0; +} + +/* Welcome Card */ +.welcome-card { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + padding: 3rem; + border-radius: 1.5rem; + margin-bottom: 2.5rem; + position: relative; + overflow: hidden; + box-shadow: var(--card-shadow-hover); +} + +.welcome-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); + transform: rotate(-45deg); + animation: pulse 4s ease-in-out infinite; +} + +@keyframes pulse { + 0% { + transform: rotate(-45deg) scale(1); + opacity: 0.5; + } + 50% { + transform: rotate(-45deg) scale(1.2); + opacity: 0.8; + } + 100% { + transform: rotate(-45deg) scale(1); + opacity: 0.5; + } +} + +.welcome-card h1 { + font-size: 2.5rem; + margin: 0 0 0.5rem; + position: relative; + font-weight: 800; +} + +.welcome-card p { + font-size: 1.25rem; + opacity: 0.9; + margin: 0; + position: relative; +} + +/* Services Grid */ +.services-grid { + display: grid; + gap: 2rem; +} + +.service-section { + background: var(--surface); + border-radius: 1.75rem; + padding: 2.5rem; + border: 1px solid var(--border); + transition: all 0.4s ease; + box-shadow: var(--card-shadow); + position: relative; + overflow: hidden; +} + +.service-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(to right, var(--primary), var(--secondary)); + opacity: 0; + transition: opacity 0.4s ease; +} + +.service-section:hover::before { + opacity: 1; +} + +.service-section:hover { + transform: translateY(-8px); + box-shadow: var(--card-shadow-hover); +} + +.section-title { + font-size: 1.85rem; + color: var(--text); + margin-bottom: 2.5rem; + display: flex; + align-items: center; + gap: 1rem; + font-weight: 800; + position: relative; + padding-bottom: 0.75rem; + letter-spacing: -0.02em; +} + +.section-title i { + font-size: 2.2rem; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; +} + +/* Service Card */ +.service-card { + display: flex; + align-items: center; + padding: 1.75rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 1.25rem; + text-decoration: none; + color: var(--text); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.service-card:hover { + transform: translateY(-6px); + box-shadow: var(--card-shadow-hover); + border-color: var(--primary); + background: linear-gradient(145deg, var(--surface), var(--background)); +} + +.service-card:hover .card-arrow i { + transform: translateX(6px); + opacity: 1; + color: var(--primary); +} + +.card-icon { + width: 56px; + height: 56px; + margin-right: 1.25rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 16px; + background: var(--background); + transition: all 0.4s ease; + position: relative; + overflow: hidden; +} + +.service-card:hover .card-icon { + transform: scale(1.1) rotate(5deg); + box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); +} + +.service-card:hover .svg-icon { + transform: scale(1.15); + filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); +} + +.svg-icon { + width: 38px; + height: 38px; + transition: all 0.4s ease; +} + +.card-content { + flex: 1; + transition: transform 0.3s ease; +} + +.service-card:hover .card-content { + transform: translateX(4px); +} + +.card-content h3 { + margin: 0; + font-size: 1.2rem; + font-weight: 700; + color: var(--text); + letter-spacing: -0.01em; + transition: color 0.3s ease; +} + +.service-card:hover .card-content h3 { + color: var(--primary); +} + +.card-content p { + margin: 0.35rem 0 0; + font-size: 0.95rem; + color: var(--text-secondary); + transition: color 0.3s ease; +} + +.service-card:hover .card-content p { + color: var(--primary-dark); +} + +.card-arrow { + margin-left: 1.25rem; + opacity: 0.5; + transition: all 0.4s ease; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; +} + +.service-card:hover .card-arrow { + background: rgba(59, 130, 246, 0.1); +} + +.card-arrow i { + font-size: 1.25rem; + transition: all 0.4s ease; +} + +/* Custom Service Colors */ +.proxmox .svg-icon { filter: hue-rotate(15deg) saturate(1.2); } +.proxmox-backup .svg-icon { filter: hue-rotate(30deg) saturate(1.2); } +.synology .svg-icon { filter: hue-rotate(45deg) saturate(1.2); } +.nginx-proxy-manager .svg-icon { filter: hue-rotate(60deg) saturate(1.2); } +.openwrt .svg-icon { filter: hue-rotate(75deg) saturate(1.2); } +.cloudflare .svg-icon { filter: hue-rotate(90deg) saturate(1.2); } +.wireguard .svg-icon { filter: hue-rotate(105deg) saturate(1.2); } +.adguard .svg-icon { filter: hue-rotate(120deg) saturate(1.2); } +.pihole .svg-icon { filter: hue-rotate(135deg) saturate(1.2); } +.portainer .svg-icon { filter: hue-rotate(150deg) saturate(1.2); } +.n8n .svg-icon { filter: hue-rotate(165deg) saturate(1.2); } +.aapanel .svg-icon { filter: hue-rotate(180deg) saturate(1.2); } +.kavita .svg-icon { filter: hue-rotate(195deg) saturate(1.2); } + +/* Footer */ +.footer { + background: var(--surface); + border-top: 1px solid var(--border); + padding: 1.5rem 0; + text-align: center; + color: var(--text-secondary); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .cards-grid { + grid-template-columns: 1fr; + } + + .welcome-card { + text-align: center; + padding: 2rem; + } + + .welcome-card h1 { + font-size: 2rem; + } + + .service-section { + margin-bottom: 1rem; + padding: 1.5rem; + } + + .section-title { + font-size: 1.25rem; + } +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.service-section { + animation: fadeIn 0.5s ease-out; +}