nova slozka

4 years ago · 594114a1b3
44 changed files with 120 additions and 0 deletions
--- a/img/background.png
+++ b/img/background.png
--- a/img/image_01.jpg
+++ b/img/image_01.jpg
--- a/img/image_02.jpg
+++ b/img/image_02.jpg
--- a/img/image_03.jpg
+++ b/img/image_03.jpg
--- a/img/image_04.jpg
+++ b/img/image_04.jpg
--- a/img/image_05.jpg
+++ b/img/image_05.jpg
--- a/img/image_06.jpg
+++ b/img/image_06.jpg
--- a/img/image_07.jpg
+++ b/img/image_07.jpg
--- a/img/image_08.jpg
+++ b/img/image_08.jpg
--- a/img/image_09.jpg
+++ b/img/image_09.jpg
--- a/img/image_10.jpg
+++ b/img/image_10.jpg
--- a/img/image_11.jpg
+++ b/img/image_11.jpg
--- a/img/image_12.jpg
+++ b/img/image_12.jpg
--- a/img/image_13.jpg
+++ b/img/image_13.jpg
--- a/img/image_14.jpg
+++ b/img/image_14.jpg
--- a/img/image_15.jpg
+++ b/img/image_15.jpg
--- a/img/image_16.jpg
+++ b/img/image_16.jpg
--- a/img/image_17.jpg
+++ b/img/image_17.jpg
--- a/img/image_18.jpg
+++ b/img/image_18.jpg
--- a/img/image_19.jpg
+++ b/img/image_19.jpg
--- a/img/image_20.jpg
+++ b/img/image_20.jpg
--- a/img/image_21.jpg
+++ b/img/image_21.jpg
--- a/img/image_22.jpg
+++ b/img/image_22.jpg
--- a/img/image_23.jpg
+++ b/img/image_23.jpg
--- a/img/image_24.jpg
+++ b/img/image_24.jpg
--- a/img/image_25.jpg
+++ b/img/image_25.jpg
--- a/img/image_26.jpg
+++ b/img/image_26.jpg
--- a/img/image_27.jpg
+++ b/img/image_27.jpg
--- a/img/image_28.jpg
+++ b/img/image_28.jpg
--- a/img/image_29.jpg
+++ b/img/image_29.jpg
--- a/img/image_30.jpg
+++ b/img/image_30.jpg
--- a/img/image_31.jpg
+++ b/img/image_31.jpg
--- a/img/image_32.jpg
+++ b/img/image_32.jpg
--- a/img/image_33.jpg
+++ b/img/image_33.jpg
--- a/img/image_34.jpg
+++ b/img/image_34.jpg
--- a/img/image_35.jpg
+++ b/img/image_35.jpg
--- a/img/image_36.jpg
+++ b/img/image_36.jpg
--- a/img/image_37.jpg
+++ b/img/image_37.jpg
--- a/img/image_38.jpg
+++ b/img/image_38.jpg
--- a/img/image_39.jpg
+++ b/img/image_39.jpg
--- a/img/image_40.jpg
+++ b/img/image_40.jpg
--- a/img/image_41.jpg
+++ b/img/image_41.jpg
--- a/img/image_42.jpg
+++ b/img/image_42.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <style>
+       
+    </style>
+</head>
+<body>
+    <div class="row">
+        <div class="col-sm-2 card ram" id="1"  style="width: 20rem;">
+        <img src="..." class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Card title</h5>
+        </div>
+      </div>
+
+      <div class="col-sm-2 card ram" id="2" style="width: 20rem;">
+        <img src="..." class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Card title</h5>
+        </div>
+      </div>
+
+      <div class="col-sm-2 card ram"  id="3" style="width: 20rem;">
+        <img src="..." class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Card title</h5>
+        </div>
+      </div></div>
+    
+        <div class="row"  id="obrazky" ></div>
+     
+    
+
+    <script>
+        let popisky = [
+            'Dřevo', 
+            'Les',
+            'Oblaka',
+            'Stavba',
+            'Vlasy',
+            'Tráva',
+            'Cesta',
+            'Ukazatel',
+            'Cesta 2',
+            'Pes',
+            'Pavučina',
+            'Tráva 2',
+            'Kmen',
+            'Kanál',
+            'Strom',
+            'Hory',
+            'Podzim',
+            'Koleje',
+            'Zima',
+            'Fotograf',
+            'Mlha',
+            'Větrník',
+            'Pavučina 2',
+            'Mlha 2',
+            'Kopce',
+            'Podzim 2',
+            'Kmen 2',
+            'Pes 2',
+            'Údolí',
+            'Hory 2',
+            'Podzim 3',
+            'Mlha 3',
+            'Zima 2',
+            'Mlha 4',
+            'Kameny',
+            'Cesta 3',
+            'Kmen 3',
+            'Stavení 2',
+            'Žebřík',
+            'Zima 3',
+            'Skála',
+            'Pavučina 2',
+        ];
+
+        let obrazky = document.querySelector("#obrazky");
+        let text =  document.querySelector("#text")
+
+        for (let index = 0; index < popisky.length; index++) {
+            const element = popisky[index];
+            
+            let cislo = index + 1;
+            if (cislo < 10) {
+                cislo = '0' + cislo;
+            }
+            obrazky.innerHTML += '<div class="col-sm-2"><div class="card" data-img="img/image_' + cislo + '.jpg" style="width: "> <img  src="img/image_' + cislo + '.jpg" alt=""> <div class="card-body"> <p class="card-text">' + element + '</p>  </div></div></div>';
+            
+        }
+        let karty = document.querySelectorAll(".card")
+        for (let index = 0; index < karty.length; index++) {
+            const element = karty[index];
+            console.log(karty)
+            element.addEventListener("click",function () {
+                let aktiv =  document.querySelector(".activ img")
+                aktiv.setAttribute("src",this.dataset.img)
+
+                
+            })
+        }
+        let ram =document.querySelectorAll(".ram")
+        for (let index = 0; index < ram.length; index++) {
+            const element = ram[index];
+            element.addEventListener("click",function () {
+                this.classList.add("activ")
+                
+            })
+        }
+    </script>
+</body>
+</html>