Minimal adaptive page to mobile devices

assets/main.css

@@ -1,7 +1,16 @@
 .carousel > .carousel-inner > .carousel-item > img {
     width  : 100vh;
-    height : 94vh;
+    height : calc(100vh - 56px);
-	/* padding-bottom : -2.5%; */
+    /* height : 10vh; */
+}
+
+/*.main-window-alt {
+	width  : 100vh;
+    height : calc(100vh - 56px);
+}*/
+
+.centered-el {
+	padding-top : 45vh;
 }
 
 .bg {

assets/main.js

@@ -1,6 +1,69 @@
+/* Альтернативное главное меню */
+let altMenuSelectedPage = 1;
+const altPages = [
+	`<h5 style="color: white;">Добро пожаловать на мой ресурс</h5><p style="color: white;">Это официальный ресурс FullGreaM.</p><button onclick="fl.go('/contacts');" type="button" class="btn btn-outline-light">Мои контакты</button>`,
+	`<h5 style="color: white;">О проектах и работах</h5>
+	<p style="color: white;">Здесь представлены мои проекты, работы с активными и актуальными ссылками на скачивание.</p>
+	<button onclick="fl.go('/projects');" type="button" class="btn btn-outline-light">Мои проекты</button>`,
+	`<h5 style="color: white;">О прочей информации</h5>
+	<p style="color: white;">Также здесь представлен (или будет представлен) мой личный блог, а также, блог, касающийся моих проектов или проектов моей команды.</p>
+	<button onclick="fl.go('/blog');" type="button" class="btn btn-outline-light">Мой блог</button>`
+];
+function setAltMenuPage(pageNumber) {
+	altMenuSelectedPage = pageNumber;
+	if (altMenuSelectedPage <= 0) {
+		altMenuSelectedPage = 3;
+	}
+	else if (altMenuSelectedPage > 3) {
+		altMenuSelectedPage = 1;
+	}
+	document.getElementsByTagName('body')[0].style.backgroundImage = `url("/assets/hello/m/${altMenuSelectedPage}.png")`;
+	document.getElementById('alt-carousel-viewer').innerHTML = altPages[altMenuSelectedPage - 1];
+};
+/* Альтернативное главное меню */
+setTimeout(async () => fl.go(window.location.pathname + location.search), 50);
+
+let isMobile = window.screen.availWidth / window.screen.availHeight <= 1.45;
+
+if (isMobile) {
+	// Я это уберу как только буду уверен, что на мобильной версии нет никаких проблем
+	fl.go('/mobile-warning?go=' + new URLSearchParams(location.pathname + location.search).toString().slice(0, -1));
+}
+
+function goFromMobileWarning () {
+	const currentURL = new URL(location.href);
+	fl.go(currentURL.searchParams.get("go"));
+}
+
+let mainMenuErrorHandled = false;
+
 setInterval(async () => {
-	const isMainMenu = document.getElementById('main_img1')?.src;
+	const navbarHeight = +(document.getElementById("navbar-main")?.offsetHeight);
+	if (!mainMenuErrorHandled && location.pathname == "/" && document.getElementById('main_img1')?.src) {
 		document.getElementById('main_img1').src = window.screen.availWidth / window.screen.availHeight > 1.45 ? "/assets/hello/1.png" : "/assets/hello/m/1.png";
 		document.getElementById('main_img2').src = window.screen.availWidth / window.screen.availHeight > 1.45 ? "/assets/hello/2.png" : "/assets/hello/m/2.png";
 		document.getElementById('main_img3').src = window.screen.availWidth / window.screen.availHeight > 1.45 ? "/assets/hello/3.png" : "/assets/hello/m/3.png";
+	}
+	const selectedCSS = Object.entries(document.styleSheets).filter(([key, cssFileObject]) => cssFileObject.href == `${location.origin}/assets/main.css`)[0][1];
+	Object.entries(selectedCSS.rules).filter(([key, rule]) => rule.selectorText == '.carousel > .carousel-inner > .carousel-item > img')[0][1].style.height = `calc(100vh - ${navbarHeight}px)`
+	
+	const currHtml = document.getElementById('alt-carousel-viewer')?.innerHTML;
+	mainMenuErrorHandled = currHtml?.trim() == altPages[altMenuSelectedPage - 1]?.trim();
+	
+	if (!mainMenuErrorHandled && window.screen.availWidth < 768 && location.pathname == "/") {  // Обработка ошибки вёрстки на главной странице
+		mainMenuErrorHandled = true;
+		setTimeout(async () => {
+			fl.goJust('/main-mobile', false);
+			document.getElementsByTagName('body')[0].style.backgroundImage = 'url("/assets/hello/m/1.png")';
+		}, 150);
+	}
+	else if (mainMenuErrorHandled && window.screen.availWidth >= 768 && location.pathname == "/") {  // Вернуть нормальную версию вёрстки
+		mainMenuErrorHandled = false;
+		document.getElementsByTagName('body')[0].style.backgroundImage = '';
+		fl.goJust('/', false);
+	}
+	else if (location.pathname !== "/") {
+		mainMenuErrorHandled = false;
+		document.getElementsByTagName('body')[0].style.backgroundImage = '';
+	}
 }, 1);

blog/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+		<link rel="stylesheet" href="/assets/main.css">
+	<title>FullGreaM</title>
+	</head>
+	<body class="bg text-white">
+		<script src="/fl_framework/index.js"></script>
+		<nav id="navbar-main" class="navbar navbar-dark bg-dark">
+			<a class="navbar-brand" href="#" onclick="fl.go('/');">
+				FullGreaM
+			</a>
+			<button onclick="fl.go('/contacts');" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Мои контакты</button>
+		</nav>
+		<div id="turn-on-js">
+			<h1>Включите поддержку JavaScript!</h1>
+			<p>В противном случае, компоненты сайте не смогут быть загружены</p>
+		</div>
+		<script>
+			document.getElementById("turn-on-js").innerHTML = '<div id="fl.area"><p>Loading...</p></div>';
+		</script>
+		<!-- Finalize loading bootstrap js -->
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+		<!-- Go to root -->
+		<!-- <script>setTimeout(async () => fl.go(window.location.pathname), 50);</script> -->
+		<script src="/assets/main.js"></script>
+	</body>
+</html>

contacts/index.html

@@ -5,12 +5,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 		<link rel="stylesheet" href="/assets/main.css">
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
 	<title>FullGreaM</title>
 	</head>
 	<body class="bg text-white">
 		<script src="/fl_framework/index.js"></script>
-		<nav class="navbar navbar-dark bg-dark">
+		<nav id="navbar-main" class="navbar navbar-dark bg-dark">
 			<a class="navbar-brand" href="#" onclick="fl.go('/');">
 				FullGreaM
 			</a>
@@ -26,7 +25,7 @@
 		<!-- Finalize loading bootstrap js -->
 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
 		<!-- Go to root -->
-		<script>setTimeout(async () => fl.go(window.location.pathname), 50);</script>
+		<!-- <script>setTimeout(async () => fl.go(window.location.pathname), 50);</script> -->
 		<script src="/assets/main.js"></script>
 	</body>
 </html>

fl_dir/blog/index.html

@@ -0,0 +1,5 @@
+<center>
+	<img src="/assets/at_work.png" class="sys-win-img"></img>
+	<h1>Страница в разработке</h1>
+	<p>Страница находится в разработке и на данный момент не доступна :(</p>
+</center>

fl_dir/contacts/index.html

@@ -6,6 +6,8 @@
 		<button type="button" class="btn btn-dark btn-outline-light" onclick='fl.goToLocation("https://vk.com/decimus_crew")'>Вконтакте</button>
 		<button type="button" class="btn btn-dark btn-outline-light" onclick='fl.goToLocation("https://t.me/Nikiroy78")'>Telegram</button>
 		<button type="button" class="btn btn-dark btn-outline-light" onclick='fl.goToLocation("https://www.facebook.com/profile.php?id=100093948516820")'>Facebook</button>
+	</div><p></p>
+	<div class="btn-group" role="group" aria-label="Basic example">
 		<button type="button" class="btn btn-dark btn-outline-light" onclick='fl.goToLocation("https://github.com/Nikiroy78")'>GitHub</button>
 		<button type="button" class="btn btn-dark btn-outline-light" onclick='fl.goToLocation("https://gamer-mods.ru/index/8-1000260")'>gamer-mods.ru</button>
 	</div>

fl_dir/index.html

@@ -12,7 +12,8 @@
 		  <div class="carousel-caption d-none d-md-block">
 			<h5 style="color: white;">Добро пожаловать на мой ресурс</h5>
 			<p style="color: white;">Это официальный ресурс FullGreaM.</p>
-			<button onclick="fl.go('/contacts');" type="button" class="btn btn-dark">Мои контакты</button>
+			<button onclick="fl.go('/contacts');" type="button" class="btn btn-outline-light">Мои контакты</button>
+			<div class="centered-el"></div>
 		  </div>
 		</div>
 		<div class="carousel-item" data-bs-interval="2000">
@@ -20,7 +21,8 @@
 		  <div class="carousel-caption d-none d-md-block">
 			<h5 style="color: white;">О проектах и работах</h5>
 			<p style="color: white;">Здесь представлены мои проекты, работы с активными и актуальными ссылками на скачивание.</p>
-			<button onclick="fl.go('/projects');" type="button" class="btn btn-light">Мои проекты</button>
+			<button onclick="fl.go('/projects');" type="button" class="btn btn-outline-light">Мои проекты</button>
+			<div class="centered-el"></div>
 		  </div>
 		</div>
 		<div class="carousel-item">
@@ -28,7 +30,8 @@
 		  <div class="carousel-caption d-none d-md-block">
 			<h5 style="color: white;">О прочей информации</h5>
 			<p style="color: white;">Также здесь представлен (или будет представлен) мой личный блог, а также, блог, касающийся моих проектов или проектов моей команды.</p>
-			<button onclick="fl.go('/blog');" type="button" class="btn btn-secondary">Мой блог</button>
+			<button onclick="fl.go('/blog');" type="button" class="btn btn-outline-light">Мой блог</button>
+			<div class="centered-el"></div>
 		  </div>
 		</div>
 	  </div>

fl_dir/main-mobile/index.html

@@ -0,0 +1,17 @@
+<center>
+	<div class="centered-el"></div>
+	<!-- <h1>It's all worked!</h1> -->
+	<div id="alt-carousel-viewer">
+		<h5 style="color: white;">Добро пожаловать на мой ресурс</h5><p style="color: white;">Это официальный ресурс FullGreaM.</p><button onclick="fl.go('/contacts');" type="button" class="btn btn-outline-light">Мои контакты</button>
+	</div>
+	<div id="main-window-alt" class="carousel main-window-alt">
+		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev" onclick="setAltMenuPage(altMenuSelectedPage - 1)">
+			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+			<span class="visually-hidden">Предыдущий</span>
+		</button>
+		<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next" onclick="setAltMenuPage(altMenuSelectedPage + 1)">
+			<span class="carousel-control-next-icon" aria-hidden="true"></span>
+			<span class="visually-hidden">Предыдущий</span>
+		</button>
+	</div>
+</center>

fl_dir/mobile-warning/index.html

@@ -0,0 +1,7 @@
+<center>
+	<img src="/assets/no_mobile.png" class="sys-win-img"></img>
+	<h1>Внимание!</h1>
+	<h2>Не адаптировано под мобильные устройства</h2>
+	<p>Мой ресурс пока что не адаптирован под мобильные устройства, тем не менее, вы всё ещё можете пользоваться сайтом</p>
+	<button type="button" class="btn btn-dark btn-outline-light" onclick='goFromMobileWarning();'>Продолжить</button>
+</center>

fl_dir/projects/index.html

@@ -0,0 +1,5 @@
+<center>
+	<img src="/assets/at_work.png" class="sys-win-img"></img>
+	<h1>Страница в разработке</h1>
+	<p>Страница находится в разработке и на данный момент не доступна :(</p>
+</center>

index.html

@@ -9,7 +9,7 @@
 	</head>
 	<body class="bg text-white">
 		<script src="/fl_framework/index.js"></script>
-		<nav class="navbar navbar-dark bg-dark">
+		<nav id="navbar-main" class="navbar navbar-dark bg-dark">
 			<a class="navbar-brand" href="#" onclick="fl.go('/');">
 				FullGreaM
 			</a>
@@ -25,7 +25,7 @@
 		<!-- Finalize loading bootstrap js -->
 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
 		<!-- Go to root -->
-		<script>setTimeout(async () => fl.go(window.location.pathname), 50);</script>
+		<!-- <script>setTimeout(async () => fl.go(window.location.pathname), 50);</script> -->
 		<script src="/assets/main.js"></script>
 	</body>
 </html>

mobile-warning/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+		<link rel="stylesheet" href="/assets/main.css">
+	<title>FullGreaM</title>
+	</head>
+	<body class="bg text-white">
+		<script src="/fl_framework/index.js"></script>
+		<nav id="navbar-main" class="navbar navbar-dark bg-dark">
+			<a class="navbar-brand" href="#" onclick="fl.go('/');">
+				FullGreaM
+			</a>
+			<button onclick="fl.go('/contacts');" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Мои контакты</button>
+		</nav>
+		<div id="turn-on-js">
+			<h1>Включите поддержку JavaScript!</h1>
+			<p>В противном случае, компоненты сайте не смогут быть загружены</p>
+		</div>
+		<script>
+			document.getElementById("turn-on-js").innerHTML = '<div id="fl.area"><p>Loading...</p></div>';
+		</script>
+		<!-- Finalize loading bootstrap js -->
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+		<!-- Go to root -->
+		<!-- <script>setTimeout(async () => fl.go(window.location.pathname), 50);</script> -->
+		<script src="/assets/main.js"></script>
+	</body>
+</html>

projects/blog/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+		<link rel="stylesheet" href="/assets/main.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+	<title>FullGreaM</title>
+	</head>
+	<body class="bg text-white">
+		<script src="/fl_framework/index.js"></script>
+		<nav id="navbar-main" class="navbar navbar-dark bg-dark">
+			<a class="navbar-brand" href="#" onclick="fl.go('/');">
+				FullGreaM
+			</a>
+			<button onclick="fl.go('/contacts');" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Мои контакты</button>
+		</nav>
+		<div id="turn-on-js">
+			<h1>Включите поддержку JavaScript!</h1>
+			<p>В противном случае, компоненты сайте не смогут быть загружены</p>
+		</div>
+		<script>
+			document.getElementById("turn-on-js").innerHTML = '<div id="fl.area"><p>Loading...</p></div>';
+		</script>
+		<!-- Finalize loading bootstrap js -->
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+		<!-- Go to root -->
+		<script>setTimeout(async () => fl.go(window.location.pathname), 50);</script>
+		<script src="/assets/main.js"></script>
+	</body>
+</html>

projects/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+		<link rel="stylesheet" href="/assets/main.css">
+	<title>FullGreaM</title>
+	</head>
+	<body class="bg text-white">
+		<script src="/fl_framework/index.js"></script>
+		<nav id="navbar-main" class="navbar navbar-dark bg-dark">
+			<a class="navbar-brand" href="#" onclick="fl.go('/');">
+				FullGreaM
+			</a>
+			<button onclick="fl.go('/contacts');" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Мои контакты</button>
+		</nav>
+		<div id="turn-on-js">
+			<h1>Включите поддержку JavaScript!</h1>
+			<p>В противном случае, компоненты сайте не смогут быть загружены</p>
+		</div>
+		<script>
+			document.getElementById("turn-on-js").innerHTML = '<div id="fl.area"><p>Loading...</p></div>';
+		</script>
+		<!-- Finalize loading bootstrap js -->
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+		<!-- Go to root -->
+		<!-- <script>setTimeout(async () => fl.go(window.location.pathname), 50);</script> -->
+		<script src="/assets/main.js"></script>
+	</body>
+</html>