214 lines
8 KiB
HTML
214 lines
8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
{{partial "head" .}}
|
||
|
|
<script defer src="/alpine.js" type="text/javascript"></script>
|
||
|
|
<script src="/helper.js"></script>
|
||
|
|
<style>
|
||
|
|
.interverse {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interverse h1 {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interverse img {
|
||
|
|
max-width: 15rem;
|
||
|
|
max-height: 15rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interverse section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interverse-connection-preview {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 0.5rem;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interverse-connection {
|
||
|
|
margin: 0.25rem;
|
||
|
|
padding: 0.25rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interverse-resource {
|
||
|
|
margin: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#interverse-resource-groups {
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
{{partial "header" .}}
|
||
|
|
<main class="interverse" x-data x-if="Alpine.store('data')">
|
||
|
|
<section>{{.Content}}</section>
|
||
|
|
<section id="interverse-details">
|
||
|
|
<img x-bind:src="Alpine.store('data')['image']">
|
||
|
|
<div style="margin-left:3rem;">
|
||
|
|
<h1 x-text="Alpine.store('data')['name']"></h1>
|
||
|
|
<a x-bind:href="Alpine.store('data')['location']" x-text="Alpine.store('data')['location']"></a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="interverse-resource-groups">
|
||
|
|
<template x-for="(group,name) in Alpine.store('data')['resource_groups']">
|
||
|
|
<div>
|
||
|
|
<h1 x-text="name"></h1>
|
||
|
|
<div class="interverse-group">
|
||
|
|
<template x-for="resource in group">
|
||
|
|
<a x-bind:href="resource['location']">
|
||
|
|
<div class="interverse-resource">
|
||
|
|
<template x-if="resource['icon'] !=''">
|
||
|
|
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
|
||
|
|
</template>
|
||
|
|
<h2 x-text="resource['label']"></h2>
|
||
|
|
<p x-text="resource['description']"></p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
<section id="interverse-resources">
|
||
|
|
<template x-for="resource in Alpine.store('data')['resources']">
|
||
|
|
<a x-bind:href="resource['location']">
|
||
|
|
<div class="interverse-resource">
|
||
|
|
<template x-if="resource['icon'] !=''">
|
||
|
|
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
|
||
|
|
</template>
|
||
|
|
<h2 x-text="resource['label']"></h2>
|
||
|
|
<p x-text="resource['description']"></p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
<div id="interverse-groups">
|
||
|
|
<template x-for="(group,name) in Alpine.store('data')['connection_groups']">
|
||
|
|
<div>
|
||
|
|
<h1 x-text="name"></h1>
|
||
|
|
<section class="interverse-group">
|
||
|
|
<template x-for="link in group">
|
||
|
|
<div class="interverse-connection" x-data="{connected:false">
|
||
|
|
<template x-if="Alpine.store(link)['name'] !=''">
|
||
|
|
<div class='interverse-connection-preview'
|
||
|
|
x-on:click="initialize(link+'/.well-known/interverse')">
|
||
|
|
<h3 x-text="Alpine.store(link)['name']"></h3>
|
||
|
|
<img x-bind:src="Alpine.store(link)['image']">
|
||
|
|
<a x-bind:href="link" x-text="link"></a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template x-if="Alpine.store(link) == undefined">
|
||
|
|
<div>
|
||
|
|
<a x-bind:href="link">
|
||
|
|
<p x-text="link"></p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<h3 style="text-align:center"></h3>
|
||
|
|
<section id="interverse-connections">
|
||
|
|
<template x-for="connection in Alpine.store('data')['connections']">
|
||
|
|
<div class="interverse-connection">
|
||
|
|
<template x-if="Alpine.store(connection)['version'] >=0">
|
||
|
|
<div x-on:click="initialize(connection+'/.well-known/interverse')">
|
||
|
|
<h3 x-text="Alpine.store(connection)['name']"></h3>
|
||
|
|
<template x-if="Alpine.store(connection)['image']!=''">
|
||
|
|
<img x-bind:src="Alpine.store(connection)['image']">
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<template x-if="name == ''">
|
||
|
|
<div>
|
||
|
|
<a x-bind:href="connection" x-text="connection"></a>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div id="interverse-contact">
|
||
|
|
<template x-for="contact in Alpine.store('data')['contact']">
|
||
|
|
<div class="interverse-contact">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
<script>
|
||
|
|
var t = new Date();
|
||
|
|
var timestamp = t.getTime();
|
||
|
|
var main_url = "/.well-known/interverse";
|
||
|
|
if (getUrlParameter('s') && getUrlParameter("url")) {
|
||
|
|
var uri = "";
|
||
|
|
main_url = getUrlParameter('s') + "://" + getUrlParameter("url") + '/.well-known/interverse?t=' + timestamp;
|
||
|
|
} else {
|
||
|
|
if (getUrlParameter('url')) {
|
||
|
|
main_url = "https://" + getUrlParameter('url') + '/.well-known/interverse?t=' + timestamp;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.addEventListener('alpine:init', function () {
|
||
|
|
|
||
|
|
initialize(main_url);
|
||
|
|
});
|
||
|
|
|
||
|
|
function initialize(url) {
|
||
|
|
Alpine.store("data", {});
|
||
|
|
fetchdata(url, function (e) {
|
||
|
|
data = JSON.parse(e.target.response);
|
||
|
|
raw_data = JSON.parse(e.target.response);
|
||
|
|
Alpine.store("data", data);
|
||
|
|
var connections = raw_data['connections'];
|
||
|
|
for (group in data['connection_groups']) {
|
||
|
|
for (link in data['connection_groups'][group]) {
|
||
|
|
connections.push(data['connection_groups'][group][link]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var t = new Date();
|
||
|
|
var timestamp = t.getTime();
|
||
|
|
for (var i = 0; i < connections.length; i++) {
|
||
|
|
fetchdata(connections[i] + '/.well-known/interverse?t=' + timestamp, function (e) {
|
||
|
|
try {
|
||
|
|
dat = JSON.parse(e.target.response);
|
||
|
|
console.log(dat);
|
||
|
|
Alpine.store(dat['location'], dat);
|
||
|
|
} catch {
|
||
|
|
console.log("Failed to parse connection JSON");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
{{partial "footer" .}}
|
||
|
|
|
||
|
|
</html>
|