gdb-p2p
Version:
Distributed graph database (GraphDB/GDB) for real-time data modeling, scalable storage, and efficient querying of complex relationships.
152 lines (131 loc) • 5.48 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Examples</title>
<style>
/* General styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
h1 {
text-align: center;
color: #444;
margin: 20px 0;
}
p {
text-align: center;
color: #666;
margin-bottom: 30px;
}
/* Main container */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Card styles */
.example-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
padding: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.example-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.example-title {
font-size: 20px;
color: #007BFF;
margin: 0 0 10px;
}
.example-description {
font-size: 14px;
color: #777;
}
.example-link {
text-decoration: none;
color: #007BFF;
font-weight: bold;
}
.example-link:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
.example-title {
font-size: 18px;
}
.example-description {
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>GraphDB Application Examples</h1>
<p>Select an example to view it:</p>
<!-- List of examples -->
<div id="example-list"></div>
</div>
<script>
// List of available examples with descriptions
const examples = [
{ file: "todolist.html", title: "To-Do List", description: "A simple app to manage pending tasks in realtime." },
{ file: "infinite-scroll.html", title: "Infinite Scroll", description: "Example of dynamic content loading while scrolling." },
{ file: "chat.html", title: "Real-Time Chat", description: "A basic chat with real-time updates." },
{ file: "kanban.html", title: "Real-Time Kanban", description: "A basic kanban with real-time updates." },
{ file: "cursor.html", title: "Custom Cursor", description: "Move your mouse cursor in realtime." },
{ file: "relations.html", title: "Data Relationships", description: "Visualization of graph relations in realtime." },
{ file: "search.html", title: "Instant Search", description: "Implementation of a quick search for GDB Operator testing." },
{ file: "sandbox.html", title: "Sandbox for Operators", description: "A testing environment to experiment with GDB Operators." },
{ file: "sandbox-posts.html", title: "Sandbox for IA Promps", description: "A testing environment to experiment with GDB Operators and IA" },
{ file: "testlinks.html", title: "Test Links", description: "A tool to verify and validate the functionality of hyperlinks within the application." },
{ file: "paste.html", title: "Real-Time Paste", description: "A textarea that syncs content in real-time with GraphDB." },
{ file: "rbac.html", title: "GraphDB - Database Role System", description: "Experimental Role-Based Access Control (RBAC) API.." },
{ file: "tictactoc.html", title: "Tic Tac Toe Game", description: "A Tic Tac Toe game using GraphDB for real-time player synchronization." },
];
// Function to generate the list of examples
function generateExampleList() {
const container = document.getElementById("example-list");
examples.forEach(example => {
// Create example card
const card = document.createElement("div");
card.className = "example-card";
// Example title
const title = document.createElement("div");
title.className = "example-title";
const link = document.createElement("a");
link.href = `../examples/${example.file}`;
link.className = "example-link";
link.textContent = example.title;
title.appendChild(link);
// Example description
const description = document.createElement("div");
description.className = "example-description";
description.textContent = example.description;
// Add elements to the card
card.appendChild(title);
card.appendChild(description);
// Add card to the container
container.appendChild(card);
});
}
// Generate the list when the page loads
window.onload = generateExampleList;
</script>
</body>
</html>