123

index.html

@@ -6,7 +6,7 @@
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
         <link rel="stylesheet" href="style.css">
-        <script src="timer.js"></script>
+        <!--<script src="timer.js"></script>-->
         <!--<script src="navbar.js"></script>-->
         <title>DSZC Beregszászi Pál Technikum</title>
     </head>
@@ -14,7 +14,7 @@
         <header>
             <nav class="">
                 <div class="">
-                    <ul id="nav-item">
+                    <ul>
                         <li>Rólunk</li>
                         <li>Tanulóinknak</li>
                         <li>Hírek</li>
@@ -25,12 +25,17 @@
                     </ul>
                 </div>
             </nav>
+            <!-- Carousel -->
             <div id="carousel" class="carousel slide" data-bs-ride="carousel">
+            
+                <!-- Indicators/dots -->
                 <div class="carousel-indicators">
                   <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
                   <button type="button" data-bs-target="#carousel" data-bs-slide-to="1"></button>
                   <button type="button" data-bs-target="#carousel" data-bs-slide-to="2"></button>
                 </div>
+            
+                <!-- The slideshow/carousel -->
                 <div class="carousel-inner">
                   <div class="carousel-item active">
                     <img src="res/bereg/1.png" alt="Los Angeles" class="kep d-block w-75">
@@ -42,6 +47,7 @@
                     <img src="res/bereg/3.png" alt="New York" class="kep d-block w-75">
                   </div>
                 </div>
+                <!-- Left and right controls/icons -->
                 <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
                   <span class="carousel-control-prev-icon"></span>
                 </button>
@@ -49,15 +55,7 @@
                   <span class="carousel-control-next-icon"></span>
                 </button>
             </div>
-            <div id="timer">
-              <ul id="counter"><br><br>
-                <h1>Következő szünetig hátralévő idő</h1>
-                <li id="nap"></li>
-                <li id="ora"></li>
-                <li id="perc"></li>
-                <li id="mperc"></li>
-              </ul>
-            </div>
+            <div id="timer"></div>
         </header>
         <div id="content">
             <aside id="left">
@@ -66,6 +64,12 @@
             <aside id="right">
                 <iframe id="instagram"></iframe>
             </aside>
+            <iframe id="inlineFrameExample"
+            title="Inline Frame Example"
+            width="600"
+            height="600"
+            src="https://www.youtube.com/embed/rzV4C1Ox1go">
+        </iframe>
             <div id="idezetek">
                 <!--Idezetek helye-->
             </div>
@@ -75,15 +79,15 @@
                 <div>
                   <h1 class="partner">Partnereink</h1>
                   <div>
-                    <img class="b" src="Beregszasziproject-main/logók/ikk_360aa14c2e_95f9c4371f.png">
+                    <img class="b" src="Beregszasziproject-main/logók/ikk_360aa14c2e_95f9c4371f.png
                     <img class="m" src="Beregszasziproject-main/logók/thumbnail_NSZFH_logo_black_top_20528d7f88.png">
-                    <img class="n" src="Beregszasziproject-main/logók/thumbnail_ITM_logo_1100x480_440bb2bcb5.jpg">
+                    <img class="n" src="Beregszasziproject-main/logók/thumbnail_ITM_logo_1100x480_440bb2bcb5.png">
                   </div>
                   <br><br>
                   <br><br>
                   <br><br>
                   <div>
-                    <img class="o" src="Beregszasziproject-main/logók/itmlogo_bj_8775770659_b445975eab.png" >
+                    <img class="o" src="Beregszasziproject-main/logók/thumbnail_campusfm90_logo_7b4847b6eb_0118947f94.png" >
                     <img class="i" src="Beregszasziproject-main/logók/dkv_db4ff56201.png">
                     <img class="u" src="Beregszasziproject-main/logók/faceb_uj_deeaf3a2c7.png">
                   </div>
@@ -91,5 +95,6 @@
                 <div id="also footer"></div>
             </footer>
         </div>
+        <script src="yt.js"></script>
     </body>
 </html>

style.css

@@ -3,7 +3,7 @@ body{
   color: yellow;
 }
 
-#nav-item li{
+li{
   list-style-type: none;
   float: left;
   padding: 1%;
@@ -13,14 +13,14 @@ ul{
   /*margin-left: 20%;*/
 }
 
-#nav-item li{
-  border-right: 1px solid white;
+li{
+
 }
-#nav-item li:first-child{
+li:first-child{
   border-left: 1px solid white;
   margin-left: 20%;
 }
-#nav-item li:last-child{
+li:last-child{
   border-right: 1px solid white;
 }
 
@@ -31,25 +31,6 @@ nav{
   width: 100%;
 }
 
-#counter li{
-  float: left;
-  list-style-type: none;
-  font-size: 30px;
-  padding-left: 2%;
-}
-
-#counter h1{
-  margin-left: 1%;
-}
-
-#nap{
-  margin-left: 5%;
-}
-
-#timer{
-  margin-left: 25%;
-}
-
 .kep{
   margin-left: 13%;
 }

timer.js

@@ -13,21 +13,10 @@ function updateTimer(){
     m = mins - hours * 60;
     s = secs - mins * 60;
 
-    d_sz = " " + d;    
-    h_sz = " " + h;    
-    m_sz = " " + m;    
-    s_sz = " " + s;    
-
-    document.getElementById("nap").innerHTML = 
-        '<div>' + d_sz + '<span> Nap </span></div> ';
-    
-    document.getElementById("ora").innerHTML = 
-        '<div>' + h_sz + '<span> Ora </span></div> ';
-
-    document.getElementById("perc").innerHTML = 
-        '<div>' + m_sz + '<span> Perc </span></div> ';
-
-    document.getElementById("mperc").innerHTML = 
-        '<div>' + s_sz + '<span> Masodperc </span></div>';
+    document.getElementById("timer").innerHTML = 
+        '<div>' + d + '<span>Nap</span></div>' + 
+        '<div>' + h + '<span>Ora</span></div>' + 
+        '<div>' + m + '<span>Perc</span></div>' + 
+        '<div>' + s + '<span>Masodperc</span></div>';
 }
 setInterval('updateTimer()', 1000);

yt.js

@@ -0,0 +1,33 @@
+var tag = document.createElement('script');
+
+      tag.src = "https://www.youtube.com/iframe_api";
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+var player;
+function onYouTubeIframeAPIReady() {
+  player = new YT.Player('player', {
+    height: '390',
+    width: '640',
+    videoId: 'M7lc1UVf-VE',
+    playerVars: {
+      'playsinline': 1
+    },
+    events: {
+      'onReady': onPlayerReady,
+      'onStateChange': onPlayerStateChange
+    }
+  });
+}
+function onPlayerReady(event) {
+    event.target.playVideo();
+  }
+  var done = false;
+  function onPlayerStateChange(event) {
+    if (event.data == YT.PlayerState.PLAYING && !done) {
+      setTimeout(stopVideo, 6000);
+      done = true;
+    }
+  }
+  function stopVideo() {
+    player.stopVideo();
+  }