Reorganize structure + separate gallery
48
galerie/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Deez nuts </title>
|
||||||
|
<link rel="stylesheet" href="../index.css">
|
||||||
|
</head>
|
||||||
|
<body> <center>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Umění</h2>
|
||||||
|
<div id="galerie">
|
||||||
|
<div id="gal0" class="gal"><img class="galimg" id="galimg0"></div>
|
||||||
|
<div id="gal1" class="gal"><img class="galimg" id="galimg1"></div>
|
||||||
|
<div id="gal2" class="gal"><img class="galimg" id="galimg2"></div>
|
||||||
|
<div id="gal3" class="gal"><img class="galimg" id="galimg3"></div>
|
||||||
|
<div id="gal4" class="gal"><img class="galimg" id="galimg4"></div>
|
||||||
|
<div id="gal5" class="gal"><img class="galimg" id="galimg5"></div>
|
||||||
|
</div>
|
||||||
|
<button class="foot" id="lgal"><p><</p></button>
|
||||||
|
<p class="foot" id="counter"> </p>
|
||||||
|
<button class="foot" id="rgal"><p>></p></button>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
let index = 0;
|
||||||
|
let imgpaths = ["cabelist.jpg", "computerist.jpg", "culturist.jpg", "drivist.jpg", "forkliftist.jpg", "hamerist.webp", "listenist.jpg", "assist.jpg", "readist.jpg", "readist2.jpg", "pottist.jpg", "ew.jpg", "waterist.jpg", "the_fight.jpg", "tankist.png", "lingebra.jpg", "i_was_put.jpg", "man.jpg", "real.jpg", "freebird.jpg", "Bez_nadeje.png", "amogusepic.jpg", "gchdeez.png", "lays.png", "pie.png", "godot.jpg", "amogus-real.jpg", "big-chungus.png"];
|
||||||
|
let count = imgpaths.length;
|
||||||
|
let max = Math.floor(count/6);
|
||||||
|
let update = () => {
|
||||||
|
for(let i = 0; i < 6; i++) {
|
||||||
|
let src = "gandalf.jpg";
|
||||||
|
if(i + index*6 < count) src = imgpaths[6*index + i];
|
||||||
|
document.getElementById("galimg"+i).src = "umeni/"+src;
|
||||||
|
}
|
||||||
|
document.getElementById("counter").innerHTML = index + ' / ' + max;
|
||||||
|
}
|
||||||
|
document.getElementById("lgal").onclick = () => {
|
||||||
|
if(index <= 0 ) index = max;
|
||||||
|
else index--;
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
document.getElementById("rgal").onclick = () => {
|
||||||
|
if(index >= max) index = 0;
|
||||||
|
else index++;
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
update();
|
||||||
|
</script>
|
||||||
|
</center> </body>
|
||||||
|
</html>
|
||||||
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 418 KiB After Width: | Height: | Size: 418 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 713 KiB After Width: | Height: | Size: 713 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
53
index.css
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'xenippa';
|
||||||
|
src: URL('img/xenippa.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'ninifont';
|
||||||
|
src: URL('img/ninifont.otf') format('opentype');
|
||||||
|
}
|
||||||
|
h1, h2, a, p {color: black;}
|
||||||
|
h1 {font-size: 600%;font-family: xenippa;}
|
||||||
|
h2 {font-size: 275%;font-family: xenippa;}
|
||||||
|
.cite {font-size: 150%; font-family: ninifont;}
|
||||||
|
p {font-size: 150%;}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
border-radius: 1%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
padding: 1%;
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
.imgcontain {object-fit: contain;}
|
||||||
|
|
||||||
|
#galerie {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"aa ab ac"
|
||||||
|
"ba bb bc";
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#gal0 {grid-area: aa;}
|
||||||
|
#gal1 {grid-area: ab;}
|
||||||
|
#gal2 {grid-area: ac;}
|
||||||
|
#gal3 {grid-area: ba;}
|
||||||
|
#gal4 {grid-area: bb;}
|
||||||
|
#gal5 {grid-area: bc;}
|
||||||
|
.gal {
|
||||||
|
margin: 2.5%;
|
||||||
|
object-fit: contain;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
padding-bottom: 0%;
|
||||||
|
}
|
||||||
|
.foot {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: xenippa;
|
||||||
|
}
|
||||||
|
#rgal, #lgal {min-width: 50px;}
|
||||||
|
.galimg {object-fit: contain;}
|
||||||
|
#counter {margin: 2%;}
|
||||||
103
index.html
|
|
@ -2,64 +2,8 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title> Deez nuts </title>
|
<title> Deez nuts </title>
|
||||||
<style>
|
<link rel="stylesheet" href="index.css">
|
||||||
@font-face {
|
|
||||||
font-family: 'xenippa';
|
|
||||||
src: URL('img/xenippa.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'ninifont';
|
|
||||||
src: URL('img/ninifont.otf') format('opentype');
|
|
||||||
}
|
|
||||||
h1, h2, a, p {color: black;}
|
|
||||||
h1 {font-size: 600%;font-family: xenippa;}
|
|
||||||
h2 {font-size: 275%;font-family: xenippa;}
|
|
||||||
.cite {font-size: 150%; font-family: ninifont;}
|
|
||||||
p {font-size: 150%;}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.box {
|
|
||||||
border-radius: 1%;
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
padding: 1%;
|
|
||||||
background-color: lightgray;
|
|
||||||
}
|
|
||||||
.imgcontain {object-fit: contain;}
|
|
||||||
|
|
||||||
#galerie {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
grid-template-areas:
|
|
||||||
"aa ab ac"
|
|
||||||
"ba bb bc";
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
#gal0 {grid-area: aa;}
|
|
||||||
#gal1 {grid-area: ab;}
|
|
||||||
#gal2 {grid-area: ac;}
|
|
||||||
#gal3 {grid-area: ba;}
|
|
||||||
#gal4 {grid-area: bb;}
|
|
||||||
#gal5 {grid-area: bc;}
|
|
||||||
.gal {
|
|
||||||
margin: 2.5%;
|
|
||||||
object-fit: contain;
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
padding-bottom: 0%;
|
|
||||||
}
|
|
||||||
.foot {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: xenippa;
|
|
||||||
}
|
|
||||||
#rgal, #lgal {min-width: 50px;}
|
|
||||||
.galimg {object-fit: contain;}
|
|
||||||
#counter {margin: 2%;}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body> <center>
|
<body> <center>
|
||||||
<div class='box'>
|
<div class='box'>
|
||||||
<h1>Matúš</h1>
|
<h1>Matúš</h1>
|
||||||
|
|
@ -92,51 +36,16 @@ img {
|
||||||
|
|
||||||
<div class='box'>
|
<div class='box'>
|
||||||
<h2>Cool projekty</h2>
|
<h2>Cool projekty</h2>
|
||||||
<p>Rekurzivní piškvorky: <a href='p/index.html'>mat.uush.cz/p</a></p>
|
|
||||||
<p>Logik: <a href='https://git.chillplace.beer/matuush/logik'>git.chillplace.beer/matuush/logik</a></p>
|
<p>Logik: <a href='https://git.chillplace.beer/matuush/logik'>git.chillplace.beer/matuush/logik</a></p>
|
||||||
<p>Ze editor: <a href='https://git.chillplace.beer/matuush/zeed'>git.chillplace.beer/matuush/zeed</a></p>
|
<p>Ze editor: <a href='https://git.chillplace.beer/matuush/zeed'>git.chillplace.beer/matuush/zeed</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
<div class='box'>
|
||||||
|
<h2>Kam dál</h2>
|
||||||
|
<p>Rekurzivní piškvorky: <a href='p/index.html'>mat.uush.cz/p</a></p>
|
||||||
|
<p>Galerie umění: <a href='p/index.html'>mat.uush.cz/galerie.html</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="box">
|
|
||||||
<h2>Umění</h2>
|
|
||||||
<div id="galerie">
|
|
||||||
<div id="gal0" class="gal"><img class="galimg" id="galimg0"></div>
|
|
||||||
<div id="gal1" class="gal"><img class="galimg" id="galimg1"></div>
|
|
||||||
<div id="gal2" class="gal"><img class="galimg" id="galimg2"></div>
|
|
||||||
<div id="gal3" class="gal"><img class="galimg" id="galimg3"></div>
|
|
||||||
<div id="gal4" class="gal"><img class="galimg" id="galimg4"></div>
|
|
||||||
<div id="gal5" class="gal"><img class="galimg" id="galimg5"></div>
|
|
||||||
</div>
|
|
||||||
<button class="foot" id="lgal"><p><</p></button>
|
|
||||||
<p class="foot" id="counter"> </p>
|
|
||||||
<button class="foot" id="rgal"><p>></p></button>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
let index = 0;
|
|
||||||
let imgpaths = ["cabelist.jpg", "computerist.jpg", "culturist.jpg", "drivist.jpg", "forkliftist.jpg", "hamerist.webp", "listenist.jpg", "assist.jpg", "readist.jpg", "readist2.jpg", "pottist.jpg", "ew.jpg", "waterist.jpg", "the_fight.jpg", "tankist.png", "lingebra.jpg", "i_was_put.jpg", "man.jpg", "real.jpg", "freebird.jpg", "Bez_nadeje.png", "amogusepic.jpg", "gchdeez.png", "lays.png", "pie.png", "godot.jpg", "amogus-real.jpg", "big-chungus.png"];
|
|
||||||
let count = imgpaths.length;
|
|
||||||
let max = Math.floor(count/6);
|
|
||||||
let update = () => {
|
|
||||||
for(let i = 0; i < 6; i++) {
|
|
||||||
let src = "gandalf.jpg";
|
|
||||||
if(i + index*6 < count) src = imgpaths[6*index + i];
|
|
||||||
document.getElementById("galimg"+i).src = "img/umeni/"+src;
|
|
||||||
}
|
|
||||||
document.getElementById("counter").innerHTML = index + ' / ' + max;
|
|
||||||
}
|
|
||||||
document.getElementById("lgal").onclick = () => {
|
|
||||||
if(index <= 0 ) index = max;
|
|
||||||
else index--;
|
|
||||||
update();
|
|
||||||
}
|
|
||||||
document.getElementById("rgal").onclick = () => {
|
|
||||||
if(index >= max) index = 0;
|
|
||||||
else index++;
|
|
||||||
update();
|
|
||||||
}
|
|
||||||
update();
|
|
||||||
</script>
|
|
||||||
</center> </body>
|
</center> </body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||