-
Notifications
You must be signed in to change notification settings - Fork 182
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #176 from aditya-bhaumik/feature
[New Feature]: Add Theme Switcher Button to Change Background Video
- Loading branch information
Showing
11 changed files
with
135 additions
and
10 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 @@ | ||
| This folder contains all the backgroud video themes used in this project. |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
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
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
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,51 @@ | ||
| function setBackgroundVideo(videoSrc) { | ||
| const videoElement = document.querySelector('video.back'); | ||
| videoElement.querySelector('source').setAttribute('src', videoSrc); | ||
| videoElement.load(); | ||
| videoElement.play(); | ||
| } | ||
|
|
||
| document.getElementById('theme-button').addEventListener('click', () => { | ||
| const themeOptions = document.getElementById('theme-options'); | ||
| if (themeOptions.style.visibility === 'hidden' || themeOptions.style.visibility === '') { | ||
| themeOptions.style.visibility = 'visible'; | ||
| } else { | ||
| themeOptions.style.visibility = 'hidden'; | ||
| } | ||
| }); | ||
|
|
||
| document.querySelectorAll('.theme-option').forEach(button => { | ||
| button.addEventListener('click', (event) => { | ||
| const videoSrc = `./background/${event.target.getAttribute('data-video')}`; | ||
| setBackgroundVideo(videoSrc); | ||
|
|
||
| // Save selected video in localStorage to persist the theme | ||
| localStorage.setItem('selectedTheme', videoSrc); | ||
| localStorage.setItem('selectedThemeName', event.target.innerText); | ||
|
|
||
| // Remove 'selected' class from all theme options | ||
| document.querySelectorAll('.theme-option').forEach(option => { | ||
| option.classList.remove('selected'); | ||
| }); | ||
|
|
||
| // Add 'selected' class to the clicked option | ||
| event.target.classList.add('selected'); | ||
|
|
||
| // Hide theme options after selection | ||
| document.getElementById('theme-options').style.visibility = 'hidden'; | ||
| }); | ||
| }); | ||
|
|
||
| // Check localStorage for saved theme and apply it | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const savedTheme = localStorage.getItem('selectedTheme'); | ||
| const savedThemeName = localStorage.getItem('selectedThemeName'); | ||
| if (savedTheme) { | ||
| setBackgroundVideo(savedTheme); | ||
| document.querySelectorAll('.theme-option').forEach(option => { | ||
| if (option.innerText === savedThemeName) { | ||
| option.classList.add('selected'); | ||
| } | ||
| }); | ||
| } | ||
| }); |
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
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,54 @@ | ||
| .theme-btn { | ||
| position: fixed; | ||
| top: 10px; | ||
| right: 10px; | ||
| padding: 10px 20px; | ||
| cursor: pointer; | ||
| background-color: #57667d; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| #theme-options { | ||
| position: fixed; | ||
| top: 50px; | ||
| right: 10px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| background: rgba(0, 0, 0, 0.8); | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| z-index: 1000; | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .theme-option { | ||
| margin: 5px 0; | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| background-color: #444; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
|
|
||
|
|
||
| .overlay-container { | ||
| position: relative; | ||
| z-index: 1; | ||
| background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| color: white; | ||
| } | ||
|
|
||
| .theme-option.selected { | ||
| border: 2px solid #00f; | ||
| background-color: rgba(0, 0, 255, 0.1); | ||
| } |