diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png new file mode 100644 index 0000000..ea600ae Binary files /dev/null and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png new file mode 100644 index 0000000..06b379c Binary files /dev/null and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..61a448e Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d407d7e --- /dev/null +++ b/css/styles.css @@ -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; + } + diff --git a/css/vibration-master.css b/css/vibration-master.css deleted file mode 100644 index fbd4a43..0000000 --- a/css/vibration-master.css +++ /dev/null @@ -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; - } - diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..b6409e0 Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..d637a0d Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..7997bef Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index a46fe6a..ca2fa0e 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Eugene Serb – Vibration Master + Wavelovers @@ -9,124 +9,76 @@ - - - - + + + + + + + - + - - + + - - - - - - + + + + + + - - - - - - - - - - - - - - - - + + +
- +
-
-

Eugene Serb – Vibration Master

-
-

Vibration Master

-
-
- -
-
-

Device List

-
-
-
-

Disclaimer

-
- - 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. - -
-
+

Wavelovers

+
+
+
-
+
+

Device List

+
+
+
+

Disclaimer

+
+ + 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. + +
+
+
- + diff --git a/js/vibration-master.js b/js/scripts.js similarity index 100% rename from js/vibration-master.js rename to js/scripts.js diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..18717e6 --- /dev/null +++ b/site.webmanifest @@ -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" +} +