fullgream/Nikiroy78.github.io
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minimal adaptive page to mobile devices

Browse Source
This commit is contained in:
Nikiroy78 2023-06-19 17:00:30 +03:00
parent f5c9989433
commit 90b6176bb4
15 changed files with 250 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/main.css
View File

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

65
assets/main.js
View File

@ -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);

BIN
assets/no_mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

31
blog/index.html Normal file
View File

@ -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>

5
contacts/index.html
View File

@ -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>

5
fl_dir/blog/index.html Normal file
View File

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

2
fl_dir/contacts/index.html
View File

@ -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>

9
fl_dir/index.html
View File

@ -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>

17
fl_dir/main-mobile/index.html Normal file
View File

@ -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>

7
fl_dir/mobile-warning/index.html Normal file
View File

@ -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>

5
fl_dir/projects/index.html Normal file
View File

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

4
index.html
View File

@ -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>

31
mobile-warning/index.html Normal file
View File

@ -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>

32
projects/blog/index.html Normal file
View File

@ -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>

31
projects/index.html Normal file
View File

@ -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>