senaduka/old-svevijesti
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changing from js to golang

Browse Source
This commit is contained in:
Amir
2024-01-29 14:55:20 +01:00
parent 30d8ca73da
commit f4a2251178
40 changed files with 1174 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
web/data/articles.html
View File

@@ -1,16 +1,82 @@
{{define "articlesHTML"}}
<ol reversed>
{{range .articles}}
<li>
<div class="article_content">
<a href="/{{.ID}}/{{.Slug}}">
{{.Title}}</a></div>
<div class="timestamp">{{.SourceName}} - {{ .FormatedCreatedAt }}</div>
</li>
<br><br>
{{else}}
Nema članaka za izabrani datum.
{{end}}
<script>
function createPreview(content) {
var slicedContent = content.slice(0, 200);
if (content.length > 200) {
slicedContent += '...';
}
return slicedContent;
}
</script>
</ol>
<div class="list">
<div class="slide-container">
</div>
{{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 }}</div>
</article>
{{else}}
<div class="empty">
Nema članaka za izabrani datum.
</div>
{{end}}
</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();
}
}
</script>
{{end}}

16
web/data/footer.html
View File

@@ -1,13 +1,13 @@
{{define "footerHTML"}}
<center><div class="sign">SN</div></center>
<footer>
SN
<div>
<nav>
<a href="{{.previous}}">&lt;----</a> |
<a href="/">Početna</a> |
<a href="{{.next}}">----&gt;</a>
</nav>
</div>
<center>
<nav class="fot">
<a href="{{.previous}}">&lt;----</a> |
<a href="/">Početna</a> |
<a href="{{.next}}">----&gt;</a>
</nav>
</center>
</footer>
{{end}}

406
web/data/head.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta property="og:site_name" content="starenovine">
<meta name="twitter:card" content="preview">
<meta property="og:title" content="{{.title}}">
@@ -12,45 +12,377 @@
<meta property="og:url" content="https://www.starenovine.com">
<title>{{.title}} - stare novine</title>
<link rel="canonical" href="https://www.starenovine.com/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body {
font-family: monospace;
font-size: 1.5em;
width: 90%;
max-width: 98vw;
}
h1#title {
margin-block-end: 0;
font-size: 1.7em;
}
.timestamp {
font-size: 0.8em;
color: gray;
}
.single_timestamp {
font-size: 0.77em;
margin-bottom: 0.7em;
color: gray;
}
#logo {
font-size: 2vw;
background: white;
}
pre.article_content {
background: white;
}
html {
margin: 0 auto;
max-width: 98vw;
overflow-x: hidden;
:root {
--ease: cubic-bezier(.2, 1, .3, 1);
--icon-size: 60px;
--border-radius: 0.5;
--background: #2d2c3e;
--background-b: #2d2c3e;
--green: #16A085;
--white: #FFFFFF;
}
body {
font-size: 1.5em;
margin: 0 auto;
overflow-x: hidden;
background-color: black;
}
h1#title {
background-color: #0B173B;
color: white;
margin-block-end: 0;
font-size: 1.7em;
padding-left: 5px;
}
.logo {
text-decoration: none;
color: black;
}
.timestamp {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
color: gray;
}
.prewi{
color: white;
padding-top: 5px;
padding-bottom: 2px;
margin-left: 5px;
}
.empty {
width: 89vw;
color: black;
box-shadow: 0 4px 8px #0000004d;
border: 1px solid black;
background: linear-gradient(90deg, rgba(231, 214, 197, 1) 0%, rgba(241, 234, 227, 1) 100%);
padding-top: 10px;
padding-bottom: 10px;
}
.ar-title {
background-color: #0B173B;
width: 100%;
color: black;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 3px solid black;
}
.w-title{
color:white;
}
.ar-title > a {
font-size: 1.2em;
font-weight: 500;
text-decoration: none;
color: white;
padding-left: 5px;
}
.article_content {
background-color: black;
gap: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.single_timestamp {
font-size: 0.77em;
margin-bottom: 0.7em;
color: gray;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#logo {
width: 100%;
font-size: 1.85vw;
background: linear-gradient(90deg, rgba(1, 1, 1, 1) 0%, rgba(11, 23, 59, 1) 50%, rgba(0, 0, 0, 1) 100%);
box-shadow: 2px 0 20px 6px rgba(11, 23, 59, 0.2);
color: white;
margin: 0 auto;
}
.list {
display: grid;
justify-content: center;
align-items: center;
list-style: none;
margin-top: 15px;
gap: 15px;
}
.news-article > a {
background: linear-gradient(90deg, rgba(231, 214, 197, 1) 0%, rgba(232, 232, 232, 1) 51%, rgba(231, 214, 197, 1) 100%);
color: black;
}
.news-article:hover .ar-title{
background-color: #FF0000;
}
.article_body {
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding-left: 5px;
}
.fot {
display: flex;
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%;
}
.fot > a {
color: white;
gap: 10px;
text-decoration: none;
}
.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);
}
.hed.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 4px 12px -4px rgba(255, 65, 54, 0.5);
}
.hed > a {
color: white;
gap: 10px;
text-decoration: none;
}
.article_content > a {
color: white;
text-decoration: none;
}
.news-article {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
border: 1px solid;
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%);
border-image-slice: 1;
}
pre.article_content {
background: white;
}
.news-article > a {
text-decoration: none;
color: black;
}
#weather {
display: flex;
width: 100%;
height: fit-content;
justify-content: space-between;
}
.weather-container {
display: flex;
justify-content: space-around;
margin-top: 50px;
color: white;
}
.weather-container > div {
text-size-adjust: auto;
}
.weather-w {
border: 1px solid #ccc;
width: 20%;
text-align: center;
color: white;
background-color: #0B173B;
}
.weather-w h3 {
margin-top: 0;
color: white;
}
.weather-info {
margin-top: 10px;
color: white;
}
.w-link{
text-decoration: none;
}
.weather-widget {
width: 19%;
height: 50px;
display: grid;
align-items: center;
justify-content: center;
color: white;
background-color: #0B173B;
border: 1px solid;
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%);
border-image-slice: 1;
box-shadow: 0 4px 12px -4px rgba(255, 65, 54, 0.5);
}
.weather-widget > div {
font-size: 10;
}
.weather-widget > div > span {
font-size: 8;
}
@media only screen and (max-width: 600px) {
#weather {
display: grid;
margin-bottom: 4%;
}
.weather-widget {
width: 90vw;
height: 20px;
display: flex;
justify-content: space-between;
}
.weather-container {
display: grid;
color: white;
gap: 2%;
}
.weather-w{
width: 100vw;
}
}
html {
margin: 0 auto;
width: 90%;
overflow-x: hidden;
}
.arr-pr-nx {
display: flex;
justify-content: space-between;
align-items: center;
}
.arr-pr-nx svg {
width: 60px;
height: 60px;
margin: 0 1rem;
cursor: pointer;
overflow: visible;
fill: white;
}
.arr-pr-nx svg polygon,
.arr-pr-nx path {
transition: all 0.5s var(--ease);
}
.arr-pr-nx svg:hover polygon,
.arr-pr-nx svg:hover path {
transition: all 1s var(--ease);
fill: #FF0000;
}
.arr-pr-nx svg:hover .arrow {
animation: arrow-anim 2.5s var(--ease) infinite;
}
.arr-pr-nx svg:hover .arrow-fixed {
animation: arrow-fixed-anim 2.5s var(--ease) infinite;
}
@keyframes arrow-anim {
0% {
opacity: 1;
transform: translateX(0);
}
5% {
transform: translateX(-0.1rem);
}
100% {
transform: translateX(1rem);
opacity: 0;
}
}
@keyframes arrow-fixed-anim {
5% {
opacity: 0;
}
20% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.home-icon {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #0B173B;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.5s var(--ease);
}
.home-icon:hover {
background-color: #FF0000;
}
.home-icon i {
font-size: 2rem;
color: white;
transition: color 0.5s var(--ease);
}
.home-icon:hover i {
color: #FF0000;
}
</style>
</head>
{{end}}

54
web/data/header.html
View File

@@ -1,5 +1,7 @@
{{define "headerHTML"}}
<header>
<center>
<a href="/" class="logo">
<pre id="logo">
_____ ______ ____ ____ ___ ____ ___ __ __ ____ ____ ___
/ ___/| | / || \ / _]| \ / \ | | || || \ / _]
@@ -10,11 +12,51 @@
\___| |__| |__|__||__|\_||_____||__|__| \___/ \_/ |____||__|__||_____|
</pre>
<br>
<nav>
<a href="{{.previous}}">&lt;----</a> |
<a href="/">Početna</a> |
<a href="{{.next}}">----&gt;</a>
</nav>
</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;
if (top >= headerBottom) {
header.classList.add('fixed');
} else {
header.classList.remove('fixed');
}
}
window.addEventListener('scroll', handleScroll);
</script>
{{end}}

2
web/data/single_article.html
View File

@@ -2,7 +2,7 @@
{{with .article }}
<div class="article_content">
<h1 id="title">{{.Title}}</h1>
<div class="single_timestamp">{{.SourceName}} - {{ .FormatedCreatedAt }}</div>
<div class="single_timestamp"> starenovine - {{ .FormatedCreatedAt }}</div>
<div class="article_body">
{{.Content}}
</div>

80
web/data/weatherapi.html Normal file
View File

@@ -0,0 +1,80 @@
{{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}}