Compare commits
6 Commits
c36c2c08f4
...
3b09920eee
| Author | SHA1 | Date | |
|---|---|---|---|
|
3b09920eee | ||
|
|
7caeb56def | ||
|
|
0c3d89b7da | ||
|
|
622a164873 | ||
|
|
07581211d9 | ||
|
|
af0f307d9b |
@@ -10,6 +10,8 @@ services:
|
||||
- ./services.xml:/usr/share/nginx/html/services.xml:ro
|
||||
- ./styles.css:/usr/share/nginx/html/styles.css:ro
|
||||
- ./logos:/usr/share/nginx/html/logos:ro
|
||||
- ./js:/usr/share/nginx/html/js:ro
|
||||
- ./README.md:/usr/share/nginx/html/README.md:ro
|
||||
restart: unless-stopped
|
||||
logging:
|
||||
driver: json-file
|
||||
|
||||
460
index.html
460
index.html
@@ -7,9 +7,11 @@
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="galaxy-canvas"></canvas>
|
||||
<div id="background-overlay"></div>
|
||||
<header>
|
||||
<h1>My Services</h1>
|
||||
<p class="subtitle">Quick links to the commonly used containers on this host</p>
|
||||
@@ -23,460 +25,20 @@
|
||||
<!-- Service groups will be populated dynamically from /services.xml -->
|
||||
</section>
|
||||
|
||||
<section class="notes">
|
||||
<h2>Notes</h2>
|
||||
<ul>
|
||||
<li>If any service is behind a reverse proxy or uses host networking, the path/host may differ.</li>
|
||||
<li>Edit <code>services.xml</code> in this repo to add/remove links.</li>
|
||||
</ul>
|
||||
<section class="notes" id="readme-section">
|
||||
<div id="readme-content">Loading documentation...</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<small>Generated: static homepage — served by nginx in a container. Edit and rebuild to update.</small>
|
||||
</footer>
|
||||
<script>
|
||||
// Galaxy background - exact CodePen recreation with moon and terrain
|
||||
(function initGalaxy(){
|
||||
console.clear();
|
||||
|
||||
var ww = window.innerWidth,
|
||||
wh = window.innerHeight;
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
canvas: document.querySelector('#galaxy-canvas')
|
||||
});
|
||||
renderer.setSize(ww, wh);
|
||||
renderer.setClearColor(0x001a2d);
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0x001a2d, 80, 140);
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
|
||||
camera.position.x = 70;
|
||||
camera.position.y = 30;
|
||||
camera.position.z = 5;
|
||||
camera.lookAt(new THREE.Vector3());
|
||||
|
||||
/* LIGHTS */
|
||||
var moonLight = new THREE.PointLight(0xffffff, 2, 150);
|
||||
scene.add(moonLight);
|
||||
|
||||
var moon;
|
||||
function createMoon() {
|
||||
var geometry = new THREE.SphereGeometry(8, 32, 32);
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
color: 0x26fdd9,
|
||||
shininess: 15,
|
||||
emissive: 0x2bb2e6,
|
||||
emissiveIntensity: 0.8
|
||||
});
|
||||
moon = new THREE.Mesh(geometry, material);
|
||||
moon.position.x = -9;
|
||||
moon.position.z = -6.5;
|
||||
moon.position.y = 1;
|
||||
moon.rotation.y = -1;
|
||||
scene.add(moon);
|
||||
moonLight.position.copy(moon.position);
|
||||
moonLight.position.y += 4;
|
||||
var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
|
||||
scene.add(moonLight2);
|
||||
moonLight2.position.x += 20;
|
||||
moonLight2.position.y -= 20;
|
||||
moonLight2.position.z -= 25;
|
||||
}
|
||||
|
||||
// Initialize simplex noise
|
||||
var noise = new SimplexNoise();
|
||||
|
||||
function createTerrain() {
|
||||
var geometry = new THREE.PlaneGeometry(150, 150, 120, 120);
|
||||
var m = new THREE.Matrix4();
|
||||
m.makeRotationX(Math.PI * -0.5);
|
||||
geometry.applyMatrix4(m);
|
||||
|
||||
var positions = geometry.attributes.position;
|
||||
for(var i = 0; i < positions.count; i++) {
|
||||
var x = positions.getX(i);
|
||||
var z = positions.getZ(i);
|
||||
var ratio = noise.noise3D(x * 0.03, z * 0.03, 0);
|
||||
positions.setY(i, ratio * 10);
|
||||
}
|
||||
positions.needsUpdate = true;
|
||||
geometry.computeVertexNormals();
|
||||
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
color: 0x198257,
|
||||
emissive: 0x032f50
|
||||
});
|
||||
var plane = new THREE.Mesh(geometry, material);
|
||||
scene.add(plane);
|
||||
}
|
||||
|
||||
var stars = new THREE.Group();
|
||||
scene.add(stars);
|
||||
var starsLights = new THREE.Group();
|
||||
scene.add(starsLights);
|
||||
var starsAmount = 20;
|
||||
|
||||
function createStars() {
|
||||
var geometry = new THREE.SphereGeometry(0.3, 16, 16);
|
||||
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
|
||||
for(var i = 0; i < starsAmount; i++) {
|
||||
var star = new THREE.Mesh(geometry, material);
|
||||
star.position.x = (Math.random() - 0.5) * 150;
|
||||
star.position.z = (Math.random() - 0.5) * 150;
|
||||
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
|
||||
star.position.y = ratio * 10 + 0.3;
|
||||
stars.add(star);
|
||||
var velX = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
|
||||
var velY = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
|
||||
star.vel = new THREE.Vector2(velX, velY);
|
||||
var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
|
||||
starLight.position.copy(star.position);
|
||||
starLight.position.y += 0.5;
|
||||
starsLights.add(starLight);
|
||||
}
|
||||
}
|
||||
|
||||
function updateStar(star, index) {
|
||||
if(star.position.x < -75) {
|
||||
star.position.x = 75;
|
||||
}
|
||||
if(star.position.x > 75) {
|
||||
star.position.x = -75;
|
||||
}
|
||||
if(star.position.z < -75) {
|
||||
star.position.z = 75;
|
||||
}
|
||||
if(star.position.z > 75) {
|
||||
star.position.z = -75;
|
||||
}
|
||||
|
||||
star.position.x += star.vel.x;
|
||||
star.position.z += star.vel.y;
|
||||
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
|
||||
star.position.y = ratio * 10 + 0.3;
|
||||
|
||||
starsLights.children[index].position.copy(star.position);
|
||||
starsLights.children[index].position.y += 0.5;
|
||||
}
|
||||
|
||||
function render(a) {
|
||||
requestAnimationFrame(render);
|
||||
for(var i = 0; i < starsAmount; i++) {
|
||||
updateStar(stars.children[i], i);
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
ww = window.innerWidth;
|
||||
wh = window.innerHeight;
|
||||
camera.aspect = ww / wh;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(ww, wh);
|
||||
}
|
||||
|
||||
createMoon();
|
||||
createTerrain();
|
||||
createStars();
|
||||
requestAnimationFrame(render);
|
||||
window.addEventListener('resize', onResize);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
// Fetch services.xml and render the service cards with logos.
|
||||
(async function(){
|
||||
const container = document.getElementById('services-container');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const host = window.location.hostname;
|
||||
let allServices = []; // Store all service elements for filtering
|
||||
|
||||
try{
|
||||
const res = await fetch('/services.xml', {cache: 'no-cache'});
|
||||
if(!res.ok){ throw new Error('Failed to load services.xml'); }
|
||||
const text = await res.text();
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, 'application/xml');
|
||||
|
||||
// Check for XML parsing errors
|
||||
const parseError = doc.querySelector('parsererror');
|
||||
if(parseError){
|
||||
throw new Error('XML parsing error: ' + parseError.textContent);
|
||||
}
|
||||
|
||||
// Check if we have groups or just services
|
||||
const groups = Array.from(doc.getElementsByTagName('group'));
|
||||
const hasGroups = groups.length > 0;
|
||||
|
||||
console.log('Found', groups.length, 'groups');
|
||||
|
||||
if(hasGroups){
|
||||
// Render grouped services
|
||||
groups.forEach(group => {
|
||||
const groupName = group.getAttribute('name') || 'Services';
|
||||
const services = Array.from(group.getElementsByTagName('service'));
|
||||
|
||||
console.log('Group:', groupName, 'has', services.length, 'services');
|
||||
|
||||
if(services.length === 0) return;
|
||||
|
||||
// Create group section
|
||||
const groupSection = document.createElement('section');
|
||||
groupSection.className = 'service-group';
|
||||
|
||||
const groupHeader = document.createElement('h2');
|
||||
groupHeader.className = 'group-header';
|
||||
groupHeader.textContent = groupName;
|
||||
groupSection.appendChild(groupHeader);
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'grid';
|
||||
|
||||
services.forEach(s => {
|
||||
const card = createServiceCard(s, host, allServices);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
groupSection.appendChild(grid);
|
||||
container.appendChild(groupSection);
|
||||
});
|
||||
} else {
|
||||
// Fallback: render ungrouped services
|
||||
const services = Array.from(doc.getElementsByTagName('service'));
|
||||
if(services.length === 0){
|
||||
container.innerHTML = '<p class="notes">No services found in services.xml</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'grid';
|
||||
grid.id = 'services-grid';
|
||||
|
||||
services.forEach(s => {
|
||||
const card = createServiceCard(s, host, allServices);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
container.appendChild(grid);
|
||||
}
|
||||
|
||||
// Function to create a service card
|
||||
function createServiceCard(s, host, allServices) {
|
||||
const name = s.getAttribute('name') || s.getAttribute('id') || 'unknown';
|
||||
const proto = s.getAttribute('proto') || 'http';
|
||||
const port = s.getAttribute('port') || '';
|
||||
const logo = s.getAttribute('logo') || '';
|
||||
const hostAttr = s.getAttribute('host'); // optional public hostname or full URL
|
||||
const manualStatus = s.getAttribute('status'); // optional: 'online', 'offline', 'maintenance'
|
||||
const checkHealth = s.getAttribute('check-health') !== 'false'; // default true, set to false to disable
|
||||
|
||||
// Build href: prefer explicit host attribute when present.
|
||||
// Rules:
|
||||
// - If hostAttr starts with http(s)://, use it as-is.
|
||||
// - If hostAttr is a hostname (no protocol) and does NOT include a port, prefer HTTPS and DO NOT append the service port.
|
||||
// - If hostAttr includes a port (example.com:8096), use it as provided (no extra port appended).
|
||||
// - If no hostAttr, fall back to current page hostname and use the service port.
|
||||
let href = '';
|
||||
if(hostAttr){
|
||||
if(/^https?:\/\//i.test(hostAttr)){
|
||||
href = hostAttr;
|
||||
} else {
|
||||
const hasPortInHost = /:\d+$/.test(hostAttr);
|
||||
if(hasPortInHost){
|
||||
// host includes port, use the host as provided with the proto
|
||||
href = `${proto}://${hostAttr}`;
|
||||
} else {
|
||||
// Hostname without port: prefer HTTPS and do NOT append numeric port.
|
||||
href = `https://${hostAttr}`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Fallback to current page hostname and include port if non-standard
|
||||
let portPart = '';
|
||||
if(port && !((proto==='http'&&port==='80')||(proto==='https'&&port==='443'))){ portPart = ':'+port; }
|
||||
href = `${proto}://${host}${portPart}`;
|
||||
}
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.className = 'card';
|
||||
a.href = href;
|
||||
a.target = '_blank';
|
||||
a.rel = 'noreferrer';
|
||||
a.dataset.serviceName = name.toLowerCase(); // For search filtering
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'logo';
|
||||
img.src = logo ? ('/logos/'+logo) : '/logos/default.svg';
|
||||
img.alt = name + ' logo';
|
||||
|
||||
const span = document.createElement('div');
|
||||
span.className = 'label';
|
||||
span.textContent = `${name}`;
|
||||
|
||||
a.appendChild(img);
|
||||
a.appendChild(span);
|
||||
|
||||
// Add status indicator - will be updated by health check
|
||||
const statusDot = document.createElement('span');
|
||||
statusDot.className = 'status-dot status-checking';
|
||||
statusDot.title = 'Checking status...';
|
||||
let currentStatus = 'checking';
|
||||
|
||||
// If maintenance mode is set manually, use that and skip health check
|
||||
if(manualStatus === 'maintenance'){
|
||||
statusDot.className = 'status-dot status-maintenance';
|
||||
statusDot.title = 'Status: maintenance';
|
||||
currentStatus = 'maintenance';
|
||||
a.appendChild(statusDot);
|
||||
} else if(checkHealth && href){
|
||||
// Show checking indicator initially
|
||||
a.appendChild(statusDot);
|
||||
|
||||
// Perform health check
|
||||
(async function performHealthCheck(){
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
|
||||
|
||||
const response = await fetch(href, {
|
||||
method: 'HEAD',
|
||||
mode: 'no-cors', // Allow cross-origin requests
|
||||
cache: 'no-cache',
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// In no-cors mode, opaque responses mean the server responded
|
||||
// We consider this as "online"
|
||||
currentStatus = 'online';
|
||||
statusDot.className = 'status-dot status-online';
|
||||
statusDot.title = 'Status: online';
|
||||
} catch(err) {
|
||||
// Connection failed or timed out
|
||||
currentStatus = 'offline';
|
||||
statusDot.className = 'status-dot status-offline';
|
||||
statusDot.title = 'Status: offline';
|
||||
}
|
||||
})();
|
||||
} else if(manualStatus){
|
||||
// Use manual status if health check is disabled
|
||||
statusDot.className = `status-dot status-${manualStatus}`;
|
||||
statusDot.title = `Status: ${manualStatus}`;
|
||||
currentStatus = manualStatus;
|
||||
a.appendChild(statusDot);
|
||||
}
|
||||
|
||||
// Add info button if both hostname and port are available
|
||||
if((hostAttr || host) && port){
|
||||
const infoBtn = document.createElement('button');
|
||||
infoBtn.className = 'info-btn';
|
||||
infoBtn.title = 'Connection details';
|
||||
infoBtn.innerHTML = 'ⓘ';
|
||||
infoBtn.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const displayHost = hostAttr || host;
|
||||
const details = `Service: ${name}\nHost: ${displayHost}\nPort: ${port}\nProtocol: ${proto}`;
|
||||
alert(details);
|
||||
};
|
||||
a.appendChild(infoBtn);
|
||||
}
|
||||
|
||||
allServices.push(a);
|
||||
return a;
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const searchTerm = e.target.value.toLowerCase().trim();
|
||||
let visibleCount = 0;
|
||||
|
||||
// Also hide/show group headers
|
||||
const groupSections = container.querySelectorAll('.service-group');
|
||||
|
||||
allServices.forEach(card => {
|
||||
const serviceName = card.dataset.serviceName;
|
||||
if(serviceName.includes(searchTerm)){
|
||||
card.style.display = '';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Hide empty groups
|
||||
groupSections.forEach(section => {
|
||||
const visibleCards = section.querySelectorAll('.card:not([style*="display: none"])');
|
||||
section.style.display = visibleCards.length > 0 ? '' : 'none';
|
||||
});
|
||||
|
||||
// Show message if no results
|
||||
const existingMsg = container.querySelector('.no-results');
|
||||
if(existingMsg) existingMsg.remove();
|
||||
if(visibleCount === 0 && searchTerm !== ''){
|
||||
const msg = document.createElement('p');
|
||||
msg.className = 'notes no-results';
|
||||
msg.textContent = `No services found matching "${e.target.value}"`;
|
||||
container.appendChild(msg);
|
||||
}
|
||||
});
|
||||
|
||||
// Focus search on '/' key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if(e.key === '/' && document.activeElement !== searchInput){
|
||||
e.preventDefault();
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard navigation for service cards
|
||||
let selectedIndex = -1;
|
||||
const selectCard = (index) => {
|
||||
const visibleCards = allServices.filter(card => card.style.display !== 'none');
|
||||
if(visibleCards.length === 0) return;
|
||||
|
||||
// Remove previous selection
|
||||
visibleCards.forEach(card => card.classList.remove('selected'));
|
||||
|
||||
// Update index
|
||||
if(index < 0) index = visibleCards.length - 1;
|
||||
if(index >= visibleCards.length) index = 0;
|
||||
selectedIndex = index;
|
||||
|
||||
// Add selection
|
||||
visibleCards[selectedIndex].classList.add('selected');
|
||||
visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if(document.activeElement === searchInput) return;
|
||||
|
||||
const visibleCards = allServices.filter(card => card.style.display !== 'none');
|
||||
|
||||
if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
|
||||
e.preventDefault();
|
||||
selectCard(selectedIndex + 1);
|
||||
} else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
|
||||
e.preventDefault();
|
||||
selectCard(selectedIndex - 1);
|
||||
} else if(e.key === 'Enter' && selectedIndex >= 0){
|
||||
e.preventDefault();
|
||||
visibleCards[selectedIndex].click();
|
||||
} else if(e.key === 'Escape'){
|
||||
visibleCards.forEach(card => card.classList.remove('selected'));
|
||||
selectedIndex = -1;
|
||||
}
|
||||
});
|
||||
|
||||
}catch(err){
|
||||
console.error(err);
|
||||
container.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- JavaScript modules -->
|
||||
<script src="/js/galaxy-background.js"></script>
|
||||
<script src="/js/services-loader.js"></script>
|
||||
<script src="/js/search.js"></script>
|
||||
<script src="/js/keyboard-nav.js"></script>
|
||||
<script src="/js/readme-loader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
149
js/galaxy-background.js
Normal file
149
js/galaxy-background.js
Normal file
@@ -0,0 +1,149 @@
|
||||
// Galaxy background - moonlit terrain with floating stars
|
||||
(function initGalaxy(){
|
||||
console.clear();
|
||||
|
||||
var ww = window.innerWidth,
|
||||
wh = window.innerHeight;
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
canvas: document.querySelector('#galaxy-canvas')
|
||||
});
|
||||
renderer.setSize(ww, wh);
|
||||
renderer.setClearColor(0x001a2d);
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0x001a2d, 80, 140);
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
|
||||
camera.position.x = 70;
|
||||
camera.position.y = 30;
|
||||
camera.position.z = 5;
|
||||
camera.lookAt(new THREE.Vector3());
|
||||
|
||||
/* LIGHTS */
|
||||
var moonLight = new THREE.PointLight(0xffffff, 2, 150);
|
||||
scene.add(moonLight);
|
||||
|
||||
var moon;
|
||||
function createMoon() {
|
||||
var geometry = new THREE.SphereGeometry(8, 32, 32);
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
color: 0x26fdd9,
|
||||
shininess: 15,
|
||||
emissive: 0x2bb2e6,
|
||||
emissiveIntensity: 0.8
|
||||
});
|
||||
moon = new THREE.Mesh(geometry, material);
|
||||
moon.position.x = -9;
|
||||
moon.position.z = -6.5;
|
||||
moon.position.y = 1;
|
||||
moon.rotation.y = -1;
|
||||
scene.add(moon);
|
||||
moonLight.position.copy(moon.position);
|
||||
moonLight.position.y += 4;
|
||||
var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
|
||||
scene.add(moonLight2);
|
||||
moonLight2.position.x += 20;
|
||||
moonLight2.position.y -= 20;
|
||||
moonLight2.position.z -= 25;
|
||||
}
|
||||
|
||||
// Initialize simplex noise
|
||||
var noise = new SimplexNoise();
|
||||
|
||||
function createTerrain() {
|
||||
var geometry = new THREE.PlaneGeometry(150, 150, 120, 120);
|
||||
var m = new THREE.Matrix4();
|
||||
m.makeRotationX(Math.PI * -0.5);
|
||||
geometry.applyMatrix4(m);
|
||||
|
||||
var positions = geometry.attributes.position;
|
||||
for(var i = 0; i < positions.count; i++) {
|
||||
var x = positions.getX(i);
|
||||
var z = positions.getZ(i);
|
||||
var ratio = noise.noise3D(x * 0.03, z * 0.03, 0);
|
||||
positions.setY(i, ratio * 10);
|
||||
}
|
||||
positions.needsUpdate = true;
|
||||
geometry.computeVertexNormals();
|
||||
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
color: 0x198257,
|
||||
emissive: 0x032f50
|
||||
});
|
||||
var plane = new THREE.Mesh(geometry, material);
|
||||
scene.add(plane);
|
||||
}
|
||||
|
||||
var stars = new THREE.Group();
|
||||
scene.add(stars);
|
||||
var starsLights = new THREE.Group();
|
||||
scene.add(starsLights);
|
||||
var starsAmount = 20;
|
||||
|
||||
function createStars() {
|
||||
var geometry = new THREE.SphereGeometry(0.3, 16, 16);
|
||||
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
|
||||
for(var i = 0; i < starsAmount; i++) {
|
||||
var star = new THREE.Mesh(geometry, material);
|
||||
star.position.x = (Math.random() - 0.5) * 150;
|
||||
star.position.z = (Math.random() - 0.5) * 150;
|
||||
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
|
||||
star.position.y = ratio * 10 + 0.3;
|
||||
stars.add(star);
|
||||
var velX = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
|
||||
var velY = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
|
||||
star.vel = new THREE.Vector2(velX, velY);
|
||||
var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
|
||||
starLight.position.copy(star.position);
|
||||
starLight.position.y += 0.5;
|
||||
starsLights.add(starLight);
|
||||
}
|
||||
}
|
||||
|
||||
function updateStar(star, index) {
|
||||
if(star.position.x < -75) {
|
||||
star.position.x = 75;
|
||||
}
|
||||
if(star.position.x > 75) {
|
||||
star.position.x = -75;
|
||||
}
|
||||
if(star.position.z < -75) {
|
||||
star.position.z = 75;
|
||||
}
|
||||
if(star.position.z > 75) {
|
||||
star.position.z = -75;
|
||||
}
|
||||
|
||||
star.position.x += star.vel.x;
|
||||
star.position.z += star.vel.y;
|
||||
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
|
||||
star.position.y = ratio * 10 + 0.3;
|
||||
|
||||
starsLights.children[index].position.copy(star.position);
|
||||
starsLights.children[index].position.y += 0.5;
|
||||
}
|
||||
|
||||
function render(a) {
|
||||
requestAnimationFrame(render);
|
||||
for(var i = 0; i < starsAmount; i++) {
|
||||
updateStar(stars.children[i], i);
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
ww = window.innerWidth;
|
||||
wh = window.innerHeight;
|
||||
camera.aspect = ww / wh;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(ww, wh);
|
||||
}
|
||||
|
||||
createMoon();
|
||||
createTerrain();
|
||||
createStars();
|
||||
requestAnimationFrame(render);
|
||||
window.addEventListener('resize', onResize);
|
||||
})();
|
||||
54
js/keyboard-nav.js
Normal file
54
js/keyboard-nav.js
Normal file
@@ -0,0 +1,54 @@
|
||||
// Keyboard navigation for service cards
|
||||
(function initKeyboardNav(){
|
||||
let selectedIndex = -1;
|
||||
const searchInput = document.getElementById('search-input');
|
||||
|
||||
// Wait for services to load
|
||||
const checkServicesLoaded = setInterval(() => {
|
||||
if(window.servicesData){
|
||||
clearInterval(checkServicesLoaded);
|
||||
setupKeyboardNav();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
function setupKeyboardNav(){
|
||||
const { allServices } = window.servicesData;
|
||||
|
||||
const selectCard = (index) => {
|
||||
const visibleCards = allServices.filter(card => card.style.display !== 'none');
|
||||
if(visibleCards.length === 0) return;
|
||||
|
||||
// Remove previous selection
|
||||
visibleCards.forEach(card => card.classList.remove('selected'));
|
||||
|
||||
// Update index
|
||||
if(index < 0) index = visibleCards.length - 1;
|
||||
if(index >= visibleCards.length) index = 0;
|
||||
selectedIndex = index;
|
||||
|
||||
// Add selection
|
||||
visibleCards[selectedIndex].classList.add('selected');
|
||||
visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if(document.activeElement === searchInput) return;
|
||||
|
||||
const visibleCards = allServices.filter(card => card.style.display !== 'none');
|
||||
|
||||
if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
|
||||
e.preventDefault();
|
||||
selectCard(selectedIndex + 1);
|
||||
} else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
|
||||
e.preventDefault();
|
||||
selectCard(selectedIndex - 1);
|
||||
} else if(e.key === 'Enter' && selectedIndex >= 0){
|
||||
e.preventDefault();
|
||||
visibleCards[selectedIndex].click();
|
||||
} else if(e.key === 'Escape'){
|
||||
visibleCards.forEach(card => card.classList.remove('selected'));
|
||||
selectedIndex = -1;
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
13
js/readme-loader.js
Normal file
13
js/readme-loader.js
Normal file
@@ -0,0 +1,13 @@
|
||||
// Fetch and render README.md
|
||||
(async function loadReadme(){
|
||||
try {
|
||||
const response = await fetch('/README.md', {cache: 'no-cache'});
|
||||
if(!response.ok) throw new Error('README not found');
|
||||
const markdown = await response.text();
|
||||
const html = marked.parse(markdown);
|
||||
document.getElementById('readme-content').innerHTML = html;
|
||||
} catch(err) {
|
||||
console.error('Error loading README:', err);
|
||||
document.getElementById('readme-content').innerHTML = '<p>Documentation unavailable.</p>';
|
||||
}
|
||||
})();
|
||||
58
js/search.js
Normal file
58
js/search.js
Normal file
@@ -0,0 +1,58 @@
|
||||
// Search functionality
|
||||
(function initSearch(){
|
||||
const searchInput = document.getElementById('search-input');
|
||||
|
||||
// Wait for services to load
|
||||
const checkServicesLoaded = setInterval(() => {
|
||||
if(window.servicesData){
|
||||
clearInterval(checkServicesLoaded);
|
||||
setupSearch();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
function setupSearch(){
|
||||
const { allServices, container } = window.servicesData;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const searchTerm = e.target.value.toLowerCase().trim();
|
||||
let visibleCount = 0;
|
||||
|
||||
// Also hide/show group headers
|
||||
const groupSections = container.querySelectorAll('.service-group');
|
||||
|
||||
allServices.forEach(card => {
|
||||
const serviceName = card.dataset.serviceName;
|
||||
if(serviceName.includes(searchTerm)){
|
||||
card.style.display = '';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Hide empty groups
|
||||
groupSections.forEach(section => {
|
||||
const visibleCards = section.querySelectorAll('.card:not([style*="display: none"])');
|
||||
section.style.display = visibleCards.length > 0 ? '' : 'none';
|
||||
});
|
||||
|
||||
// Show message if no results
|
||||
const existingMsg = container.querySelector('.no-results');
|
||||
if(existingMsg) existingMsg.remove();
|
||||
if(visibleCount === 0 && searchTerm !== ''){
|
||||
const msg = document.createElement('p');
|
||||
msg.className = 'notes no-results';
|
||||
msg.textContent = `No services found matching "${e.target.value}"`;
|
||||
container.appendChild(msg);
|
||||
}
|
||||
});
|
||||
|
||||
// Focus search on '/' key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if(e.key === '/' && document.activeElement !== searchInput){
|
||||
e.preventDefault();
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
202
js/services-loader.js
Normal file
202
js/services-loader.js
Normal file
@@ -0,0 +1,202 @@
|
||||
// Fetch services.xml and render the service cards with logos.
|
||||
(async function(){
|
||||
const container = document.getElementById('services-container');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const host = window.location.hostname;
|
||||
let allServices = []; // Store all service elements for filtering
|
||||
|
||||
try{
|
||||
const res = await fetch('/services.xml', {cache: 'no-cache'});
|
||||
if(!res.ok){ throw new Error('Failed to load services.xml'); }
|
||||
const text = await res.text();
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, 'application/xml');
|
||||
|
||||
// Check for XML parsing errors
|
||||
const parseError = doc.querySelector('parsererror');
|
||||
if(parseError){
|
||||
throw new Error('XML parsing error: ' + parseError.textContent);
|
||||
}
|
||||
|
||||
// Check if we have groups or just services
|
||||
const groups = Array.from(doc.getElementsByTagName('group'));
|
||||
const hasGroups = groups.length > 0;
|
||||
|
||||
console.log('Found', groups.length, 'groups');
|
||||
|
||||
if(hasGroups){
|
||||
// Render grouped services
|
||||
groups.forEach(group => {
|
||||
const groupName = group.getAttribute('name') || 'Services';
|
||||
const services = Array.from(group.getElementsByTagName('service'));
|
||||
|
||||
console.log('Group:', groupName, 'has', services.length, 'services');
|
||||
|
||||
if(services.length === 0) return;
|
||||
|
||||
// Create group section
|
||||
const groupSection = document.createElement('section');
|
||||
groupSection.className = 'service-group';
|
||||
|
||||
const groupHeader = document.createElement('h2');
|
||||
groupHeader.className = 'group-header';
|
||||
groupHeader.textContent = groupName;
|
||||
groupSection.appendChild(groupHeader);
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'grid';
|
||||
|
||||
services.forEach(s => {
|
||||
const card = createServiceCard(s, host, allServices);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
groupSection.appendChild(grid);
|
||||
container.appendChild(groupSection);
|
||||
});
|
||||
} else {
|
||||
// Fallback: render ungrouped services
|
||||
const services = Array.from(doc.getElementsByTagName('service'));
|
||||
if(services.length === 0){
|
||||
container.innerHTML = '<p class="notes">No services found in services.xml</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'grid';
|
||||
grid.id = 'services-grid';
|
||||
|
||||
services.forEach(s => {
|
||||
const card = createServiceCard(s, host, allServices);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
container.appendChild(grid);
|
||||
}
|
||||
|
||||
// Function to create a service card
|
||||
function createServiceCard(s, host, allServices) {
|
||||
const name = s.getAttribute('name') || s.getAttribute('id') || 'unknown';
|
||||
const proto = s.getAttribute('proto') || 'http';
|
||||
const port = s.getAttribute('port') || '';
|
||||
const logo = s.getAttribute('logo') || '';
|
||||
const hostAttr = s.getAttribute('host'); // optional public hostname or full URL
|
||||
const manualStatus = s.getAttribute('status'); // optional: 'online', 'offline', 'maintenance'
|
||||
const checkHealth = s.getAttribute('check-health') !== 'false'; // default true, set to false to disable
|
||||
|
||||
// Build href: prefer explicit host attribute when present.
|
||||
let href = '';
|
||||
if(hostAttr){
|
||||
if(/^https?:\/\//i.test(hostAttr)){
|
||||
href = hostAttr;
|
||||
} else {
|
||||
const hasPortInHost = /:\d+$/.test(hostAttr);
|
||||
if(hasPortInHost){
|
||||
href = `${proto}://${hostAttr}`;
|
||||
} else {
|
||||
href = `https://${hostAttr}`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let portPart = '';
|
||||
if(port && !((proto==='http'&&port==='80')||(proto==='https'&&port==='443'))){ portPart = ':'+port; }
|
||||
href = `${proto}://${host}${portPart}`;
|
||||
}
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.className = 'card';
|
||||
a.href = href;
|
||||
a.target = '_blank';
|
||||
a.rel = 'noreferrer';
|
||||
a.dataset.serviceName = name.toLowerCase(); // For search filtering
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'logo';
|
||||
img.src = logo ? ('/logos/'+logo) : '/logos/default.svg';
|
||||
img.alt = name + ' logo';
|
||||
|
||||
const span = document.createElement('div');
|
||||
span.className = 'label';
|
||||
span.textContent = `${name}`;
|
||||
|
||||
a.appendChild(img);
|
||||
a.appendChild(span);
|
||||
|
||||
// Add status indicator - will be updated by health check
|
||||
const statusDot = document.createElement('span');
|
||||
statusDot.className = 'status-dot status-checking';
|
||||
statusDot.title = 'Checking status...';
|
||||
let currentStatus = 'checking';
|
||||
|
||||
// If maintenance mode is set manually, use that and skip health check
|
||||
if(manualStatus === 'maintenance'){
|
||||
statusDot.className = 'status-dot status-maintenance';
|
||||
statusDot.title = 'Status: maintenance';
|
||||
currentStatus = 'maintenance';
|
||||
a.appendChild(statusDot);
|
||||
} else if(checkHealth && href){
|
||||
// Show checking indicator initially
|
||||
a.appendChild(statusDot);
|
||||
|
||||
// Perform health check
|
||||
(async function performHealthCheck(){
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
|
||||
|
||||
const response = await fetch(href, {
|
||||
method: 'HEAD',
|
||||
mode: 'no-cors', // Allow cross-origin requests
|
||||
cache: 'no-cache',
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// In no-cors mode, opaque responses mean the server responded
|
||||
currentStatus = 'online';
|
||||
statusDot.className = 'status-dot status-online';
|
||||
statusDot.title = 'Status: online';
|
||||
} catch(err) {
|
||||
// Connection failed or timed out
|
||||
currentStatus = 'offline';
|
||||
statusDot.className = 'status-dot status-offline';
|
||||
statusDot.title = 'Status: offline';
|
||||
}
|
||||
})();
|
||||
} else if(manualStatus){
|
||||
// Use manual status if health check is disabled
|
||||
statusDot.className = `status-dot status-${manualStatus}`;
|
||||
statusDot.title = `Status: ${manualStatus}`;
|
||||
currentStatus = manualStatus;
|
||||
a.appendChild(statusDot);
|
||||
}
|
||||
|
||||
// Add info button if both hostname and port are available
|
||||
if((hostAttr || host) && port){
|
||||
const infoBtn = document.createElement('button');
|
||||
infoBtn.className = 'info-btn';
|
||||
infoBtn.title = 'Connection details';
|
||||
infoBtn.innerHTML = 'ⓘ';
|
||||
infoBtn.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const displayHost = hostAttr || host;
|
||||
const details = `Service: ${name}\nHost: ${displayHost}\nPort: ${port}\nProtocol: ${proto}`;
|
||||
alert(details);
|
||||
};
|
||||
a.appendChild(infoBtn);
|
||||
}
|
||||
|
||||
allServices.push(a);
|
||||
return a;
|
||||
}
|
||||
|
||||
// Export allServices for use by search and keyboard navigation
|
||||
window.servicesData = { allServices, container };
|
||||
|
||||
}catch(err){
|
||||
console.error(err);
|
||||
container.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';
|
||||
}
|
||||
})();
|
||||
20
styles.css
20
styles.css
@@ -5,8 +5,9 @@
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#001a2d;color:#e6eef8;overflow-x:hidden}
|
||||
#galaxy-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
|
||||
#background-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(60,60,60,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1;pointer-events:none}
|
||||
header,main,footer{position:relative;z-index:10}
|
||||
header{padding:24px 20px;text-align:center;background:rgba(0,26,45,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
||||
header{padding:24px 20px;text-align:center}
|
||||
header h1{margin:0;font-size:28px}
|
||||
.subtitle{color:var(--muted);margin-top:6px}
|
||||
.search-container{margin-top:16px;max-width:400px;margin-left:auto;margin-right:auto}
|
||||
@@ -38,6 +39,23 @@ main{max-width:1100px;margin:18px auto;padding:12px}
|
||||
.info-btn{position:absolute;bottom:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(79,70,229,0.3);border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;line-height:1;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
|
||||
.info-btn:hover{background:rgba(79,70,229,0.6);border-color:rgba(255,255,255,0.6);transform:scale(1.1)}
|
||||
.notes{margin-top:18px;background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;color:var(--muted)}
|
||||
#readme-content{max-width:100%;overflow-x:auto}
|
||||
#readme-content h1{font-size:24px;margin-top:0;margin-bottom:12px;color:#e6eef8}
|
||||
#readme-content h2{font-size:20px;margin-top:24px;margin-bottom:10px;color:#e6eef8;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:6px}
|
||||
#readme-content h3{font-size:18px;margin-top:18px;margin-bottom:8px;color:#e6eef8}
|
||||
#readme-content p{margin:10px 0;line-height:1.6}
|
||||
#readme-content ul,#readme-content ol{margin:10px 0;padding-left:24px}
|
||||
#readme-content li{margin:6px 0}
|
||||
#readme-content code{background:rgba(79,70,229,0.15);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:13px;color:#a5b4fc}
|
||||
#readme-content pre{background:rgba(0,0,0,0.3);padding:12px;border-radius:6px;overflow-x:auto;margin:12px 0}
|
||||
#readme-content pre code{background:none;padding:0;color:#e6eef8}
|
||||
#readme-content a{color:#60a5fa;text-decoration:none}
|
||||
#readme-content a:hover{text-decoration:underline}
|
||||
#readme-content table{border-collapse:collapse;width:100%;margin:12px 0}
|
||||
#readme-content th,#readme-content td{border:1px solid rgba(255,255,255,0.1);padding:8px;text-align:left}
|
||||
#readme-content th{background:rgba(79,70,229,0.2);font-weight:600}
|
||||
#readme-content blockquote{border-left:3px solid rgba(79,70,229,0.5);padding-left:12px;margin:12px 0;color:var(--muted)}
|
||||
#readme-content img{max-width:100%;height:auto;border-radius:6px;margin:12px 0}
|
||||
footer{padding:12px 20px;text-align:center;color:var(--muted);font-size:12px}
|
||||
|
||||
@media (max-width:420px){.card{padding:14px;font-size:14px}}
|
||||
|
||||
Reference in New Issue
Block a user