generated from microsoft/SATechnicalOnboarding
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Shahzal Rehman <[email protected]>
- Loading branch information
1 parent
175b2fd
commit 01861fb
Showing
1 changed file
with
219 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Dark Mode and Neon Effects</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | ||
| <style> | ||
| /* General Styles */ | ||
| body { | ||
| background-color: #000; | ||
| color: #fff; | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* Dark Mode Styles */ | ||
| [data-theme="dark"] { | ||
| background-color: #121212; | ||
| color: #e0e0e0; | ||
| } | ||
|
|
||
| /* Neon Text Styles */ | ||
| .neon-text { | ||
| font-size: 5vw; | ||
| text-align: center; | ||
| color: #fff; | ||
| text-shadow: 0 0 10px rgba(255, 0, 254, 0.8), 0 0 20px rgba(255, 0, 254, 0.8); | ||
| margin-top: 20%; | ||
| } | ||
|
|
||
| /* Button Styles */ | ||
| .toggle-btn { | ||
| position: absolute; | ||
| top: 20px; | ||
| right: 20px; | ||
| background-color: #333; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| padding: 10px 20px; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| .toggle-btn:hover { | ||
| background-color: #555; | ||
| } | ||
|
|
||
| /* Skill Box Styles */ | ||
| .skill-box { | ||
| display: none; | ||
| padding: 20px; | ||
| background-color: #222; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .skill-box a { | ||
| color: #fff; | ||
| text-decoration: none; | ||
| display: block; | ||
| padding: 10px; | ||
| margin-bottom: 10px; | ||
| background-color: #333; | ||
| border-radius: 5px; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| .skill-box a:hover { | ||
| background-color: #555; | ||
| } | ||
|
|
||
| /* Powered By Section */ | ||
| .powered-by-container { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .powered-by-text, .shahzal-rehman-text { | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* Neon Sparks Animation */ | ||
| .neon-sparks { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| pointer-events: none; | ||
| overflow: hidden; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .neon-spark { | ||
| position: absolute; | ||
| background-color: rgba(255, 0, 254, 0.8); | ||
| border-radius: 50%; | ||
| box-shadow: 0 0 20px rgba(255, 0, 254, 0.8), 0 0 40px rgba(255, 0, 254, 0.8); | ||
| animation: sparkMove 5s linear infinite; | ||
| } | ||
|
|
||
| @keyframes sparkMove { | ||
| 0% { | ||
| transform: translateY(0) scale(0.3); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| 100% { | ||
| transform: translateY(-100vh) scale(1.5); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 767px) { | ||
| .neon-text { | ||
| font-size: 15vw; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Neon Sparks Background --> | ||
| <div class="neon-sparks" id="neonSparks"></div> | ||
|
|
||
| <!-- Neon Text --> | ||
| <div id="neonText" class="neon-text">MLSAPRO</div> | ||
|
|
||
| <!-- Dark Mode Toggle Button --> | ||
| <button id="toggleDarkMode" class="toggle-btn">Toggle Dark Mode</button> | ||
|
|
||
| <!-- Skill Box --> | ||
| <form id="mlsapro"> | ||
| <div class="skill-box wow fadeInUp animated" data-wow-delay=".8s"> | ||
| <!-- Skill Box Content --> | ||
| <!-- [Same as your existing skill box content] --> | ||
| </div> | ||
| </form> | ||
|
|
||
| <!-- Powered by Section --> | ||
| <div class="powered-by-container"> | ||
| <p class="powered-by-text">Powered by MLSAPRO.com</p> | ||
| <p class="shahzal-rehman-text">Shahzal Rehman</p> | ||
| <p class="powered-by-text">[email protected]</p> | ||
| </div> | ||
|
|
||
| <script> | ||
| // JavaScript to toggle dark mode | ||
| document.getElementById('toggleDarkMode').addEventListener('click', function() { | ||
| const currentTheme = document.body.getAttribute('data-theme'); | ||
| if (currentTheme === 'dark') { | ||
| document.body.setAttribute('data-theme', 'light'); | ||
| } else { | ||
| document.body.setAttribute('data-theme', 'dark'); | ||
| } | ||
| }); | ||
|
|
||
| // JavaScript to control the display after 10 seconds | ||
| setTimeout(function () { | ||
| document.getElementById('neonText').style.display = 'none'; | ||
| document.getElementById('mlsapro').style.display = 'block'; | ||
| }, 10000); | ||
|
|
||
| // Creating random neon sparks | ||
| function createNeonSparks(numSparks) { | ||
| const neonSparksContainer = document.getElementById('neonSparks'); | ||
| for (let i = 0; i < numSparks; i++) { | ||
| const spark = document.createElement('div'); | ||
| spark.classList.add('neon-spark'); | ||
| spark.style.width = `${Math.random() * 10 + 5}px`; | ||
| spark.style.height = `${Math.random() * 10 + 5}px`; | ||
| spark.style.left = `${Math.random() * 100}%`; | ||
| spark.style.top = `${Math.random() * 100}%`; | ||
| spark.style.animationDuration = `${Math.random() * 3 + 2}s`; | ||
| neonSparksContainer.appendChild(spark); | ||
| } | ||
| } | ||
|
|
||
| // Call the function to create neon sparks | ||
| createNeonSparks(70); | ||
|
|
||
| function login() { | ||
| var clientId = "9ec16646-a913-4fdb-8249-08fb1d98b99d"; | ||
| var redirectUri = encodeURIComponent("https://my.mlsapro.com/home"); | ||
| var authority = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize"; | ||
| var scope = "user.read"; | ||
| var loginUrl = `${authority}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scope}`; | ||
| window.open(loginUrl, "_blank", "noopener,noreferrer"); | ||
| } | ||
|
|
||
| function signOut() { | ||
| var clientId = "9ec16646-a913-4fdb-8249-08fb1d98b99d"; | ||
| var postLogoutRedirectUri = encodeURIComponent("https://my.mlsapro.com"); | ||
| var authority = "https://login.microsoftonline.com/common/oauth2/v2.0/logout"; | ||
| var url = authority + "?post_logout_redirect_uri=" + postLogoutRedirectUri; | ||
| window.location.href = url; | ||
| } | ||
|
|
||
| function openWhatsApp() { | ||
| var urls = [ | ||
| "https://chat.whatsapp.com/D2lRTrt87yn4kQsBzEPRFn", | ||
| "https://wa.me/14253357585", | ||
| "https://api.whatsapp.com/send?phone=+14253357585", | ||
| "https://wa.me/wa.me/14155552671", | ||
| "https://wa.me/441632960961" | ||
| ]; | ||
|
|
||
| var randomUrl = urls[Math.floor(Math.random() * urls.length)]; | ||
| window.open(randomUrl, "_blank"); | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |