From 593ddd434f5616be233a10dabaf1deafa6a0b3a4 Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 1 Nov 2025 13:48:00 +0100 Subject: [PATCH] Revamp landing page with modern styling --- index.html | 215 ++++++++++++--------- script.js | 99 ++++++++++ style.css | 546 +++++++++++++++++++++++++++++------------------------ 3 files changed, 530 insertions(+), 330 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 6f735c0..ec630da 100644 --- a/index.html +++ b/index.html @@ -1,91 +1,132 @@ - - - - - - Google - - - -
-
-
-
-
- -
-
-
-
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
- Сервисы Google доступны на разных языках: English  Беларуская  -
-
-
-
-
- -
- - - \ No newline at end of file + +
+ + +
+ +

+ Сервисы Google доступны на разных языках: + English + Беларуская +

+ +
+
+

Недавние запросы

+ +
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..80c1956 --- /dev/null +++ b/script.js @@ -0,0 +1,99 @@ +const RECENT_SEARCHES_KEY = "recent-searches"; +const MAX_RECENT = 6; + +const searchForm = document.querySelector(".search-form"); +const searchInput = document.querySelector("#search-input"); +const luckyButton = document.querySelector('[data-action="lucky"]'); +const clearButton = document.querySelector('[data-action="clear"]'); +const recentContainer = document.querySelector("#recent-searches"); + +const loadRecentSearches = () => { + try { + const stored = localStorage.getItem(RECENT_SEARCHES_KEY); + return stored ? JSON.parse(stored) : []; + } catch (error) { + console.warn("Не удалось загрузить историю запросов", error); + return []; + } +}; + +const saveRecentSearches = (queries) => { + try { + localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(queries)); + } catch (error) { + console.warn("Не удалось сохранить историю запросов", error); + } +}; + +const renderRecentSearches = (queries) => { + recentContainer.innerHTML = ""; + + if (!queries.length) { + const emptyState = document.createElement("p"); + emptyState.textContent = "История запросов пока пуста."; + emptyState.className = "recent-searches__empty"; + recentContainer.append(emptyState); + return; + } + + queries.forEach((query) => { + const item = document.createElement("div"); + item.className = "recent-searches__item"; + + const button = document.createElement("button"); + button.type = "button"; + button.className = "recent-searches__chip"; + button.textContent = query; + button.addEventListener("click", () => { + searchInput.value = query; + searchInput.focus(); + }); + + item.append(button); + recentContainer.append(item); + }); +}; + +const updateRecentSearches = (query) => { + const trimmed = query.trim(); + if (!trimmed) { + return; + } + + const current = loadRecentSearches(); + const deduped = [trimmed, ...current.filter((item) => item.toLowerCase() !== trimmed.toLowerCase())]; + const limited = deduped.slice(0, MAX_RECENT); + saveRecentSearches(limited); + renderRecentSearches(limited); +}; + +searchForm?.addEventListener("submit", (event) => { + const query = searchInput.value; + if (!query.trim()) { + event.preventDefault(); + searchInput.focus(); + return; + } + + updateRecentSearches(query); +}); + +luckyButton?.addEventListener("click", () => { + const query = searchInput.value.trim(); + const target = query + ? `https://www.google.com/search?btnI=I&q=${encodeURIComponent(query)}` + : "https://www.google.com/doodles"; + window.open(target, "_blank", "noopener"); +}); + +clearButton?.addEventListener("click", () => { + localStorage.removeItem(RECENT_SEARCHES_KEY); + renderRecentSearches([]); + searchInput.focus(); +}); + +renderRecentSearches(loadRecentSearches()); + +searchInput?.addEventListener("focus", () => { + searchInput.select(); +}); diff --git a/style.css b/style.css index 94ab420..7b70fbc 100644 --- a/style.css +++ b/style.css @@ -1,325 +1,385 @@ -* { - font-family: arial, sans-serif; +:root { + color-scheme: light; + --font-base: "Roboto", "Arial", sans-serif; + --color-background: #f8f9fa; + --color-surface: #ffffff; + --color-border: #dfe1e5; + --color-text: #202124; + --color-subtle: #5f6368; + --color-accent: #1a73e8; + --shadow-elevated: 0 1px 6px rgba(32, 33, 36, 0.28); + --radius-large: 999px; + --transition-base: 150ms ease-in-out; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + background: var(--color-background); + color: var(--color-text); + font-family: var(--font-base); + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +a { + color: inherit; +} + +a:hover, +a:focus { + color: var(--color-accent); +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.site-header { + position: sticky; + top: 0; + backdrop-filter: blur(12px); + background: rgba(248, 249, 250, 0.92); + border-bottom: 1px solid rgba(223, 225, 229, 0.7); + padding: 0.75rem 2rem; + z-index: 10; +} + +.site-nav { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; +} + +.nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 1.25rem; + margin: 0; + padding: 0; + font-size: 0.95rem; +} + +.nav-list--links a { + text-decoration: none; + color: var(--color-text); + transition: color var(--transition-base); } - -/* images header */ - -.img-links { - text-align: center; - position: relative; - vertical-align: middle; -} - -.links { - vertical-align: middle; -} - -.links li:hover { - text-decoration: underline; - cursor: pointer; -} - -img.apps-icon { - width: 25px; - filter: invert(0.4); - vertical-align: middle; -} - -img.apps-icon:hover { - filter: none; - cursor: pointer; -} - -img.profile-icon { - width: 33px; - border-radius: 50%; - vertical-align: middle; +.nav-list--links a:hover, +.nav-list--links a:focus { + text-decoration: underline; } -img.profile-icon:hover { - cursor: pointer; +.icon-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + border: none; + border-radius: 50%; + background: transparent; + color: var(--color-subtle); + cursor: pointer; + transition: background var(--transition-base), color var(--transition-base); } - -/* common header content */ - -ul.header-wrap { - float: right; - margin: 7px; +.icon-button svg { + width: 1.25rem; + height: 1.25rem; + fill: currentColor; } -.header-content li { - display: inline; - padding: 7px; - font-size: 12px; +.icon-button:hover, +.icon-button:focus { + background: rgba(60, 64, 67, 0.08); + color: var(--color-text); } -.header-content div { - display: inline-block; +.icon-button--profile img { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + display: block; } - -/* central part */ - -.central { - position: absolute; - width: 100%; - height: 40%; - top: 155px; - text-align: center; - vertical-align: middle; +.site-main { + flex: 1; + width: min(100%, 720px); + margin: 0 auto; + padding: 4rem 1.5rem 3rem; + display: flex; + flex-direction: column; + gap: 3rem; } - -/* google main icon */ - -.icon { - padding-bottom: 25px; +.hero { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; } -.google-icon>img { - width: 272px; +.hero__logo { + max-width: 100%; + height: auto; } - -/* main search border */ - -.main-search-border { - border: black 0.5px solid; - width: 480px; - border-radius: 40px; - height: 45px; - border-color: gainsboro; - display: inline-block; - text-align: left; +.search-form { + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; } -.main-search-border:hover { - box-shadow: 0 1px 3px 1px gainsboro; +.search-field { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.6rem 1rem; + border: 1px solid var(--color-border); + border-radius: var(--radius-large); + background: var(--color-surface); + box-shadow: 0 1px 2px rgba(32, 33, 36, 0.08); + transition: box-shadow var(--transition-base), border-color var(--transition-base); } -.main-search-border .input { - vertical-align: middle; - padding-bottom: 9px; +.search-field:focus-within { + border-color: transparent; + box-shadow: var(--shadow-elevated); } - -/* search icon */ - -.search-begin { - height: 50%; - display: inline-block; - padding-top: 14px; - padding-right: 5px; - padding-left: 15px; +.search-field__icon svg { + width: 1.1rem; + height: 1.1rem; + fill: var(--color-subtle); } -.search-icon { - width: 15px; - filter: brightness(1.7); +.search-field input { + flex: 1; + border: none; + background: transparent; + font-size: 1.05rem; + color: var(--color-text); + outline: none; } - -/* main input itself */ - -.input { - display: inline-block; - vertical-align: middle; - height: 40%; +.search-field__actions { + display: flex; + gap: 0.35rem; } -#main-input:focus { - outline: none; +.search-actions { + display: flex; + gap: 0.75rem; + justify-content: center; + flex-wrap: wrap; } -#main-input { - border: none; - font-size: 15px; - width: 355px; +.search-actions button { + padding: 0.55rem 1.5rem; + border-radius: 0.5rem; + border: 1px solid transparent; + background: rgba(248, 249, 250, 0.9); + color: var(--color-text); + font-size: 0.95rem; + cursor: pointer; + transition: border-color var(--transition-base), box-shadow var(--transition-base); } - -/* icons */ - -.icons { - display: inline; +.search-actions button:hover, +.search-actions button:focus { + border-color: rgba(223, 225, 229, 0.8); + box-shadow: 0 1px 2px rgba(32, 33, 36, 0.18); } - -/* small keyboard icon */ - -.keyboard-icon { - display: inherit; - padding-top: 12px; - cursor: pointer; +.languages { + margin: 0; + font-size: 0.95rem; + color: var(--color-subtle); + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; } -.keyboard-icon>img { - width: 20px; +.languages a { + text-decoration: none; + color: var(--color-accent); + font-weight: 500; } - -/* small mic icon */ - -.mic-icon { - display: inherit; - float: right; - padding-top: 12px; - padding-right: 20px; - cursor: pointer; +.languages a:hover, +.languages a:focus { + text-decoration: underline; } -.mic-icon>img { - width: 14px; +.recent-searches { + display: flex; + flex-direction: column; + gap: 1rem; + background: var(--color-surface); + border-radius: 1.5rem; + padding: 1.75rem; + box-shadow: 0 18px 32px rgba(32, 33, 36, 0.08); } - -/* search buttons */ - -.control-panel { - margin-top: 30px; +.recent-searches__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; } - -/* main search button */ - -.main-search-button { - display: inline; +.recent-searches h2 { + margin: 0; + font-size: 1.1rem; } -.main-search-button>button { - width: 140px; - height: 35px; - border: none; - border-radius: 4px; - background-color: #f5f5f5; - color: #696969; - cursor: pointer; +.clear-button { + border: none; + background: none; + color: var(--color-accent); + font-weight: 500; + cursor: pointer; + padding: 0.25rem 0.5rem; + border-radius: 0.5rem; + transition: background var(--transition-base); } -.main-search-button>button:hover { - color: black; - border: rgb(179, 179, 179) 1px solid; - box-shadow: 0 5px 8px -8px gray; +.clear-button:hover, +.clear-button:focus { + background: rgba(26, 115, 232, 0.12); } - -/* auto search button */ - -.auto-search-button { - display: inline; +.recent-searches__list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; } -.auto-search-button>button { - width: 120px; - height: 35px; - border: none; - border-radius: 4px; - margin-left: 10px; - color: #696969; - cursor: pointer; +.recent-searches__empty { + margin: 0; + color: var(--color-subtle); + font-size: 0.95rem; } -.auto-search-button>button:hover { - color: black; - border: rgb(179, 179, 179) 1px solid; - box-shadow: 0 5px 8px -8px gray; +.recent-searches__item { + list-style: none; } - -/* under search */ - -.ext-info { - margin-top: 30px; - font-size: 12.5px; +.recent-searches__chip { + border: 1px solid var(--color-border); + background: rgba(248, 249, 250, 0.9); + color: var(--color-text); + border-radius: 999px; + padding: 0.45rem 1rem; + font-size: 0.9rem; + cursor: pointer; + transition: border-color var(--transition-base), background var(--transition-base); } -.ext-info a { - color: darkblue; - text-decoration: none; - cursor: pointer; +.recent-searches__chip:hover, +.recent-searches__chip:focus { + border-color: rgba(26, 115, 232, 0.4); + background: rgba(26, 115, 232, 0.12); } -.ext-info a:hover { - text-decoration: underline; +.site-footer { + margin-top: auto; + background: #f2f2f2; + border-top: 1px solid var(--color-border); + display: grid; + gap: 1rem; + padding: 1.5rem clamp(1.5rem, 5vw, 3rem); + font-size: 0.95rem; } - -/* footer */ - -.footer { - position: fixed; - bottom: 0; - left: 0; - right: 0; - width: 100%; - border: 1px solid rgb(226, 226, 226); - height: 28px; - text-align: center; - padding-top: 10px; - background-color: #f0f0f0; +.site-footer__region { + color: var(--color-subtle); } -.footer * { - display: inline; - align-content: center; +.site-footer__links { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 1.5rem; } -.footer li { - padding: 11px; - margin-bottom: 40px; - font-size: 14px; - color: rgb(92, 92, 92); +.site-footer nav ul { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 0; + padding: 0; } -.footer-left { - float: left; - padding-left: 20px; +.site-footer nav a { + text-decoration: none; + color: var(--color-subtle); + transition: color var(--transition-base); } -.footer-right { - float: right; - padding-right: 20px; +.site-footer nav a:hover, +.site-footer nav a:focus { + color: var(--color-accent); } -.footer li:hover { - text-decoration: underline; - cursor: pointer; -} +@media (max-width: 640px) { + .site-header { + padding: 0.5rem 1rem; + } + .nav-list { + gap: 0.75rem; + } -/* upper footer */ + .icon-button { + width: 2.25rem; + height: 2.25rem; + } -.upper-footer { - position: fixed; - bottom: 40px; - left: 0; - right: 0; - width: 100%; - border: 1px solid rgb(226, 226, 226); - height: 28px; - padding-top: 10px; - background-color: #f0f0f0; -} + .site-main { + padding-top: 3rem; + } -.upper-footer * { - display: inline; -} + .search-field { + padding: 0.5rem 0.75rem; + } -.upper-footer li { - padding: 11px; - margin-bottom: 50px; - font-size: 14px; - color: rgb(92, 92, 92); + .recent-searches { + padding: 1.25rem; + } } -.upper-footer-left { - float: left; - padding-left: 20px; +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } } - -.upper-footer li:hover { - text-decoration: underline; - cursor: pointer; -} \ No newline at end of file