Added individual icons, styles, changed names of css and js files, renamed project

This commit is contained in:
Eugene Serb 2022-06-16 18:26:29 +03:00
parent 828e583b7c
commit c1acd450a4
11 changed files with 427 additions and 166 deletions

BIN
android-chrome-192x192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
android-chrome-512x512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

BIN
apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

366
css/styles.css Normal file
View File

@ -0,0 +1,366 @@
/* ------------------------------ */
/* RESET AND BASE STYLES' TUNE UP */
/* ------------------------------ */
@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
*, ::after, ::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Simple colors */
--color-white: #FFFFFF;
--color-black: #000000;
--color-milk: #F5F5F5;
--color-coal: #3C3C3C;
/* ---------------------- */
/* Palette of five colors */
--color-a: #E27396;
--color-b: #EA9AB2;
--color-c: #EFCFE3;
--color-d: #EAF2D7;
--color-e: #B3DEE2;
}
@media (prefers-color-scheme: light) {
:root {
--color-background: var(--color-white);
--color-content-background: var(--color-milk);
--color-logo: var(--color-white);
--color-header: var(--color-coal);
--color-text: var(--color-coal);
--color-link: var(--color-b);
--color-link-hover: var(--color-a);
--color-border: var(--color-a);
--color-selection: var(--color-b);
--color-table-header-background: transparent;
--color-table-header-text: transparent;
--color-table-item: transparent;
--color-anotation: var(--color-coal);
}
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--color-coal);
--color-content-background: var(--color-c);
--color-logo: var(--color-white);
--color-header: var(--color-coal);
--color-text: var(--color-coal);
--color-link: var(--color-b);
--color-link-hover: var(--color-a);
--color-border: var(--color-a);
--color-selection: var(--color-b);
--color-table-header-background: transparent;
--color-table-header-text: transparent;
--color-table-item: transparent;
--color-anotation: var(--color-milk);
}
}
html {
font-family: 'Roboto', sans-serif;
direction: ltr;
font-size: 16px;
line-height: 1.382em;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
background: var(--color-background);
}
::selection {
background: var(--color-selection);
}
:focus-visible {
outline: 2px solid var(--color-selection);
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-header);
font-weight: 500;
margin-block-start: 0.382em;
margin-block-end: 0.618em;
line-height: 1.382em;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }
big { font-size: larger; }
small { font-size: smaller; }
span, p, article, blockquote {
color: var(--color-text);
font-weight: 400;
}
ul {
padding: 16px;
list-style-type: circle;
}
a {
background-color: transparent;
border-bottom: 2px solid transparent;
font-weight: 500;
color: var(--color-link);
text-decoration: none;
}
a:hover {
border-bottom: 2px solid var(--color-link-hover);
color: var(--color-link-hover);
transition: all 0.5s ease;
text-decoration: none;
}
/* ------------- */
/* SERVICE RULES */
/* ------------- */
.hidden {
display: none !important;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.container {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
/* ------ */
/* BANNER */
/* ------ */
.banner-container {
min-height: 100vh;
display: flex;
}
.banner {
margin: auto;
padding: 16px;
}
/* ------------ */
/* ITEMS STYLES */
/* ------------ */
/* ------ */
/* HEADER */
/* ------ */
.header {
border-bottom: 32px solid var(--color-border);
background: var(--color-b);
}
.header-wrapper {
padding-top: 64px;
padding-bottom: 16px;
}
.logo-wrapper {
text-align: center;
}
.logo-wrapper__logo {
font-size: 48px;
font-weight: 500;
color: var(--color-logo);
}
@media only screen and (min-width: 540px) {
.logo-wrapper__logo {
font-size: 64px;
font-weight: 500;
color: var(--color-logo);
}
}
.menu-wrapper {
margin-top: 32px;
align-self: center;
}
.navigation {
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.navigation__item {
font-size: 16px;
text-transform: uppercase;
}
@media only screen and (min-width: 720px) {
.header-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.logo-wrapper {
grid-column: 1 / 2;
grid-row: 1 / 2;
text-align: left;
}
.menu-wrapper {
margin-top: 0px;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
/* ----------------------------------- */
/* MAIN, PAGE FLOW AND CONTENT SECTION */
/* ----------------------------------- */
.page {
flex-grow: 1;
margin-top: 64px;
margin-bottom: 64px;
}
.content {
margin-bottom: 16px;
padding: 32px;
border-radius: 8px;
background: var(--color-content-background);
}
.content__header {
font-size: 1.8em;
margin-top: 0;
margin-bottom: 32px;
padding-left: 16px;
border: 4px solid var(--color-background);
outline: 2px solid var(--color-border);
border-radius: 4px;
color: var(--color-header);
}
/* ------ */
/* FOOTER */
/* ------ */
.footer {
border-top: 4px solid var(--color-a);
background: var(--color-background);
}
.footer-wrapper {
padding-top: 32px;
padding-bottom: 32px;
}
.annotation__text {
color: var(--color-anotation);
}
/* ----------- */
/* WAVE MASTER */
/* ----------- */
.wavelovers {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 16px;
}
.message-box {
text-align: center;
font-size: 18px;
}
.device-box {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
text-align: center;
}
.device-list {
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 16px;
}
.list-item {
max-width: 100%;
padding: 16px;
border: 4px solid var(--color-b);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
}
@media only screen and (min-width: 540px) {
.list-item {
max-width: 50%;
}
}
.list-item_selected {
outline: 2px solid var(--color-border);
}
.list-item__info {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.list-item__info > div {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.controls-banner {
width: 100%;
text-align: center;
}
.controls-banner__list {
display: flex;
flex-direction: column;
justify-content: space-between;
}

View File

@ -1,77 +0,0 @@
/* -------------- */
/* GAMEPAD MASTER */
/* -------------- */
@charset 'UTF-8';
.vibration-master {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 16px;
}
.message-box {
text-align: center;
}
.device-box {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
text-align: center;
}
.device-list {
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 16px;
}
.list-item {
max-width: 100%;
padding: 16px;
border: 4px solid var(--color-background);
outline: 2px solid var(--color-border-alpha);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
}
@media only screen and (min-width: 640px) {
.list-item {
max-width: 50%;
}
}
.list-item_selected {
outline: 2px solid var(--color-border);
}
.list-item__info {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.list-item__info > div {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.controls-banner {
width: 100%;
text-align: center;
}
.controls-banner__list {
display: flex;
flex-direction: column;
justify-content: space-between;
}

BIN
favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 602 B

BIN
favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eugene Serb Vibration Master</title>
<title>Wavelovers</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -9,124 +9,76 @@
<meta name="color-scheme" content="light dark" />
<meta name="robots" content="all" />
<link rel="canonical" href="https://eugene-serb.github.io/vibration-master/" />
<link rel="shortcut icon" type="image/x-icon" href="https://eugene-serb.github.io/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://eugene-serb.github.io/css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/vibration-master.css" />
<link rel="canonical" href="https://wavelovers.ru/" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<meta name="author" content="Eugene Serb" />
<meta name="copyright" content="Eugene Serb, 2021 2022" />
<meta name="copyright" content="Wavelovers, 2022" />
<meta name="publisher-email" content="eugene.serb@gmail.com" />
<meta name="publisher-url" content="https://eugene-serb.github.io/" />
<meta name="keywords" content="Eugene Serb, eugene-serb, eugene_serb, eugene.serb, Evgeniy Serb, Евгений Серб, Novorossiysk, Новороссийск, contacts, CV, resume, portfolio, repositories, services, coder, developer, software engineer, development, frontend, backend, fullstack, Gamepad, Vibration, Vibration Master, Massager, Vibrator" />
<meta name="description" content="This is a simple vibration master." />
<meta name="keywords" content="Wavelovers, Wave Lovers, Wavemaster, Wave Master, Vibration Master, Vibration, Massager, Vibrator, Gamepad, Relax" />
<meta name="description" content="Wavelovers." />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Eugene Serb Vibration Master" />
<meta property="og:site_name" content="Eugene Serb Website" />
<meta property="og:description" content="This is a simple vibration master." />
<meta property="og:url" content="https://eugene-serb.github.io/" />
<meta property="og:image" content="https://eugene-serb.github.io/img/og.png" />
<meta property="vk:image" content="https://eugene-serb.github.io/img/og.png" />
<meta property="og:title" content="Wavelovers" />
<meta property="og:site_name" content="Wavelovers" />
<meta property="og:description" content="Wavelovers." />
<meta property="og:url" content="https://wavelovers.ru/" />
<meta property="og:image" content="https://wavelovers.ru/img/og.png" />
<meta property="vk:image" content="https://wavelovers.ru/img/og.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@eugene_serb" />
<meta name="twitter:title" content="Eugene Serb Vibration Master" />
<meta name="twitter:description" content="This is a simple vibration master." />
<meta name="twitter:image" content="https://eugene-serb.github.io/img/og.png" />
<meta name="google-site-verification" content="qLQbgnmQEfvprDF8WR6oL_b_Qt0R9kKcIEOfHqWlFm8" />
<meta name="yandex-verification" content="e6e0bff7caaa7ecd" />
<meta name="msvalidate.01" content="6E1771734F083E5366205F06314C3577" />
<meta name='wmail-verification' content='46d069b79f9c774ce0bbf55f46aef201' />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4NB4LGNNLB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-4NB4LGNNLB');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- Yandex.Metrika counter -->
<script>
(function (m, e, t, r, i, k, a) {
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(79722217, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
</script>
<!-- /Yandex.Metrika counter -->
<meta name="twitter:title" content="Wavelovers" />
<meta name="twitter:description" content="Wavelovers." />
<meta name="twitter:image" content="https://wavelovers.ru/img/og.png" />
</head>
<body>
<header class="header">
<div class="header-wrapper container">
<div class="logo-wrapper">
<span class="logo-wrapper__logo">Eugene Serb.</span>
<span class="logo-wrapper__logo">Wavelovers</span>
</div>
<nav class="menu-wrapper">
<ul class="navigation">
<li class="navigation__item">
<a href="https://eugene-serb.github.io/" target="_self" class="navigation__link">Home</a>
</li>
<li class="navigation__item">
<a href="https://eugene-serb.github.io/#skills" target="_self" class="navigation__link">Skills</a>
</li>
<li class="navigation__item">
<a href="https://eugene-serb.github.io/services.html" target="_self" class="navigation__link">Services</a>
</li>
<li class="navigation__item">
<a href="https://eugene-serb.github.io/projects.html" target="_self" class="navigation__link">Projects</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="page container">
<h1 class="visually-hidden">Eugene Serb Vibration Master</h1>
<section class="post">
<h2 class="post__header">Vibration Master</h2>
<div class="vibration-master">
<div class="content-item content_bordered message-box">
<span id="message"></span>
</div>
<div id="device-box" class="content-item content_bordered device-box">
<h3>Device List</h3>
<div id="device-list" class="device-list"></div>
</div>
<section class="content-item content_bordered controls-banner">
<h3>Disclaimer</h3>
<div class="controls-banner__list">
<span>
The author of the program code and the publisher is not responsible for the possible consequences of using the program. You use the program at your own risk. Please consult your doctor before using the program.
</span>
</div>
</section>
<h1 class="visually-hidden">Wavelovers</h1>
<div class="wavelovers">
<div class="content message-box">
<span id="message"></span>
</div>
</section>
<div id="device-box" class="content device-box">
<h2>Device List</h2>
<div id="device-list" class="device-list"></div>
</div>
<section class="content controls-banner">
<h2 class="">Disclaimer</h2>
<div class="controls-banner__list">
<span>
The author of the program code and the publisher is not responsible for the possible consequences of using the program. You use the program at your own risk. Check your device for correct operation. Please consult your doctor before using the program.
</span>
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="footer-wrapper container">
<div class="annotation">
<span class="annotation__text">© 2021 2022 Eugene Serb. Content licensed under </span><a href="https://eugene-serb.github.io/vibration-master/LICENSE.md" target="_blank">GNU General Public License v3.0</a><br>
<span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/vibration-master/" target="_blank">Improve this page.</a>
<span class="annotation__text">© 2022 Wavelovers. Content licensed under </span><a href="https://wavelovers.ru/LICENSE.md" target="_blank">GNU General Public License v3.0</a><br>
<span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/wavelovers/" target="_blank">Improve this page.</a>
</div>
</div>
</footer>
<script src="js/vibration-master.js"></script>
<script src="js/scripts.js"></script>
<script src="https://eugene-serb.github.io/js/scripts.js"></script>
<noscript><div><img src="https://mc.yandex.ru/watch/79722217" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</body>

20
site.webmanifest Normal file
View File

@ -0,0 +1,20 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}