Last active
August 16, 2025 19:40
-
-
Save thinkphp/4a55905b0f7760bc13ec38d0d96c0ae6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ro"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .dashboard-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| animation: slideUp 0.8s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); | |
| animation: shine 3s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { left: -100%; } | |
| 100% { left: 100%; } | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| font-weight: 700; | |
| } | |
| .header p { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| } | |
| .welcome-message { | |
| padding: 30px; | |
| text-align: center; | |
| background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); | |
| border-bottom: 1px solid #dee2e6; | |
| } | |
| .welcome-message h2 { | |
| color: #2c3e50; | |
| margin-bottom: 10px; | |
| font-size: 1.8rem; | |
| } | |
| .welcome-message p { | |
| color: #6c757d; | |
| font-size: 1.1rem; | |
| } | |
| .dashboard-content { | |
| padding: 50px 30px; | |
| background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); | |
| } | |
| .buttons-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .dashboard-button { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border: none; | |
| border-radius: 15px; | |
| padding: 40px 30px; | |
| color: white; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .dashboard-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.5s; | |
| } | |
| .dashboard-button:hover::before { | |
| left: 100%; | |
| } | |
| .dashboard-button:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4); | |
| } | |
| .dashboard-button:active { | |
| transform: translateY(-2px); | |
| } | |
| .btn-gallery { | |
| background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); | |
| box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3); | |
| } | |
| .btn-gallery:hover { | |
| box-shadow: 0 20px 40px rgba(255, 107, 107, 0.4); | |
| } | |
| .btn-newsletter { | |
| background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); | |
| box-shadow: 0 10px 30px rgba(78, 205, 196, 0.3); | |
| } | |
| .btn-newsletter:hover { | |
| box-shadow: 0 20px 40px rgba(78, 205, 196, 0.4); | |
| } | |
| .btn-statistics { | |
| background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%); | |
| box-shadow: 0 10px 30px rgba(255, 167, 38, 0.3); | |
| } | |
| .btn-statistics:hover { | |
| box-shadow: 0 20px 40px rgba(255, 167, 38, 0.4); | |
| } | |
| .button-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 15px; | |
| display: block; | |
| } | |
| .button-text { | |
| font-size: 1.1rem; | |
| margin-bottom: 8px; | |
| } | |
| .button-description { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| font-weight: 400; | |
| text-transform: none; | |
| letter-spacing: normal; | |
| } | |
| .footer { | |
| background: #2c3e50; | |
| color: white; | |
| text-align: center; | |
| padding: 20px; | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| @media (max-width: 768px) { | |
| .dashboard-container { | |
| margin: 10px; | |
| border-radius: 15px; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| } | |
| .dashboard-content { | |
| padding: 30px 20px; | |
| } | |
| .buttons-grid { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .dashboard-button { | |
| padding: 30px 20px; | |
| } | |
| } | |
| /* Efecte suplimentare */ | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dashboard-container"> | |
| <header class="header"> | |
| <h1>🎨 Admin Art Gallery Rogers Paintings</h1> | |
| </header> | |
| <main class="dashboard-content"> | |
| <div class="buttons-grid"> | |
| <button class="dashboard-button btn-gallery" onclick="navigateToGallery()"> | |
| <span class="button-icon">🎨</span> | |
| <div class="button-text">Render Art Gallery</div> | |
| <div class="button-description">Art Gallery</div> | |
| </button> | |
| <button class="dashboard-button btn-newsletter" onclick="navigateToNewsletter()"> | |
| <span class="button-icon">📧</span> | |
| <div class="button-text">Newsletters</div> | |
| <div class="button-description">Creează și trimite newsletter-uri</div> | |
| </button> | |
| <button class="dashboard-button btn-statistics" onclick="navigateToStatistics()"> | |
| <span class="button-icon">📊</span> | |
| <div class="button-text">Statistics</div> | |
| <div class="button-description">Vizualizează rapoarte și analize</div> | |
| </button> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <p>© 2025 Admin Dashboard. Toate drepturile rezervate.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| function navigateToGallery() { | |
| // Simulează încărcarea | |
| showLoadingEffect('btn-gallery'); | |
| setTimeout(() => { | |
| window.location.href = 'render-art-gallery.html'; | |
| }, 1000); | |
| } | |
| function navigateToNewsletter() { | |
| showLoadingEffect('btn-newsletter'); | |
| setTimeout(() => { | |
| // window.location.href = '/newsletters'; | |
| }, 1000); | |
| } | |
| function navigateToStatistics() { | |
| showLoadingEffect('btn-statistics'); | |
| setTimeout(() => { | |
| // window.location.href = '/statistics'; | |
| }, 1000); | |
| } | |
| function showLoadingEffect(buttonClass) { | |
| const button = document.querySelector('.' + buttonClass); | |
| const originalText = button.innerHTML; | |
| button.innerHTML = '<span class="button-icon">⏳</span><div class="button-text">Se încarcă...</div>'; | |
| button.style.opacity = '0.7'; | |
| button.style.pointerEvents = 'none'; | |
| setTimeout(() => { | |
| button.innerHTML = originalText; | |
| button.style.opacity = '1'; | |
| button.style.pointerEvents = 'auto'; | |
| }, 1500); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment