Weather and Category

2024-01-31 12:37:55 +01:00
parent f4a2251178
commit 232df1e4e0
24 changed files with 370 additions and 351 deletions
--- a/web/data/articles.html
+++ b/web/data/articles.html
@@ -1,17 +1,5 @@
 {{define "articlesHTML"}}
-<script>
-  function createPreview(content) {
-    var slicedContent = content.slice(0, 200);
-    if (content.length > 200) {
-      slicedContent += '...';
-    }
-    return slicedContent;
-  }
-</script>

-<div class="list">
-  <div class="slide-container">
-  </div>
  {{range .articles}}
    <article class="news-article">
      <div class="article_content">
@@ -22,9 +10,9 @@
        </div>
      </div>
      <a href="/{{.ID}}/{{.Slug}}">
-        <div class="prewi" data-content="{{.Content}}" data-title="{{.Title}}" data-link="/{{.ID}}/{{.Slug}}"></div>
+        <div class="prewi" data-content="{{.Content}}"></div>
      </a>
-      <div class="timestamp"> starenovine - {{ .FormatedCreatedAt }}</div>
+      <div class="timestamp"> starenovine - {{ .FormatedCreatedAt }} -  {{.Category}}</div>
    </article>
  {{else}}
    <div class="empty">
@@ -34,49 +22,18 @@
 </div>

 <script>
-  let i = 1;
-  let allArticles = []
-  let lastArticles = []
-  let previewDivs = document.querySelectorAll('.prewi');
-  previewDivs.forEach(function (previewDiv) {
-    let content = previewDiv.getAttribute('data-content');
-    let title = previewDiv.getAttribute('data-title')
-    let link = previewDiv.getAttribute('data-link')
-    allArticles.push({content,title,link})
-      if (allArticles.length > 4){
-        previewDiv.textContent = createPreview(content);
-        }
-      else{
-          lastArticles.push({title,content,link})
-    }
-    i = i+1;
-  }); 
-  slideArticles = lastArticles.slice(0, 4); 
-  function createSlide(){
-    if (slideArticles.length > 0) {
-      let temp = slideArticles.shift()
-      document.querySelector('.slide-container').innerHTML = `
-          <div class="ar-title">
-                <a href="${temp.link}">
-                  ${temp.title}
-                  </a>
-              </div>
-            </div>
-            <a href="${temp.link}">
-              <div class="prewi">${createPreview(temp.content)}</div>
-            </a>
-         `
-      slideArticles.push(temp)
-    }
-  }
-  createSlide();
-  setInterval(createSlide, 5000)
-  
-  let articleDivs = document.querySelectorAll('.news-article');
-  for (let i = 0; i < 4; i++) {
-    if (articleDivs[i]) {
-      articleDivs[i].remove();
+  function createPewiev(content) {
+    let slicedContent = content.slice(0,200);
+    if (content.length > 200){
+      slicedContent += '...'
    }
+    return slicedContent
  }
+
+  let previewDivs = document.querySelectorAll('.prewi')
+  previewDivs.forEach(function(previewDiv){
+    let content = previewDiv.getAttribute('data-content')
+    previewDiv.textContent = createPewiev(content)
+  })
 </script>
 {{end}}
--- a/web/data/categoryarticles.html
+++ b/web/data/categoryarticles.html
@@ -0,0 +1,40 @@
+{{define "articlecategoryHTML"}}
+
+<h1>{{.category}}</h1>
+{{range .articles}}
+<article class="news-article">
+  <div class="article_content">
+    <div class="ar-title">
+      <a href="/{{.ID}}/{{.Slug}}">
+        {{.Title}}
+      </a>
+    </div>
+  </div>
+  <a href="/{{.ID}}/{{.Slug}}">
+    <div class="prewi" data-content="{{.Content}}" data-title="{{.Title}}" data-link="/{{.ID}}/{{.Slug}}"></div>
+  </a>
+  <div class="timestamp"> starenovine - {{ .FormatedCreatedAt }} -  {{.Category}}</div>
+</article>
+{{else}}
+<div class="empty">
+  Nema članaka za izabrani datum.
+</div>
+{{end}}
+
+<script>
+  function createPewiev(content) {
+    let slicedContent = content.slice(0,200);
+    if (content.length > 200){
+      slicedContent += '...'
+    }
+    return slicedContent
+  }
+
+  let previewDivs = document.querySelectorAll('.prewi')
+  previewDivs.forEach(function(previewDiv){
+    let content = previewDiv.getAttribute('data-content')
+    previewDiv.textContent = createPewiev(content)
+  })
+</script>
+
+{{end}}
--- a/web/data/categorymenu.html
+++ b/web/data/categorymenu.html
@@ -0,0 +1,44 @@
+{{define "categorymenuHTML"}}
+<nav class="hed">
+  <div id="small-menu" onclick="handleSmallMenu()">
+    Menu
+  </div>
+  <div class="menu">
+  <a href="/">
+    <div class="home-icon" title="Pocetna">
+        <div class="home-text">Pocetna</div>
+        <i class="fa fa-home" style="font-size:48px;color:white"></i>
+    </div>
+  </a>  
+  {{range .categories}}
+    <a href="/{{ . }}">
+      <div class="home-icon" title="{{ . }}">
+        {{ . }}
+      </div>
+    </a>
+  {{end}}
+</div> 
+</nav>
+</div>
+
+<script>
+
+  function handleSmallMenu (){
+    let menu = document.querySelector('.menu')
+    menu.classList.toggle('show-menu')
+  }
+
+  const handleScroll = function(event) {
+    const top = window.scrollY;
+    const header = document.querySelector('.hed');
+    const headerBottom = header.offsetTop + header.offsetHeight;
+
+    if (top >= headerBottom) {
+        header.classList.add('fixed');
+    } else {
+        header.classList.remove('fixed');
+    }
+    }
+  window.addEventListener('scroll', handleScroll);
+</script>
+{{end}}
--- a/web/data/footer.html
+++ b/web/data/footer.html
@@ -1,13 +1,33 @@
 {{define "footerHTML"}}

-<center><div class="sign">SN</div></center>
 <footer>
    <center>
-        <nav class="fot">
-            <a href="{{.previous}}">&lt;----</a> | 
-            <a href="/">Početna</a> | 
-            <a href="{{.next}}">----&gt;</a> 
-        </nav>
+        <br>
+        <nav class="hed">
+            <a href="{{.previous}}">
+              <div class="arr-pr-nx" title="Prethodna">
+                  <svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
+                          <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+                          <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+                          <path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
+                      </g>
+                  </svg>
+              </div>
+          </a>  
+          <a href="{{.next}}">
+            <div class="arr-pr-nx" title="Sledeca">
+              <svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <g>
+                      <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+                      <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+                      <path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
+                  </g>
+              </svg>
+            </div>
+          </a> 
+          </nav>
    </center>
 </footer>
+
 {{end}}
--- a/web/data/fullweather.html
+++ b/web/data/fullweather.html
@@ -0,0 +1,23 @@
+{{define "fullweatherHTML"}}
+
+<h2 class="w-title">{{.title}}</h2>
+<div class="weather-container">
+    {{range .weatherInfo}}
+        <div class="weather-w">
+            <h3>{{.Name}}</h3>
+            {{with index .Weather 0}}
+                <div class="weather-info">Opis: {{.Description}}</div>
+            {{end}}
+            <div class="weather-info">Temperatura: {{.Main.Temp}}°C</div>
+            <div class="weather-info">Osecaj: {{.Main.FellsLike}}°C</div>
+            <div class="weather-info">Pritisak:{{.Main.Preassure}} hPa</div>
+            <div class="weather-info">Vlaznost: {{.Main.Humidity}}%</div>
+            <div class="weather-info">Min Temp: {{.Main.TempMin}}°C</div>
+            <div class="weather-info">Max Temp: {{.Main.TempMax}}°C</div>
+            <div class="weather-info">Vetar: {{.Wind.Speed}} m/s</div>
+            <div class="weather-info">Oblaci: {{.Clouds.All}}%</div>
+        </div>
+    {{end}}
+</div>
+
+{{end}}
--- a/web/data/head.html
+++ b/web/data/head.html
@@ -25,7 +25,7 @@
 }

 body {
-  font-size: 1.5em;
+  font-size: 1.2em;
  margin: 0 auto;
  overflow-x: hidden;
  background-color: black;
@@ -159,14 +159,11 @@ h1#title {

 .hed {
  background-color: #0B173B;
-  text-decoration: none;
  color: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
-  padding-top: 5px;
-  padding-bottom: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  gap: 5%;
  transition: background-color 0.5s var(--ease);
@@ -187,7 +184,6 @@ h1#title {
  gap: 10px;
  text-decoration: none;
 }
-
 .article_content > a {
  color: white;
  text-decoration: none;
@@ -266,14 +262,78 @@ pre.article_content {
  font-size: 8;
 }

+#small-menu{
+    display: none;
+  }
+
+.menu{
+  width: 100%;
+  text-decoration: none;
+  color: white;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.menu > a {
+  color: white;
+  gap: 10px;
+  text-decoration: none;
+}
+.home-text{
+  display: none;
+}
+

@media only screen and (max-width: 600px) {
+  #small-menu{
+    display: block;
+  }
+  .fa-home{
+    display: none;
+  }
+  .home-text{
+    display: block;
+  }
+
+  .menu{
+    display: none;
+  }
+  .menu.show-menu{
+    width: 100%;
+    text-decoration: none;
+    color: white;
+    display: grid;
+    transition: background-color 0.5s var(--ease);
+  }
+  .hed{
+    padding-top: 5px;
+    padding-bottom: 5px;
+    height: fit-content;
+    display: grid;
+    gap: 0 ;
+  }
+  .menu.show-menu > a{
+    text-decoration: none;
+    border-image: linear-gradient(90deg, rgba(8, 8, 8, 1) 0%, rgba(179, 150, 121, 1) 21%, rgba(0, 0, 0, 1) 37%, rgba(98, 87, 75, 1) 63%, rgba(0, 0, 0, 1) 100%);
+  }
+  .home-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 10px; 
+  height: 10px; 
+  background-color: #0B173B;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.5s var(--ease);
+}

  #weather {
    display: grid;
    margin-bottom: 4%;
  }
-
  .weather-widget {
    width: 90vw;
    height: 20px;
@@ -303,8 +363,8 @@ html {
 }

 .arr-pr-nx svg {
-  width: 60px;
-  height: 60px;
+  width: 40px;
+  height: 40px;
  margin: 0 1rem;
  cursor: pointer;
  overflow: visible;
@@ -359,8 +419,8 @@ html {
  display: flex;
  justify-content: center;
  align-items: center;
-  width: 60px; 
-  height: 60px; 
+  width: 40px; 
+  height: 40px; 
  background-color: #0B173B;
  border-radius: 50%;
  cursor: pointer;
@@ -381,8 +441,6 @@ html {
  color: #FF0000;
 }

-
-  
    </style>
 </head>
 {{end}}
--- a/web/data/header.html
+++ b/web/data/header.html
@@ -14,49 +14,9 @@
  </pre>
  </a>
  </center>
-  <nav class="hed">
-    <a href="{{.previous}}">
-      <div class="arr-pr-nx" title="Prethodna">
-          <svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-              <g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
-                  <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-                  <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-                  <path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
-              </g>
-          </svg>
-      </div>
-  </a>  
-  <a href="/">
-      <div class="home-icon" title="Pocetna">
-          <i class="fa fa-home" style="font-size:48px;color:white"></i>
-      </div>
-  </a>  
-  <a href="{{.next}}">
-    <div class="arr-pr-nx" title="Sledeca">
-      <svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <g>
-              <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-              <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-              <path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
-          </g>
-      </svg>
-    </div>
-  </a> 
-  </nav>
-  <br>
-</header>
-<script>
-  const handleScroll = function(event) {
-    const top = window.scrollY;
-    const header = document.querySelector('.hed');
-    const headerBottom = header.offsetTop + header.offsetHeight;
+  
+  {{template "categorymenuHTML" .}}

-    if (top >= headerBottom) {
-        header.classList.add('fixed');
-    } else {
-        header.classList.remove('fixed');
-    }
-    }
-  window.addEventListener('scroll', handleScroll);
-</script>
+</br>
+</header>
 {{end}}
--- a/web/data/weatherapi.html
+++ b/web/data/weatherapi.html
@@ -1,80 +0,0 @@
-{{define "weatherHTML"}}
-<a class="w-link" href="/weather">
-<div id="weather">
-  <div class="weather-widget" id="weather-widget-sarajevo">
-    <div><span id="city-sarajevo">Učitavanje...</span></div>
-    <div id="temperature-sarajevo">Učitavanje...</div>
-  </div>
-  <div class="weather-widget" id="weather-widget-banja-luka">
-    <div><span id="city-banja-luka">Učitavanje...</span></div>
-    <div id="temperature-banja-luka">Učitavanje...</div>
-  </div>
-  <div class="weather-widget" id="weather-widget-tuzla">
-    <div><span id="city-tuzla">Učitavanje...</span></div>
-    <div id="temperature-tuzla">Učitavanje...</div>
-  </div>
-  <div class="weather-widget" id="weather-widget-zenica">
-    <div><span id="city-zenica">Učitavanje...</span></div>
-    <div id="temperature-zenica">Učitavanje...</div>
-  </div>
-  <div class="weather-widget" id="weather-widget-mostar">
-    <div><span id="city-mostar">Učitavanje...</span></div>
-    <div id="temperature-mostar">Učitavanje...</div>
-  </div>
-</div>
-</a>
-
-
-<script>
-  const apiKey = 'abb35e21bdcbad6d1b00141a2b25cf5a';
-  
-  const cities = [
-    { name: 'Sarajevo', id: 'sarajevo' },
-    { name: 'Banja Luka', id: 'banja-luka' },
-    { name: 'Tuzla', id: 'tuzla' },
-    { name: 'Zenica', id:'zenica'},
-    { name: 'Mostar', id: 'mostar' }
-  ];
-  
-  async function getWeatherData(city) {
-    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city.name}&appid=${apiKey}&units=metric&lang=hr`;
-    try {
-      const response = await fetch(apiUrl);
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      const data = await response.json();
-      updateUI(data, city.id);
-    } catch (error) {
-      console.error(`Error fetching data for ${city.name}:`, error);
-    }
-  }
-  
-  function updateUI(data, cityId) {
-    const cityElement = document.getElementById(`city-${cityId}`);
-    const temperatureElement = document.getElementById(`temperature-${cityId}`);
-  
-    cityElement.textContent = data.name;
-    temperatureElement.textContent = `${data.main.temp}°C`;
-  }
-  
-  function cToL(text) {
-    const cyrillicChars = 'АБВГДЂЕЖЗИЈКЛЉМНЊОПРСТЋУФХЦЧЏШабвгдђежзијклљмнњопрстћуфхцчџш';
-    const latinChars = 'ABVGĐEŽZIJKLJMNJOPRSTĆUFHCČDŽŠabvgdđežzijkljmnjoprstćufhčdžš';
-  
-    return text
-      .split('')
-      .map(char => {
-        const index = cyrillicChars.indexOf(char);
-        return index !== -1 ? latinChars[index] : char;
-      })
-      .join('');
-  }
-  
-  cities.forEach(city => {
-    getWeatherData(city);
-  });
-  
-  </script>
-
-  {{end}}
--- a/web/data/weatherwidget.html
+++ b/web/data/weatherwidget.html
@@ -0,0 +1,13 @@
+{{define "weatherwidgetHTML"}}
+<a class="w-link" href="/weather">
+  <div id="weather">
+    {{range .weatherInfo}}
+      <div class="weather-widget">
+        <div><span id="city">{{.Name}}</span></div>
+        <div id="temperature">{{.Main.Temp}} °C</div>
+      </div>
+    {{end}}
+  </div>
+</a>
+<br>
+{{end}}