176 lines
5.8 KiB
HTML
176 lines
5.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<!--
|
|
Massively by HTML5 UP
|
|
html5up.net | @ajlkn
|
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Actualités - Camélia Studio</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
<meta property="og:title" content="Camélia Studio">
|
|
<meta property="og:image" content="https://camelia-studio.org/v5/images/logo2_mini.png">
|
|
<meta property="og:description" content="Camélia Studio est une association de loi 1901 (n° J.O. 20150013). Son objectif est de promouvoir les Arts et la Culture au sens large en France.">
|
|
<link rel="stylesheet" href="assets/css/main.css" />
|
|
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
|
|
<style type="text/css">
|
|
.main .news-card {
|
|
width: 100%;
|
|
margin-bottom: 1%;
|
|
}
|
|
.main .card-row {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
text-decoration: none;
|
|
}
|
|
.div-image-container {
|
|
height: 150px;
|
|
flex: 20%;
|
|
min-width: 120px;
|
|
min-height: 100px;
|
|
margin-right: 1%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
/* For mobile phones: */
|
|
body {
|
|
margin: 0px;
|
|
font-size: 90%;
|
|
}
|
|
.main .serieA {
|
|
margin: 4em 0.5em;
|
|
}
|
|
}</style>
|
|
</head>
|
|
<body class="is-preload">
|
|
|
|
<!-- Wrapper -->
|
|
<div id="wrapper">
|
|
|
|
<!-- Header -->
|
|
<header id="header">
|
|
<a href="index.html" class="logo">Camélia Studio</a>
|
|
</header>
|
|
|
|
<!-- Nav -->
|
|
<nav id="nav">
|
|
<ul class="links">
|
|
<li><a href="index.html">Présentation</a></li>
|
|
<li><a href="../branches/index.html" target="_blank">Nos branches ↗</a></li>
|
|
<li><a href="https://sangigi-fuchsia.fr" target="_blank">Site web ↗</a></li>
|
|
<li class="active"><a href="actualites.html">Actualités</a></li>
|
|
</ul>
|
|
<ul class="icons">
|
|
<li><a href="https://twitter.com/Camelia_Studio" class="icon brands fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
|
|
<li><a href="https://discord.gg/0TAUHO2ghNKQnmCt" class="icon brands fa-discord" target="_blank"><span class="label">Instagram</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Main -->
|
|
<div id="main">
|
|
|
|
<!-- Post -->
|
|
<section class="post">
|
|
<header class="major">
|
|
<span class="date">Quoi de neuf ?</span>
|
|
<p>Découvrez nos dernières actualités.</p>
|
|
</header>
|
|
<main class="main"> </main>
|
|
|
|
</div>
|
|
|
|
<!-- Copyright -->
|
|
<div id="copyright">
|
|
<p>© Untitled - Design: <a href="https://html5up.net" target="_blank">HTML5 UP</a> | Illustration : <a href="https://pellichi.fr" target="_blank">Pellichi</a> | Logo : <a href="https://esenjin.xyz" target="_blank">Esenjin Asakha</a> | Lecteur RSS : <a href="https://codepen.io/maxdesimone/pen/NWWamMw" target="_blank">Massimiliano De Simone</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<script src="assets/js/jquery.scrollex.min.js"></script>
|
|
<script src="assets/js/jquery.scrolly.min.js"></script>
|
|
<script src="assets/js/browser.min.js"></script>
|
|
<script src="assets/js/breakpoints.min.js"></script>
|
|
<script src="assets/js/util.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
<script type="text/javascript">
|
|
const buildHTML = (data) => {
|
|
console.log("data", data);
|
|
|
|
let article = document.createElement("article");
|
|
article.setAttribute("class", "serieA");
|
|
|
|
let header = document.createElement("header");
|
|
let h2 = document.createElement("h2");
|
|
h2.appendChild(document.createTextNode(data.feed.description));
|
|
header.setAttribute("class", "serieA__header");
|
|
header.appendChild(h2);
|
|
|
|
let articleBody = document.createElement("div");
|
|
articleBody.setAttribute("class", "serieA__content");
|
|
articleBody.setAttribute("itemprop", "articleBody");
|
|
|
|
article.appendChild(header);
|
|
article.appendChild(articleBody);
|
|
|
|
// for each RSS item create a div.news-card and append it to the article
|
|
data.items.forEach((item) => {
|
|
let divEl = document.createElement("div");
|
|
divEl.setAttribute("class", "news-card");
|
|
|
|
let anchor = document.createElement("a");
|
|
anchor.setAttribute("href", item.link);
|
|
anchor.setAttribute("target", "_blank");
|
|
anchor.setAttribute("class", "card-row");
|
|
|
|
let imageContainerDiv = document.createElement("div");
|
|
imageContainerDiv.setAttribute("style",`background-image:url(${item.enclosure.link})`);
|
|
imageContainerDiv.setAttribute("class", "div-image-container");
|
|
|
|
let textContainerDiv = document.createElement("div");
|
|
textContainerDiv.setAttribute("class", "div-text-container");
|
|
|
|
let header = document.createElement("h5");
|
|
let textBody = document.createElement("div");
|
|
header.appendChild(document.createTextNode(item.title));
|
|
textBody.appendChild(document.createTextNode(item.content));
|
|
textContainerDiv.appendChild(header);
|
|
textContainerDiv.appendChild(textBody);
|
|
|
|
anchor.appendChild(imageContainerDiv);
|
|
anchor.appendChild(textContainerDiv);
|
|
|
|
divEl.appendChild(anchor);
|
|
articleBody.appendChild(divEl);
|
|
});
|
|
const main = document.querySelector(".main");
|
|
main.firstChild.remove();
|
|
main.appendChild(article);
|
|
};
|
|
|
|
|
|
// fetch RSS
|
|
const getRSS = async function () {
|
|
let url = "https://sangigi-fuchsia.fr/category/camelia-studio/annonces-nouvelles/feed/";
|
|
//url ="https://theathletic.com/serie-a/?rss=1";
|
|
try {
|
|
let response = await fetch("https://api.rss2json.com/v1/api.json?rss_url=" + url,
|
|
{ cache: "no-cache" });
|
|
let json = await response.json();
|
|
buildHTML(json);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", getRSS, false);
|
|
// https://feed.mikle.com/support/rss-feed-sources-online-news-sites/
|
|
</script>
|
|
|
|
</body>
|
|
</html> |