diff --git a/.github/.site/css/style.css b/.github/.site/css/style.css new file mode 100644 index 0000000..35d95af --- /dev/null +++ b/.github/.site/css/style.css @@ -0,0 +1,639 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); + +:root { + --primary-color: #8c52ff; + --secondary-color: #6930c3; + --accent-color: #00e5ff; + --background-color: #121212; + --card-background: #1e1e1e; + --text-color: #f8f9fa; + --shadow-color: rgba(0, 0, 0, 0.25); + --card-hover: #2a2a2a; + --border-color: #333333; +} + +[data-theme="light"] { + --background-color: #ffffff; + --card-background: #f8f9fa; + --text-color: #212529; + --shadow-color: rgba(0, 0, 0, 0.1); + --card-hover: #e9ecef; + --border-color: #dee2e6; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + transition: all 0.2s ease; +} + +body { + font-family: 'Inter', 'Segoe UI', sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + background-color: var(--header-bg); + backdrop-filter: blur(10px); + position: fixed; + width: 100%; + padding: 15px 0; + z-index: 1000; + box-shadow: 0 2px 12px var(--shadow-color); +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + background: var(--card-background); + border-radius: 12px; + border: 1px solid var(--border-color); + margin-bottom: 20px; +} + +.sites-stats { + display: flex; + gap: 20px; + align-items: center; +} + +.total-sites, .last-update-global { + display: flex; + align-items: center; + gap: 8px; + color: var(--text-color); + font-size: 0.95rem; + background: var(--background-color); + padding: 8px 16px; + border-radius: 8px; + border: 1px solid var(--border-color); + transition: all 0.3s ease; +} + +.total-sites:hover, .last-update-global:hover { + border-color: var(--primary-color); + transform: translateY(-2px); +} + +.total-sites i, .last-update-global i { + color: var(--primary-color); + font-size: 1.1rem; +} + +.container { + max-width: 1400px; + margin: 0 auto; + padding: 20px; + flex: 1; +} + +.site-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 24px; + padding: 2rem 0; +} + +.site-item { + min-height: 220px; + background-color: var(--card-background); + border-radius: 16px; + padding: 30px; + box-shadow: 0 6px 20px var(--shadow-color); + transition: all 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid var(--border-color); + position: relative; + overflow: hidden; + cursor: pointer; +} + +.site-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); + transition: height 0.3s ease; +} + +.site-item:hover { + transform: translateY(-5px); + box-shadow: 0 12px 30px var(--shadow-color); + border-color: var(--primary-color); +} + +.site-item:hover::before { + height: 6px; +} + +.site-item img { + width: 80px; + height: 80px; + margin-bottom: 1.5rem; + border-radius: 16px; + object-fit: cover; + border: 2px solid var(--border-color); + transition: transform 0.3s ease; +} + +.site-item:hover img { + transform: scale(1.05); +} + +.site-item h3 { + font-size: 1.4rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--primary-color); + text-align: center; + transition: color 0.3s ease; +} + +.site-item:hover h3 { + color: var(--accent-color); +} + +.site-content { + text-align: center; + width: 100%; +} + +.domain { + color: var(--text-color); + opacity: 0.8; + font-size: 0.9rem; + margin-bottom: 1.5rem; + word-break: break-all; +} + +.site-item a { + margin-top: 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; + text-decoration: none; + font-weight: 500; + padding: 12px 28px; + border-radius: 8px; + width: fit-content; + margin: 0 auto; + display: flex; + align-items: center; + gap: 8px; +} + +.site-item a:hover { + opacity: 0.9; + transform: translateY(-2px); +} + +.site-title { + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.8); + padding: 10px 20px; + border-radius: 8px; + transition: opacity 0.3s ease; + color: white; + font-size: 1.2rem; + text-align: center; + width: 80%; + pointer-events: none; + z-index: 2; +} + +.site-item:hover .site-title { + opacity: 1; +} + +.site-item::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.site-item:hover::after { + opacity: 1; +} + +.site-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + margin-top: 10px; + text-align: center; + font-size: 0.85rem; + color: var(--text-color); + opacity: 0.8; +} + +.last-update, .old-domain { + display: flex; + align-items: center; + gap: 6px; +} + +.last-update i, .old-domain i { + color: var(--primary-color); +} + +.site-item:hover .site-info { + opacity: 1; +} + +footer { + background: var(--card-background); + border-top: 1px solid var(--border-color); + margin-top: auto; + padding: 40px 20px; + position: relative; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + position: relative; + padding: 20px; +} + +.footer-section { + padding: 20px; + border-radius: 12px; + transition: transform 0.3s ease, background-color 0.3s ease; + background-color: var(--card-background); + border: 1px solid var(--border-color); +} + +.footer-section:hover { + transform: translateY(-5px); + background-color: var(--card-hover); +} + +.footer-title { + color: var(--accent-color); + font-size: 1.3rem; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + position: relative; + letter-spacing: 0.5px; +} + +.footer-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 60px; + height: 3px; + border-radius: 2px; + background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); +} + +.footer-links { + list-style: none; +} + +.footer-links li { + margin-bottom: 0.8rem; +} + +.footer-links a { + color: var(--text-color); + text-decoration: none; + display: flex; + align-items: center; + gap: 8px; + opacity: 0.8; + transition: all 0.3s ease; + padding: 8px 12px; + border-radius: 8px; + background-color: transparent; +} + +.footer-links a:hover { + opacity: 1; + color: var(--accent-color); + transform: translateX(8px); + background-color: rgba(140, 82, 255, 0.1); +} + +.footer-links i { + width: 20px; + text-align: center; + font-size: 1.2rem; + color: var(--primary-color); + transition: transform 0.3s ease; +} + +.footer-links a:hover i { + transform: scale(1.2); +} + +.github-stats { + display: flex; + gap: 10px; + margin-top: 10px; + font-size: 0.8rem; +} + +.github-badge { + background-color: var(--background-color); + padding: 4px 8px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 4px; +} + +.github-badge i { + color: var(--accent-color); +} + +.footer-description { + margin-top: 15px; + font-size: 0.9rem; + color: var(--text-color); + opacity: 0.8; + line-height: 1.5; +} + +.update-info { + text-align: center; + margin-top: 30px; + padding-top: 30px; + border-top: 1px solid var(--border-color); +} + +.update-note { + color: var(--accent-color); + font-size: 0.9rem; + opacity: 0.9; +} + +.theme-toggle { + position: relative; + top: unset; + right: unset; + z-index: 1; +} + +.theme-toggle input { + display: none; +} + +.theme-toggle label { + cursor: pointer; + padding: 8px; + background: var(--background-color); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 10px var(--shadow-color); + border: 1px solid var(--border-color); + transition: all 0.3s ease; +} + +.theme-toggle label:hover { + border-color: var(--primary-color); + transform: translateY(-2px); +} + +.theme-toggle .fa-sun { + display: none; + color: #ffd700; +} + +.theme-toggle .fa-moon { + color: #8c52ff; +} + +.theme-toggle input:checked ~ label .fa-sun { + display: block; +} + +.theme-toggle input:checked ~ label .fa-moon { + display: none; +} + +.loader { + width: 48px; + height: 48px; + border: 3px solid var(--primary-color); + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + position: relative; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +.loader::after { + content: ''; + position: absolute; + box-sizing: border-box; + left: 0; + top: 0; + width: 48px; + height: 48px; + border-radius: 50%; + border: 3px solid transparent; + border-bottom-color: var(--accent-color); + animation: rotationBack 0.5s linear infinite; + transform: rotate(45deg); +} + +@keyframes rotation { + 0% { transform: rotate(0deg) } + 100% { transform: rotate(360deg) } +} + +@keyframes rotationBack { + 0% { transform: rotate(0deg) } + 100% { transform: rotate(-360deg) } +} + +/* Improved Responsiveness */ +@media (max-width: 768px) { + .site-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 15px; + padding: 1rem; + } + + .site-item { + min-height: 250px; + padding: 20px; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 20px; + padding: 15px; + } + + .theme-toggle { + top: 10px; + right: 10px; + } + + .header-container { + flex-direction: column; + gap: 15px; + } + + .sites-stats { + flex-direction: column; + width: 100%; + } + + .total-sites, .last-update-global { + width: 100%; + justify-content: center; + } +} + +@media (max-width: 480px) { + .site-grid { + grid-template-columns: 1fr; + } + + .site-item { + min-height: 220px; + } + + .container { + padding: 10px; + } +} + +@media (max-width: 768px) { + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-title::after { + left: 50%; + transform: translateX(-50%); + } + + .footer-links a { + justify-content: center; + } + + .footer-links a:hover { + transform: translateY(-5px); + } + + .footer-section { + margin-bottom: 20px; + } +} + +.time-change { + color: var(--text-color); + opacity: 0.7; + font-size: 0.85rem; + margin-bottom: 0.5rem; + word-break: break-all; +} + +.label { + color: var(--accent-color); + font-weight: 500; +} + +.controls-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding: 15px 20px; + background: var(--card-background); + border-radius: 12px; + border: 1px solid var(--border-color); +} + +.grid-controls { + display: flex; + align-items: center; + gap: 10px; +} + +.grid-controls label { + color: var(--text-color); + font-weight: 500; +} + +.grid-controls select { + padding: 8px 12px; + border-radius: 8px; + border: 1px solid var(--border-color); + background: var(--background-color); + color: var(--text-color); + cursor: pointer; + transition: all 0.3s ease; +} + +.grid-controls select:hover { + border-color: var(--primary-color); +} + +.sites-stats { + display: flex; + gap: 20px; + align-items: center; +} + +.total-sites, .last-update-global { + display: flex; + align-items: center; + gap: 8px; + color: var(--text-color); + font-size: 0.9rem; +} + +.total-sites i, .last-update-global i { + color: var(--primary-color); +} + +.site-status { + position: absolute; + top: 10px; + right: 10px; + width: 12px; + height: 12px; + border-radius: 50%; + background: #4CAF50; +} + +.site-status.offline { + background: #f44336; +} \ No newline at end of file diff --git a/Test/.site/index.html b/.github/.site/index.html similarity index 63% rename from Test/.site/index.html rename to .github/.site/index.html index a9ac6d0..8966f88 100644 --- a/Test/.site/index.html +++ b/.github/.site/index.html @@ -9,9 +9,19 @@ - -
-
+
+
+
+ + + Total Sites: 0 + + + + Last Update: - + +
+
@@ -21,8 +31,7 @@