home/ai-projects
2
0
Fork 0
mirror of https://github.com/wahyd4/ai-projects.git synced 2026-08-09 05:06:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update style

Browse Source
This commit is contained in:
junv
2024-09-18 23:00:40 +10:00
parent 602ebe78ad
commit b726048cf6
3 changed files with 66 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
have-been-to/countries.db
BIN
View File
Binary file not shown.
have-been-to/static/js/globe.js
+23 -2
View File
@@ -72,6 +72,15 @@ function init() {
document.getElementById('zoom-out').addEventListener('click', () => {
controls.zoomOut();
});
// Update renderer size
updateRendererSize();
// Add event listener for sidebar toggle
document.querySelector('button[x-on\\:click]').addEventListener('click', updateRendererSize);
// Add event listener for window resize
window.addEventListener('resize', updateRendererSize);
}
function onWindowResize() {
@@ -236,13 +245,14 @@ function updateCountryList() {
ul.innerHTML = '';
countries.forEach(country => {
const li = document.createElement('li');
li.className = 'flex justify-between items-center bg-gray-100 p-2 rounded';
li.className = 'flex justify-between items-center bg-gray-800 p-2 rounded';
const span = document.createElement('span');
span.textContent = country;
span.className = 'text-gray-200';
li.appendChild(span);
const removeButton = document.createElement('button');
removeButton.textContent = '删除';
removeButton.className = 'bg-red-500 text-white px-2 py-1 rounded text-sm hover:bg-red-600 transition duration-200';
removeButton.className = 'bg-red-600 text-white px-2 py-1 rounded text-sm hover:bg-red-700 transition duration-200';
removeButton.onclick = () => removeCountry(country);
li.appendChild(removeButton);
ul.appendChild(li);
@@ -395,3 +405,14 @@ function exportMap() {
link.click();
document.body.removeChild(link);
}
function updateRendererSize() {
const mapContainer = document.getElementById('map');
const width = mapContainer.clientWidth;
const height = mapContainer.clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
have-been-to/templates/index.html
+43 -20
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我去过的国家</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script type="importmap">
{
"imports": {
@@ -14,31 +15,53 @@
}
</script>
</head>
<body class="h-full">
<body class="h-full" x-data="{ sidebarOpen: true }">
<div class="flex h-full">
<div class="w-80 bg-white shadow-lg p-6 overflow-y-auto flex flex-col">
<h2 class="text-2xl font-bold mb-4">国家列表</h2>
<ul id="countries" class="mb-4 space-y-2 flex-grow overflow-y-auto"></ul>
<div class="mb-4">
<input type="text" id="new-country" placeholder="输入国家名称" list="country-suggestions" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<datalist id="country-suggestions"></datalist>
<!-- Sidebar -->
<div :class="{'w-80': sidebarOpen, 'w-16': !sidebarOpen}" class="bg-gray-900 shadow-lg transition-all duration-300 ease-in-out flex flex-col">
<!-- Toggle button -->
<button @click="sidebarOpen = !sidebarOpen" class="p-4 text-gray-400 hover:text-gray-200 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<div :class="{'hidden': !sidebarOpen}" class="p-6 flex-grow overflow-y-auto">
<h2 class="text-2xl font-bold mb-4 text-gray-200">国家列表</h2>
<ul id="countries" class="mb-4 space-y-2"></ul>
<div class="mb-4">
<input type="text" id="new-country" placeholder="输入国家名称" list="country-suggestions" class="w-full px-3 py-2 bg-gray-800 text-gray-200 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<datalist id="country-suggestions"></datalist>
</div>
<button id="add-country-btn" class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-200 mb-4">添加国家</button>
<p id="error-message" class="text-red-400 mt-2 mb-4"></p>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2 text-gray-300">高亮颜色</h3>
<div id="color-picker" class="flex justify-around"></div>
</div>
<button id="export-btn" class="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-200">导出地图</button>
</div>
<button id="add-country-btn" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-200 mb-4">添加国家</button>
<p id="error-message" class="text-red-500 mt-2 mb-4"></p>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2">高亮颜色</h3>
<div id="color-picker" class="flex justify-around"></div>
</div>
<button id="export-btn" class="w-full bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition duration-200">导出地图</button>
</div>
<div id="map" class="flex-grow relative">
<!-- Add a container for the map controls -->
<div class="absolute top-4 right-4 z-10">
<button id="zoom-in" class="bg-white p-2 rounded-full shadow-md mr-2">+</button>
<button id="zoom-out" class="bg-white p-2 rounded-full shadow-md">-</button>
<!-- Main content -->
<div class="flex-grow relative">
<div id="map" class="w-full h-full"></div>
<!-- Map controls -->
<div class="absolute top-4 right-4 z-10 space-x-2">
<button id="zoom-in" class="bg-gray-800 text-gray-200 p-2 rounded-full shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</button>
<button id="zoom-out" class="bg-gray-800 text-gray-200 p-2 rounded-full shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
</svg>
</button>
</div>
</div>
</div>
<script type="module">
import { addCountry, removeCountry, init, exportMap } from "{{ url_for('static', filename='js/globe.js') }}";
window.addCountry = addCountry;
@@ -48,7 +71,7 @@
document.getElementById('add-country-btn').addEventListener('click', addCountry);
document.getElementById('export-btn').addEventListener('click', exportMap);
// 在页面加载完成后初始化地图
// Initialize the map when the page loads
window.addEventListener('load', init);
</script>
</body>