SRSoftware/schwarzes-jena.de
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implemented most of the functions and design

Browse Source 
Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
Stephan Richter
2025-01-06 01:23:45 +01:00
parent 4c9fa129ad
commit 49a4161b28
9 changed files with 280 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
.idea
SchwarzesJena.iml
+8
View 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>
colors.css
+32
View 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;
}
fonts.css
+29
View 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;
}
index.html
+44 -10
View File
@@ -4,34 +4,68 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Schwarzes Jena: alternative Tanzveranstaltungen, Lesungen, Konzerte und düstere Zusammenkünfte</title> <title>Schwarzes Jena: alternative Tanzveranstaltungen, Lesungen, Konzerte und düstere Zusammenkünfte</title>
<script src="sj.js"></script> <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> </head>
<body> <body>
<nav class="left"> <nav class="left">
<h2>Shortcuts</h2> <h3>Shortcuts</h3>
<ul> <ul>
<li>Homer</li> <li><a href="?">Home</a></li>
<li>Events in Jena</li> <li>Events in Jena</li>
<li>altes Forum</li> <li>altes Forum</li>
</ul> </ul>
<h2>Genres</h2> <h3>Genres</h3>
<h2>Infos</h2> <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>
<nav class="right"> <nav class="right">
<h2>Locations</h2> <h3>Locations</h3>
<h2>andere Tags</h2> <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> </nav>
<main> <main>
<header> <header>
<h1>schwarzes Jena</h1> <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> </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"> <div id="showcase">
<h3>Schaukasten</h3>
</div> </div>
<div id="eventlist"> <div id="eventlist">
<h3>Grufti-Events</h3>
</div> </div>
</main> </main>
<script>
document.addEventListener("DOMContentLoaded", load);
</script>
</body> </body>
</html> </html>
js.css
-12
View File
@@ -1,12 +0,0 @@
body {
font-family: sans-serif;
}
nav {
width: 200px;
}
.debug,
nav{
background: orange;
border: 1px dotted lime;
}
positions.css
+79
View 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;
}
rotes_jena.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

sj.js
+87 -1
View File
@@ -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);
}