diff --git a/api.py b/api.py index 61bc1c26e912bc62ad10f30ead9e823b5ca3d233..473bcfb9b278910e84c3ecb73e56e1dc6f8f8fb2 100644 --- a/api.py +++ b/api.py @@ -1,4 +1,4 @@ -from flask import Flask, request, jsonify, make_response, g +from flask import Flask, request, jsonify, make_response, g, render_template from flask_cors import CORS import BaseXClient import threading @@ -11,15 +11,14 @@ session = BaseXClient.Session('localhost', 1984, 'admin', 'admin') def main(): #globvar = session.query("db:open(\"Holzschnitt\")") session.execute("open Holzschnitt") - globvar = session.query("declare namespace lido=\"http://www.lido-schema.org\"; for $actor in distinct-values(//lido:actor/lido:nameActorSet/lido:appellationValue/text()) return $actor").execute() + globvar = session.query("declare namespace lido=\"http://www.lido-schema.org\"; for $x in (/root/object[position() lt 5]) return $x").context() #globvar = "ws" #session.query("db:open(\"Holzschnitt\")").execute() - return globvar - + return render_template('index.html', objects = globvar) diff --git a/static/stylesheet.css b/static/stylesheet.css new file mode 100644 index 0000000000000000000000000000000000000000..c9fff4d58b40fbbd59e1e88f00109192910cfd3f --- /dev/null +++ b/static/stylesheet.css @@ -0,0 +1,240 @@ +h1{ + text-align: center; + font-family: Verdana, Arial, Helvetica, sans-serif; + +} + +h3{ + text-align: center; +} + +body { + font-size: small; + font-family: Verdana, Arial, Helvetica, sans-serif; + background-color: #e2e0d9; + margin: 0; +} + +.suchfeld { + float: right; + padding: 10px 90px; + background-color: #333; +} + +#navibereich { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #333; +} + +li { + float: left; +} + +li a { + display: block; + color: white; + text-align: center; + padding: 14px 30px; + text-decoration: none; +} + +li a:hover { + background-color: #008CBA; +} + +.btn{ + background-color: #008CBA; + color: white; + border: 3px solid #008CBA; +} + +.btn:hover { + background-color: #008CBA; + color: white; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); +} + +#gallery{ + padding: 60px; +} + + +/*Bildergalerie*/ + +* { + box-sizing: border-box; +} + +.row > .column { + padding: 0 8px; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +.column { + float: left; + width: 25%; +} + +/* The Modal (background) */ +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: black; +} + +/* Modal Content */ +.modal-content { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + width: 90%; + max-width: 1200px; +} + +/* The Close Button */ +.close { + color: white; + position: absolute; + top: 10px; + right: 25px; + font-size: 35px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #999; + text-decoration: none; + cursor: pointer; +} + +.mySlides { + display: none; +} + +.cursor { + cursor: pointer +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +img { + margin-bottom: -4px; +} + +.caption-container { + text-align: center; + background-color: black; + padding: 2px 16px; + color: white; +} + +.demo { + opacity: 0.6; +} + +.active, +.demo:hover { + opacity: 1; +} + +img.hover-shadow { + transition: 0.3s +} + +.hover-shadow:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) +} + +/*Bildbeschreibung*/ +figcaption { + position: absolute; + bottom: -3em; + text-align: center; + line-height: 3em; + white-space: nowrap; + color: #e2e0d9; + background: rgba(0, 0, 0, 0); +} + + +figure:focus figcaption, +figure:hover figcaption { + bottom: 0; + left: 0; + width: 100%; + background: rgba(0, 0, 0, 0.5); + -webkit-transition: 1s; + +} + + +@media only screen and (max-width: 800px) { + body { + width: 100%; + margin: 2% 0; + padding: 1%; + } + figure.einzel { + width: 48%; + } +} + +@media only screen and (max-width: 600px) { + figure.einzel { + width: 100%; + } +} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000000000000000000000000000000000000..25adf98604147bfc7a15af45fb1863ba97704984 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='stylesheet.css') }}"> +<html> +<head> + <meta charset="utf-8"> + <title>AMK</title> + <h1>AMK</h1> + <h3>Atemberaubende Museums-Holzschnitt Kollektion</h3> +</head> +<body id="Startseite"> + <div class="suchfeld"> + <form> + <a href="#"><input type="search" name="Holzschnitte"></a> + <datalist id="Holzschnitte"> + <option value="Autor"> + </datalist> + <button class="btn">suchen</button> + </form> + </div> + <div class="menue"> + <ul id="navibereich"> + <li><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page">WikiData</a></li> + <li><a href="">Filter</a></li> + </ul> + </div> + <ul> + {% for object in objects %} + <li>{{ loop.index }} <br> + Künstler: {{ object }} <br> + <img src=" {{ object.bildLink }}" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;"> </li> + {% endfor %} + </ul> + <div id="gallery"> + <div class="row"> +<!-- {% for object in objects %} + <div class="column"> + <figure class="Bild{{ loop.index }}"> + <img src="{{ object.bildLink }}" onclick="openModal();currentSlide({{ loop.index }})" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;"> + <figcaption>Informationen zum Bild {{ object.bildLink }}</figcaption> + </figure> + </div> + {% endfor %} + <div class="column"> + <figure class="Bild1"> + <img src="./Bilder/IE1898.224-1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;"> + <figcaption>Informationen zum Bild</figcaption> + </figure> + </div> + <div class="column"> + <figure class="Bild2"> + <img src="./Bilder/S2009.259.a-1.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" style="width: 330px; height: 260px; padding: 10px;"> + <figcaption>Informationen zum Bild</figcaption> + </figure> + </div> + + <div class="column"> + <figure class="Bild3"> + <img src="../xmlProject/Bilder/S2009.197-1.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;"> + <figcaption>Informationen zum Bild</figcaption> + </figure> + </div> + + <div class="column"> + <figure class="Bild4"> + <img src="../xmlProject/Bilder/S2009.259.b-1.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;"> + <figcaption>Informationen zum Bild</figcaption> + </figure> + + </div> --> + </div> + + <div id="myModal" class="modal"> + <span class="close cursor" onclick="closeModal()">×</span> + <div class="modal-content"> + + <div class="mySlides"> + <div class="numbertext">1 / 4</div> + <img src="../xmlProject/Bilder/IE1898.224-1.jpg" style="width:100%"> + </div> + + <div class="mySlides"> + <div class="numbertext">2 / 4</div> + <img src="../xmlProject/Bilder/S2009.259.a-1.jpg" style="width:100%"> + </div> + + <div class="mySlides"> + <div class="numbertext">3 / 4</div> + <img src="../xmlProject/Bilder/S2009.197-1.jpg" style="width:100%"> + </div> + + <div class="mySlides"> + <div class="numbertext">4 / 4</div> + <img src="../xmlProject/Bilder/S2009.259.b-1.jpg" style="width:100%"> + </div> + + <a class="prev" onclick="plusSlides(-1)">❮</a> + <a class="next" onclick="plusSlides(1)">❯</a> + + <div class="caption-container"> + <p id="caption"></p> + </div> + <div class="slide"> + <div class="column"> + <img class="demo" src="../xmlProject/Bilder/IE1898.224-1.jpg" onclick="currentSlide(1)" alt="1/4" style="width: 300px; height: 210px; padding: 20px;"> + </div> + + <div class="column"> + <img class="demo" src="../xmlProject/Bilder/S2009.259.a-1.jpg" onclick="currentSlide(2)" alt="2/4" style="width: 300px; height: 210px; padding: 20px;"> + </div> + + <div class="column"> + <img class="demo" src="../xmlProject/Bilder/S2009.197-1.jpg" onclick="currentSlide(3)" alt="3/4" style="width: 300px; height: 210px; padding: 20px;"> + </div> + + <div class="column"> + <img class="demo" src="../xmlProject/Bilder/S2009.259.b-1.jpg" onclick="currentSlide(4)" alt="4/4" style="width: 300px; height: 210px; padding: 20px;"> + </div> + </div> + </div> + </div> + </div> + <script> + function openModal() { + document.getElementById('myModal').style.display = "block"; + } + + function closeModal() { + document.getElementById('myModal').style.display = "none"; + } + + var slideIndex = 1; + showSlides(slideIndex); + + function plusSlides(n) { + showSlides(slideIndex += n); + } + + function currentSlide(n) { + showSlides(slideIndex = n); + } + + function showSlides(n) { + var i; + var slides = document.getElementsByClassName("mySlides"); + var dots = document.getElementsByClassName("demo"); + var captionText = document.getElementById("caption"); + if (n > slides.length) {slideIndex = 1} + if (n < 1) {slideIndex = slides.length} + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex-1].style.display = "block"; + dots[slideIndex-1].className += " active"; + captionText.innerHTML = dots[slideIndex-1].alt; + } + </script> +</html> \ No newline at end of file