graph-explorer
Version:
Graph Explorer can be used to explore and RDF graphs in SPARQL endpoints or on the web.
80 lines (79 loc) • 2.84 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<title>Graph Explorer QLever demo</title>
<style>
html,
body,
#root {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #f1f5f9;
}
.demoSelector {
position: absolute;
top: 12px;
right: 16px;
z-index: 20;
height: 34px;
padding: 0 30px 0 12px;
font-size: 13px;
font-weight: 500;
color: #334155;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
border: 1px solid #e5e9f0;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1),
0 2px 6px rgba(15, 23, 42, 0.06);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.demoSelector:hover {
border-color: #cbd5e1;
}
.demoSelector:focus-visible {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.28);
}
</style>
<link
rel="stylesheet"
type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<select class="demoSelector" onchange="window.location.href = this.value">
<option value="index.html">Local</option>
<option value="edit.html">Editing demo</option>
<option value="dbpedia.html">DBPedia demo</option>
<option value="wikidata.html">Wikidata</option>
<option value="wikidataGraph.html">WikidataGraph</option>
<option value="toolbarCustomization.html">Toolbar customization</option>
<option value="envendpoint.html">On $SPARQL_ENDPOINT</option>
<option value="qlever.html">QLever on $SPARQL_ENDPOINT</option>
</select>
<script>
var pathname = window.location.pathname;
var separatorIndex = pathname.lastIndexOf("/");
var page =
separatorIndex >= 0 ? pathname.substring(separatorIndex + 1) : pathname;
document.querySelector(".demoSelector").value = page || "index.html";
</script>
<script type="module" src="./qlever.ts"></script>
</body>
</html>