mootfrost-dev/static/templates/projects.html
2023-04-09 19:21:17 +03:00

84 lines
3.4 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(93142819, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/93142819" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<head>
<meta charset="utf-8">
<title>Mootfrost DEV</title>
<meta name="description" content="Проекты">
<link rel="stylesheet" type="text/css" href="/static/resources/styles/projects.style.css"/>
<link href="/static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
</head>
<body ondragstart="return false;" ondrop="return false;">
<div id="background"></div>
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
<a class="btn-back" href="https://mootfrost.dev">
<svg ID="back-s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40px" height="40px">
<path id="pathBack" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256S114.6 512 256 512s256-114.6 256-256zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z" fill="#ffffff" style="fill: rgb(255, 255, 255);"/>
</svg>
</a>
<div id="projects-container" class="wrapper pe-none">
</div>
<template id="project-card-template">
<div class="project-card d-flex flex-column justify-content-center align-items-center">
<h2 class="project-title" id="title">Name</h2>
<p class="project-description" id="description">Description</p>
<hr class="divider">
<a id="link" class="btn-goto pe-auto"><span class="text-uppercase">Перейти</span></a>
</div>
</template>
<script>
let back_s = document.getElementById('back-s');
back_s.onmouseenter = () => document.getElementById('pathBack').style.fill = 'lightgray';
back_s.onmouseleave = () => document.getElementById('pathBack').style.fill = '#ffffffff';
</script>
<script>
async function load_projects()
{
let resp = await fetch('/api/get_repos', {
method: 'GET',
},
);
let projects = await resp.json()
for (let i = 0; i < projects.length; i++) {
let card = document.importNode(document.getElementById('project-card-template').content, true)
card.querySelector('#link').href = projects[i].url
card.querySelector('#title').innerText = projects[i].name
card.querySelector('#description').innerText = projects[i].description
document.getElementById('projects-container').appendChild(card)
}
}
load_projects()
</script>
<script src="/static/resources/scripts/particles.js"></script>
<script src="/static/resources/scripts/app.js"></script>
<script src="/static/resources/bootstrap/js/bootstrap.js"></script>
</body>
</html>