Create index.html

fsh-org · Feb 22, 2024 · 7ffa86b · 7ffa86b
1 parent 75762de
commit 7ffa86b
Showing 1 changed file with 101 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Fsh ToDo</title>
+    <!-- Boiler plate------ -->
+    <link rel="icon" href="https://fsh.plus/fsh.png" type="image/png">
+    <meta name="description" content="Organize tasks online.">
+    <!-- ------- -->
+    <link rel="stylesheet" href="https://fsh.plus/NewStyle.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta property="og:image" content="https://fsh.plus/fsh.png"/>
+    <meta name="theme-color" content="#a89c9b">
+    <!-- ------------------ -->
+    <style>
+      body {
+        text-align: center;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+      .card {
+        width: 50%;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 10px;
+        padding: 5px;
+        border-radius: 0.25rem;
+        background-color: #888;
+        text-align: left;
+        transition: 500ms;
+      }
+      .card:hover {
+        background-color: #777;
+      }
+      #preview {
+        transition: 500ms;
+      }
+   </style>
+  </head>
+  <body>
+    <a href="https://fsh.plus">
+      <table class="title">
+        <tr>
+          <td><video src="https://fsh.plus/fsh.webm" playsinline autoplay muted loop width="100" alt="Spining low quality fish"></video></td>
+          <td><h1>Fsh</h1></td>
+        </tr>
+      </table>
+    </a>
+    <h2 style="margin-top:-20px">ToDo</h2>
+    <input id="title" style="display:inline-block;width:calc(50% - 66px);">
+    <button onclick="add()">Add <svg style="display:inline-block;height:20px;margin-bottom:-5px;fill:#fff;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg></button>
+    <br>
+    <textarea id="desc" style="width:50%"></textarea>
+    <div id="preview"></div>
+  </body>
+  <script>
+    function g(id) {
+      return document.getElementById(id)
+    }
+    function reload() {
+      let data = JSON.parse(localStorage.getItem('todo')) || [];
+      g('preview').innerHTML = data.map(r => `<div class="card">
+  <input class="canvas-confetti-btn" type="checkbox" onchange="del(${r.id})"> ${r.title}<br>${r.desc}</div>`).join('')
+    }
+    function del(id) {
+      let data = JSON.parse(localStorage.getItem('todo')) || [];
+      data = data.filter(e => e.id != id);
+      localStorage.setItem('todo', JSON.stringify(data))
+      reload()
+    }
+    function add() {
+      let data = JSON.parse(localStorage.getItem('todo')) || [];
+      data.push({
+        title: g('title').value,
+        desc: g('desc').value,
+        id: Math.floor(Math.random()*100000)
+      })
+      g('title').value = '';
+      g('desc').value = '';
+      localStorage.setItem('todo', JSON.stringify(data))
+      reload()
+    }
+    reload()
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
+  <script>
+window.addEventListener("click", (event) => {
+  if (event.target.tagName == 'INPUT' && event.target.type == 'checkbox') {
+    confetti({
+      origin: {
+        x: 0.27,
+        y: 0.5
+      },
+      disableForReducedMotion: true
+    });
+  }
+});
+  </script>
+</html>