Simplify index
This commit is contained in:
parent
773bb3099b
commit
900a2104a8
1 changed files with 98 additions and 126 deletions
224
index.html
224
index.html
|
|
@ -1,55 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title> Deez nuts </title>
|
||||
<title> Deez nuts </title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'xenippa';
|
||||
src: URL('img/xenippa.ttf') format('truetype');
|
||||
font-family: 'xenippa';
|
||||
src: URL('img/xenippa.ttf') format('truetype');
|
||||
}
|
||||
.xnp {font-family: xenippa;}
|
||||
@font-face {
|
||||
font-family: 'ninifont';
|
||||
src: URL('img/ninifont.otf') format('opentype');
|
||||
font-family: 'ninifont';
|
||||
src: URL('img/ninifont.otf') format('opentype');
|
||||
}
|
||||
h1, h2, a, p {color: black;}
|
||||
h1 {font-size: 300%;font-family: xenippa;}
|
||||
h1 {font-size: 600%;font-family: xenippa;}
|
||||
h2 {font-size: 275%;font-family: xenippa;}
|
||||
p {font-size: 150%;}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box {
|
||||
border-radius: 1%;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
padding: 1%;
|
||||
background-color: lightgray;
|
||||
border-radius: 1%;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
padding: 1%;
|
||||
background-color: lightgray;
|
||||
}
|
||||
.main {grid-area: main;}
|
||||
.left {grid-area: left;}
|
||||
.right {grid-area: right;}
|
||||
.imgcontain {object-fit: contain;}
|
||||
.quote {font-family: 'ninifont';}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 2fr 3fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"left main main right"
|
||||
"left main main right"
|
||||
". . . .";
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
#galerie {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"aa ab ac"
|
||||
"ba bb bc";
|
||||
justify-items: center;
|
||||
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;}
|
||||
|
|
@ -58,109 +43,96 @@ img {
|
|||
#gal4 {grid-area: bb;}
|
||||
#gal5 {grid-area: bc;}
|
||||
.gal {
|
||||
margin: 2.5%;
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding-bottom: 0%;
|
||||
margin: 2.5%;
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding-bottom: 0%;
|
||||
}
|
||||
.foot {
|
||||
display: inline-block;
|
||||
font-family: xenippa;
|
||||
display: inline-block;
|
||||
font-family: xenippa;
|
||||
}
|
||||
.galimg {
|
||||
object-fit: contain;
|
||||
}
|
||||
#counter {margin-left: 2%; margin-right: 2%;}
|
||||
.galimg { object-fit: contain; }
|
||||
#counter {margin: 2%;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body> <center>
|
||||
<div class='container'>
|
||||
<div class='main'>
|
||||
<div class='box'>
|
||||
<h2>Galerie umění</h2>
|
||||
<p class='text quote'>
|
||||
"Proč jsme takový vemena Matúši?"<br> - Kačka
|
||||
</p>
|
||||
<p class='text quote'>
|
||||
"Nepřišel Mohamed za javascriptem, přišel javascript za Mohamedem."<br> - Kubík
|
||||
</p>
|
||||
<p class='text quote'>
|
||||
"Chudák Mohamed."<br> - Jirka
|
||||
</p>
|
||||
<p class='text quote'>
|
||||
"Čau lidi, já jsem křeček."<br> - Topení
|
||||
</p>
|
||||
</div>
|
||||
<div class='box'>
|
||||
<h1>Matúš</h1>
|
||||
</div>
|
||||
|
||||
<h2>Projekty</h2>
|
||||
<p>
|
||||
Rekurzivní piškvorky:
|
||||
<a href='p/index.html'>mat.uush.cz/p</a>
|
||||
</p>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<div class='box'>
|
||||
<h2>Citáty</h2>
|
||||
<p style='font-family: ninifont'>
|
||||
"Proč jsme takový vemena Matúši?"<br> - Kačka
|
||||
</p>
|
||||
<p style='font-family: ninifont'>
|
||||
"Nepřišel Mohamed za javascriptem, přišel javascript za Mohamedem."<br> - Kubík
|
||||
</p>
|
||||
<p style='font-family: ninifont'>
|
||||
"Chudák Mohamed."<br> - Jirka
|
||||
</p>
|
||||
<p style='font-family: ninifont'>
|
||||
"Čau lidi, já jsem křeček."<br> - Topení
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>Kontakt</h2>
|
||||
<p>matus1 (obmotané a) pull.cz</p>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class='left'> <div class='imgcontain'>
|
||||
<img src='img/karinka.jpg'>
|
||||
<p style='margin-top: 0%;'>
|
||||
<i>Obrázek 1:</i>
|
||||
<a class="xnp">Karinka</a>
|
||||
</p>
|
||||
</div> </div>
|
||||
<div class='box'>
|
||||
<h2>Cool projektíky</h2>
|
||||
<p style='font-family: ninifont'>
|
||||
Rekurzivní piškvorky: <a href='p/index.html'>mat.uush.cz/p</a>
|
||||
</p>
|
||||
<p style='font-family: ninifont'>
|
||||
Logik: <a href='gitlab.mff.cuni.cz/pullm/logik'>gitlab.mff.cuni.cz/pullm/logik</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='right'> <div class='imgcontain'>
|
||||
<img src='img/puficek.jpg'>
|
||||
<p style='margin-top: 0%;'>
|
||||
<i>Obrázek 2:</i>
|
||||
<a class="xnp">Pufíček</a>
|
||||
</p>
|
||||
</div> </div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<br> <br>
|
||||
<div class="box">
|
||||
<h2>Galerie 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ředchozí</p></button>
|
||||
<p class="foot" id="counter"> </p>
|
||||
<button class="foot" id="rgal"><p>Další</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>
|
||||
<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ředchozí</p></button>
|
||||
<p class="foot" id="counter"> </p>
|
||||
<button class="foot" id="rgal"><p>Další</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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue