up demo with less stuff

This commit is contained in:
Tykayn 2025-09-23 11:51:54 +02:00 committed by tykayn
parent 91e34032b2
commit 2e3c2cd25d
3 changed files with 73 additions and 19 deletions

View file

@ -52,6 +52,13 @@ class DemoMainResource:
<script src="/static/demo_auth.js"></script>
<style>
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
.logo{
width: 1.5rem;
height: 1.5rem;
}
.sources{
font-size: 0.8rem
}
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.map-overlay {
position: absolute;
@ -63,6 +70,28 @@ class DemoMainResource:
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
}
/* Styles pour listes dépliantes */
#endpoints_list, #demo_pages_list {
display: none;
overflow: hidden;
transition: all 0.3s ease;
}
#endpoints_list_header, #demo_pages_list_header {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 20px;
}
#endpoints_list_header:after, #demo_pages_list_header:after {
content: '';
position: absolute;
right: 0;
font-size: 0.8em;
transition: transform 0.3s ease;
}
#endpoints_list_header.active:after, #demo_pages_list_header.active:after {
transform: rotate(180deg);
}
.map-style-control {
position: absolute;
top: 10px;
@ -108,9 +137,12 @@ class DemoMainResource:
<input type="hidden" id="osmRedirectUri" value="{client_redirect}">
<div class="map-overlay">
<h2>OpenEventDatabase Demo</h2>
<p>This map shows current events from the OpenEventDatabase.</p>
<h2>
<img src="/static/oedb.png" class="logo" />
OpenEventDatabase Demo</h2>
<p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
<p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
<!-- User Information Panel -->
<div id="user-info-panel" class="user-info-panel" style="display: none; background-color: #f5f5f5; border-radius: 4px; padding: 10px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<h3 style="margin-top: 0; margin-bottom: 10px; color: #333;">User Information</h3>
@ -144,14 +176,14 @@ class DemoMainResource:
# </script>
# </div> -->
<h3>API Endpoints:</h3>
<ul>
<h3 id="endpoints_list_header">API Endpoints:</h3>
<ul id="endpoints_list">
<li><a href="/" >/ - API Information</a></li>
<li><a href="/event" >/event - Get Events</a></li>
<li><a href="/stats" >/stats - Database Statistics</a></li>
</ul>
<h3>Demo Pages:</h3>
<ul>
<h3 id="demo_pages_list_header">Demo Pages:</h3>
<ul id="demo_pages_list">
<li><a href="/demo/search" >/demo/search - Advanced Search</a></li>
<li><a href="/demo/by-what" >/demo/by-what - Events by Type</a></li>
<li><a href="/demo/map-by-what" >/demo/map-by-what - Map by Event Type</a></li>
@ -160,22 +192,44 @@ class DemoMainResource:
<li><a href="/event?what=music" >Search Music Events</a></li>
<li><a href="/event?what=sport" >Search Sport Events</a></li>
</ul>
<p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
<p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
<p style="text-align: center; margin-top: 10px;">
<a href="https://source.cipherbliss.com/tykayn/oedb-backend" title="View Source Code on Cipherbliss" style="font-size: 24px;">
<a class="sources" href="https://source.cipherbliss.com/tykayn/oedb-backend" title="View Source Code on Cipherbliss" style="font-size: 24px;">
<i class="fas fa-code-branch"></i> sources
</a>
</p>
</div>
<div class="map-style-control">
<h4 style="margin-top: 0; margin-bottom: 10px;">Map Style</h4>
<button id="style-default" class="active">Default</button>
<button id="style-osm-vector">OSM Vector</button>
<button id="style-osm-raster">OSM Raster</button>
</div>
<script>
// Fonction pour gérer les listes dépliantes
document.addEventListener('DOMContentLoaded', function() {
const endpointsHeader = document.getElementById('endpoints_list_header');
const endpointsList = document.getElementById('endpoints_list');
const demoPagesHeader = document.getElementById('demo_pages_list_header');
const demoPagesList = document.getElementById('demo_pages_list');
// Fonction pour basculer l'affichage d'une liste
function toggleList(header, list) {
header.addEventListener('click', function() {
if (list.style.display === 'none' || list.style.display === '') {
list.style.display = 'block';
header.classList.add('active');
} else {
list.style.display = 'none';
header.classList.remove('active');
}
});
}
// Initialiser les listes comme repliées
endpointsList.style.display = 'none';
demoPagesList.style.display = 'none';
// Ajouter les écouteurs d'événements
toggleList(endpointsHeader, endpointsList);
toggleList(demoPagesHeader, demoPagesList);
});
// Map style URLs
const mapStyles = {
default: 'https://tiles.openfreemap.org/styles/liberty',

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View file

@ -1209,9 +1209,9 @@
// Update the content
userInfoPanel.innerHTML = `
<h3>User Information</h3>
<p>Username: <strong>${username}</strong></p>
<p>Points: <span class="user-points">${points}</span></p>
<!-- <h3>User Information</h3>-->
<p> <strong>${username}</strong></p>
<p> <span class="user-points">${points}</span> points</p>
`;
}