initial commit

localcatolico · Aug 18, 2024 · 31052bf · 31052bf
commit 31052bf
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+repertorio.localcatolico.com.br
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# Local Católico - Repertório
+
+Monta o repertório a partir de uma planilha do
+[Google Sheets](https://docs.google.com/spreadsheets/d/17iuLN9zmfkS3BTWtAY4-Ibw6EUw2dWsk52JcNfZjih8).
+
+
+```bash
+python3 -m http.server
+```
+
+http://localhost:8000
diff --git a/assets/css/background.css b/assets/css/background.css
@@ -0,0 +1,69 @@
+body {
+  margin: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow: auto;
+  background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
+  animation: gradient 15s ease infinite;
+  background-size: 400% 400%;
+  background-attachment: fixed;
+}
+
+@keyframes gradient {
+  0% {
+      background-position: 0% 0%;
+  }
+  50% {
+      background-position: 100% 100%;
+  }
+  100% {
+      background-position: 0% 0%;
+  }
+}
+
+.wave {
+  background: rgb(255 255 255 / 25%);
+  border-radius: 1000% 1000% 0 0;
+  position: fixed;
+  width: 200%;
+  height: 12em;
+  animation: wave 10s -3s linear infinite;
+  transform: translate3d(0, 0, 0);
+  opacity: 0.8;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.wave:nth-of-type(2) {
+  bottom: -1.25em;
+  animation: wave 18s linear reverse infinite;
+  opacity: 0.8;
+}
+
+.wave:nth-of-type(3) {
+  bottom: -2.5em;
+  animation: wave 20s -1s reverse infinite;
+  opacity: 0.9;
+}
+
+@keyframes wave {
+  2% {
+      transform: translateX(1);
+  }
+
+  25% {
+      transform: translateX(-25%);
+  }
+
+  50% {
+      transform: translateX(-50%);
+  }
+
+  75% {
+      transform: translateX(-25%);
+  }
+
+  100% {
+      transform: translateX(1);
+  }
+}
diff --git a/assets/img/logo.png b/assets/img/logo.png
diff --git a/assets/js/clipboard.js b/assets/js/clipboard.js
@@ -0,0 +1,5 @@
+function copyPlaylistToClipboard(href) {
+  navigator.clipboard.writeText(href);
+  var element = document.getElementById("toast");
+  element.classList.add("show");
+}
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -0,0 +1,39 @@
+const sheetUrl = "https://docs.google.com/spreadsheets/d/17iuLN9zmfkS3BTWtAY4-Ibw6EUw2dWsk52JcNfZjih8/pub?output=csv";
+
+function parseCSV(data) {
+  const lines = data.split("\n");
+
+  return lines.slice(1).map(line => {
+    const values = line.split(",");
+    return values[0].trim();
+  });
+}
+
+async function fetchData() {
+  try {
+    const response = await fetch(sheetUrl);
+    const data = await response.text();
+    const parsedData = parseCSV(data);
+    let html = "";
+
+    parsedData.forEach(value => {
+      if (value) {
+        console.log(value);
+        html += 
+            `<div class="accordion-item">
+              <h2 class="accordion-header" id="` + value + `">
+                <a class="accordion-button" type="button" href="/repertorio.html?id=` + value + `">
+                  ` + value + `
+                </a>
+              </h2>
+            </div>`;
+      }
+    });
+
+    document.getElementById("summary").innerHTML = html;
+  } catch (error) {
+    console.error("Erro ao buscar os dados:", error);
+  }
+}
+
+fetchData();
diff --git a/assets/js/repertorio.js b/assets/js/repertorio.js
@@ -0,0 +1,74 @@
+const sheetUrl = "https://docs.google.com/spreadsheets/d/17iuLN9zmfkS3BTWtAY4-Ibw6EUw2dWsk52JcNfZjih8/pub?output=csv";
+
+function parseCSV(data) {
+  const lines = data.split("\n");
+  return lines.map(line => line.split(",").map(cell => cell.trim()));
+}
+
+async function fetchData() {
+  try {
+    const response = await fetch(sheetUrl);
+    const data = await response.text();
+    const parsedData = parseCSV(data);
+
+    const queryParams = new URLSearchParams(window.location.search);
+    const id = queryParams.get("id");
+
+    let html = "";
+    let found = false;
+
+    for (let i = 0; i < parsedData.length; i++) {
+      const row = parsedData[i];
+
+      // console.log(row[0])
+
+      if (row[0] === id) {
+        found = true;
+        html += `<div class="accordion-item">
+                   <h2 class="accordion-header" id="${row[0]}">
+                     <a class="accordion-button" type="button" href="/repertorio.html?id=${row[0]}">
+                       ${row[0]}
+                     </a>
+                   </h2>
+                 <div id="flush-collapse` + row[0] + `" class="accordion-collapse collapse show" aria-labelledby="` + row[0] + `" data-bs-parent="#churchs">
+                   <div class="accordion-body">
+                  <button class="btn btn-sm btn-secondary float-end" onclick="copyPlaylistToClipboard('` + window.location.href + `')">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
+                        <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
+                      </svg>
+                      Compartilhar
+                    </button>`;
+
+        for (let j = i + 1; j < parsedData.length; j++) {
+          if (parsedData[j].every(cell => cell === "")) {
+            break;
+          }
+          html += `<h1>` + parsedData[j][1] + `</h1>`
+          html += `<h4>` + parsedData[j][2] + `</h4>`
+          html += `<a class="btn btn-sm btn-primary" href="` + parsedData[j][3] + `" target="_blank">Letra</a>&nbsp;`
+          html += `<a class="btn btn-sm btn-primary" href="` + parsedData[j][4] + `" target="_blank">Cifra</a>&nbsp;`
+          html += `<br><br><br>`
+        }
+      }
+
+      if (found && row[0] === "") {
+        break;
+      }
+    }
+
+    if (!found) {
+      html = "<p>Nenhum resultado encontrado.</p>";
+    }
+
+    html +=
+          `</div>
+        </div>
+      </div>`;
+
+    document.getElementById("repertorio").innerHTML = html;
+  } catch (error) {
+    console.error("Erro ao buscar os dados:", error);
+  }
+}
+
+fetchData();
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Local Católico - Músicas</title>
+    <link rel="icon" type="image/x-icon" href="assets/img/logo.png">
+    <meta name="description" content="Site com músicas da igreja católica.">
+    <meta property="og:title" content="Local Católico - Músicas"/>
+    <meta property="og:description" content="Site com músicas.">
+    <meta property="og:image" content="https://pix.localcatolico.com.br/assets/img/logo.png"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:locale" content="pt_BR"/>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/background.css">
+  </head>
+  <body>
+    <div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+   </div>
+    <header class="m-4">
+      <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
+      <h3 class="text-white">Local Católico</h3>
+      <p class="text-white"></p>
+      <a class="btn btn-outline-primary" href="index.html">Repertórios</a>
+      <a class="btn btn-info btn-sm" href="https://liturgia.cancaonova.com/pb" href="_blank">Liturgia</a>
+    </header>
+    <main>
+      <div class="d-flex justify-content-center" style="margin-top: 50px">
+        <div class="col-md-6">
+          <div class="accordion accordion-flush" id="summary"></div><br>
+        </div>
+      </div>
+      <footer class="d-flex justify-content-center text-white" style="margin-top: 50px">
+        Desenvolvido por&nbsp;
+        <a href="https://github.com/rafaelbmateus" target="_blank" class="text-white">Rafael Mateus</a>
+      </footer>
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+    <script src="assets/js/index.js"></script>
+  </body>
+</html>
diff --git a/repertorio.html b/repertorio.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Local Católico - Músicas</title>
+    <link rel="icon" type="image/x-icon" href="assets/img/logo.png">
+    <meta name="description" content="Site com músicas da igreja católica.">
+    <meta property="og:title" content="Local Católico - Músicas"/>
+    <meta property="og:description" content="Site com músicas.">
+    <meta property="og:image" content="https://pix.localcatolico.com.br/assets/img/logo.png"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:locale" content="pt_BR"/>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/background.css">
+  </head>
+  <body>
+    <div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+   </div>
+    <header class="m-4">
+      <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
+      <h3 class="text-white">Local Católico</h3>
+      <p class="text-white"></p>
+      <a class="btn btn-outline-primary" href="index.html">Repertórios</a>
+      <a class="btn btn-info btn-sm" href="https://liturgia.cancaonova.com/pb" href="_blank">Liturgia</a>
+    </header>
+    <main>
+      <div class="d-flex justify-content-center" style="margin-top: 50px">
+        <div class="col-md-6">
+          <div class="accordion accordion-flush" id="repertorio"></div><br>
+        </div>
+      </div>
+      <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+        <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+          <div class="toast-header">
+            <strong class="me-auto">Notificação</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          </div>
+          <div class="toast-body">Link copiado com sucesso</div>
+        </div>
+      </div>
+      <footer class="d-flex justify-content-center text-white" style="margin-top: 50px">
+        Desenvolvido por&nbsp;
+        <a href="https://github.com/rafaelbmateus" target="_blank" class="text-white">Rafael Mateus</a>
+      </footer>
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+    <script src="assets/js/clipboard.js"></script>
+    <script src="assets/js/repertorio.js"></script>
+  </body>
+</html>