feat: index.html

frpouly · Feb 4, 2024 · d023dd5 · d023dd5
1 parent 2f3603e
commit d023dd5
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -201,7 +201,6 @@ project.lock.json
 
 # Output folder used by Webpack or other FE stuff
 **/node_modules/*
-**/wwwroot/*
 
 # SpecFlow specific
 *.feature.cs

diff --git a/src/Expressio/Program.cs b/src/Expressio/Program.cs
@@ -34,7 +34,9 @@
 
 app.UseHttpsRedirection();
 
-app.UseAuthorization();
+app.UseDefaultFiles();
+
+app.UseStaticFiles();
 
 app.MapControllers();
 

diff --git a/src/Expressio/wwwroot/index.html b/src/Expressio/wwwroot/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Expressio</title>
+	</head>
+	<style type="text/css">
+		@media (prefers-color-scheme: dark) {
+			* {
+				background-color: black;
+			}
+			#expression {
+				color: white;
+			}
+		}
+		#expression {
+			font-size: 5em;
+			text-align: center;
+			display: flex;
+			justify-content: center;
+			align-items:flex-end;
+			font-family: "Comic Sans MS", "Comic Sans", cursive;
+			-webkit-user-select: none; 
+			-webkit-touch-callout: none; 
+			-moz-user-select: none; 
+			-ms-user-select: none; 
+			user-select: none;  
+		}
+		body {
+			display: flex;
+			justify-content: center;
+			align-items:flex-end;
+		}
+	</style>
+	<body>
+		<div id="expression">
+			<div id="expression-text"></div>
+		</div>
+	</body>
+	<script type="text/javascript">
+		//check language
+		var lang;
+		var authorizedLanguages = ['fr','en'];
+		let pathLang = window.location.pathname.split('/')[1].toLowerCase();
+		let navigatorLang = navigator.language.split('-')[0].toLowerCase();
+
+		//language is in url
+		if (pathLang != "")
+			lang = pathLang;
+		//use default navigator language
+		else
+			lang = navigatorLang;
+
+		//if is a unauthorized language, transform similary language
+		if (authorizedLanguages.indexOf(lang) == -1) {
+			switch (lang) {
+				case 'en':
+				case 'us':
+					lang = 'en';
+					break;
+				default:
+					lang = 'fr';
+			}
+		}
+
+
+		function centrer() {
+			document.getElementById("expression").style.height = 
+				((document.documentElement.clientHeight-document.getElementById("expression-text").clientHeight)/2 + document.getElementById("expression-text").clientHeight) + 'px';
+		}
+
+		function afficher_nouvelle_expression() {
+			let XHR = new XMLHttpRequest();
+
+			XHR.addEventListener("error", function(event) {
+				alert('Internal Server Error');
+			});
+
+			XHR.addEventListener("load", function(event) {
+				if (XHR.status != 200) {
+					alert("Error " + XHR.status);
+				} else {
+					//display new expression
+					document.getElementById("expression-text").innerText = JSON.parse(XHR.responseText).content;
+
+					//page setup
+					centrer();
+				}
+			});
+
+			//call API
+			XHR.open("GET", "/api/v1/MixedExpressions/" + lang + "/random");
+			XHR.send();
+
+		}
+
+		afficher_nouvelle_expression();
+
+		//automatic page setup
+		window.addEventListener('resize', function(event){
+			centrer();
+		});
+
+		//update click
+		window.addEventListener('click', function(event){
+			afficher_nouvelle_expression();
+		});
+
+	</script>
+</html>