Dhaverd/ Site
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Значительно переработана мобильная версия; упрощен index.js; рефакторинг кода

This commit is contained in:
Dhaverd 2022-10-19 17:28:47 +08:00
parent df18d0b469
commit c93debbeeb
12 changed files with 396 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -2,8 +2,10 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dhaverd</title>
<link href="src/styles/style.css?v=01000025" rel="stylesheet">
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
@ -31,6 +33,6 @@
<p id="footer">® Dhaverd 2022</p>
</section>
</footer>
</body>
</body>
<script src="src/scripts/index.js"></script>
</html>

6
mychat.html
View File

@ -2,8 +2,10 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dhaverd - MyChat</title>
<link href="src/styles/style.css?v=01000023" rel="stylesheet">
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
@ -38,5 +40,5 @@
</section>
</footer>
</body>
<script src="src/scripts/mychat.js"></script>
<script src="src/scripts/index.js"></script>
</html>

6
servers.html
View File

@ -2,8 +2,10 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dhaverd - Servers</title>
<link href="src/styles/style.css?v=01000023" rel="stylesheet">
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
@ -43,5 +45,5 @@
</section>
</footer>
</body>
<script src="src/scripts/servers.js"></script>
<script src="src/scripts/index.js"></script>
</html>

BIN
src/img/Dhaverd2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 26 KiB

18
src/scripts/header.js
View File

@ -1,18 +0,0 @@
$(document).ready(function(){
var $menu = $("#header");
let header = $('#header');
let hederHeight = header.height();
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
$menu.removeClass("default").addClass("fixed");
$('.main-content').css({
'paddingTop': hederHeight+'px'
});
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
$('.main-content').css({
'paddingTop': 0
});
}
});//scroll
});

65
src/scripts/index.js
View File

@ -1,8 +1,6 @@
$(document).ready(function() {
resetContentSize();
fixMobile();
window.addEventListener('resize', fixMobile);
window.onresize = fixMobile;
resetHeader();
});
function resetContentSize() {
@ -26,65 +24,4 @@ function resetHeader() {
var hh = Number(header.offsetHeight);
hh = hh + 10;
header.setAttribute('style', 'height:'+hh+'px');
}
function isMobile() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function fixMobile() {
resetContentSize();
resetHeader();
var ismobile = isMobileByScreenSize();
console.log("Is mobile: " + ismobile);
if (ismobile) {
resizeElementsDown();
} else {
resizeElementsUp();
}
resetContentSize();
}
function resizeElementsDown() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:16px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:16px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 0px; padding-right: 0px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:14px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:14px');
}
function resizeElementsUp() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:25px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:20px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 100px; padding-right: 100px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:20px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:18px');
}
function isMobileByScreenSize() {
var width = window.innerWidth;
var height = window.innerHeight;
console.log('Height = ' + height);
console.log('Width = ' + width);
return (width - height) < 150;
}

98
src/scripts/mychat.js
View File

@ -1,98 +0,0 @@
$(document).ready(function() {
resetContentSize();
fixMobile();
window.addEventListener('resize', fixMobile);
window.onresize = fixMobile;
});
function resetContentSize() {
console.log("Fixing main-content height:");
let mainContent = document.getElementById('main-content');
mainContent.setAttribute('style', 'height: auto');
mainContent = document.getElementById('main-content');
var offsetHeight = Number(mainContent.offsetHeight);
console.log("\tHeight was: " + offsetHeight);
var newHeight = offsetHeight + 30;
console.log("\tSetting css: " + 'height:'+newHeight+'px');
mainContent.setAttribute('style', 'height:'+newHeight+'px');
console.log("\tHeight become: " + mainContent.offsetHeight);
return;
}
function resetHeader() {
var header = document.getElementById('header');
header.setAttribute('style', 'height: auto');
header = document.getElementById('header');
var hh = Number(header.offsetHeight);
hh = hh + 10;
header.setAttribute('style', 'height:'+hh+'px');
}
function isMobile() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function fixMobile() {
resetContentSize();
resetHeader();
var ismobile = isMobileByScreenSize();
console.log("Is mobile: " + ismobile);
if (ismobile) {
resizeElementsDown();
} else {
resizeElementsUp();
}
resetContentSize();
}
function resizeElementsDown() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:16px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:16px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 0px; padding-right: 0px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:14px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:14px');
var textLinks = document.getElementsByClassName('text-link');
for (let i = 0; i < textLinks.length; i++) {
textLinks[i].setAttribute('style', 'font-size:14px');
}
}
function resizeElementsUp() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:25px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:20px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 100px; padding-right: 100px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:20px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:18px');
var textLinks = document.getElementsByClassName('text-link');
for (let i = 0; i < textLinks.length; i++) {
textLinks[i].setAttribute('style', 'font-size:20px');
}
}
function isMobileByScreenSize() {
var width = window.innerWidth;
var height = window.innerHeight;
console.log('Height = ' + height);
console.log('Width = ' + width);
return (width - height) < 150;
}

106
src/scripts/servers.js
View File

@ -1,106 +0,0 @@
$(document).ready(function() {
resetContentSize();
fixMobile();
window.addEventListener('resize', fixMobile);
window.onresize = fixMobile;
});
function resetContentSize() {
console.log("Fixing main-content height:");
let mainContent = document.getElementById('main-content');
mainContent.setAttribute('style', 'height: auto');
mainContent = document.getElementById('main-content');
var offsetHeight = Number(mainContent.offsetHeight);
console.log("\tHeight was: " + offsetHeight);
var newHeight = offsetHeight + 30;
console.log("\tSetting css: " + 'height:'+newHeight+'px');
mainContent.setAttribute('style', 'height:'+newHeight+'px');
console.log("\tHeight become: " + mainContent.offsetHeight);
return;
}
function resetHeader() {
var header = document.getElementById('header');
header.setAttribute('style', 'height: auto');
header = document.getElementById('header');
var hh = Number(header.offsetHeight);
hh = hh + 10;
header.setAttribute('style', 'height:'+hh+'px');
}
function isMobile() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function fixMobile() {
resetContentSize();
resetHeader();
var ismobile = isMobileByScreenSize();
console.log("Is mobile: " + ismobile);
if (ismobile) {
resizeElementsDown();
} else {
resizeElementsUp();
}
resetContentSize();
}
function resizeElementsDown() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:16px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:16px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 0px; padding-right: 0px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:14px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:14px');
var serverNames = document.getElementsByClassName('server-name');
for (let i = 0; i < serverNames.length; i++) {
serverNames[i].setAttribute('style', 'font-size:16px');
}
var serverIps = document.getElementsByClassName('server-ips');
for (let i = 0; i < serverIps.length; i++) {
serverIps[i].setAttribute('style', 'font-size:14px');
}
}
function resizeElementsUp() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:25px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:20px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 100px; padding-right: 100px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:20px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:18px');
var serverNames = document.getElementsByClassName('server-name');
for (let i = 0; i < serverNames.length; i++) {
serverNames[i].setAttribute('style', 'font-size:20px');
}
var serverIps = document.getElementsByClassName('server-ips');
for (let i = 0; i < serverIps.length; i++) {
serverIps[i].setAttribute('style', 'font-size:16px');
}
}
function isMobileByScreenSize() {
var width = window.innerWidth;
var height = window.innerHeight;
console.log('Height = ' + height);
console.log('Width = ' + width);
return (width - height) < 150;
}

134
src/scripts/workout.js
View File

@ -1,134 +0,0 @@
$(document).ready(function() {
resetContentSize();
fixMobile();
window.addEventListener('resize', fixMobile);
window.onresize = fixMobile;
});
function resetContentSize() {
console.log("Fixing main-content height:");
let mainContent = document.getElementById('main-content');
mainContent.setAttribute('style', 'height: auto');
mainContent = document.getElementById('main-content');
var offsetHeight = Number(mainContent.offsetHeight);
console.log("\tHeight was: " + offsetHeight);
var newHeight = offsetHeight + 30;
console.log("\tSetting css: " + 'height:'+newHeight+'px');
mainContent.setAttribute('style', 'height:'+newHeight+'px');
console.log("\tHeight become: " + mainContent.offsetHeight);
return;
}
function resetHeader() {
var header = document.getElementById('header');
header.setAttribute('style', 'height: auto');
header = document.getElementById('header');
var hh = Number(header.offsetHeight);
hh = hh + 10;
header.setAttribute('style', 'height:'+hh+'px');
}
function isMobile() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function fixMobile() {
resetContentSize();
resetHeader();
var ismobile = isMobileByScreenSize();
console.log("Is mobile: " + ismobile);
if (ismobile) {
resizeElementsDown();
} else {
resizeElementsUp();
}
resetContentSize();
}
function resizeElementsDown() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:16px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:16px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 0px; padding-right: 0px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:14px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:14px');
var tableHeads = document.getElementsByClassName('table-head');
for (let i = 0; i < tableHeads.length; i++) {
tableHeads[i].setAttribute('style', 'font-size:14px');
}
var exerciseHead = document.getElementById('exercise-head');
exerciseHead.setAttribute('style', 'font-size:14px');
var muscleGroupHead = document.getElementById('muscle-group-head');
muscleGroupHead.setAttribute('style', 'font-size:14px');
var countHead = document.getElementById('count-head');
countHead.setAttribute('style', 'font-size:14px');
var exercises = document.getElementsByClassName('exercise');
for (let i = 0; i < exercises.length; i++) {
exercises[i].setAttribute('style', 'font-size:12px');
}
var muscleGroups = document.getElementsByClassName('muscle-group');
for (let i = 0; i < muscleGroups.length; i++) {
muscleGroups[i].setAttribute('style', 'font-size:12px');
}
var count = document.getElementsByClassName('count');
for (let i = 0; i < count.length; i++) {
count[i].setAttribute('style', 'font-size:12px');
}
}
function resizeElementsUp() {
var pageTitle = document.getElementsByClassName('page-title');
pageTitle[0].setAttribute('style', 'font-size:25px');
var refs = document.getElementsByClassName('side-href');
for (let i = 0; i < refs.length; i++) {
refs[i].setAttribute('style', 'font-size:20px');
}
var mainCont = document.getElementById('main');
mainCont.setAttribute('style', 'padding-left: 100px; padding-right: 100px;');
var contentText = document.getElementsByClassName('content-text');
for (let i = 0; i < contentText.length; i++) {
contentText[i].setAttribute('style', 'font-size:20px');
}
var footer = document.getElementById('footer');
footer.setAttribute('style', 'font-size:18px');
var tableHeads = document.getElementsByClassName('table-head');
for (let i = 0; i < tableHeads.length; i++) {
tableHeads[i].setAttribute('style', 'font-size:16px');
}
var exerciseHead = document.getElementById('exercise-head');
exerciseHead.setAttribute('style', 'font-size:16px');
var muscleGroupHead = document.getElementById('muscle-group-head');
muscleGroupHead.setAttribute('style', 'font-size:16px');
var countHead = document.getElementById('count-head');
countHead.setAttribute('style', 'font-size:16px');
var exercises = document.getElementsByClassName('exercise');
for (let i = 0; i < exercises.length; i++) {
exercises[i].setAttribute('style', 'font-size:14px');
}
var muscleGroups = document.getElementsByClassName('muscle-group');
for (let i = 0; i < muscleGroups.length; i++) {
muscleGroups[i].setAttribute('style', 'font-size:14px');
}
var count = document.getElementsByClassName('count');
for (let i = 0; i < count.length; i++) {
count[i].setAttribute('style', 'font-size:14px');
}
}
function isMobileByScreenSize() {
var width = window.innerWidth;
var height = window.innerHeight;
console.log('Height = ' + height);
console.log('Width = ' + width);
return (width - height) < 150;
}

75
src/styles/style.css
View File

@ -5,8 +5,8 @@
body {
padding-left: 100px;
padding-right: 100px;
padding-left: 200px;
padding-right: 200px;
/* Или процентами? */
background-color: #575757;
}
@ -42,11 +42,9 @@ body {
}
.side-bar p {
color: #E0E0E0;
text-align: center;
padding-left:25px;
font-family: Arial;
font-size: 6px;
font-size: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
@ -67,7 +65,7 @@ body {
padding-left: 5px;
text-indent: 5%;
font-family: Arial;
font-size: 20px;
/*font-size: 20px;*/
line-height: 150%;
}
@ -90,19 +88,13 @@ body {
main {
padding-top: 10px;
/*
display: grid;
grid-template-columns: 15% 1% 84%;
grid-template-areas: "side clay main-content";
*/
height: auto;
margin-bottom: 10px;
}
footer {
text-align: right;
padding-left: 100px;
padding-right: 100px;
padding-right: 10px;
background-color: #424242;
height: 7%;
}
@ -200,7 +192,6 @@ h2 {
.minecraft-vanilla {
width: 50%;
border-radius: 10%;
}
.fixed nav a:hover {
@ -219,7 +210,7 @@ h2 {
.mychat-cred {
margin-left: 5px;
font-size: 15px;
font-size: 20px;
}
.workout-table {
@ -228,7 +219,7 @@ h2 {
color: #E0E0E0;
font-family: Arial;
margin: 10px;
table-layout: fixed;
table-layout: auto;
width: 98%;
height: 80%;
border-collapse: collapse;
@ -239,9 +230,7 @@ h2 {
font-size: 16px;
border: 1px solid black;
text-align: center;
rowspan: 2;
width: 100%;
text-decoration: bold;
background-color: #202020;
}
@ -258,8 +247,8 @@ h2 {
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: right;
width: 30%;
text-align: center;
width: 10%;
}
.muscle-group {
@ -267,7 +256,7 @@ h2 {
border: 1px solid black;
padding-bottom: 2px;
text-align: center;
width: 20%;
width: 10%;
}
.muscle-group-head {
@ -275,7 +264,7 @@ h2 {
border: 1px solid black;
padding-bottom: 2px;
text-align: center;
width: 20%;
width: 10%;
}
.odd {
@ -287,7 +276,7 @@ h2 {
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 30%;
width: 10%;
}
.exercise-head {
@ -297,4 +286,44 @@ h2 {
padding-left: 10px;
padding-bottom: 2px;
width: 50%;
}
#leha {
font-size: 16px;
text-align: center;
border: 1px solid black;
padding-left: 10px;
padding-bottom: 2px;
width: 10%;
}
#plov {
font-size: 16px;
text-align: center;
border: 1px solid black;
padding-left: 10px;
padding-bottom: 2px;
width: 10%;
}
.p-prim {
font-size: 14px;
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.l-prim {
font-size: 14px;
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.content-text {
font-size: 20px;
}

276
src/styles/styleMobile.css Normal file
View File

@ -0,0 +1,276 @@
.header-img {
max-width: 90%;
height: auto;
}
body {
padding-left: 0px;
padding-right: 0px;
/* Или процентами? */
background-color: #575757;
}
.side-bar {
align-items: center;
width: 100%;
display: grid;
grid-template-columns: 17% 17% 17% 17% 17%;
grid-template-areas: "mainp gitea servers mychat workout-area";
background-color: #424242;
height: auto;
}
.mainp {
grid-area: mainp;
}
.gitea {
grid-area: gitea;
}
.servers {
grid-area: servers;
}
.mychat {
grid-area: mychat;
}
.workout-area {
grid-area: workout-area;
}
.side-bar p {
text-align: center;
padding-left:25px;
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
}
.page-title{
font-family: segoe print;
}
.main-content {
padding-left:10px;
text-align: left;
background-color: #424242;
height: auto;
}
.main-content p {
color: #E0E0E0;
padding-left: 5px;
text-indent: 5%;
font-family: Arial;
line-height: 150%;
}
main {
padding-top: 10px;
height: auto;
margin-bottom: 10px;
}
footer {
text-align: right;
padding-right: 10px;
background-color: #424242;
height: 7%;
}
footer p {
padding-left: 15px;
padding-top: 20px;
padding-bottom: 20px;
color: #E0E0E0;
font-family: Arial;
font-size: 14px;
}
h1 {
padding-top: 10px;
text-align: center;
color: #609A21;
font-family: Arial;
font-size: 16px;
}
a {
font-style: normal;
color: #E0E0E0;
font-family: Arial;
text-decoration: none;
transition: 0.2s linear;
}
a:hover {
color: #D74D00;
}
h2 {
text-align: center;
color: #E0E0E0;
font-family: Arial;
font-size: 14px;
}
.server-ips {
text-align: center;
color: #E0E0E0;
font-family: Arial;
font-size: 14px;
}
.zomboid {
width: 50%;
}
.image-content {
text-align: center;
}
.image-content img {
border-radius: 10%;
}
.default {
background-color: #424242;
text-align: center;
padding-top: 10px;
box-shadow: 1px 1px 10px rgba(215, 77, 0, 0.5);
height: 100px;
}
.minecraft-vanilla {
width: 50%;
}
.default nav a:hover {
color: #E0E0E0;
background-color: #609A21;
}
.text-link {
color: #FFFFFF;
}
.mychat-cred {
margin-left: 5px;
}
.workout-table {
cellpadding: 10px;
background-color: #505050;
color: #E0E0E0;
font-family: Arial;
margin: 10px;
table-layout: auto;
width: 95%;
height: 80%;
border-collapse: collapse;
border: 1px solid black;
}
.table-head {
font-size: 14px;
border: 1px solid black;
text-align: center;
width: 100%;
background-color: #202020;
}
.exercise {
font-size: 12px;
border: 1px solid black;
padding-left: 10px;
padding-bottom: 2px;
width: 50%;
}
.count {
font-size: 12px;
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.muscle-group {
font-size: 12px;
border: 1px solid black;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.muscle-group-head {
font-size: 12px;
border: 1px solid black;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.odd {
background-color: #353535;
}
.count-head {
font-size: 12px;
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.exercise-head {
font-size: 12px;
text-align: center;
border: 1px solid black;
padding-left: 10px;
padding-bottom: 2px;
width: 50%;
}
#leha {
font-size: 14px;
text-align: center;
border: 1px solid black;
padding-left: 10px;
padding-bottom: 2px;
width: 10%;
}
#plov {
font-size: 14px;
text-align: center;
border: 1px solid black;
padding-left: 10px;
padding-bottom: 2px;
width: 10%;
}
.p-prim {
font-size: 12px;
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.l-prim {
font-size: 12px;
border: 1px solid black;
padding-right: 10px;
padding-bottom: 2px;
text-align: center;
width: 10%;
}
.content-text {
font-size: 14px;
}

60
workout.html
View File

@ -2,8 +2,10 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dhaverd</title>
<link href="src/styles/style.css?v=01000023" rel="stylesheet">
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
@ -25,133 +27,181 @@
<h1 class="page-title">Программа тренировок</h1>
<table class="workout-table">
<tr>
<td class="table-head" colspan="3"><b>Вторник: Грудь. Бицепсы. Пресс.</b></td>
<td class="table-head" colspan="5"><b>Вторник: Грудь. Бицепсы. Пресс.</b></td>
</tr>
<tr class="odd">
<td class="exercise-head" id="exercise-head"><strong>Упражнение</strong></td>
<td class="muscle-group-head" id="muscle-group-head"><strong>Группа мышц</strong></td>
<td class="count-head" id="count-head"><strong>Время/подходы</strong></td>
<td class="leha" id="leha"><strong>Леха</strong></td>
<td class="plov" id="plov"><strong>Павел</strong></td>
</tr>
<tr>
<td class="exercise">Разминка</td>
<td class="muscle-group">Общее</td>
<td class="count">2 минут</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr class="odd">
<td class="exercise">Бегит</td>
<td class="muscle-group">Кардио</td>
<td class="count">30 минут</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr>
<td class="exercise">Жим лежа</td>
<td class="muscle-group">Грудь</td>
<td class="count">3x10</td>
<td class="l-prim">15кг</td>
<td class="p-prim">15кг</td>
</tr>
<tr class="odd">
<td class="exercise">Разводка гантелей лежа</td>
<td class="muscle-group">Грудь</td>
<td class="count">3x10</td>
<td class="l-prim">7кг</td>
<td class="p-prim">8кг</td>
</tr>
<tr>
<td class="exercise">Сгибания с гантелями на бицепс</td>
<td class="muscle-group">Бицепсы</td>
<td class="count">3x10</td>
<td class="l-prim">7кг</td>
<td class="p-prim">8кг</td>
</tr>
<tr class="odd">
<td class="exercise">Нижний блок</td>
<td class="muscle-group">Бицепсы</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">20кг</td>
</tr>
<tr>
<td class="exercise">Пресс</td>
<td class="muscle-group">Пресс</td>
<td class="count">3x10</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr class="odd">
<td class="exercise">Подъем ног в висе</td>
<td class="muscle-group">Пресс</td>
<td class="count">3x10</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr>
<td class="table-head" colspan="3"><b>Четверг: Плечи. Трицепсы.</b></td>
<td class="table-head" colspan="5"><b>Четверг: Плечи. Трицепсы.</b></td>
</tr>
<tr class="odd">
<td class="exercise">Разминка</td>
<td class="muscle-group">Общее</td>
<td class="count">2 минут</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr>
<td class="exercise">Бегит</td>
<td class="muscle-group">Кардио</td>
<td class="count">30 минут</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr class="odd">
<td class="exercise">Гантели перед собой</td>
<td class="muscle-group">Плечи/трицепсы</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">6кг(?)</td>
</tr>
<tr>
<td class="exercise">Подъем гантелей в стороны</td>
<td class="muscle-group">Плечи</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr class="odd">
<td class="exercise">Разводка гантелей в наклоне</td>
<td class="muscle-group">Плечи</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr>
<td class="exercise">Французский жим</td>
<td class="muscle-group">Трицепсы</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr class="odd">
<td class="exercise">Брусья</td>
<td class="muscle-group">Трицепсы</td>
<td class="count">3x10</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr>
<td class="table-head" colspan="3"><b>Суббота: Спина. Ноги.</b></td>
<td class="table-head" colspan="5"><b>Суббота: Спина. Ноги.</b></td>
</tr>
<tr class="odd">
<td class="exercise">Разминка</td>
<td class="muscle-group">Общее</td>
<td class="count">2 минут</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr>
<td class="exercise">Бегит</td>
<td class="muscle-group">Кардио</td>
<td class="count">30 минут</td>
<td class="l-prim">-</td>
<td class="p-prim">-</td>
</tr>
<tr class="odd">
<td class="exercise">Верхний блок</td>
<td class="muscle-group">Спина</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr>
<td class="exercise">Гиперэкстензия</td>
<td class="muscle-group">Спина</td>
<td class="count">3x10</td>
<td class="l-prim">0кг</td>
<td class="p-prim">0кг</td>
</tr>
<tr class="odd">
<td class="exercise">Присяд со штангой</td>
<td class="muscle-group">Ноги</td>
<td class="count">3x10</td>
<td class="l-prim">20кг</td>
<td class="p-prim">20кг</td>
</tr>
<tr>
<td class="exercise">Жим ногами</td>
<td class="muscle-group">Ноги</td>
<td class="count">3x10</td>
<td class="l-prim">50кг</td>
<td class="p-prim">50кг</td>
</tr>
<tr class="odd">
<td class="exercise">Сгибание ног на тренажере</td>
<td class="muscle-group">Ноги</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr>
<td class="exercise">Разгибание ног на тренажере</td>
<td class="muscle-group">Ноги</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
</table>
</section>
@ -162,5 +212,5 @@
</section>
</footer>
</body>
<script src="src/scripts/workout.js"></script>
<script src="src/scripts/index.js"></script>
</html>