mobile

Nostrathomas0 · Jan 29, 2024 · 1eb9499 · 1eb9499
1 parent 9d84017
commit 1eb9499
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 13 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2335,6 +2335,9 @@ input, select, textarea {
 			font-size: 40px;
 				}
 
+		#language-dropdown {
+			min-width: 95px;
+		}
 
 		.guessed {
 			background-color: darkgrey; /* or any other color */
@@ -2391,4 +2394,61 @@ input, select, textarea {
 		}
 		.blur-background .main-content{
 			filter: blur(5px);
-		}			
+		}			
+
+		/* Hamburger Menu Button - Visible only on mobile */
+		.hamburger-menu {
+			display:none;
+			position: absolute; /* Position the menu absolutely within the header */
+			top: 50%; /* Center it vertically */
+			right: 15px; /* Place it towards the right */
+			display: inline-block;
+			cursor: pointer;
+			background-color: white; /* White background */
+			border: none; /* No border */
+			padding: 5px; /* Smaller size */
+			margin: 3px; /* Adjust as needed for positioning */
+		}
+		.hamburger-menu div {
+			width: 20px; /* Width of bars */
+			height: 2px; /* Height of bars */
+			background-color: black; /* Black bars */
+			margin: 5px 0; /* Space between bars */
+			transition: 0.4s; /* Smooth transition for animations */
+		}
+
+		@media screen and (max-width: 480px) {
+			#intro .content header #hangman-container {
+				width: 100px; /* Adjust the width as needed */
+				height: 100px; /* Adjust the height as needed */
+				margin: 0 auto; /* Center the container */
+			}	
+
+			#intro .content p[data-translate="statement"] {
+				font-size: 16px; /* Adjust the font size for mobile screens */
+				padding: 0 10px; /* Add some padding if needed for better spacing */
+				text-align: center; /* Center the text if it fits your design better */
+			}
+
+			#letter-buttons button {
+				font-size: 14px; /* Smaller font size */
+				padding: 5px 10px; /* Smaller padding */
+				margin: 5px; /* Space out buttons */
+			}
+
+			#word-display {
+				font-size: 24px;
+			}
+			.hamburger-menu {
+				display: inline-block; /* Show button on mobile */
+			}
+
+			nav ul {
+			display: none; /* Hide navigation menu by default on mobile */
+			}
+
+			nav ul.active {
+			display: block; /* Show menu when active */
+			}
+		}
+
diff --git a/games.js b/games.js
@@ -35,7 +35,12 @@ var translations = {
     statement: {
         fr: "Apprenez des langues pour ouvrir des portes, rencontrer des gens, réussir et planifier votre avenir. Jouez à ce jeu en classe pour vous motiver. Astuce : mots anglais pour les fruits et légumes.",
         zh: "学习语言可以打开大门、结识新朋友、找到成功并规划您的未来。 玩这个课堂游戏可以激发动力。 <br>提示：水果和蔬菜的英语单词。"
+    },
+    does: {
+        fr: "Édition numérique<br>Logiciel de révision<br>Diffusion en direct<br>Indépendant<br>Concours d'écriture<br>Spectacles de marionnettes<br>Phrases aléatoires !",
+        zh: "数字出版<br>评论软件<br>直播<br>独立<br>写作比赛<br>木偶剧<br>随机英语句子！"
     }
+
     // Add more translations here
 };
 
@@ -289,7 +294,9 @@ document.addEventListener('DOMContentLoaded', function() {
     var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
     var userLanguage = getCookie('userLanguage')
     var languageDropdown = document.getElementById('language-dropdown');
-
+    var hamburger = document.querySelector('.hamburger-menu');
+    var navUL = document.querySelector('nav ul');
+
     // Only show modal if cookie consent hasn't been given
     console.log("Checking cookie consent status");
     if (!getCookie('cookieConsent')) {
@@ -320,6 +327,9 @@ document.addEventListener('DOMContentLoaded', function() {
             setLanguagePreference(this.value);
         });
     }
+    hamburger.addEventListener('click', function() {
+        navUL.classList.toggle('active');
+    });
     // Setup event listeners for letter buttons
     letters.forEach(function(letter) {
         var button = document.getElementById('button-' + letter);
@@ -338,4 +348,3 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Additional code if needed
 });
-
diff --git a/index.html b/index.html
@@ -19,7 +19,11 @@
 
 		<!-- Header -->
 			<header id="header">
-				<h1>Learn Language with applications</h1>
+				<h1>Learn Language Applications</h1>
+				<!-- Hamburger Menu Button -->
+				<button class="hamburger-menu">
+					<span class="hamburger-icon">&#9776;</span> <!-- Represents the hamburger icon -->
+				</button>
 				<nav>
 					<ul>
 						<li><a href="#intro">Let's play</a></li>
@@ -46,10 +50,10 @@ <h1>Learn Language with applications</h1>
 					<h2>Languapps</h2>
 					<p data-translate="statement">Learn languages to open doors, meet people, find success and plan your future. Play this classroom game to get motivated. <br>Hint: fruits and vegetables. </p>
 					<header>  <!-- Hangman Game Elements -->
-						<div id="word-display"></div>
 						<div id="hangman-container" style="width: 300px; height: 300px; position: relative;">
 							<img id="hangman-image" src="/images/hang/h0.png" alt="hangman">
 							</div>
+						<div id="word-display"></div>
 						<button onclick="startGame()">Start New Game</button>
 							<div id="letter-buttons">
 								<button id="button-a">a</button>
@@ -102,13 +106,9 @@ <h2>Get Random</h2>
 							<input type="submit" value="Generate">
 						</form>
 					</header>
-					<p>Digital Publishing<br>Review Software<br>Live stream<br>Independant<br>Writing Contests<br>Puppet Shows<br></p>
-				</div>
-				<div>
-					<h1>Click for a Random Sentence!</h1>
-					<div id="random-sentence"></div>
-
-
+					<p data-translate="does">Digital Publishing<br>Review Software<br>Live stream<br>Independant<br>Writing Contests<br>Puppet Shows<br>Random Sentences!</p>
+
+				<div id="random-sentence"></div>
 				</div>
 				<a href="#two" class="button style2 down anchored">Next</a>
 			</section>
@@ -119,7 +119,7 @@ <h1>Click for a Random Sentence!</h1>
 					<header>
 						<h2>I Am</h2>
 					</header>
-					<p>a reporter and a code user who teachs English abroad. I provide learning tasks as a web developer and an applied linguist. This website's my work. This is my <a href="https://nostrathomas0.github.io/Web_CV" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a></p> 
+					<p data-translate="is">a reporter and a code user who teachs English abroad. I provide learning tasks as a web developer and an applied linguist. This website's my work. This is my <a href="https://nostrathomas0.github.io/Web_CV" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a></p> 
 					<p>Get us Occulus and we'll be nerds in the Metaverse learning ESP  <a href="https://www.facebook.com/ESLforInternats/shop/?referral_code=page_shop_tab&preview=1" target="_blank" rel="noopener noreferrer">English Plus </a></p>
 				</div>
 				<a href="#work" class="button style2 down anchored">Next</a>