Spaces:

akhaliq
/

anycoder-d886556a

Running

App Files Files Community

akhaliq HF Staff commited on 14 days ago

Commit

2550fb4

verified ·

1 Parent(s): 755bc25

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +524 -19

index.html CHANGED Viewed

@@ -1,19 +1,524 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reminders</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      min-height: 100vh;
+      background: #f2f2f7;
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 40px 20px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .container {
+      background: white;
+      border-radius: 20px;
+      width: 100%;
+      max-width: 480px;
+      box-shadow:
+        0 0 0 0.5px rgba(0, 0, 0, 0.05),
+        0 2px 8px rgba(0, 0, 0, 0.08),
+        0 8px 30px rgba(0, 0, 0, 0.06);
+      overflow: hidden;
+    }
+    header {
+      padding: 24px 24px 20px;
+      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
+      border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+    }
+    header a {
+      color: #007aff;
+      text-decoration: none;
+      font-size: 12px;
+      font-weight: 400;
+      letter-spacing: -0.01em;
+      display: inline-block;
+      margin-bottom: 8px;
+      transition: opacity 0.2s ease;
+    }
+    header a:hover {
+      opacity: 0.7;
+    }
+    h1 {
+      color: #1c1c1e;
+      font-size: 34px;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    h1 i {
+      color: #007aff;
+      font-size: 28px;
+    }
+    .input-group {
+      display: flex;
+      gap: 12px;
+      padding: 16px 20px;
+      background: #f9f9f9;
+      border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
+    }
+    input[type="text"] {
+      flex: 1;
+      padding: 12px 16px;
+      border: none;
+      border-radius: 12px;
+      font-size: 17px;
+      font-weight: 400;
+      background: white;
+      color: #1c1c1e;
+      box-shadow:
+        0 0 0 0.5px rgba(0, 0, 0, 0.08),
+        0 1px 3px rgba(0, 0, 0, 0.06);
+      transition: box-shadow 0.2s ease;
+      letter-spacing: -0.01em;
+    }
+    input[type="text"]::placeholder {
+      color: #8e8e93;
+    }
+    input[type="text"]:focus {
+      outline: none;
+      box-shadow:
+        0 0 0 3px rgba(0, 122, 255, 0.2),
+        0 1px 3px rgba(0, 0, 0, 0.06);
+    }
+    .add-btn {
+      width: 44px;
+      height: 44px;
+      background: #007aff;
+      color: white;
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+    .add-btn:hover {
+      background: #0066d6;
+      transform: scale(1.02);
+    }
+    .add-btn:active {
+      transform: scale(0.98);
+    }
+    .todo-list {
+      list-style: none;
+      max-height: 450px;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+    .todo-list::-webkit-scrollbar {
+      width: 6px;
+    }
+    .todo-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .todo-list::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 3px;
+    }
+    .todo-item {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 14px 20px;
+      margin: 0 12px 2px;
+      border-radius: 12px;
+      transition: all 0.2s ease;
+      animation: fadeIn 0.3s ease;
+      cursor: default;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .todo-item:hover {
+      background: rgba(0, 0, 0, 0.03);
+    }
+    .todo-item.completed .todo-text {
+      color: #8e8e93;
+      text-decoration: line-through;
+      text-decoration-color: #c7c7cc;
+    }
+    .checkbox-wrapper {
+      position: relative;
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+    .checkbox-wrapper input[type="checkbox"] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 1;
+    }
+    .custom-checkbox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 24px;
+      height: 24px;
+      border: 2px solid #c7c7cc;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .custom-checkbox i {
+      color: white;
+      font-size: 12px;
+      opacity: 0;
+      transform: scale(0.5);
+      transition: all 0.2s ease;
+    }
+    .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox {
+      background: #007aff;
+      border-color: #007aff;
+    }
+    .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox i {
+      opacity: 1;
+      transform: scale(1);
+    }
+    .todo-text {
+      flex: 1;
+      font-size: 17px;
+      font-weight: 400;
+      color: #1c1c1e;
+      word-break: break-word;
+      line-height: 1.4;
+      letter-spacing: -0.01em;
+      transition: color 0.2s ease;
+    }
+    .delete-btn {
+      opacity: 0;
+      width: 32px;
+      height: 32px;
+      background: transparent;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      color: #ff3b30;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+    .todo-item:hover .delete-btn {
+      opacity: 1;
+    }
+    .delete-btn:hover {
+      background: rgba(255, 59, 48, 0.1);
+    }
+    .empty-state {
+      text-align: center;
+      padding: 60px 40px;
+      color: #8e8e93;
+    }
+    .empty-state i {
+      font-size: 56px;
+      margin-bottom: 16px;
+      color: #c7c7cc;
+    }
+    .empty-state p {
+      font-size: 17px;
+      font-weight: 400;
+      letter-spacing: -0.01em;
+    }
+    .stats {
+      display: flex;
+      justify-content: space-around;
+      padding: 16px 20px;
+      background: #f9f9f9;
+      border-top: 0.5px solid rgba(0, 0, 0, 0.08);
+    }
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+    .stat-number {
+      font-size: 22px;
+      font-weight: 600;
+      color: #1c1c1e;
+      letter-spacing: -0.02em;
+    }
+    .stat-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: #8e8e93;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+    }
+    .stat-item.total .stat-number {
+      color: #007aff;
+    }
+    .stat-item.done .stat-number {
+      color: #34c759;
+    }
+    .stat-item.pending .stat-number {
+      color: #ff9500;
+    }
+    /* Responsive */
+    @media (max-width: 500px) {
+      body {
+        padding: 0;
+        align-items: flex-start;
+      }
+      .container {
+        border-radius: 0;
+        min-height: 100vh;
+      }
+      h1 {
+        font-size: 28px;
+      }
+      .todo-item {
+        margin: 0 8px 2px;
+        padding: 12px 16px;
+      }
+      .delete-btn {
+        opacity: 0.6;
+      }
+    }
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #000000;
+      }
+      .container {
+        background: #1c1c1e;
+        box-shadow: none;
+      }
+      header {
+        background: linear-gradient(180deg, #1c1c1e 0%, #1c1c1e 100%);
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+      }
+      h1 {
+        color: #ffffff;
+      }
+      .input-group {
+        background: #2c2c2e;
+        border-bottom-color: rgba(255, 255, 255, 0.08);
+      }
+      input[type="text"] {
+        background: #3a3a3c;
+        color: #ffffff;
+        box-shadow: none;
+      }
+      input[type="text"]::placeholder {
+        color: #8e8e93;
+      }
+      .todo-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+      .todo-text {
+        color: #ffffff;
+      }
+      .todo-item.completed .todo-text {
+        color: #636366;
+      }
+      .custom-checkbox {
+        border-color: #636366;
+      }
+      .empty-state {
+        color: #8e8e93;
+      }
+      .empty-state i {
+        color: #636366;
+      }
+      .stats {
+        background: #2c2c2e;
+        border-top-color: rgba(255, 255, 255, 0.08);
+      }
+      .stat-number {
+        color: #ffffff;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+      <h1><i class="fas fa-list-check"></i> Reminders</h1>
+    </header>
+    <div class="input-group">
+      <input type="text" id="todoInput" placeholder="Add a new reminder..." onkeypress="if(event.key==='Enter')addTodo()">
+      <button class="add-btn" onclick="addTodo()"><i class="fas fa-plus"></i></button>
+    </div>
+    <ul class="todo-list" id="todoList"></ul>
+    <div class="stats" id="stats"></div>
+  </div>
+  <script>
+    let todos = JSON.parse(localStorage.getItem('todos')) || [];
+    const render = () => {
+      const list = document.getElementById('todoList');
+      const stats = document.getElementById('stats');
+      if (todos.length === 0) {
+        list.innerHTML = `
+          <div class="empty-state">
+            <i class="fas fa-bell-slash"></i>
+            <p>No reminders yet</p>
+          </div>
+        `;
+        stats.style.display = 'none';
+      } else {
+        list.innerHTML = todos.map((t, i) => `
+          <li class="todo-item ${t.done ? 'completed' : ''}">
+            <div class="checkbox-wrapper">
+              <input type="checkbox" ${t.done ? 'checked' : ''} onchange="toggle(${i})">
+              <div class="custom-checkbox">
+                <i class="fas fa-check"></i>
+              </div>
+            </div>
+            <span class="todo-text">${escapeHtml(t.text)}</span>
+            <button class="delete-btn" onclick="remove(${i})"><i class="fas fa-trash-alt"></i></button>
+          </li>
+        `).join('');
+        const done = todos.filter(t => t.done).length;
+        const pending = todos.length - done;
+        stats.innerHTML = `
+          <div class="stat-item total">
+            <span class="stat-number">${todos.length}</span>
+            <span class="stat-label">Total</span>
+          </div>
+          <div class="stat-item done">
+            <span class="stat-number">${done}</span>
+            <span class="stat-label">Done</span>
+          </div>
+          <div class="stat-item pending">
+            <span class="stat-number">${pending}</span>
+            <span class="stat-label">Pending</span>
+          </div>
+        `;
+        stats.style.display = 'flex';
+      }
+      localStorage.setItem('todos', JSON.stringify(todos));
+    };
+    const escapeHtml = (text) => {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    };
+    const addTodo = () => {
+      const input = document.getElementById('todoInput');
+      if (input.value.trim()) {
+        todos.unshift({ text: input.value.trim(), done: false });
+        input.value = '';
+        render();
+      }
+    };
+    const toggle = (i) => {
+      todos[i].done = !todos[i].done;
+      render();
+    };
+    const remove = (i) => {
+      todos.splice(i, 1);
+      render();
+    };
+    render();
+  </script>
+</body>
+</html>