zaboal/playroom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

SWITCH do mobile to desktop

Browse source
This commit is contained in:
M_12 2023-04-19 19:02:05 +06:00
parent d8187ac3c6
commit fe4baeddd9
3 changed files with 94 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
source/index.html
View file

@ -10,7 +10,8 @@
<link rel="icon" href="https://org.zaboal.name/assets/logo-playroom_green_black-border.svg" />
</head>
<body>
<body class="desktop">
<!-- DESKTOP_VERSION -->
<div class="main desktop">
<div class="header">
<img src="https://org.zaboal.name/assets/logo-playroom_black.svg" alt="Логотип «Игровой»" />
@ -24,6 +25,22 @@
<h1>Зажигин Богдан Алексеевич · ИНН 519056542114</h1>
</div>
</div>
<!-- MOBILE_VERSION -->
<div class="main mobile">
<div class="header">
<img src="https://org.zaboal.name/assets/logo-playroom_green.svg" alt="Логотип «Игровой»" />
</div>
<div class="body">
<div class="info">
<b>Перезайдите с компьютера. На наших серверах играть можно только с него.</b>
<b>(⌐■_■)</b>
</div>
</div>
<div class="footer">
<h1>Зажигин Богдан Алексеевич</h1>
</div>
</div>
<script src="script.js"></script>
</body>

3
source/script.js
View file

@ -1,6 +1,7 @@
((...m)=>{
var html = () => {
m[1].querySelector('html').innerHTML = `<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Перезайдите с компьютера</title> <style> @import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100;200;300;400;500;600;700;800&display=swap'); :root { --main-b-color: #04030F; --main-g-color: #04F30F; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Martian Mono"; font-size: 6.604747162022703vmin; } html, body { width: 100%; height: 100%; } /* ============MOBILE============ */ /* MAIN_MOBILE_START */ .main.mobile { display: grid; width: 100%; height: 100%; background: var(--main-g-color); grid-template-rows: 3.3023735810113517vmin auto 3.3023735810113517vmin; } /* MAIN_MOBILE_END */ /* MOBILE_HEADER_START */ .main.mobile .header { position: sticky; top: 0; background: var(--main-b-color); } .main.mobile .header img { margin: auto; display: block; padding: 0.8255933952528379vmin 0vmin 0.8255933952528379vmin 0vmin; height: 100%; } /* MOBILE_HEADER_END */ /* MOBILE_FOOTER_START */ .main.mobile .footer { background: var(--main-b-color); color: var(--main-g-color); text-align: center; } .main.mobile .footer h1 { font-size: 1.9263845889232885vmin; letter-spacing: 0.41279669762641896vmin; padding: 0.5159958720330238vmin 0vmin 0.8255933952528379vmin 0vmin; height: 100%; } /* MOBILE_FOOTER_END */ /* MOBILE_BODY_INFO_START */ .main.mobile .body { align-items: center; display: grid; } .main.mobile .body .info { display: grid; width: 65vmin; margin: auto; gap: 6.604747162022703vmin; line-height: 1.25; } .main.mobile .body .info b:nth-child(2) { color: rgba(4, 3, 15, 0.25); } /* MOBILE_BODY_INFO_END */ /* ============MOBILE============ */ </style> <link rel="icon" href="https://org.zaboal.name/assets/logo-playroom_green_black-border.svg" /> </head> <body> <div class="main mobile"> <div class="header"> <img src="https://org.zaboal.name/assets/logo-playroom_green.svg" alt="Логотип «Игровой»" /> </div> <div class="body"> <div class="info"> <b>Перезайдите с компьютера. На наших серверах играть можно только с него.</b> <b>(⌐■_■)</b> </div> </div> <div class="footer"> <h1>Зажигин Богдан Алексеевич</h1> </div> </div> </body> </html>`;
m[1].querySelector('title').innerText = "Перезайдите с компьютера";
m[1].querySelector('body').className = "mobile";
};
if(m[0] === m[0].parent) {
var nv = m[0].navigator.userAgent||m[0].navigator.vendor||m[0].opera;

76
source/style.css
View file

@ -19,10 +19,19 @@ html, body {
height: 100%;
}
/* SWITCH_DESKTOP_MOBILE_START */
body.desktop .main.desktop {
display: grid;
}
body.mobile .main.mobile {
display: grid;
}
/* SWITCH_DESKTOP_MOBILE_END */
/* ============DESKTOP============ */
/* MAIN_SITE_START */
.main.desktop {
display: grid;
display: none;
width: 100%;
min-height: 500vmin;
height: 100%;
@ -171,4 +180,67 @@ html, body {
}
}
/* BODY_INFO_END */
/* ============ERROR============ */
/* ============ERROR============ */
/* ============MOBILE============ */
/* MAIN_MOBILE_START */
.main.mobile {
display: none;
width: 100%;
height: 100%;
background: var(--main-g-color);
grid-template-rows: 3.3023735810113517vmin auto 3.3023735810113517vmin;
}
/* MAIN_MOBILE_END */
/* MOBILE_HEADER_START */
.main.mobile .header {
position: sticky;
top: 0;
background: var(--main-b-color);
}
.main.mobile .header img {
margin: auto;
display: block;
padding: 0.8255933952528379vmin 0vmin 0.8255933952528379vmin 0vmin;
height: 100%;
}
/* MOBILE_HEADER_END */
/* MOBILE_FOOTER_START */
.main.mobile .footer {
background: var(--main-b-color);
color: var(--main-g-color);
text-align: center;
}
.main.mobile .footer h1 {
font-size: 1.9263845889232885vmin;
letter-spacing: 0.41279669762641896vmin;
padding: 0.5159958720330238vmin 0vmin 0.8255933952528379vmin 0vmin;
height: 100%;
}
/* MOBILE_FOOTER_END */
/* MOBILE_BODY_INFO_START */
.main.mobile .body {
align-items: center;
display: grid;
}
.main.mobile .body .info {
display: grid;
width: 65vmin;
margin: auto;
gap: 6.604747162022703vmin;
line-height: 1.25;
}
.main.mobile .body .info b:nth-child(2) {
color: rgba(4, 3, 15, 0.25);
}
/* MOBILE_BODY_INFO_END */
/* ============MOBILE============ */