Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/uclab-potsdam/interinfo
Browse files Browse the repository at this point in the history
  • Loading branch information
Valentina Lafchieva committed Dec 10, 2024
2 parents 10e53f1 + 1f4629d commit 5a4b702
Show file tree
Hide file tree
Showing 21 changed files with 1,297 additions and 2 deletions.
44 changes: 44 additions & 0 deletions examples/graphics/svg_triangles.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG - Graphics - Interactive Information</title>
<style>
body {
margin: 0; padding: 0;
}

svg {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" ></svg>

<script>
const svg = document.querySelector('svg');

// add circle at click location
svg.addEventListener('click', (event) => {
createTriangles(event.clientX, event.clientY);
});

// create triangles
function createTriangles(x, y) {
const triangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
const d = 5+Math.random()*50;
const x1 = x+d;
const y1 = y+d;
const x2 = x-d;
const y2 = y+d;
triangle.setAttribute('points', `${x},${y} ${x1},${y1} ${x2},${y2}`);
triangle.setAttribute('fill', 'black');
svg.appendChild(triangle);
}

</script>
</body>
</html>
1 change: 1 addition & 0 deletions experiments/Figma Test
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx builder.io@latest add 3edca1b
Binary file added experiments/Leon/102 BOYZ x BHZ - Bier [Prod. by Symtex128] (Official Video).mp4
View file
Binary file not shown.
167 changes: 167 additions & 0 deletions experiments/Leon/3_images copy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar System with Information</title>

<style>
/* Hintergrund mit Sternenhimmel */
body {
background-image: url('abstract-geometric-background-shapes-texture.jpg'); /* Ersetze dies durch die URL deines Sternenhimmel-Bildes */
background-size: cover;
background-repeat: no-repeat;
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, sans-serif;
display: flex;
justify-content: center;
padding: 50px;
/* overflow: hidden; */ /* Entfernt diese Zeile */
}

/* Container für die gesamte Planetengruppe */
.solar-system {
display: flex;
flex-direction: column; /* Vertikale Ausrichtung */
align-items: center;
gap: 40px;
/* height: 100vh; */ /* Optional: Festlegen der Höhe für bessere Sichtbarkeit */
}

/* Container für jeden Planeten und die Info */
.planet {
display: flex;
align-items: center;
gap: 25px;
}

/* Bild-Styling */
img.planet-image {
width: 120px;
transition: transform 0.5s, filter 2s;
}

img.planet-image:hover {
transform: scale(1.3); /* Vergrößert das Bild bei Hover */
}

/* Styling für das Informationsfeld */
.info {
font-size: 14px;
text-align: left;
width: 150px;
}

/* Raketen-Animation */
.rocket {
position: absolute;
width: 80px;
top: 50%; /* Startposition */
left: 50%;
transform: translate(-50%, -50%) scaleX(-1); /* Start in der Mitte, gespiegelt */
animation: fly-wild 5s infinite alternate ease-in-out; /* Endlose Animation */
}

/* Keyframes für wilde, zufällige Bewegung */
@keyframes fly-wild {
0% {
top: 50%;
left: 50%;
}
20% {
top: 40%;
left: 80%;
}
40% {
top: 70%;
left: 30%;
}
60% {
top: 30%;
left: 90%;
}
80% {
top: 80%;
left: 20%;
}
100% {
top: 40%;
left: 50%;
}
}
</style>

</head>
<body>

<div class="solar-system">
<!-- Planet mit Bild und Info -->
<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Mercury_in_true_color.jpg" alt="Planet Mercury">
<div class="info">
<strong>Mercury</strong>
<p>Der kleinste Planet und der Sonne am nächsten.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c7/PIA23791-Venus-RealAndEnhancedContrastViews-20200608_%28cropped%29.jpg" alt="Planet Venus">
<div class="info">
<strong>Venus</strong>
<p>Heißer als Merkur mit dichter, giftiger Atmosphäre.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" alt="Planet Earth">
<div class="info">
<strong>Earth</strong>
<p>Der blaue Planet und unser Zuhause.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" alt="Planet Mars">
<div class="info">
<strong>Mars</strong>
<p>Der rote Planet mit potenziellen Spuren von Leben.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Jupiter.jpg" alt="Planet Jupiter">
<div class="info">
<strong>Jupiter</strong>
<p>Der größte Planet mit einem riesigen Sturm.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg" alt="Planet Saturn">
<div class="info">
<strong>Saturn</strong>
<p>Bekannt für seine markanten Ringe.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg" alt="Planet Uranus">
<div class="info">
<strong>Uranus</strong>
<p>Ein eisiger Planet, der sich auf der Seite dreht.</p>
</div>
</div>

<div class="planet">
<img class="planet-image" src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg" alt="Planet Neptune">
<div class="info">
<strong>Neptune</strong>
<p>Ein ferner blauer Planet mit starken Winden.</p>
</div>
</div>
</div>

<!-- Rakete mit wilder Animation -->
<img src="rb_63948.png" alt="Flying Rocket" class="rocket"> <!-- Dein eigenes Raketenbild hier einfügen -->

</body>
</html>
111 changes: 111 additions & 0 deletions experiments/Leon/3_planets moving.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Images of a haunted solar system - Interactive Information</title>

<style>

body {
background-image: url("../../examples/images/stars.jpg");
display: flex;
}

* {
transition: all 5s;
}

figure {
position: absolute;
mix-blend-mode: difference;
width: 15vw;
}

figure:nth-of-type(3) {
border: 1px red solid;
}

figure figcaption {
color: white;
text-align: center;
font-family: sans-serif;
}

img {
width: 100%;
}

img:hover {
filter: none;
}

</style>
</head>
<body>


<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Mercury_in_true_color.jpg" alt="Planet Mercury">
<figcaption>Mercury</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/PIA23791-Venus-RealAndEnhancedContrastViews-20200608_%28cropped%29.jpg" alt="Planet Venus">
<figcaption>Venus</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" alt="Planet Earth">
<figcaption>Earth</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" alt="Planet Mars">
<figcaption>Mars</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Jupiter.jpg" alt="Planet Jupiter">
<figcaption>Jupiter</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg" alt="Planet Saturn">
<figcaption>Saturn</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg" alt="Planet Uranus">
<figcaption>Uranus</figcaption>
</figure>

<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg" alt="Planet Neptune">
<figcaption>Neptune</figcaption>
</figure>

<script>

const positionPlanets = function() {
const planets = document.getElementsByTagName("figure");

for (const planet of planets) {
const x = Math.random()*90;
const y = Math.random()*90;
const w = 5+Math.random()*20;
planet.style.left = x+"vw";
planet.style.top = y+"vh";
planet.style.width = w+"vw";
};
}

positionPlanets();

setInterval(positionPlanets, 5000);



</script>

</body>
</html>
38 changes: 38 additions & 0 deletions experiments/Leon/6_graphics.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreieck erstellen</title>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(255, 230, 0);
position: absolute;
}
</style>
</head>
<body>
<h1>Build your own pyramid like in the old time</h1>
<div id="area" style="width:100%; height:100vh; cursor: pointer; background-image: url('dubai\ .jpg');">
</div>

<script>
document.getElementById("area").addEventListener("click", function(event) {
const triangle = document.createElement("div");
const size = Math.random() * 100 + 30;
triangle.className = "triangle";
triangle.style.borderLeftWidth = size / 2 + "px";
triangle.style.borderRightWidth = size / 2 + "px";
triangle.style.borderBottomWidth = size + "px";
triangle.style.left = event.clientX - size / 2 + "px";
triangle.style.top = event.clientY - size + "px";
document.body.appendChild(triangle);
});
</script>

</body>
</html>
Binary file added experiments/Leon/dubai .jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions experiments/julian/6_media/embed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
height: auto; /* Maintain aspect ratio */
margin-top: 120px; /* Add space below the navigation bar */
}

</style>
</head>
<body>
Expand Down
Loading

0 comments on commit 5a4b702

Please sign in to comment.