diff --git a/css/main.css b/css/main.css index 00ab657..b215a4c 100644 --- a/css/main.css +++ b/css/main.css @@ -8,3 +8,4 @@ @import url('animations.css'); /* Main Styles */ @import url('styles.css'); +@import url('search.css'); diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..bf45461 --- /dev/null +++ b/css/search.css @@ -0,0 +1,103 @@ +.search-container { + position: relative; + display: flex; + align-items: stretch; + width: 100%; + border-radius: 0.5rem; + overflow: hidden; +} + +#search input { + padding-left: 3rem; + padding-right: 1rem; + width: 100%; + border-radius: 0.5rem 0 0 0.5rem; + background-position: none !important; + background-image: none !important; +} + +#search-engine-selector { + position: absolute; + left: 0.75rem; + top: 50%; + transform: translateY(-50%); + z-index: 2; + background: transparent; + border: none; + cursor: pointer; + padding: 0.25rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.25rem; + transition: background-color 0.2s ease; +} + +#search-engine-selector:hover, +#search-engine-selector:focus { + background-color: hsl(var(--color-white-hsl) / 0.1); + outline: none; +} + +#search-engine-selector svg { + width: 1.5rem; + height: 1.5rem; +} + +#search-submit { + border: none; + cursor: pointer; + padding: 0; + width: 3rem; + min-width: 3rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0 0.5rem 0.5rem 0; + transition: background-color 0.2s ease; +} + +#search-submit:hover, +#search-submit:focus { + outline: none; +} + +#search-submit svg { + width: 1.25rem; + height: 1.25rem; +} + +@media (prefers-color-scheme: dark) { + #search-submit { + background: hsl(var(--color-white-hsl) / 0.1); + color: var(--primary-font-color); + border: 0.125rem solid hsl(var(--color-white-hsl) / 0.25); + border-left: none; + } + + #search-submit:hover, + #search-submit:focus { + background-color: hsl(var(--color-white-hsl) / 0.2); + border-color: hsl(var(--color-white-hsl) / 0.5); + } +} + +@media (prefers-color-scheme: light) { + #search-submit { + background: hsl(var(--color-black-hsl) / 0.05); + color: var(--primary-font-color); + border: 0.125rem solid hsl(var(--color-black-hsl) / 0.25); + border-left: none; + } + + #search-engine-selector:hover, + #search-engine-selector:focus { + background-color: hsl(var(--color-black-hsl) / 0.1); + } + + #search-submit:hover, + #search-submit:focus { + background-color: hsl(var(--color-black-hsl) / 0.1); + border-color: hsl(var(--color-black-hsl) / 0.5); + } +} diff --git a/index.html b/index.html index e9886d7..251f7ae 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - _traichu + yuheng
@@ -34,86 +34,106 @@

Bookmarks

diff --git a/js/main.js b/js/main.js index df53974..d3ce8ae 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,23 @@ function dateTime() { const date = new Date(); - let today = date.toDateString(); - let time = date.toLocaleTimeString(); + + // 中文日期格式 + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; + const weekDay = weekDays[date.getDay()]; + + const today = `${year}年${month}月${day}日 ${weekDay}`; + + // 中文时间格式 + const time = date.toLocaleTimeString('zh-CN', { + hour12: false, + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }); + document.getElementById('date-time').innerHTML = '

' + today + '

' + time + '

'; setTimeout(dateTime, 1000); } @@ -21,7 +37,61 @@ function weatherBalloon(cityID) { }); } +function setSearchEngine(engine) { + const searchForm = document.getElementById('search-form'); + const searchInput = document.getElementById('search-input'); + const searchEngineSelector = document.getElementById('search-engine-selector'); + const baiduIcon = searchEngineSelector?.querySelector('.baidu-icon'); + const googleIcon = searchEngineSelector?.querySelector('.google-icon'); + + if (!searchForm || !searchInput || !searchEngineSelector || !baiduIcon || !googleIcon) { + return; + } + + if (engine === 'google') { + searchEngineSelector.dataset.engine = 'google'; + searchEngineSelector.setAttribute('aria-label', '当前搜索引擎：Google，点击切换至 Baidu'); + searchEngineSelector.setAttribute('title', '当前：Google（点击切换至 Baidu）'); + searchForm.action = 'https://www.google.com/search'; + searchInput.name = 'q'; + baiduIcon.style.display = 'none'; + googleIcon.style.display = 'block'; + } else { + searchEngineSelector.dataset.engine = 'baidu'; + searchEngineSelector.setAttribute('aria-label', '当前搜索引擎：Baidu，点击切换至 Google'); + searchEngineSelector.setAttribute('title', '当前：Baidu（点击切换至 Google）'); + searchForm.action = 'https://www.baidu.com/s'; + searchInput.name = 'wd'; + baiduIcon.style.display = 'block'; + googleIcon.style.display = 'none'; + } + + try { + localStorage.setItem('searchEngine', searchEngineSelector.dataset.engine); + } catch (error) { + // Ignore storage errors (e.g., disabled storage) + } + searchInput.focus(); +} + +function switchSearchEngine() { + const searchEngineSelector = document.getElementById('search-engine-selector'); + const nextEngine = (searchEngineSelector?.dataset.engine || 'baidu') === 'baidu' ? 'google' : 'baidu'; + setSearchEngine(nextEngine); +} + function traichu() { dateTime(); - weatherBalloon(1850147); //OpenWeather city ID + weatherBalloon(1816670); //OpenWeather city ID - Beijing, China + const selector = document.getElementById('search-engine-selector'); + if (selector) { + selector.addEventListener('click', switchSearchEngine); + let savedEngine = null; + try { + savedEngine = localStorage.getItem('searchEngine'); + } catch (error) { + savedEngine = null; + } + setSearchEngine(savedEngine === 'google' ? 'google' : 'baidu'); + } }