sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
135 lines (122 loc) • 4.8 kB
HTML
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- YASGUI (YASQE/YASR) CSS -->
<link
href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css"
rel="stylesheet"
type="text/css"
/>
<!-- FontAwesome CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<title>SPARQL Query Form</title>
<style>
.yasqe .CodeMirror {
font-size: 0.9em;
height: 380px;
}
.yasr_header {
display: none;
}
.form-container {
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.result-container {
margin-top: 20px;
}
</style>
<!-- Webpack CSS -->
<%= css %>
</head>
<body>
<!-- The HTML needs to import one Sparnatural theme CSS of their choice - and this can be customized by the client -->
<link href="themes/sparnatural-theme-sea.css" rel="stylesheet" />
<header>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand display-1 mr-auto" href="#"
>SPARnatural - Form page</a
>
<span class="navbar-text" style="margin-right: 100px">
<a href="?lang=fr">fr</a> | <a href="?lang=en">en</a>
</span>
</nav>
</header>
<div class="container-fluid" style="margin-top: 1em">
<a href="#" id="switch-language">switch to en</a>
<div class="row">
<!-- Formulaire à gauche -->
<div class="col-md-4">
<!-- Sparnatural Form -->
<!-- <sparnatural-form
src="form-configs/dbpedia/dbpediafr-config.ttl"
lang="en"
defaultLang="fr"
limit="100"
endpoint="https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=http%3A%2F%2Ffr.dbpedia.org%2Fsparql"
form="form-configs/dbpedia/form.json"
prefix="skos:http://www.w3.org/2004/02/skos/core# rico:https://www.ica.org/standards/RiC/ontology#"
query="form-configs/dbpedia/query.json"
></sparnatural-form>-->
<sparnatural-form
src="https://xls2rdf.sparna.fr/rest/convert?url=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1WrC2r7yDQCP5AKhu6SAK8Ba_QshzFKmm%2Fexport%3Fformat%3Dxlsx&noPostProcessings=true https://xls2rdf.sparna.fr/rest/convert?url=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1UWfCJmgvgwJ0yOs6Ox_qzn47heaiQ0cx%2Fexport%3Fformat%3Dxlsx&noPostProcessings=true form-configs/sapa/collections-shacl.ttl form-configs/sapa/instantiation_statistics_sparnatural.ttl"
lang="en"
defaultLang="en"
limit="100"
endpoint="https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=https%3A%2F%2Fwww.dev.performing-arts.ch%2Fsparql"
form="form-configs/sapa-inst/form.json"
prefix="skos:http://www.w3.org/2004/02/skos/core# rico:https://www.ica.org/standards/RiC/ontology#"
query="form-configs/sapa-inst/query.json"
></sparnatural-form>
</div>
<!-- Éditeur SPARQL à droite -->
<div class="col-md-8">
<div class="row" style="margin-bottom: 0.5em">
<div class="col-md-12">
<span style="font-size: 90%">
Les requêtes sont envoyées à
<a
id="endpoint"
href="https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=https%3A%2F%2Fwww.dev.performing-arts.ch%2Fsparql"
>https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=https%3A%2F%2Fwww.dev.performing-arts.ch%2Fsparql</a
>
</span>
</div>
<div id="yasqe"></div>
</div>
<div class="result-container">
<div id="yasr"></div>
</div>
</div>
</div>
</div>
<!--JQUERY DEPENDENCY-->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- YASGUI stuff -->
<script src="https://unpkg.com/@triply/yasgui/build/yasgui.min.js"></script>
<!-- Webpack JS -->
<%= js %>
<script src="sparnatural-yasgui-plugins.js"></script>
<script src="scripts/init-form-page.js"></script>
</body>
</html>