diff --git a/script.js b/script.js index e1766fa..54d3403 100644 --- a/script.js +++ b/script.js @@ -20,21 +20,13 @@ function handleKeyPress(event) { if (event.key === 'Enter') { const searchTerm = document.getElementById('searchInput').value.toLowerCase(); const contentItems = document.querySelectorAll('.content-item'); - const headerHeight = document.querySelector('header').offsetHeight; - - for (const item of contentItems) { - const tag = item.getAttribute('data-tag').toLowerCase(); - if (tag === searchTerm) { - const itemPosition = item.getBoundingClientRect().top + window.scrollY - headerHeight - 20; - window.scrollTo({ - top: itemPosition, - behavior: 'smooth' - }); - return; - } - } - alert('該当するサービスが見つかりませんでした。'); + // URLのqueryを更新 + const newUrl = new URL(window.location); + newUrl.searchParams.set('search_query', searchTerm); + history.pushState(null, '', newUrl); + + scrollToItem(searchTerm, contentItems); } } @@ -89,3 +81,31 @@ function toggleFlowerMenu() { menuContent.style.display = 'none'; } } + +function scrollToItem(searchTerm, contentItems) { + const lowerSearchTerm = searchTerm.toLowerCase(); + for (const item of contentItems) { + const tag = item.getAttribute('data-tag').toLowerCase(); + if (tag === lowerSearchTerm) { + const headerHeight = document.querySelector('header').offsetHeight; + const itemPosition = item.getBoundingClientRect().top + window.scrollY - headerHeight - 20; + window.scrollTo({ top: itemPosition, behavior: 'smooth' }); + + item.classList.add('flash-border'); + setTimeout(() => item.classList.remove('flash-border'), 2000); + + return; + } + } + + alert('該当するサービスが見つかりませんでした。'); +} + +document.addEventListener('DOMContentLoaded', function() { + const urlParams = new URLSearchParams(window.location.search); + const searchTerm = urlParams.get('search_query'); + if (searchTerm) { + const contentItems = document.querySelectorAll('.content-item'); + scrollToItem(searchTerm, contentItems); + } +}); \ No newline at end of file diff --git a/style.css b/style.css index 3440dc8..4c4617a 100644 --- a/style.css +++ b/style.css @@ -162,6 +162,24 @@ footer a { text-decoration: none; } +/* 枠点滅 */ +@keyframes flash-border { + 0% { + border-color: rgba(255, 0, 0, 0); + } + 50% { + border-color: rgba(255, 0, 0, 1); + border-width: 3px; + } + 100% { + border-color: rgba(255, 0, 0, 0); + } +} + +.flash-border { + animation: flash-border 1s ease-in-out 2; +} + .notification { position: fixed; bottom: -50px;