diff --git a/docs/Allocene/calculator.html b/docs/Allocene/calculator.html new file mode 100644 index 00000000..0e484513 --- /dev/null +++ b/docs/Allocene/calculator.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + Calculator + + + +
+
+
+
+ logo +
+
+ +
+
+ +
+
+
+
+ +
+
+

Calculate Games

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/docs/Allocene/games.html b/docs/Allocene/games.html new file mode 100644 index 00000000..fedd1a76 --- /dev/null +++ b/docs/Allocene/games.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + + Games + + + +
+
+
+
+ logo +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Open game filters

+
+
+
+
+
+
+
+

+ Study project "Games" +

+

+

+
+
+ + + +
    +
    +
    +
    +
    + + + + + + + \ No newline at end of file diff --git a/docs/Allocene/img/check.svg b/docs/Allocene/img/check.svg new file mode 100644 index 00000000..16561a1a --- /dev/null +++ b/docs/Allocene/img/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/Allocene/img/check__black.svg b/docs/Allocene/img/check__black.svg new file mode 100644 index 00000000..03c2fb03 --- /dev/null +++ b/docs/Allocene/img/check__black.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/Allocene/img/check__radio.svg b/docs/Allocene/img/check__radio.svg new file mode 100644 index 00000000..b482d40c --- /dev/null +++ b/docs/Allocene/img/check__radio.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/Allocene/img/icons/logo fb.png b/docs/Allocene/img/icons/logo fb.png new file mode 100644 index 00000000..953bcfff Binary files /dev/null and b/docs/Allocene/img/icons/logo fb.png differ diff --git a/docs/Allocene/img/icons/logo inst.png b/docs/Allocene/img/icons/logo inst.png new file mode 100644 index 00000000..921f9746 Binary files /dev/null and b/docs/Allocene/img/icons/logo inst.png differ diff --git a/docs/Allocene/img/icons/logo link.png b/docs/Allocene/img/icons/logo link.png new file mode 100644 index 00000000..221c8511 Binary files /dev/null and b/docs/Allocene/img/icons/logo link.png differ diff --git a/docs/Allocene/img/image.png b/docs/Allocene/img/image.png new file mode 100644 index 00000000..1766e224 Binary files /dev/null and b/docs/Allocene/img/image.png differ diff --git a/docs/Allocene/img/logo.png b/docs/Allocene/img/logo.png new file mode 100644 index 00000000..3b724d74 Binary files /dev/null and b/docs/Allocene/img/logo.png differ diff --git a/docs/Allocene/img/search.svg b/docs/Allocene/img/search.svg new file mode 100644 index 00000000..4f00f3fc --- /dev/null +++ b/docs/Allocene/img/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/Allocene/index.html b/docs/Allocene/index.html new file mode 100644 index 00000000..2267a3d6 --- /dev/null +++ b/docs/Allocene/index.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + About me + + + +
    +
    +
    +
    + logo +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + img +
    +
    +

    About me

    +

    + Hi! My name is Artur and I'm a Junior Frontend Developer. I am already familiar with main + Web + Technologies like HTML, CSS, JavaScript and Git version control system. +
    +
    + This page was developed during the course 'Frontend for + beginners' from Masters Academy in 2023. +
    +
    + This is a social project from MOCG company where I got an opportunity to work with Frontend + mentors + and to create my own small project for the portfolio. +
    +
    + You can contact me via Linkedin + and/or check out mу GitHub. +

    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/docs/Allocene/login-success.html b/docs/Allocene/login-success.html new file mode 100644 index 00000000..fa6ddfeb --- /dev/null +++ b/docs/Allocene/login-success.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + Success + + + +
    +
    +

    Success!

    + + + +
    +
    + + + \ No newline at end of file diff --git a/docs/Allocene/login.html b/docs/Allocene/login.html new file mode 100644 index 00000000..2f6380d4 --- /dev/null +++ b/docs/Allocene/login.html @@ -0,0 +1,110 @@ + + + + + + + + + + + + + Login + + + +
    +
    +
    +
    + logo +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +

    Login page

    +
    +
    + +
    +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/docs/Allocene/script/burger.js b/docs/Allocene/script/burger.js new file mode 100644 index 00000000..a1fe6d68 --- /dev/null +++ b/docs/Allocene/script/burger.js @@ -0,0 +1,19 @@ +document.addEventListener('DOMContentLoaded', () => { + const menuItems = document.querySelectorAll('[data-type="menu__list-a"]'); + + menuItems.forEach((item) => { + if (item.getAttribute('href') === window.location.pathname) { + item.classList.add('active'); + } + }); +}); + +document.addEventListener('DOMContentLoaded', () => { + const burger = document.querySelector('[data-type="header__burger"]'); + const menu = document.querySelector('[data-type="header__menu-section"]'); + + burger.addEventListener('click', () => { + burger.classList.toggle('active'); + menu.classList.toggle('active'); + }); +}); diff --git a/docs/Allocene/script/calculator.js b/docs/Allocene/script/calculator.js new file mode 100644 index 00000000..473e655c --- /dev/null +++ b/docs/Allocene/script/calculator.js @@ -0,0 +1,82 @@ +/** + * + * @param firstValue string with first number + * @param secondValue string with second number + * @param operation string with operation symbol + * @returns {string|number} result of calculation or error message: + * - if firstValue or secondValue is not a number, return 'Enter a number' + * - if operation is not '+', '-', '*', '/', return 'Choose a valid operation' + * - if the result is more than 100, return 'Result is too big' + * - else return number of result: 1 '+' 2 returns 3 + * +*/ + +function calculate(firstValue, secondValue, operation) { + const num1 = Number(firstValue); + const num2 = Number(secondValue); + const visualInterpritation = document.querySelector('#visualInterpritation'); + const visualTimeDurationExecution = document.querySelector('#visualTimeDurationExecution'); + const startTime = new Date(); + + if (Number.isNaN(num1) || Number.isNaN(num2)) { + visualInterpritation.innerHTML = '

    Enter a number

    '; + return 'Enter a number'; + } + + if (firstValue.trim() === '' || secondValue.trim() === '') { + visualInterpritation.innerHTML = '

    Empty field

    '; + return 'Empty field'; + } + + let result; + switch (operation) { + case '+': + result = num1 + num2; + break; + case '-': + result = num1 - num2; + break; + case '*': + result = num1 * num2; + break; + case '/': + if (num2 === 0) { + visualInterpritation.innerHTML = '

    Division by zero is not allowed

    '; + return 'Division by zero is not allowed'; + } + result = num1 / num2; + break; + default: + visualInterpritation.innerHTML = '

    Choose a valid operation

    '; + return 'Choose a valid operation'; + } + + if (result > 100) { + visualInterpritation.innerHTML = '

    Too many games

    '; + return 'Result is too big'; + } + + if (result > 1 || result < -1 || result % 2 === 0) { + result = `${result} games`; + } else { + result = `${result} game`; + } + visualInterpritation.innerHTML = `

    ${num1}

    ${operation}

    ${num2}

    =

    ${result}

    `; + + const endTime = new Date(); + const executionTime = endTime - startTime; + + const timeFormatOptions = { hour: '2-digit', minute: '2-digit' }; + const formattedTime = new Intl.DateTimeFormat('uk-UA', timeFormatOptions).format(startTime); + + const day = startTime.getDate(); + const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(startTime); + const year = startTime.getFullYear(); + + const timestampString = `Date of calculation: ${day}-${month}-${year}, ${formattedTime}. Time of function execution: ${executionTime}ms`; + visualTimeDurationExecution.innerHTML = timestampString; + + return result; +} + +window.calculate = calculate; diff --git a/docs/Allocene/script/filters.js b/docs/Allocene/script/filters.js new file mode 100644 index 00000000..c23599bd --- /dev/null +++ b/docs/Allocene/script/filters.js @@ -0,0 +1,36 @@ +const searchContainer = document.querySelector('[data-type="search"]'); +const genreSelect = document.querySelector('select[name="genre"]'); +const searchInput = document.querySelector('[data-type="inp-search"]'); +const mainElement = document.querySelector('[data-type="main-games"]'); +const plateText = document.querySelector('[data-type="plate"]'); + +document.addEventListener('DOMContentLoaded', () => { + function toggleSearchVisibility() { + if (searchContainer.classList.contains('search-hidden')) { + searchContainer.classList.remove('search-hidden'); + plateText.textContent = 'Close game filters'; + } else { + searchContainer.classList.add('search-hidden'); + plateText.textContent = 'Open game filters'; + } + } + + searchContainer.addEventListener('click', (event) => { + event.stopPropagation(); + toggleSearchVisibility(); + }); + + genreSelect.addEventListener('click', (event) => { + event.stopPropagation(); + }); + + searchInput.addEventListener('click', (event) => { + event.stopPropagation(); + }); + + mainElement.addEventListener('click', () => { + if (!searchContainer.classList.contains('search-hidden')) { + toggleSearchVisibility(); + } + }); +}); diff --git a/docs/Allocene/script/games.js b/docs/Allocene/script/games.js new file mode 100644 index 00000000..8a67c514 --- /dev/null +++ b/docs/Allocene/script/games.js @@ -0,0 +1,190 @@ +const queryParams = { + genre: '', + shooter: '&category=shooter', + arpg: '&category=action-rpg', + battleRoyale: '&category=battle-royale', + strategy: '&category=strategy', + mmorpg: '&category=mmorpg', + fighting: '&category=fighting', + allgames: '', + platform: '&platform=pc', + online: '&platform=browser', + newGames: '&sort-by=release-date', + oldGames: '&sort-by=alphabetical', +}; + +const checkNew = document.querySelector('[data-type="check-new"]'); +const checkOld = document.querySelector('[data-type="check-old"]'); +const radioPlatform = document.querySelector('[data-type="platform-radio"]'); +const radioOnline = document.querySelector('[data-type="online-radio"]'); +const searchField = document.querySelector('[data-type="inp-search"]'); +const noFound = document.querySelector('[data-type="text-h2"]'); + +function createCardElement(game) { + const template = document.querySelector('template[data-type="card-template"]'); + const cardCopy = document.importNode(template.content, true); + + const imageElement = cardCopy.querySelector('[data-type="image"] img'); + imageElement.src = game.thumbnail; + + cardCopy.querySelector('[data-type="title"]').innerText = game.title; + + const descriptionElement = cardCopy.querySelector('[data-type="description"]'); + const maxDescriptionLength = 54; + if (game.short_description.length > maxDescriptionLength) { + descriptionElement.innerText = `${game.short_description.slice(0, maxDescriptionLength)}...`; + descriptionElement.style.cursor = 'pointer'; + + let descriptionVisible = false; + descriptionElement.addEventListener('click', () => { + if (descriptionVisible) { + descriptionElement.innerText = `${game.short_description.slice(0, maxDescriptionLength)}...`; + } else { + descriptionElement.innerText = game.short_description; + } + + descriptionVisible = !descriptionVisible; + }); + } else { + descriptionElement.innerText = game.short_description; + } + + const descriptionList = cardCopy.querySelector('[data-type="short-description"]'); + descriptionList.innerHTML = `
  • Genre: ${game.genre}
    • +
  • Platform: ${game.platform}
    • +
  • Publisher: ${game.publisher}
    • +
  • Developer: ${game.developer}
    • +
  • Release date: ${game.release_date}
    • `; + + return cardCopy; +} + +const apiUrl = 'https://mmo-games.p.rapidapi.com/games?'; +const ulContainer = document.querySelector('[data-type="cards-container"]'); + +async function renderCards(container, genre) { + const url = new URL(`${apiUrl}${genre}`); + + const options = { + method: 'GET', + mode: 'cors', + cache: 'no-cache', + headers: { + 'X-RapidAPI-Key': '1c3169c707mshb51bff34cbc9ff6p1749b9jsn648a19134256', + 'X-RapidAPI-Host': 'mmo-games.p.rapidapi.com', + }, + }; + + try { + const response = await fetch(url, options); + const gamesList = await response.json(); + + container.innerHTML = ''; + + const limitedGames = gamesList.length > 50 ? gamesList.slice(0, 50) : gamesList; + + limitedGames.forEach(async (game) => { + const cardElement = await createCardElement(game); + container.appendChild(cardElement); + }); + } catch (error) { + console.error('Error fetching games:', error); + } +} + +function genreFilter(params) { + const selectElement = document.getElementById('genre'); + const selectedGenreNow = selectElement.value; + return params[selectedGenreNow] || params.allgames; +} + +function buildDynamicUrl(params) { + const dynamicUrl = genreFilter(params); + const platform = document.querySelector('[data-type="platform-radio"]').checked + ? params.platform + : ''; + const online = document.querySelector('[data-type="online-radio"]').checked + ? params.online + : ''; + const newGames = document.querySelector('[data-type="check-new"]').checked + ? params.newGames + : ''; + const oldGames = document.querySelector('[data-type="check-old"]').checked + ? params.oldGames + : ''; + + return `${params.genre}${dynamicUrl}${platform}${online}${newGames}${oldGames}`; +} + +async function reRenderCards() { + const dynamicUrl = buildDynamicUrl(queryParams); + await renderCards(ulContainer, dynamicUrl); +} + +const selectElement = document.querySelector('[data-type="genre-select"]'); +selectElement.addEventListener('change', async () => { + await reRenderCards(); +}); + +function radioFilter(params) { + radioPlatform.addEventListener('change', async () => { + params.dynamicUrl = radioPlatform.checked ? params.platform : params.allgames; + await reRenderCards(); + }); + + radioOnline.addEventListener('change', async () => { + params.dynamicUrl = radioOnline.checked ? params.online : params.allgames; + await reRenderCards(); + }); +} + +function checkboxFilter(params) { + let dynamicUrl = params.allgames; + + checkNew.addEventListener('change', async () => { + dynamicUrl = checkNew.checked ? params.newGames : params.allgames; + await reRenderCards(); + }); + + checkOld.addEventListener('change', async () => { + dynamicUrl = checkOld.checked ? params.oldGames : params.allgames; + await reRenderCards(); + }); + + renderCards(ulContainer, dynamicUrl); +} + +function searchFilter() { + function applySearchFilter() { + const searchTerm = searchField.value.toLowerCase(); + const cards = document.querySelectorAll('.game__cod2'); + console.log(searchTerm); + + let anyCardFound = false; + + cards.forEach((card) => { + const title = card.querySelector('[data-type="title"]').textContent.toLowerCase(); + const description = card.querySelector('[data-type="description"]').textContent.toLowerCase(); + + if (title.includes(searchTerm) || description.includes(searchTerm)) { + card.style.display = 'block'; + anyCardFound = true; + } else { + card.style.display = 'none'; + } + }); + noFound.innerText = anyCardFound ? '' : 'No results found!'; + } + + searchField.addEventListener('input', applySearchFilter); +} + +async function init(params) { + await reRenderCards(params); + genreFilter(params); + radioFilter(params); + checkboxFilter(params); + searchFilter(); +} + +init(queryParams); diff --git a/docs/Allocene/script/script.js b/docs/Allocene/script/script.js new file mode 100644 index 00000000..f82b338b --- /dev/null +++ b/docs/Allocene/script/script.js @@ -0,0 +1,13 @@ +const FIRST_VALUE_ELEMENT = document.getElementById('firstValue'); +const SECOND_VALUE_ELEMENT = document.getElementById('secondValue'); +const OPERATION_ELEMENT = document.getElementById('operation'); +const CALCULATE_BUTTON_ELEMENT = document.getElementById('calculate'); +const RESULT_ELEMENT = document.getElementById('result'); + +CALCULATE_BUTTON_ELEMENT.addEventListener('click', () => { + const firstValue = FIRST_VALUE_ELEMENT.value; + const secondValue = SECOND_VALUE_ELEMENT.value; + const operation = OPERATION_ELEMENT.value; + + RESULT_ELEMENT.innerText = window.calculate(firstValue, secondValue, operation); +}); diff --git a/docs/Allocene/script/validate.js b/docs/Allocene/script/validate.js new file mode 100644 index 00000000..c89e139a --- /dev/null +++ b/docs/Allocene/script/validate.js @@ -0,0 +1,106 @@ +const EMAIL_INPUT_ID = 'email'; +const PASSWORD_INPUT_ID = 'password'; +const NOT_A_ROBOT_CHECKBOX_ID = 'checkbox'; +const SUBMIT_BUTTON_ID = 'button'; +const ERRORS_CONTAINER_CHECKBOX_ID = 'errors-container-checkbox'; +const ERRORS_CONTAINER_PASSWORD_ID = 'errors-container-password'; +const ERRORS_CONTAINER_EMAIL_ID = 'errors-container-email'; +const RESULT_PAGE_PATH = './login-success.html'; + +const submitButton = document.getElementById(SUBMIT_BUTTON_ID); + +/** + * Return input value by id. + * @param {string} elementId + * @return {string|boolean} input value + */ +function getValueById(elementId) { + const element = document.getElementById(elementId); + const type = element.getAttribute('type'); + return type === 'checkbox' ? element.checked : element.value; +} + +/** + * Add errors to errors container. + * @param {Object} inputData in format like: { [input_id]: error_text, ... } + */ + +function setErrors(errorContainerId, error) { + const errorContainerElement = document.getElementById(errorContainerId); + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); +} + +const inputData = { + [EMAIL_INPUT_ID]: 'Email must be in format email@localDomen.domen', + [PASSWORD_INPUT_ID]: 'Password must be from 8 to 12 characters', + [NOT_A_ROBOT_CHECKBOX_ID]: 'Please check the checkbox', +}; + +/** + * Delete all errors from errors container. + */ +function deleteErrors() { + const errorContainerCheckboxElement = document.getElementById(ERRORS_CONTAINER_CHECKBOX_ID); + const errorContainerPasswordElement = document.getElementById(ERRORS_CONTAINER_PASSWORD_ID); + const errorContainerEmailElement = document.getElementById(ERRORS_CONTAINER_EMAIL_ID); + errorContainerCheckboxElement.replaceChildren(); + errorContainerPasswordElement.replaceChildren(); + errorContainerEmailElement.replaceChildren(); +} + +/** + * Goes to the page with the result. + */ +function navigateToResultPage() { + window.location.href = RESULT_PAGE_PATH; +} + +function isEmail(email) { + return /\S+@\S+\.\S+/.test(email); +} + +function removeSpaces(email) { + return email.replace(/\s+/g, ''); +} + +function replaceEmailText(inputEmailElement, newEmailText) { + inputEmailElement.value = newEmailText; +} + +function validateForm() { + deleteErrors(); + + const email = getValueById(EMAIL_INPUT_ID); + const password = getValueById(PASSWORD_INPUT_ID); + const isChecked = getValueById(NOT_A_ROBOT_CHECKBOX_ID); + + let isValid = true; + + replaceEmailText(document.getElementById(EMAIL_INPUT_ID), removeSpaces(email)); + + if (!email.length || !isEmail(email)) { + setErrors(ERRORS_CONTAINER_EMAIL_ID, inputData[EMAIL_INPUT_ID]); + isValid = false; + } + + if (!password.length || password.length < 8 || password.length > 12) { + setErrors(ERRORS_CONTAINER_PASSWORD_ID, inputData[PASSWORD_INPUT_ID]); + isValid = false; + } + + if (!isChecked) { + setErrors(ERRORS_CONTAINER_CHECKBOX_ID, inputData[NOT_A_ROBOT_CHECKBOX_ID]); + isValid = false; + } + + if (!isValid) { + return; + } + + navigateToResultPage(); +} + +submitButton.onclick = validateForm; diff --git a/docs/Allocene/style/font.css b/docs/Allocene/style/font.css new file mode 100644 index 00000000..29258442 --- /dev/null +++ b/docs/Allocene/style/font.css @@ -0,0 +1,12 @@ +*::before, +*::after { + box-sizing: border-box; +} + +body { + height: 100%; + font-family: "Roboto", sans-serif; + margin: 0; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/docs/Allocene/style/footer.css b/docs/Allocene/style/footer.css new file mode 100644 index 00000000..40e06d53 --- /dev/null +++ b/docs/Allocene/style/footer.css @@ -0,0 +1,186 @@ +.footer { + width: 100%; + background-color: #1C2321; + margin-top: auto; + height: 160px; +} + +.footer__container { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.footer__content { + width: 90%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.copyright { + color: #EEF1EF; + margin-bottom: 0; + font-weight: 400; + line-height: 32px; + font-size: 22px; + text-align: center; +} + +.social__icon { + height: 42px; + width: 192px; + padding: 0; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + gap: 33px; + position: relative; + list-style-type: none; +} + +.icon__fb { + background-color: #FFF; + height: 42px; + width: 42px; + border-radius: 50%; +} + +.icon__fb-img { + background-color: #FFF; + height: 20px; + width: 20px; + left: 11px; + top: 11px; + position: absolute; +} + +.icon__link { + background-color: #FFF; + height: 42px; + width: 42px; + border-radius: 50%; +} + +.icon__link-img { + background-color: #FFF; + height: 20px; + width: 20px; + left: 86px; + top: 11px; + position: absolute; +} + +.icon__inst { + background-color: #FFF; + height: 42px; + width: 42px; + border-radius: 50%; +} + +.icon__inst-img { + background-color: #FFF; + height: 20px; + width: 20px; + left: 161px; + top: 11px; + position: absolute; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .footer { + width: 100%; + background-color: #1C2321; + margin-top: auto; + height: 120px; + min-width: 400px; + } + + .copyright { + color: #EEF1EF; + margin-top: 0; + margin-bottom: 3px; + font-weight: 400; + line-height: 20px; + font-size: 12px; + text-align: center; + } + + .social__icon { + height: 42px; + width: 192px; + padding: 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 33px; + position: relative; + list-style-type: none; + } + + .icon__fb { + background-color: #FFF; + height: 30px; + width: 30px; + border-radius: 50%; + } + + .icon__fb-img { + background-color: #FFF; + height: 18px; + width: 18px; + left: 24px; + top: 12px; + position: absolute; + } + + .icon__link { + background-color: #FFF; + height: 30px; + width: 30px; + border-radius: 50%; + } + + .icon__link-img { + background-color: #FFF; + height: 18px; + width: 18px; + left: 87px; + top: 12px; + position: absolute; + } + + .icon__inst { + background-color: #FFF; + height: 30px; + width: 30px; + border-radius: 50%; + } + + .icon__inst-img { + background-color: #FFF; + height: 18px; + width: 18px; + left: 150px; + top: 12px; + position: absolute; + } +} + +@media screen and (min-width: 768px) and (max-width: 1023px) { + + .copyright { + color: #EEF1EF; + margin-top: 0; + margin-bottom: 5px; + font-weight: 400; + line-height: 28px; + font-size: 18px; + text-align: center; + } +} \ No newline at end of file diff --git a/docs/Allocene/style/header.css b/docs/Allocene/style/header.css new file mode 100644 index 00000000..929c3285 --- /dev/null +++ b/docs/Allocene/style/header.css @@ -0,0 +1,178 @@ +.header { + position: fixed; + width: 100%; + top: 0; + left: 0; + height: 70px; + background-color: #EF4934; + z-index: 1; +} + +.header__box { + display: flex; + align-items: center; + height: 100%; +} + +.header__box-content { + display: flex; + justify-content: space-between; + align-items: center; + width: 90%; + margin: 0 auto; +} + +.header__logo-section { + display: flex; + align-items: center; +} + +.logo-section__img { + width: 50px; + cursor: pointer; +} + +.header__menu-section { + display: flex; + align-items: center; +} + +.menu__list-a { + text-decoration: none; + color: #FFF; +} + +.menu__list-a:active { + transition: all .3s; + color: #FFF; + padding-bottom: 7px; + border-bottom: 1px solid #FFF; +} + +.menu__list-a:hover { + transition: all .3s; + color: #FFF; + padding-bottom: 7px; + border-bottom: 1px solid #FFF; +} + +.menu__list { + display: flex; +} + +.menu__list-li { + list-style: none; + margin: 0 0 0 50px; +} + +.menu__list-link { + font-size: 16px; + text-decoration: none; +} + +.header__burger { + display: none; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .header { + height: 60px; + } + + .header__burger { + display: flex; + position: relative; + z-index: 5; + align-items: center; + justify-content: flex-end; + width: 30px; + height: 18px; + } + + .header__burger-span { + height: 2.5px; + width: 80%; + transform: scale(1); + background-color: #DAD0CC; + } + + .header__burger::before, + .header__burger::after { + content: ""; + position: absolute; + height: 2.5px; + width: 100%; + background-color: #DAD0CC; + transition: all .3s ease-in-out; + } + + .header__burger::before { + top: 0; + } + + .header__burger::after { + bottom: 0; + } + + .header__burger.active span { + transform: scale(0); + } + + .header__burger.active::before { + top: 50%; + transform: rotate(-45deg) translate(0, -50%); + } + + .header__burger.active::after { + bottom: 50%; + transform: rotate(45deg) translate(0, 50%); + } + + .header__menu-section { + display: none; + } + + .header__menu-section.active { + display: flex; + flex-direction: column; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 5; + background-color: rgba(0, 0, 0, .767); + animation: burgerAnimation .4s; + } + + .header__menu-section ul { + flex-direction: column; + align-items: center; + } + + .header__menu-section ul li { + align-items: center; + margin-top: 45px; + margin-right: 45px; + } + + .header__menu-section ul li a { + font-size: 24px; + } + + .header__menu-section ul li:first-child { + margin-top: 200px; + } + + @keyframes burgerAnimation { + + from { + opacity: 0; + } + + to { + opacity: 1; + } + } +} \ No newline at end of file diff --git a/docs/Allocene/style/main-about.css b/docs/Allocene/style/main-about.css new file mode 100644 index 00000000..239337bc --- /dev/null +++ b/docs/Allocene/style/main-about.css @@ -0,0 +1,143 @@ +@import url("./header.css"); +@import url("./footer.css"); +@import url("./font.css"); + +.main { + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 160px); + min-width: 400px; +} + +.contain { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 140px; +} + +.content { + width: 90%; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 68px; + justify-content: center; + margin-bottom: 150px; +} + +.image { + align-items: start; +} + +.text__heading { + margin-top: 0; + color: #221F1F; + font-size: 48px; + line-height: 32px; + font-weight: 700; +} + +.text__chapter { + color: #221F1F; + font-size: 22px; + line-height: 32px; + font-weight: 400; +} + +.text__chapter .text__link { + color: #EF4934; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .content { + width: 90%; + display: grid; + grid-template-columns: 1fr; + align-items: center; + justify-content: center; + } + + .image { + display: flex; + align-items: center; + justify-content: center; + } + + .image__img { + width: calc(90%); + height: auto; + } + + .text__heading { + margin-top: 0; + color: #221F1F; + font-size: 24px; + line-height: 32px; + font-weight: 700; + text-align: center; + } + + .text__chapter { + color: #221F1F; + font-size: 14px; + line-height: 20px; + font-weight: 400; + text-align: center; + } +} + +@media screen and (min-width: 767px) and (max-width: 1023px) { + + .content { + width: 90%; + display: grid; + grid-template-columns: 1fr; + align-items: center; + justify-content: center; + margin-bottom: 100px; + } + + .image { + display: flex; + align-items: center; + justify-content: center; + } + + .text__heading { + margin-top: 0; + color: #221F1F; + font-size: 48px; + line-height: 32px; + font-weight: 700; + text-align: center; + } + + .text__chapter { + color: #221F1F; + font-size: 22px; + line-height: 32px; + font-weight: 400; + text-align: center; + } +} + +@media screen and (min-width: 1023px) { + + .content { + width: 90%; + display: grid; + grid-template-columns: 1fr 1fr; + margin-bottom: 100px; + } + + .image { + max-width: 600px; + } + + .text { + max-width: 600px; + } +} \ No newline at end of file diff --git a/docs/Allocene/style/main-calculator.css b/docs/Allocene/style/main-calculator.css new file mode 100644 index 00000000..46ffe2de --- /dev/null +++ b/docs/Allocene/style/main-calculator.css @@ -0,0 +1,256 @@ +@import url("./header.css"); +@import url("./footer.css"); +@import url("./font.css"); + +.main { + width: 100%; + display: flex; + align-items: flex-start; + justify-content: center; + min-height: calc(100vh - 160px); + min-width: 400px; +} + +.contain { + width: 90%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 70px; + margin-right: 53px; + margin-left: 53px; +} + +.main__heading { + font-size: 48px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0; + text-align: center; + margin-top: 80px; + margin-bottom: 60px; +} + +.content { + width: 100%; + display: flex; + align-items: start; + justify-content: center; + flex-direction: column; +} + +.field { + display: flex; +} + +.item { + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.item__lable { + font-size: 22px; + font-weight: 600; + line-height: 26px; + letter-spacing: 0; + text-align: left; + margin: 0; + padding: 0; +} + +.inp { + box-sizing: border-box; + text-align: center; + height: 36px; + width: 122px; + font-size: 14px; + border-radius: 6px; + outline: 0; + border: solid .6px #A9A9A9; + padding: 0; + margin-top: 22px; + margin-right: 16px; + margin-bottom: 0; + margin-left: 0; +} + +.inp__select { + height: 36px; + width: 122px; + font-size: 14px; + border-radius: 6px; + outline: 0; + border: solid .6px #A9A9A9; + padding-left: 12px; + margin-right: 16px; +} + +.button { + height: 36px; + width: 122px; + font-size: 14px; + border-radius: 6px; + margin-right: 16px; + outline: 0; + border: 0; + color: #FFF; + background-color: #EF4934; + transition: background-color .2s ease-in-out; +} + +.button:hover { + background-color: #CD412F; +} + +.result { + display: flex; + align-items: center; + flex-direction: row; + height: 36px; + margin-top: 22px; + font-size: 24px; + font-weight: 400; + line-height: 21px; +} + +.visualTimeDurationExecution { + font-weight: 600; + line-height: 48px; + letter-spacing: 0; +} + +.visualInterpritation { + display: flex; + align-items: center; + flex-direction: row; + margin-top: 60px; +} + +.visualInterpritation h1 { + font-size: 48px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0; + padding-right: 80px; + color: #EF4934; +} + +.visualInterpritation h1::first-letter { + padding-left: 25px; +} + +@media screen and (min-width: 1px) and (max-width: 915px) { + + .content, + .visualInterpritation, + .item, + .inp__select, + .inp, + .button { + width: calc(100%); + } + + .contain { + margin-bottom: 50px; + } + + .field { + display: flex; + width: auto; + } + + .main__heading { + font-size: 24px; + font-weight: 700; + line-height: 24px; + letter-spacing: 0; + text-align: center; + margin-top: 40px; + margin-bottom: 30px; + } + + .visualTimeDurationExecution { + text-align: center; + margin-top: 10px; + font-weight: 600; + line-height: 20px; + letter-spacing: 0; + font-size: 14px; + } + + .visualInterpritation { + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + margin-top: 0; + text-align: center; + } + + .visualInterpritation h1 { + font-size: 24px; + font-weight: 700; + line-height: 24px; + letter-spacing: 0; + padding-right: 0; + color: #EF4934; + } + + .inp { + box-sizing: border-box; + text-align: center; + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + font-size: 14px; + margin-top: 22px; + margin-right: 16px; + } + + .inp__select { + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + padding-left: 12px; + margin-right: 16px; + } + + .button { + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + font-size: 14px; + border-radius: 6px; + margin-right: 10px; + outline: 0; + border: 0; + color: #FFF; + background-color: #EF4934; + transition: background-color .2s ease-in-out; + } + + .result { + display: flex; + align-items: center; + flex-direction: row; + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + margin-top: 22px; + font-size: 14px; + font-weight: 400; + line-height: 10px; + } + + .item__lable { + font-size: 12px; + font-weight: 600; + line-height: 26px; + letter-spacing: 0; + text-align: left; + margin: 0; + padding: 0; + } +} \ No newline at end of file diff --git a/docs/Allocene/style/main-games.css b/docs/Allocene/style/main-games.css new file mode 100644 index 00000000..a9bab870 --- /dev/null +++ b/docs/Allocene/style/main-games.css @@ -0,0 +1,688 @@ +@import url("./header.css"); +@import url("./footer.css"); +@import url("./font.css"); + +.search { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + height: 60px; + width: 100%; + margin-top: 70px; + background-color: #221F1F; + color: #FFF; +} + +.search__contain { + display: flex; + align-items: center; + justify-content: center; + width: 90%; +} + +.search__form { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; +} + +.genre { + border-radius: 6px; + color: #FFF; + background-color: #333; + width: 114px; + height: 36px; + border: 0; + outline: 0; + font-size: 14px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0; + text-align: left; + padding-left: 12px; +} + +.option { + color: #221F1F; + background-color: #A9A9A9; + font-size: 14px; + font-weight: 400; + line-height: 21px; +} + +.radio { + display: flex; + gap: 32px; +} + +.inp__radio { + height: 0; + width: 0; + opacity: 0; + position: absolute; + font-size: 14px; + font-weight: 400; + line-height: 21px; +} + +.custom__radio { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + background-color: #221F1F; + border: solid 1px #FFF; + border-radius: 50%; + margin-right: 12px; + vertical-align: sub; +} + +.custom__radio::before { + content: " "; + display: inline-block; + width: 8px; + height: 8px; + background-image: url("../img/check__radio.svg"); + background-size: contain; + background-repeat: no-repeat; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + transition: .2s ease-in; +} + +.inp__radio:checked+.custom__radio::before { + transform: translate(-50%, -50%) scale(1); +} + +.checkbox { + display: flex; + gap: 32px; +} + +.inp__check { + height: 0; + width: 0; + opacity: 0; + position: absolute; + font-size: 14px; + font-weight: 400; +} + +.custom__check { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + background-color: #221F1F; + border: solid 1px #FFF; + border-radius: 6px; + margin-right: 12px; + vertical-align: sub; +} + +.custom__check::before { + content: " "; + display: inline-block; + width: 15px; + height: 15px; + background-image: url("../img/check__black.svg"); + background-size: contain; + background-repeat: no-repeat; + position: absolute; + left: 50%; + top: 50%; + margin-top: 2px; + transform: translate(-50%, -50%) scale(0); + transition: .2s ease-in; +} + +.inp__check:checked+.custom__check::before { + transform: translate(-50%, -50%) scale(1); +} + +.inp__search { + width: 342px; + height: 36px; + padding-left: 46px; + border: none; + outline: 0; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + font-size: 14px; + font-weight: 400; + line-height: 21px; + float: left; +} + +.inp__search { + background-image: url("../img/search.svg"); + background-position: left 12px center; + background-repeat: no-repeat; +} + +.search__button { + width: 75px; + height: 36px; + padding: 13px, 20px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + border: none; + background-color: #EF4934; + color: #FFF; + font-size: 14px; + font-weight: 400; + line-height: 21px; + float: left; +} + +.main { + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 160px); + width: 100%; + min-width: 400px; +} + +.contain { + margin-top: 180px; + width: 90%; +} + +.content { + width: 100%; + display: flex; + flex-direction: column; + margin-bottom: 100px; +} + +.text__heading { + margin-top: 0; + color: #221F1F; + font-size: 48px; + line-height: 32px; + font-weight: 700; +} + +.game__cod2 { + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + background-color: #ECECEC; + padding: 12px 12px 22px; + border-radius: 12px; +} + +.cod2__general { + display: flex; + flex-direction: row; + gap: 12px; +} + +.cod2__general--image { + height: 90px; + width: 90px; + border-radius: 9px; + object-fit: cover; +} + +.cod2__general--desc { + display: flex; + flex-direction: column; + gap: 12px; + width: 149px; +} + +.cod2__general--desc h3 { + font-size: 18px; + margin: 0; +} + +.cod2__general--desc p { + font-size: 14px; + margin: 0; +} + +.cod2__description { + font-size: 14px; + text-align: start; + padding: 0; + margin: 0; +} + +.cod2__description li b { + font-weight: 700; +} + +.cod2__description li { + font-weight: 400; + list-style-type: none; + margin-top: 12px; + margin-bottom: 12px; + margin-left: 22px; +} + +.cod2__description li:last-child { + margin-bottom: 0; +} + +.cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 25px; + padding-left: 0; +} + +@keyframes loadingAnimation { + + 0% { + content: "Loading"; + } + + 25% { + content: "Loading."; + } + + 50% { + content: "Loading.."; + } + + 75% { + content: "Loading..."; + } +} + +[data-type="cards-container"]:empty::before { + content: "Loading..."; + animation: loadingAnimation 1s infinite; +} + +@media screen and (min-width: 1px) and (max-width: 768px) { + + .contain { + width: calc(90%); + margin-top: 130px; + } + + .game__cod2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + align-items: center; + justify-content: center; + width: calc(100% - 25px); + background-color: #ECECEC; + padding: 12px 12px 22px; + border-radius: 12px; + } + + .cod2__general { + display: grid; + grid-template-rows: 1fr 1fr; + align-items: center; + justify-content: center; + } + + .cod2__description { + text-align: start; + } + + .cod2__general--image { + max-width: 100%; + height: auto; + width: 100%; + max-height: 120px; + border-radius: 9px; + object-fit: cover; + } + + .cod2__general--desc { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + gap: 12px; + } + + .cod2__general--desc h3 { + font-size: 18px; + margin: 0; + } + + .cod2__general--desc p { + font-size: 14px; + text-align: center; + } + + .search__contain { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .cards-container { + display: grid; + grid-template-columns: 1fr; + margin: 0; + } + + .search { + height: 220px; + margin-top: 50px; + background-color: #221F1FEE; + transition: margin-top .3s ease, opacity .3s ease, max-height .3s ease; + } + + .search-hidden { + margin-top: -110px; + opacity: 1; + max-height: 220px; + } + + .plate__h3 { + margin-bottom: 0; + } + + .search__form { + display: flex; + flex-direction: column; + gap: 15px; + } + + .genre { + width: 100px; + } + + .inp__search { + height: 30px; + width: 200px; + } + + .search__button { + height: 30px; + width: 70px; + } + + .text__heading { + text-align: center; + font-size: 28px; + } + + .radio { + gap: 10px; + } + + .custom__radio { + height: 15px; + width: 15px; + border-radius: 50%; + margin-right: 12px; + } + + .form__radio { + font-size: 15px; + } + + .checkbox { + gap: 10px; + } + + .custom__check { + height: 15px; + width: 15px; + border-radius: 6px; + margin-right: 12px; + } + + .form__checkbox { + font-size: 15px; + } +} + +@media screen and (min-width: 768px) and (max-width: 930px) { + + .contain { + width: calc(90%); + margin-top: 150px; + } + + .game__cod2 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: calc(100% - 25px); + background-color: #ECECEC; + padding: 12px 12px 22px; + border-radius: 12px; + } + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 25px; + } + + .search__contain { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .search { + height: 220px; + margin-top: 70px; + background-color: #221F1FEE; + transition: margin-top .3s ease, opacity .3s ease, max-height .3s ease; + } + + .search__form { + display: flex; + flex-direction: column; + gap: 15px; + } + + .search-hidden { + margin-top: -100px; + opacity: 1; + max-height: 220px; + } + + .plate h3 { + margin-bottom: 0; + } + + .genre { + width: 70px; + } + + .inp__search { + height: 30px; + width: 200px; + } + + .search__button { + height: 30px; + width: 50px; + } + + .text__heading { + text-align: center; + font-size: 38px; + } + + .cod2__general--image { + height: 80px; + width: 80px; + } + + .radio { + gap: 10px; + } + + .custom__radio { + height: 15px; + width: 15px; + border-radius: 50%; + margin-right: 12px; + } + + .form__radio { + font-size: 15px; + } + + .checkbox { + gap: 10px; + } + + .custom__check { + height: 15px; + width: 15px; + border-radius: 6px; + margin-right: 12px; + } + + .form__checkbox { + font-size: 15px; + } +} + +@media screen and (min-width: 930px) and (max-width: 1307px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 25px; + } + + .search { + height: 55px; + margin-top: 70px; + } + + select[name="genre"] { + width: 70px; + } + + .inp__search { + height: 30px; + width: 200px; + } + + .search__button { + height: 30px; + width: 50px; + } + + .text__heading { + text-align: center; + font-size: 38px; + } + + .cod2__general--image { + height: 80px; + width: 80px; + } + + .radio { + gap: 10px; + } + + .custom__radio { + height: 15px; + width: 15px; + border-radius: 50%; + margin-right: 12px; + } + + .form__radio { + font-size: 15px; + } + + .checkbox { + gap: 10px; + } + + .custom__check { + height: 15px; + width: 15px; + border-radius: 6px; + margin-right: 12px; + } + + .form__checkbox { + font-size: 15px; + } + + .plate { + display: none; + } +} + +@media screen and (min-width: 1307px) and (max-width: 1700px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } + + .inp__search { + width: 250px; + } +} + +@media screen and (min-width: 1700px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } +} + +@media screen and (min-width: 1900px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } +} + +@media screen and (min-width: 2500px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } +} \ No newline at end of file diff --git a/docs/Allocene/style/main-login.css b/docs/Allocene/style/main-login.css new file mode 100644 index 00000000..e06e8fb3 --- /dev/null +++ b/docs/Allocene/style/main-login.css @@ -0,0 +1,207 @@ +@import url("./header.css"); +@import url("./footer.css"); +@import url("./font.css"); + +.main { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 160px); + min-width: 400px; +} + +.contain { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 70px; +} + +.content { + width: 90%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 80px; + margin-bottom: 150px; +} + +.form_h1 { + width: 100%; +} + +.h1 { + font-size: 48px; + line-height: 32px; + font-weight: 700; + margin-top: 0; + margin-bottom: 0; +} + +.form__login { + display: flex; + justify-content: center; + flex-direction: column; +} + +.item { + display: flex; + flex-direction: column; + margin-top: 40px; +} + +.item__check { + display: flex; + flex-direction: row; + align-items: center; + margin-top: 40px; + margin-right: 12px; + margin-left: 0; +} + +.item__button { + display: flex; + flex-direction: column; +} + +.label { + font-size: 22px; + font-weight: 600; +} + +.inp { + box-sizing: border-box; + height: 70px; + width: 575px; + font-size: 24px; + margin-top: 22px; + border-radius: 6px; + outline: 0; + border: solid .6px #A9A9A9; + padding-left: 19px; +} + +.inp:focus { + border-bottom: solid 6px #EF4934; +} + +.inp::placeholder { + font-size: 14px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0; + text-align: left; +} + +.inp__check { + height: 0; + width: 0; + opacity: 0; + position: absolute; +} + +.custom__check { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + background-color: #FFF; + border: solid 1px #EF4934; + border-radius: 6px; + margin-right: 12px; + margin-bottom: 0; + vertical-align: sub; + z-index: -1; +} + +.custom__check::before { + content: " "; + display: inline-block; + width: 15px; + height: 15px; + background-image: url("../img/check.svg"); + background-size: contain; + background-repeat: no-repeat; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + margin-top: 2px; + transition: .2s ease-in; +} + +.inp__check:checked+.custom__check::before { + transform: translate(-50%, -50%) scale(1); +} + +.button { + height: 70px; + font-size: 24px; + border-radius: 6px; + margin-top: 40px; + outline: 0; + border: 0; + color: #FFF; + background-color: #EF4934; + transition: background-color .2s ease-in-out; +} + +.button:hover { + background-color: #CD412F; +} + +.error { + display: flex; + align-items: center; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 5px; + border: solid 1px #EF4934; + border-radius: 6px; + margin-top: 5px; + background-color: #EF4A342D; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .content { + margin-top: 40px; + margin-bottom: 40px; + } + + .form { + width: 100%; + } + + .h1 { + font-size: 34px; + line-height: 12px; + font-weight: 700; + margin-top: 0; + margin-bottom: 0; + } + + .inp { + box-sizing: border-box; + height: 45px; + width: calc(100%); + font-size: 15px; + margin-top: 12px; + border-radius: 6px; + outline: 0; + border: solid .6px #A9A9A9; + padding-left: 19px; + } + + .item { + margin-top: 25px; + width: 100%; + } + + .button { + height: 45px; + } +} \ No newline at end of file diff --git a/docs/Allocene/style/main-loginSuccess.css b/docs/Allocene/style/main-loginSuccess.css new file mode 100644 index 00000000..fe492869 --- /dev/null +++ b/docs/Allocene/style/main-loginSuccess.css @@ -0,0 +1,32 @@ +@import url("./font.css"); + +.main { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.h1__success { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 48px; + font-weight: 700; +} + +.return { + height: 70px; + font-size: 24px; + border-radius: 6px; + outline: 0; + border: 0; + color: #FFF; + background-color: #EF4934; + transition: background-color .2s ease-in-out; +} + +.return:hover { + background-color: #CD412F; +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 233c250c..333430e0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,9 +1,12 @@ + + MA Projects +

    MA Projects

    @@ -14,10 +17,14 @@

    MA Projects

  • Serhii Noskov - Final Project
    • +
  • + Artur Kobyliatsky - Final Project +
  • Ihor Zapisochniy - Final project
    • + diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/calculator.html b/homeworks/artur.kobyliatsky_Allocene/GamesProject/calculator.html index ee883d79..75394aaf 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/calculator.html +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/calculator.html @@ -29,13 +29,16 @@ Games
  • - About + About
  • Login
    • +
    + +
    @@ -78,7 +81,7 @@

    Calculate Games

    + \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/games.html b/homeworks/artur.kobyliatsky_Allocene/GamesProject/games.html index a43f517b..a0ac2113 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/games.html +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/games.html @@ -21,27 +21,28 @@ logo
    -
    - -
    + +
    +
    +
    -
    +
    @@ -87,6 +88,9 @@
    +
    +

    Open game filters

    +
    @@ -125,7 +129,7 @@

    + + \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/about.html b/homeworks/artur.kobyliatsky_Allocene/GamesProject/index.html similarity index 94% rename from homeworks/artur.kobyliatsky_Allocene/GamesProject/about.html rename to homeworks/artur.kobyliatsky_Allocene/GamesProject/index.html index 376af4ee..e6c60754 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/about.html +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/index.html @@ -29,13 +29,16 @@ Games
  • - About + About
  • Login
    • +
    + +
    @@ -75,7 +78,7 @@

    About me

    + \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/login.html b/homeworks/artur.kobyliatsky_Allocene/GamesProject/login.html index 854f4b88..ae007fd4 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/login.html +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/login.html @@ -29,13 +29,16 @@ Games
  • - About + About
  • Login
    • +
    + +
    @@ -66,7 +69,7 @@

    Login page

    - +
    @@ -76,7 +79,7 @@

    Login page

    + \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/burger.js b/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/burger.js new file mode 100644 index 00000000..a219b43c --- /dev/null +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/burger.js @@ -0,0 +1,21 @@ +document.addEventListener('DOMContentLoaded', () => { + const menuItems = document.querySelectorAll('.header__menu-section a'); + + menuItems.forEach((item) => { + if (item.getAttribute('href') === window.location.pathname) { + item.classList.add('active'); + } + }); +}); + +document.addEventListener('DOMContentLoaded', () => { + const burger = document.querySelector('.header__burger'); + const menu = document.querySelector('.header__menu-section'); + const body = document.querySelector('body'); + + burger.addEventListener('click', () => { + burger.classList.toggle('active'); + menu.classList.toggle('active'); + body.classList.toggle('lock'); + }); +}); diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/filters.js b/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/filters.js new file mode 100644 index 00000000..e3051cfd --- /dev/null +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/filters.js @@ -0,0 +1,36 @@ +document.addEventListener('DOMContentLoaded', () => { + const searchContainer = document.querySelector('.search'); + const genreSelect = document.querySelector('select[name="genre"]'); + const searchInput = document.querySelector('.inp__search'); + const mainElement = document.querySelector('main'); + const plateText = document.getElementById('plate'); + + function toggleSearchVisibility() { + if (searchContainer.classList.contains('search-hidden')) { + searchContainer.classList.remove('search-hidden'); + plateText.textContent = 'Close game filters'; + } else { + searchContainer.classList.add('search-hidden'); + plateText.textContent = 'Open game filters'; + } + } + + searchContainer.addEventListener('click', (event) => { + event.stopPropagation(); + toggleSearchVisibility(); + }); + + genreSelect.addEventListener('click', (event) => { + event.stopPropagation(); + }); + + searchInput.addEventListener('click', (event) => { + event.stopPropagation(); + }); + + mainElement.addEventListener('click', () => { + if (!searchContainer.classList.contains('search-hidden')) { + toggleSearchVisibility(); + } + }); +}); diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/games.js b/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/games.js index 5cbd09fe..6f6d9a4a 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/games.js +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/script/games.js @@ -1,4 +1,3 @@ -// card create from API data async function createCardElement(game) { const template = document.querySelector('template[data-type="card-template"]'); const cardCopy = document.importNode(template.content, true); @@ -38,7 +37,6 @@ async function createCardElement(game) { return cardCopy; } -// fetch API const apiUrl = 'https://mmo-games.p.rapidapi.com/games?'; const ulContainer = document.querySelector('[data-type="cards-container"]'); @@ -57,28 +55,22 @@ async function renderCards(container, genre) { try { const response = await fetch(url, options); - if (response.ok) { - const gamesList = await response.json(); + const gamesList = await response.json(); - container.innerHTML = ''; + container.innerHTML = ''; - const limitedGames = gamesList.length > 50 ? gamesList.slice(0, 50) : gamesList; + const limitedGames = gamesList.length > 50 ? gamesList.slice(0, 50) : gamesList; - limitedGames.forEach(async (game) => { - const cardElement = await createCardElement(game); - container.appendChild(cardElement); - }); - } else { - throw new Error(`HTTP error! Status: ${response.status}`); - } + limitedGames.forEach(async (game) => { + const cardElement = await createCardElement(game); + container.appendChild(cardElement); + }); } catch (error) { console.error('Error fetching games:', error); } } -// filters const queryParams = { - // for genre filter genre: '', shooter: '&category=shooter', arpg: '&category=action-rpg', @@ -87,15 +79,12 @@ const queryParams = { mmorpg: '&category=mmorpg', fighting: '&category=fighting', allgames: '', - // for radio filter platform: '&platform=pc', online: '&platform=browser', - // for checkbox filter newGames: '&sort-by=release-date', oldGames: '&sort-by=alphabetical', }; -// announcement data-type const checkNew = document.querySelector('[data-type="check-new"]'); const checkOld = document.querySelector('[data-type="check-old"]'); const radioPlatform = document.querySelector('[data-type="platform-radio"]'); @@ -103,14 +92,12 @@ const radioOnline = document.querySelector('[data-type="online-radio"]'); const searchField = document.querySelector('[data-type="search"]'); const noFound = document.querySelector('[data-type="text-h2"]'); -// Genre filtering function genreFilter(params) { const selectElement = document.getElementById('genre'); const selectedGenreNow = selectElement.value; return params[selectedGenreNow] || params.allgames; } -// Function to apply all filters and render cards function buildDynamicUrl(params) { const dynamicUrl = genreFilter(params); const platform = document.querySelector('[data-type="platform-radio"]').checked @@ -141,7 +128,6 @@ selectElement.addEventListener('change', async () => { genreFilter(queryParams); -// Radio filtering function radioFilter(params) { radioPlatform.addEventListener('change', async () => { params.dynamicUrl = radioPlatform.checked ? params.platform : params.allgames; @@ -154,7 +140,6 @@ function radioFilter(params) { }); } -// Checkbox filtering function checkboxFilter(params) { let dynamicUrl = params.allgames; @@ -171,7 +156,6 @@ function checkboxFilter(params) { renderCards(ulContainer, dynamicUrl); } -// Search field filtering function searchFilter() { searchField.addEventListener('input', () => { const searchTerm = searchField.value.toLowerCase(); @@ -190,12 +174,16 @@ function searchFilter() { card.style.display = 'none'; } }); - - // Display 'No results found!' if no matching cards are found noFound.innerText = anyCardFound ? '' : 'No results found!'; }); } -radioFilter(queryParams); -checkboxFilter(queryParams); -searchFilter(); +async function callFunctionsAndRenderCards(params) { + await applyFiltersAndRenderCards(params); + genreFilter(params); + radioFilter(params); + checkboxFilter(params); + searchFilter(); +} + +callFunctionsAndRenderCards(queryParams); diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/footer.css b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/footer.css index 96250876..b39152b9 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/footer.css +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/footer.css @@ -2,17 +2,14 @@ width: 100%; background-color: #1C2321; margin-top: auto; + height: 160px; } .footer__container { + width: 100%; display: flex; justify-content: center; align-items: center; - height: 160px; -} - -.footer__container { - width: 100%; } .footer__content { @@ -32,7 +29,7 @@ text-align: center; } -.social-icon { +.social__icon { height: 42px; width: 192px; padding: 0; @@ -56,8 +53,6 @@ background-color: #FFF; height: 20px; width: 20px; - width: 20px; - height: 20px; left: 11px; top: 11px; position: absolute; @@ -74,12 +69,8 @@ background-color: #FFF; height: 20px; width: 20px; - width: 20px; - height: 20px; left: 86px; top: 11px; - width: 20px; - height: 20px; position: absolute; } @@ -93,12 +84,103 @@ .icon__inst img { background-color: #FFF; height: 20px; - width: 20.000892639160156px; - width: 20.000892639160156px; - height: 20px; + width: 20px; left: 161px; top: 11px; - width: 20.000892639160156px; - height: 20px; position: absolute; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .footer { + width: 100%; + background-color: #1C2321; + margin-top: auto; + height: 120px; + min-width: 400px; + } + + .copyright { + color: #EEF1EF; + margin-top: 0; + margin-bottom: 3px; + font-weight: 400; + line-height: 20px; + font-size: 12px; + text-align: center; + } + + .social__icon { + height: 42px; + width: 192px; + padding: 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 33px; + position: relative; + list-style-type: none; + } + + .icon__fb { + background-color: #FFF; + height: 30px; + width: 30px; + border-radius: 50%; + } + + .icon__fb img { + background-color: #FFF; + height: 18px; + width: 18px; + left: 24px; + top: 12px; + position: absolute; + } + + .icon__link { + background-color: #FFF; + height: 30px; + width: 30px; + border-radius: 50%; + } + + .icon__link img { + background-color: #FFF; + height: 18px; + width: 18px; + left: 87px; + top: 12px; + position: absolute; + } + + .icon__inst { + background-color: #FFF; + height: 30px; + width: 30px; + border-radius: 50%; + } + + .icon__inst img { + background-color: #FFF; + height: 18px; + width: 18px; + left: 150px; + top: 12px; + position: absolute; + } +} + +@media screen and (min-width: 768px) and (max-width: 1023px) { + + .copyright { + color: #EEF1EF; + margin-top: 0; + margin-bottom: 5px; + font-weight: 400; + line-height: 28px; + font-size: 18px; + text-align: center; + } } \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/header.css b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/header.css index 6f022966..2287f137 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/header.css +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/header.css @@ -28,6 +28,7 @@ } .header__logo-section img { + width: 50px; cursor: pointer; } @@ -67,4 +68,111 @@ .menu__list-link { font-size: 16px; text-decoration: none; +} + +.header__burger { + display: none; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .header { + height: 60px; + } + + .header__burger { + display: flex; + position: relative; + z-index: 5; + align-items: center; + justify-content: flex-end; + width: 30px; + height: 18px; + } + + .header__burger span { + height: 2.5px; + width: 80%; + transform: scale(1); + background-color: #DAD0CC; + } + + .header__burger::before, + .header__burger::after { + content: ""; + position: absolute; + height: 2.5px; + width: 100%; + background-color: #DAD0CC; + transition: all .3s ease-in-out; + } + + .header__burger::before { + top: 0; + } + + .header__burger::after { + bottom: 0; + } + + .header__burger.active span { + transform: scale(0); + } + + .header__burger.active::before { + top: 50%; + transform: rotate(-45deg) translate(0, -50%); + } + + .header__burger.active::after { + bottom: 50%; + transform: rotate(45deg) translate(0, 50%); + } + + .header__menu-section { + display: none; + } + + .header__menu-section.active { + display: flex; + flex-direction: column; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 5; + background-color: rgba(0, 0, 0, .767); + animation: burgerAnimation .4s; + } + + .header__menu-section ul { + flex-direction: column; + align-items: center; + } + + .header__menu-section ul li { + align-items: center; + margin-top: 45px; + margin-right: 45px; + } + + .header__menu-section ul li a { + font-size: 24px; + } + + .header__menu-section ul li:first-child { + margin-top: 200px; + } + + @keyframes burgerAnimation { + + from { + opacity: 0; + } + + to { + opacity: 1; + } + } } \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-about.css b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-about.css index c2127d74..e6db2127 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-about.css +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-about.css @@ -7,6 +7,7 @@ main { align-items: center; justify-content: center; min-height: calc(100vh - 160px); + min-width: 400px; } .contain { @@ -47,4 +48,96 @@ main { .text__chapter .text__link { color: #EF4934; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .content { + width: 90%; + display: grid; + grid-template-columns: 1fr; + align-items: center; + justify-content: center; + } + + .img { + display: flex; + align-items: center; + justify-content: center; + } + + .img img { + width: calc(90%); + height: auto; + } + + .text__heading { + margin-top: 0; + color: #221F1F; + font-size: 24px; + line-height: 32px; + font-weight: 700; + text-align: center; + } + + .text__chapter { + color: #221F1F; + font-size: 14px; + line-height: 20px; + font-weight: 400; + text-align: center; + } +} + +@media screen and (min-width: 767px) and (max-width: 1023px) { + + .content { + width: 90%; + display: grid; + grid-template-columns: 1fr; + align-items: center; + justify-content: center; + margin-bottom: 100px; + } + + .img { + display: flex; + align-items: center; + justify-content: center; + } + + .text__heading { + margin-top: 0; + color: #221F1F; + font-size: 48px; + line-height: 32px; + font-weight: 700; + text-align: center; + } + + .text__chapter { + color: #221F1F; + font-size: 22px; + line-height: 32px; + font-weight: 400; + text-align: center; + } +} + +@media screen and (min-width: 1023px) { + + .content { + width: 90%; + display: grid; + grid-template-columns: 1fr 1fr; + margin-bottom: 100px; + } + + .img { + max-width: 600px; + } + + .text { + max-width: 600px; + } } \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-calculator.css b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-calculator.css index 43ac5b48..a10825ea 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-calculator.css +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-calculator.css @@ -8,6 +8,7 @@ main { align-items: flex-start; justify-content: center; min-height: calc(100vh - 160px); + min-width: 400px; } .contain { @@ -34,7 +35,7 @@ main { .content { width: 100%; display: flex; - align-items: start; + align-items: center; justify-content: center; flex-direction: column; } @@ -138,4 +139,113 @@ button:hover { .visualInterpritation h1::first-letter { padding-left: 25px; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .content, + .visualInterpritation, + .item, + .inp__select, + .inp, + button { + width: calc(100%); + } + + .contain { + margin-bottom: 50px; + } + + .main__heading { + font-size: 24px; + font-weight: 700; + line-height: 24px; + letter-spacing: 0; + text-align: center; + margin-top: 40px; + margin-bottom: 30px; + } + + .visualTimeDurationExecution { + text-align: center; + margin-top: 10px; + font-weight: 600; + line-height: 20px; + letter-spacing: 0; + font-size: 14px; + } + + .visualInterpritation { + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + margin-top: 0; + text-align: center; + } + + .visualInterpritation h1 { + font-size: 24px; + font-weight: 700; + line-height: 24px; + letter-spacing: 0; + padding-right: 0; + color: #EF4934; + } + + .inp { + box-sizing: border-box; + text-align: center; + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + font-size: 14px; + margin-top: 22px; + margin-right: 16px; + } + + .inp__select { + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + padding-left: 12px; + margin-right: 16px; + } + + .button { + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + font-size: 14px; + border-radius: 6px; + margin-right: 10px; + outline: 0; + border: 0; + color: #FFF; + background-color: #EF4934; + transition: background-color .2s ease-in-out; + } + + .result { + display: flex; + align-items: center; + flex-direction: row; + height: 25px; + width: calc(100% - 10px); + min-width: 45px; + margin-top: 22px; + font-size: 14px; + font-weight: 400; + line-height: 10px; + } + + label { + font-size: 12px; + font-weight: 600; + line-height: 26px; + letter-spacing: 0; + text-align: left; + margin: 0; + padding: 0; + } } \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-games.css b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-games.css index fe39514b..24419ac8 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-games.css +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-games.css @@ -2,14 +2,11 @@ @import url("./footer.css"); @import url("./font.css"); - -/*search section*/ - .search { position: fixed; display: flex; align-items: center; - justify-content: space-around; + justify-content: center; height: 60px; width: 100%; margin-top: 70px; @@ -18,21 +15,21 @@ } .search__contain { - width: 100%; + display: flex; + align-items: center; + justify-content: center; + width: 90%; } .search__form { display: flex; flex-direction: row; align-items: center; - justify-content: space-around; + justify-content: space-between; flex-wrap: wrap; width: 100%; } - -/*custom select*/ - select[name="genre"] { border-radius: 6px; color: #FFF; @@ -56,9 +53,6 @@ select option { line-height: 21px; } - -/*custom radio*/ - .radio { display: flex; gap: 32px; @@ -104,9 +98,6 @@ select option { transform: translate(-50%, -50%) scale(1); } - -/*custom checkbox*/ - .checkbox { display: flex; gap: 32px; @@ -153,9 +144,6 @@ select option { transform: translate(-50%, -50%) scale(1); } - -/*search*/ - .inp__search { width: 342px; height: 36px; @@ -176,9 +164,6 @@ select option { background-repeat: no-repeat; } - -/*button*/ - .search__button { width: 75px; height: 36px; @@ -194,18 +179,18 @@ select option { float: left; } - -/*main section*/ - main { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 160px); + width: 100%; + min-width: 400px; } .contain { margin-top: 180px; + width: 90%; } .content { @@ -223,18 +208,11 @@ main { font-weight: 700; } -/* .game__cards { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 25px; -} */ - .game__cod2 { display: flex; flex-direction: column; align-items: center; justify-content: center; - width: 260px; background-color: #ECECEC; padding: 12px 12px 22px; border-radius: 12px; @@ -298,16 +276,406 @@ main { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 25px; + padding-left: 0; } @keyframes loadingAnimation { - 0% { content: "Loading"; } - 25% { content: "Loading."; } - 50% { content: "Loading.."; } - 75% { content: "Loading..."; } + + 0% { + content: "Loading"; + } + + 25% { + content: "Loading."; + } + + 50% { + content: "Loading.."; + } + + 75% { + content: "Loading..."; + } } [data-type="cards-container"]:empty::before { content: "Loading..."; animation: loadingAnimation 1s infinite; +} + +@media screen and (min-width: 1px) and (max-width: 768px) { + + .contain { + width: calc(90%); + margin-top: 130px; + } + + .game__cod2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + align-items: center; + justify-content: center; + width: calc(100% - 25px); + background-color: #ECECEC; + padding: 12px 12px 22px; + border-radius: 12px; + } + + .cod2__general { + display: grid; + grid-template-rows: 1fr; + align-items: center; + justify-content: center; + } + + .cod2__description { + text-align: start; + } + + .cod2__general--img img { + max-width: 100%; + height: auto; + width: 100%; + max-height: 120px; + border-radius: 9px; + object-fit: cover; + } + + .cod2__general--desc { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + gap: 12px; + } + + .cod2__general--desc h3 { + font-size: 18px; + margin: 0; + } + + .cod2__general--desc p { + font-size: 14px; + text-align: center; + } + + .search__contain { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .cards-container { + display: grid; + grid-template-columns: 1fr; + margin: 0; + } + + .search { + height: 220px; + margin-top: 50px; + background-color: #221F1FEE; + transition: margin-top .3s ease, opacity .3s ease, max-height .3s ease; + } + + .search-hidden { + margin-top: -110px; + opacity: 1; + max-height: 220px; + } + + .plate h3 { + margin-bottom: 0; + } + + .search__form { + display: flex; + flex-direction: column; + gap: 15px; + } + + select[name="genre"] { + width: 100px; + } + + .inp__search { + height: 30px; + width: 200px; + } + + .search__button { + height: 30px; + width: 70px; + } + + .text__heading { + text-align: center; + font-size: 28px; + } + + .radio { + gap: 10px; + } + + .custom__radio { + height: 15px; + width: 15px; + border-radius: 50%; + margin-right: 12px; + } + + .form__radio { + font-size: 15px; + } + + .checkbox { + gap: 10px; + } + + .custom__check { + height: 15px; + width: 15px; + border-radius: 6px; + margin-right: 12px; + } + + .form__checkbox { + font-size: 15px; + } +} + +@media screen and (min-width: 768px) and (max-width: 930px) { + + .contain { + width: calc(90%); + margin-top: 150px; + } + + .game__cod2 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: calc(100% - 25px); + background-color: #ECECEC; + padding: 12px 12px 22px; + border-radius: 12px; + } + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 25px; + } + + .search__contain { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .search { + height: 220px; + margin-top: 70px; + background-color: #221F1FEE; + transition: margin-top .3s ease, opacity .3s ease, max-height .3s ease; + } + + .search__form { + display: flex; + flex-direction: column; + gap: 15px; + } + + .search-hidden { + margin-top: -100px; + opacity: 1; + max-height: 220px; + } + + .plate h3 { + margin-bottom: 0; + } + + select[name="genre"] { + width: 70px; + } + + .inp__search { + height: 30px; + width: 200px; + } + + .search__button { + height: 30px; + width: 50px; + } + + .text__heading { + text-align: center; + font-size: 38px; + } + + .cod2__general--img img { + height: 80px; + width: 80px; + } + + .radio { + gap: 10px; + } + + .custom__radio { + height: 15px; + width: 15px; + border-radius: 50%; + margin-right: 12px; + } + + .form__radio { + font-size: 15px; + } + + .checkbox { + gap: 10px; + } + + .custom__check { + height: 15px; + width: 15px; + border-radius: 6px; + margin-right: 12px; + } + + .form__checkbox { + font-size: 15px; + } +} + +@media screen and (min-width: 930px) and (max-width: 1250px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 25px; + } + + .search { + height: 55px; + margin-top: 70px; + } + + select[name="genre"] { + width: 70px; + } + + .inp__search { + height: 30px; + width: 200px; + } + + .search__button { + height: 30px; + width: 50px; + } + + .text__heading { + text-align: center; + font-size: 38px; + } + + .cod2__general--img img { + height: 80px; + width: 80px; + } + + .radio { + gap: 10px; + } + + .custom__radio { + height: 15px; + width: 15px; + border-radius: 50%; + margin-right: 12px; + } + + .form__radio { + font-size: 15px; + } + + .checkbox { + gap: 10px; + } + + .custom__check { + height: 15px; + width: 15px; + border-radius: 6px; + margin-right: 12px; + } + + .form__checkbox { + font-size: 15px; + } + + .plate { + display: none; + } +} + +@media screen and (min-width: 1250px) and (max-width: 1700px) { + + .plate { + display: none; + } + + .inp__search { + width: 250px; + } +} + +@media screen and (min-width: 1700px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } +} + +@media screen and (min-width: 1900px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } +} + +@media screen and (min-width: 2500px) { + + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + gap: 25px; + } + + .plate { + display: none; + } } \ No newline at end of file diff --git a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-login.css b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-login.css index 2a0bea78..5bfd845a 100644 --- a/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-login.css +++ b/homeworks/artur.kobyliatsky_Allocene/GamesProject/style/main-login.css @@ -8,6 +8,7 @@ main { align-items: center; justify-content: center; min-height: calc(100vh - 160px); + min-width: 400px; } .contain { @@ -25,7 +26,7 @@ main { justify-content: center; flex-direction: column; margin-top: 80px; - margin-bottom: 177px; + margin-bottom: 150px; } .form_h1 { @@ -44,7 +45,6 @@ main { display: flex; justify-content: center; flex-direction: column; - /* margin-bottom: 55px; */ } .item { @@ -96,9 +96,6 @@ main { text-align: left; } - -/*custom checkbox*/ - .inp__check { height: 0; width: 0; @@ -140,10 +137,7 @@ main { transform: translate(-50%, -50%) scale(1); } - -/*button*/ - -button { +.button { height: 70px; font-size: 24px; border-radius: 6px; @@ -155,13 +149,10 @@ button { transition: background-color .2s ease-in-out; } -button:hover { +.button:hover { background-color: #CD412F; } - -/*error*/ - .error { display: flex; align-items: center; @@ -172,4 +163,45 @@ button:hover { border-radius: 6px; margin-top: 5px; background-color: #EF4A342D; +} + +@media screen and (min-width: 1px) and (max-width: 767px) { + + .content { + margin-top: 40px; + margin-bottom: 40px; + } + + form { + width: 100%; + } + + .h1 { + font-size: 34px; + line-height: 12px; + font-weight: 700; + margin-top: 0; + margin-bottom: 0; + } + + .inp { + box-sizing: border-box; + height: 45px; + width: calc(100%); + font-size: 15px; + margin-top: 12px; + border-radius: 6px; + outline: 0; + border: solid .6px #A9A9A9; + padding-left: 19px; + } + + .item { + margin-top: 25px; + width: 100%; + } + + .button { + height: 45px; + } } \ No newline at end of file