timer done

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>
+                    <ul id="nav-item">
                         <li>Rólunk</li>
                         <li>Tanulóinknak</li>
                         <li>Hírek</li>
@@ -25,17 +25,12 @@
                     </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">
@@ -47,7 +42,6 @@
                     <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>
@@ -55,7 +49,15 @@
                   <span class="carousel-control-next-icon"></span>
                 </button>
             </div>
-            <div id="timer"></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>
         </header>
         <div id="content">
             <aside id="left">
@@ -64,12 +66,6 @@
             <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>
@@ -79,15 +75,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.png">
+                    <img class="n" src="Beregszasziproject-main/logók/thumbnail_ITM_logo_1100x480_440bb2bcb5.jpg">
                   </div>
                   <br><br>
                   <br><br>
                   <br><br>
                   <div>
-                    <img class="o" src="Beregszasziproject-main/logók/thumbnail_campusfm90_logo_7b4847b6eb_0118947f94.png" >
+                    <img class="o" src="Beregszasziproject-main/logók/itmlogo_bj_8775770659_b445975eab.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>
@@ -95,6 +91,5 @@
                 <div id="also footer"></div>
             </footer>
         </div>
-        <script src="yt.js"></script>
     </body>
 </html>

style.css

@@ -3,7 +3,7 @@ body{
   color: yellow;
 }
 
-li{
+#nav-item li{
   list-style-type: none;
   float: left;
   padding: 1%;
@@ -13,14 +13,14 @@ ul{
   /*margin-left: 20%;*/
 }
 
-li{
-
+#nav-item li{
+  border-right: 1px solid white;
 }
-li:first-child{
+#nav-item li:first-child{
   border-left: 1px solid white;
   margin-left: 20%;
 }
-li:last-child{
+#nav-item li:last-child{
   border-right: 1px solid white;
 }
 
@@ -31,6 +31,25 @@ 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,10 +13,21 @@ function updateTimer(){
     m = mins - hours * 60;
     s = secs - mins * 60;
 
-    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>';
+    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>';
 }
 setInterval('updateTimer()', 1000);

yt.js

@@ -1,33 +0,0 @@
-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();
-  }