Ajout de la première version

2020-05-30 18:52:26 +02:00 · 2020-05-30 18:52:26 +02:00 · b9bf94f8c3
commit b9bf94f8c3
parent a8d9d30e64
3 changed files with 104 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style/mastodonFooter.css">
+    <title>Affichage du compte Mastodon</title>
+</head>
+<body>
+    <footer>
+        <div id="petitAffichage"></div>
+    </footer> 
+    <script src="js/affichage.js"></script>
+    <script>
+        getProfile("https://toot.gnous.eu", 1693);
+    </script>
+</body>
+</html>
--- a/js/affichage.js
+++ b/js/affichage.js
@ -0,0 +1,54 @@
+function transformName(name, url) {
+    nameWithoutHttps = url.substring(8);
+    indexOfSlash = nameWithoutHttps.indexOf("/");
+    nameWithoutSlash = nameWithoutHttps.substring(0,indexOfSlash);
+    ret = "@" + name.toLowerCase() + "@" + nameWithoutSlash;
+    return ret;
+}
+
+function getProfile(url, id) {
+    apiUrl = url + "/api/v1/accounts/" + id;
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", apiUrl, false);
+    xmlHttp.send();
+    response = JSON.parse(xmlHttp.responseText);
+    console.log(response);
+    
+    accountUrl = response['url'];
+    accountName = response['display_name']
+    accountPicture = response['avatar'];
+
+    accountAtName = transformName(accountName, accountUrl);
+
+    linkHTML = document.createElement("a");
+    text = document.createTextNode("coucou");
+    linkHTML.title = "link to mastodon profile";
+    linkHTML.href = accountUrl;
+
+    imageHtml = document.createElement("img");
+    imageHtml.src = accountPicture
+    imageHtml.height = 65;
+    imageHtml.width = 65;
+    imageHtml.id = "photoMasto";
+
+    accountNameHtml = document.createElement("p");
+    text = document.createTextNode(accountName);
+    accountNameHtml.appendChild(text);
+    accountNameHtml.id = "nomMasto";
+
+    atAccountHtml = document.createElement("p");
+    text = document.createTextNode(accountAtName);
+    atAccountHtml.appendChild(text);
+    atAccountHtml.value = accountName;
+    atAccountHtml.id = "nomCompteMasto";
+
+    divInfos = document.createElement("div");
+    divInfos.id = "infoTextMasto";
+    divInfos.appendChild(accountNameHtml);
+    divInfos.appendChild(atAccountHtml);
+
+    linkHTML.appendChild(imageHtml);
+    linkHTML.appendChild(divInfos);
+
+    document.getElementById("petitAffichage").appendChild(linkHTML);
+}
--- a/style/mastodonFooter.css
+++ b/style/mastodonFooter.css
@ -0,0 +1,33 @@
+#petitAffichage {
+    width: 250px;
+    height: 65px;
+    padding: 10px;
+    margin: 0;
+    border-radius: 25px;
+    background-color: #414141;
+}
+
+#petitAffichage a {
+    display: flex;
+    color: white;
+    text-decoration: none;
+}
+
+#photoMasto {
+    margin-right: 10px;
+    border-radius: 360px;
+}
+
+#infoTextMasto {
+    margin:10px;
+}
+
+#infoTextMasto p {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+#nomCompteMasto {
+    padding-top: 10px;
+    color: #778899;
+}