diff --git a/old/css/styles.css b/old/css/styles.css new file mode 100644 index 0000000..1281c6d --- /dev/null +++ b/old/css/styles.css @@ -0,0 +1,125 @@ +body { + font-family: 'Roboto', sans-serif; + background-color: #f0f2f5; + color: #333; + margin: 0; + padding: 0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + text-align: center; +} + +h1 { + color: #444; +} + +form { + margin-bottom: 20px; +} + +input[type="text"] { + padding: 10px; + width: 70%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0056b3; +} + +.icon-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + justify-items: center; +} + +.icon-grid div { + flex: 1 1 calc(25% - 20px); + text-align: center; +} + +.icon-grid img { + max-width: 120px; + border-radius: 15px; + transition: transform 0.3s ease; +} + +.icon-grid img:hover { + transform: scale(1.1); +} +/* 返回顶部按钮 */ +#back-to-top { + position: fixed; + bottom: 40px; + right: 20px; + display: none; + width: 50px; + height: 50px; + background-color: #007bff; + color: white; + border: none; + border-radius: 50%; + font-size: 24px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease; +} + +#back-to-top:hover { + background-color: #0056b3; +} + +/* 页脚样式 */ +footer { + background-color: #333; + color: white; + padding: 20px 0; + text-align: center; +} + +.footer-content { + max-width: 800px; + margin: 0 auto; +} + +.footer-content p { + font-size: 18px; + margin-bottom: 10px; +} + +.footer-content ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; +} + +.footer-content ul li { + margin: 0 15px; +} + +.footer-content ul li a { + color: white; + text-decoration: none; +} + +.footer-content ul li a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/old/index.php b/old/index.php new file mode 100644 index 0000000..855cff9 --- /dev/null +++ b/old/index.php @@ -0,0 +1,57 @@ + + + + + + App图标搜索器 + + + + + + +
+

搜索应用图标

+
+ + +
+
+ ' . $app['trackName'] . '

' . $app['trackName'] . '

'; + } + } else { + echo "

没有这个应用.

"; + } + } + ?> +
+ + + + + + + + + + \ No newline at end of file diff --git a/old/js/scripts.js b/old/js/scripts.js new file mode 100644 index 0000000..ab8f014 --- /dev/null +++ b/old/js/scripts.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", function() { + const loadMoreButton = document.getElementById("load-more"); + const backToTopButton = document.getElementById("back-to-top"); + + if (loadMoreButton) { + loadMoreButton.addEventListener("click", function() { + let offset = parseInt(this.getAttribute("data-offset")); + const searchTerm = this.getAttribute("data-term"); + const limit = 40; + + fetch(`index.php?term=${searchTerm}&offset=${offset}`) + .then(response => response.text()) + .then(data => { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = data; + const newContent = tempDiv.querySelectorAll('.icon-grid div'); + newContent.forEach(item => document.querySelector('.icon-grid').appendChild(item)); + // 更新偏移量 + loadMoreButton.setAttribute("data-offset", offset + limit); + }); + + }); + } + + // 显示返回顶部按钮的逻辑 + window.onscroll = function() { + if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { + backToTopButton.style.display = "block"; + } else { + backToTopButton.style.display = "none"; + } + }; + + // 返回顶部按钮点击事件 + backToTopButton.onclick = function() { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; +}); +document.getElementById('submit').addEventListener('keydown', function(event) { + if (event.key === 'Enter') { + searchMovies(); // 按下回车键时执行搜索 + } +}); \ No newline at end of file