Skip to content

Commit

Permalink
video
Browse files Browse the repository at this point in the history
  • Loading branch information
Tom Schwartz committed Jan 22, 2024
1 parent be1529f commit c9eb15c
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 64 deletions.
1 change: 0 additions & 1 deletion assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2382,7 +2382,6 @@ input, select, textarea {
background-color: rgba(0,0,0,0.4); /* Black with opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
Expand Down
103 changes: 73 additions & 30 deletions games.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
// games.js

const words = ["apple", "banana", "carrot", "date", "eggplant", "fig", "grape", "honeydew", "kiwi", "lemon", "mango", "nectarine", "orange", "papaya", "quince", "raspberry", "strawberry", "tomato", "ugli fruit", "watermelon", "zucchini", "yam", "xigua", "cucumber", "broccoli", "avocado", "bell pepper", "dragon fruit", "elderberry", "jicama", "kale", "lettuce", "mushroom", "olive", "peach", "pear", "radish", "spinach", "tangerine", "blueberry", "durian", "endive", "figs", "grapefruit", "jackfruit", "kiwano", "lime", "lychee", "okra"
];
// Section 1
// Hangman Game

const words = ["apple", "banana", "carrot", "date", "eggplant", "fig", "grape", "honeydew", "kiwi", "lemon", "mango", "nectarine", "orange", "papaya", "quince", "raspberry", "strawberry", "tomato", "ugli fruit", "watermelon", "zucchini", "yam", "xigua", "cucumber", "broccoli", "avocado", "bell pepper", "dragon fruit", "elderberry", "jicama", "kale", "lettuce", "mushroom", "olive", "peach", "pear", "radish", "spinach", "tangerine", "blueberry", "durian", "endive", "figs", "grapefruit", "jackfruit", "kiwano", "lime", "lychee", "okra"];
let wordToGuess = "";
let guessedLetters = [];
let wrongGuesses = 0;
Expand Down Expand Up @@ -49,7 +51,6 @@ function startGame() {
});
}


function makeGuess(guess) {
console.log("Trying to disable button with ID:", "button-" + guess);
guess = guess.toLowerCase(); // Convert guess to lowercase
Expand Down Expand Up @@ -103,11 +104,9 @@ function checkGameOver() {
}


document.addEventListener('DOMContentLoaded', function() {

startGame();
});

// Section 2
// Random sentence generator
document.getElementById('random').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents the default form submission
generateRandomSentence(); // Calls your function to generate a sentence
Expand Down Expand Up @@ -184,23 +183,10 @@ function generateRandomSentence() {
const randomSentence = generateRandomSentence();
document.getElementById('random-sentence').innerHTML = randomSentence;

// DOMContentLoaded event listener
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('random').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting in the traditional way
generateRandomSentence(); // Call the function to generate and display the sentence
});
});
document.querySelectorAll('.gallery a').forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
var modal = document.getElementById('videoModal');
var videoSrc = this.getAttribute('data-video');
document.getElementById('videoContent').querySelector('source').src = videoSrc;
document.getElementById('videoContent').load();
modal.style.display = "block";
});
});


//Section 3 Cookies
//Cookie setter
function setCookie(name, value, days) {
var expires = "";
if (days) {
Expand All @@ -226,11 +212,25 @@ function eraseCookie(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

document.addEventListener('DOMContentLoaded', function() {
var modal = document.getElementById('cookie-consent-modal');
var acceptBtn = document.getElementById('accept-cookies');
var declineBtn = document.getElementById('decline-cookies');
var bodyContent = document.querySelector('.main-content');
function setLanguagePreference(language) {
setCookie('userLanguage', language, 30); // Store the language preference
applyLanguageSettings(language); // Apply the language immediately
}

function setLanguagePreference(language) {
setCookie('userLanguage', language, 30); // Store the language preference for 30 days
}

function applyLanguageSettings(language) {
if (language === 'fr') {
// Apply French language settings
} else {
// Apply default language settings
}
}




// Only show modal if cookie consent hasn't been given
console.log("Checking cookie consent status");
Expand All @@ -245,7 +245,12 @@ document.addEventListener('DOMContentLoaded', function() {
setCookie('cookieConsent', 'accepted', 30);
modal.style.display = 'none';
bodyContent.classList.remove('blur-background');
// Set essential cookies here if needed
// Load and apply language preference
var userLanguage = getCookie('userLanguage')
if (userLanguage) {
// Apply the language setting
applyLanguageSetting(userLanguage);
}
});

// Event listener for decline
Expand All @@ -255,4 +260,42 @@ document.addEventListener('DOMContentLoaded', function() {
bodyContent.classList.remove('blur-background');
// Actions to take on decline
});


document.addEventListener('DOMContentLoaded', function() {
// Start the hangman game
startGame();

// Set up the cookie consent modal
var modal = document.getElementById('cookie-consent-modal');
var acceptBtn = document.getElementById('accept-cookies');
var declineBtn = document.getElementById('decline-cookies');
var bodyContent = document.querySelector('.main-content');

// Check cookie consent status
if (!getCookie('cookieConsent')) {
modal.style.display = 'block';
bodyContent.classList.add('blur-background');
}

// Event listeners for accept and decline buttons
acceptBtn.addEventListener('click', function() {
setCookie('cookieConsent', 'accepted', 30);
modal.style.display = 'none';
bodyContent.classList.remove('blur-background');
});

declineBtn.addEventListener('click', function() {
setCookie('cookieConsent', 'declined', 30);
modal.style.display = 'none';
bodyContent.classList.remove('blur-background');
});

// Set up the random sentence generator form submission
document.getElementById('random').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting in the traditional way
generateRandomSentence(); // Call the function to generate and display the sentence
});
});


47 changes: 14 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ <h1>Learn Language with applications</h1>
<li><a href="#two">and</a></li>
<li><a href="#work">how to</a></li>
<li><a href="#contact">Contact</a></li>
<li><div class="language-selector">
<select id="language-dropdown" onchange="setLanguagePreference(this.value)">
<option value="en">English</option>
<option value="fr">Français</option>
<!-- Add other languages here if needed -->
</select>
</div>
</li>
</ul>
</nav>
</header>
Expand Down Expand Up @@ -156,10 +164,12 @@ <h2>I Work</h2>
<!-- Gallery -->
<div class="gallery">
<article class="from-left">
<a href="#videoModal" class="image fit" data-video="images/fulls/01.mp4">
<img src="images/thumbs/01.jpg" title="Online English Lessons" alt="" />
</a>
<video width="320" height="240" controls class="image fit" poster="images/thumbs/01.jpg">
<source src="images/fulls/01.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</article>

<article class="from-right">
<a href="images/fulls/02.jpg" class="image fit">
<img src="images/thumbs/02.jpg" title="We Chat & xiaohongshu" alt="" />
Expand Down Expand Up @@ -240,36 +250,7 @@ <h2>Cookie Consent</h2>
</div>
</div>

<div id="videoModal" class="video-modal">
<span class="close">&times;</span>
<video class="modal-content" id="videoContent">
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Attach click event to gallery items
document.querySelectorAll('.gallery a').forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
var modal = document.getElementById('videoModal');
var videoSrc = this.getAttribute('data-video');
document.getElementById('videoContent').querySelector('source').src = videoSrc;
document.getElementById('videoContent').load();
modal.style.display = "block";
});
});

// Close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
var modal = document.getElementById('videoModal');
modal.style.display = "none";
document.getElementById('videoContent').pause();
}
});
</script>
</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
Expand Down

0 comments on commit c9eb15c

Please sign in to comment.