implemented most of the functions and design
Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.idea
|
||||
8
SchwarzesJena.iml
Normal file
8
SchwarzesJena.iml
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="GENERAL_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
32
colors.css
Normal file
32
colors.css
Normal file
@@ -0,0 +1,32 @@
|
||||
a {
|
||||
color: #f42;
|
||||
}
|
||||
body{
|
||||
background: black;
|
||||
color: red;
|
||||
}
|
||||
|
||||
header h1{
|
||||
text-shadow: 3px 3px 10px black, -3px 3px 10px black, 3px -3px 10px black, -3px -3px 10px black;
|
||||
}
|
||||
|
||||
header h2{
|
||||
background: rgba(0,0,0,0.6);
|
||||
text-shadow: 3px 3px 10px black, -3px 3px 10px black, 3px -3px 10px black, -3px -3px 10px black;
|
||||
}
|
||||
|
||||
h3{
|
||||
background: rgba(70,0,0,0.5);
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
div{
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
#eventlist .event{
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
#showcase{
|
||||
border: 1px solid red;
|
||||
}
|
||||
29
fonts.css
Normal file
29
fonts.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'UnifrakturMaguntia';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/unifrakturmaguntia/v20/WWXPlieVYwiGNomYU-ciRLRvEmK7oaVemGZM.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
body{
|
||||
font-family: sans-serif;
|
||||
}
|
||||
header{
|
||||
text-align: center;
|
||||
}
|
||||
h1, h2{
|
||||
font-family: UnifrakturMaguntia;
|
||||
}
|
||||
h1{
|
||||
font-size: 70px;
|
||||
}
|
||||
h2{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#showcase{
|
||||
text-align: center;
|
||||
}
|
||||
54
index.html
54
index.html
@@ -4,34 +4,68 @@
|
||||
<meta charset="UTF-8" />
|
||||
<title>Schwarzes Jena: alternative Tanzveranstaltungen, Lesungen, Konzerte und düstere Zusammenkünfte</title>
|
||||
<script src="sj.js"></script>
|
||||
<link rel="stylesheet" href="js.css">
|
||||
<link rel="stylesheet" href="colors.css">
|
||||
<link rel="stylesheet" href="fonts.css">
|
||||
<link rel="stylesheet" href="positions.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="left">
|
||||
<h2>Shortcuts</h2>
|
||||
<h3>Shortcuts</h3>
|
||||
<ul>
|
||||
<li>Homer</li>
|
||||
<li><a href="?">Home</a></li>
|
||||
<li>Events in Jena</li>
|
||||
<li>altes Forum</li>
|
||||
</ul>
|
||||
<h2>Genres</h2>
|
||||
<h2>Infos</h2>
|
||||
<h3>Genres</h3>
|
||||
<ul>
|
||||
<li>70er</li>
|
||||
<li>80er</li>
|
||||
</ul>
|
||||
<h3>Infos</h3>
|
||||
<ul>
|
||||
<li>Was soll das?</li>
|
||||
<li>Veranstalter</li>
|
||||
<li>Datenschutz</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="right">
|
||||
<h2>Locations</h2>
|
||||
<h2>andere Tags</h2>
|
||||
<h3>Locations</h3>
|
||||
<p>Erfurt</p>
|
||||
<ul>
|
||||
<li>Engelsburg</li>
|
||||
</ul>
|
||||
<p><a href="?tags=gera">Gera</a></p>
|
||||
<ul>
|
||||
<li>Comma</li>
|
||||
</ul>
|
||||
<p><a href="?tags=jena">Jena</a></p>
|
||||
<h3>andere Tags</h3>
|
||||
</nav>
|
||||
<main>
|
||||
<header>
|
||||
<h1>schwarzes Jena</h1>
|
||||
<div class="slogan">alternative Tanzveranstaltungen, Konzerte, Lesungen u.a. düstere Zusammenkünfte</div>
|
||||
<h2 class="slogan">alternative Tanzveranstaltungen,<br/>Konzerte, Lesungen<br/>u.a. düstere Zusammenkünfte</h2>
|
||||
</header>
|
||||
<div id="welcome">
|
||||
<h3>Willkommen!</h3>
|
||||
<p>
|
||||
Dies sind die neuen Seiten des schwarzen Jena.
|
||||
Hier sollen in Zukunft vor allem Grufti-Veranstaltungen auftauchen.
|
||||
</p>
|
||||
<p>
|
||||
Dazu werden alle Termine aus dem offenen Kalender OpenCloudCal importiert, die das Stichwort „schwarzesjena“ gesetzt haben.
|
||||
Veranstalter können dort einfach Ihre Termine eintragen, oder dafür sorgen, dass die Termine von ihrer Website nach OpenCloudCal importiert werden.
|
||||
</p>
|
||||
</div>
|
||||
<div id="showcase">
|
||||
|
||||
<h3>Schaukasten</h3>
|
||||
</div>
|
||||
<div id="eventlist">
|
||||
|
||||
<h3>Grufti-Events</h3>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", load);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
12
js.css
12
js.css
@@ -1,12 +0,0 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
nav {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.debug,
|
||||
nav{
|
||||
background: orange;
|
||||
border: 1px dotted lime;
|
||||
}
|
||||
79
positions.css
Normal file
79
positions.css
Normal file
@@ -0,0 +1,79 @@
|
||||
a{
|
||||
font-weight: bold;
|
||||
}
|
||||
body {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div{
|
||||
border-radius: 10px 10px 0 0;
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div:hover{
|
||||
max-height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
h1{
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
h3{
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin: 0;
|
||||
padding: 6px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
main {
|
||||
position: absolute;
|
||||
right: 260px;
|
||||
left: 260px;
|
||||
background-image: url('rotes_jena.jpg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 250px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
nav.left{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
nav.right{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 3px 0 5px;
|
||||
}
|
||||
#eventlist{
|
||||
max-height: unset;
|
||||
}
|
||||
#eventlist .event img{
|
||||
max-width: 50%;
|
||||
float: right;
|
||||
}
|
||||
#showcase img{
|
||||
max-height: 160px;
|
||||
}
|
||||
#welcome {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
BIN
rotes_jena.jpg
Normal file
BIN
rotes_jena.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
88
sj.js
88
sj.js
@@ -1 +1,87 @@
|
||||
console.log('hello world');
|
||||
function create(type){
|
||||
return document.createElement(type);
|
||||
}
|
||||
|
||||
function getTags(){
|
||||
const params = query();
|
||||
return params.get('tags');
|
||||
}
|
||||
|
||||
async function handleData(response){
|
||||
if (response.ok){
|
||||
var json = await response.json();
|
||||
var tags = getTags();
|
||||
if (!tags) showcase(json);
|
||||
var list = tag('eventlist');
|
||||
for (var event of json){
|
||||
var div = create('div');
|
||||
div.innerHTML = event.description;
|
||||
div.setAttribute('class','event');
|
||||
if (event.attachments){
|
||||
for (var attachment of event.attachments){
|
||||
if (attachment.mime.startsWith('image')){
|
||||
var img = create('img');
|
||||
img.src = attachment.url;
|
||||
div.prepend(img);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
var h4 = create('h4');
|
||||
h4.innerHTML = event.url ? `<a href="${event.url}" target="_blank">${event.title}</a>` : event.title;
|
||||
div.prepend(h4);
|
||||
eventlist.appendChild(div);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hide(id){
|
||||
var elem = tag(id);
|
||||
elem.style.display = 'none';
|
||||
}
|
||||
|
||||
function load(){
|
||||
var tags = getTags();
|
||||
if (!tags) {
|
||||
tags = 'schwarzesjena';
|
||||
} else {
|
||||
hide('showcase');
|
||||
tag('eventlist').innerHTML = "<h3>Events</h3>";
|
||||
}
|
||||
fetch('https://cal.srsoftware.de/api/events/json?tags='+tags).then(handleData);
|
||||
}
|
||||
|
||||
function query(){
|
||||
return new URLSearchParams(location.search);
|
||||
}
|
||||
|
||||
function show(id){
|
||||
var elem = tag(id);
|
||||
elem.style.display = '';
|
||||
}
|
||||
|
||||
function showcase(json){
|
||||
var div = tag('showcase');
|
||||
for (var event of json){
|
||||
if (event.attachments){
|
||||
for (var attachment of event.attachments){
|
||||
if (attachment.mime.startsWith('image')){
|
||||
var img = create('img');
|
||||
img.src = attachment.url;
|
||||
if (event.url){
|
||||
var a = create('a');
|
||||
a.href = event.url;
|
||||
a.target = '_blank';
|
||||
a.appendChild(img);
|
||||
div.appendChild(a);
|
||||
} else div.appendChild(img);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tag(id){
|
||||
return document.getElementById(id);
|
||||
}
|
||||
Reference in New Issue
Block a user