Spaces:

fredmo
/

mytodo

Running

App Files Files Community

fredmo commited on Jun 3

Commit

986f81d

verified ·

1 Parent(s): 41183e0

Update index.html

Browse files

Files changed (1) hide show

index.html +324 -19

index.html CHANGED Viewed

@@ -1,19 +1,324 @@
-<!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>My To-Do List</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: #f4f4f9;
+            color: #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh; /* Changed to min-height for longer lists */
+            margin: 0;
+            padding: 20px 0; /* Add some padding for scrollable content */
+        }
+        #app-container {
+            background: #fff;
+            padding: 25px 40px;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 500px; /* Increased max-width slightly for more buttons */
+            box-sizing: border-box;
+        }
+        h1 {
+            color: #444;
+            text-align: center;
+            margin-top: 0;
+            margin-bottom: 20px;
+            font-weight: 600;
+        }
+        #task-input-container {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        #task-input {
+            flex-grow: 1;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        #add-task-btn {
+            padding: 12px 20px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            transition: background-color 0.3s;
+        }
+        #add-task-btn:hover {
+            background-color: #0056b3;
+        }
+        #task-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .task-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 0; /* Adjusted padding, horizontal padding now on children */
+            border-bottom: 1px solid #eee;
+            font-size: 16px;
+        }
+        .task-item:last-child {
+            border-bottom: none;
+        }
+        .task-text-content { /* New class for the text part */
+            cursor: pointer;
+            flex-grow: 1;
+            padding-right: 10px; /* Space before action buttons */
+            overflow-wrap: break-word; /* Prevent long text from breaking layout */
+            word-break: break-word;
+        }
+        .task-item.completed .task-text-content { /* Updated selector */
+            text-decoration: line-through;
+            color: #aaa;
+        }
+        .task-actions {
+            display: flex;
+            align-items: center;
+            flex-shrink: 0; /* Prevent actions container from shrinking */
+        }
+        .emoji-toggle {
+            background: transparent;
+            border: 1px solid transparent; /* Keep layout consistent */
+            border-radius: 4px;
+            padding: 4px 6px;
+            cursor: pointer;
+            margin-left: 5px;
+            font-size: 18px; /* Slightly larger for emojis */
+            opacity: 0.4; /* Dimmed when inactive */
+            transition: opacity 0.2s, border-color 0.2s;
+            line-height: 1; /* Ensure consistent height */
+        }
+        .emoji-toggle:hover {
+            opacity: 0.7;
+        }
+        .emoji-toggle.active {
+            opacity: 1;
+            border: 1px solid #007bff;
+        }
+        .delete-btn {
+            background: #dc3545;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 28px;
+            height: 28px;
+            cursor: pointer;
+            font-size: 16px;
+            line-height: 28px;
+            text-align: center;
+            transition: background-color 0.3s;
+            margin-left: 8px; /* Space from emoji toggles */
+            flex-shrink: 0;
+        }
+        .delete-btn:hover {
+            background: #c82333;
+        }
+    </style>
+</head>
+<body>
+    <div id="app-container">
+        <h1>To-Do List ✅</h1>
+        <div id="task-input-container">
+            <input type="text" id="task-input" placeholder="Add a new task...">
+            <button id="add-task-btn">Add</button>
+        </div>
+        <ul id="task-list"></ul>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const taskInput = document.getElementById('task-input');
+            const addTaskBtn = document.getElementById('add-task-btn');
+            const taskList = document.getElementById('task-list');
+            const initialRawTasks = [
+                { text: "Chaucer ai", completed: true },
+                { text: "PyBench CFWD on VAI multinode", completed: false },
+                { text: "Managed Method call", completed: true },
+                { text: "Add ER Poc Chaucer AI", completed: true },
+                { text: "Add ER Poc TR", completed: false },
+                { text: "Add ER Aueso", completed: false },
+                { text: "Runway Help", completed: false },
+                { text: "Inference wkshp", completed: false },
+                { text: "TPU dock", completed: false },
+                { text: "Meridian", completed: false },
+                { text: "Nay Gnad for checkin", completed: false },
+                { text: "KaiPopApp", completed: false }
+            ];
+            // Helper function to ensure task objects have all necessary properties
+            const ensureTaskProperties = (task) => {
+                return {
+                    text: task.text,
+                    completed: !!task.completed,
+                    isCode: !!task.isCode,
+                    isAdmin: !!task.isAdmin,
+                    isClient: !!task.isClient,
+                };
+            };
+            // Load tasks from local storage or use initial tasks if storage is empty
+            let tasks = [];
+            const storedTasks = localStorage.getItem('tasks');
+            if (storedTasks) {
+                tasks = JSON.parse(storedTasks).map(ensureTaskProperties);
+            } else {
+                tasks = initialRawTasks.map(ensureTaskProperties);
+            }
+            if (tasks.length === 0 && initialRawTasks.length > 0 && !storedTasks) { // Ensure initial tasks are used if local storage was empty
+                 tasks = initialRawTasks.map(ensureTaskProperties);
+            }
+            // Function to save tasks to local storage
+            const saveTasks = () => {
+                localStorage.setItem('tasks', JSON.stringify(tasks));
+            };
+            // Function to render tasks to the DOM
+            const renderTasks = () => {
+                // Sort tasks: Client first, then Code, then by completion status
+                tasks.sort((a, b) => {
+                    // Client tasks come first
+                    if (a.isClient && !b.isClient) return -1;
+                    if (!a.isClient && b.isClient) return 1;
+                    // If both are Client or both are not Client, then Code tasks
+                    if (a.isCode && !b.isCode) return -1;
+                    if (!a.isCode && b.isCode) return 1;
+                    // If same client and code status, then uncompleted tasks first
+                    if (!a.completed && b.completed) return -1;
+                    if (a.completed && !b.completed) return 1;
+                    return 0; // Maintain relative order for items with same priority
+                });
+                taskList.innerHTML = ''; // Clear existing list
+                tasks.forEach((task, index) => {
+                    const li = document.createElement('li');
+                    li.className = 'task-item';
+                    if (task.completed) {
+                        li.classList.add('completed');
+                    }
+                    // Task text content (emojis + text)
+                    const taskTextContentEl = document.createElement('span');
+                    taskTextContentEl.className = 'task-text-content';
+                    let emojisPrefix = '';
+                    if (task.isClient) emojisPrefix += '👤 ';
+                    if (task.isCode) emojisPrefix += '💻 ';
+                    if (task.isAdmin) emojisPrefix += '⚙️ ';
+                    taskTextContentEl.textContent = emojisPrefix + task.text;
+                    taskTextContentEl.addEventListener('click', () => toggleTaskCompletion(index));
+                    // Actions container (toggles + delete)
+                    const actionsContainer = document.createElement('div');
+                    actionsContainer.className = 'task-actions';
+                    // Emoji Toggles
+                    const categories = [
+                        { type: 'client', emoji: '👤', prop: 'isClient', title: 'Client Task' },
+                        { type: 'code', emoji: '💻', prop: 'isCode', title: 'Code Task' },
+                        { type: 'admin', emoji: '⚙️', prop: 'isAdmin', title: 'Admin Task' }
+                    ];
+                    categories.forEach(cat => {
+                        const toggleBtn = document.createElement('button');
+                        toggleBtn.className = 'emoji-toggle';
+                        toggleBtn.textContent = cat.emoji;
+                        toggleBtn.title = `Toggle ${cat.title}`;
+                        toggleBtn.dataset.type = cat.type;
+                        if (task[cat.prop]) {
+                            toggleBtn.classList.add('active');
+                        }
+                        toggleBtn.addEventListener('click', (e) => {
+                            e.stopPropagation(); // Prevent task completion toggle
+                            toggleEmojiCategory(index, cat.prop);
+                        });
+                        actionsContainer.appendChild(toggleBtn);
+                    });
+                    // Delete button
+                    const deleteBtn = document.createElement('button');
+                    deleteBtn.textContent = '×';
+                    deleteBtn.className = 'delete-btn';
+                    deleteBtn.title = "Delete Task";
+                    deleteBtn.addEventListener('click', (e) => {
+                         e.stopPropagation(); // Prevent task completion toggle
+                         deleteTask(index);
+                    });
+                    actionsContainer.appendChild(deleteBtn);
+                    li.appendChild(taskTextContentEl);
+                    li.appendChild(actionsContainer);
+                    taskList.appendChild(li);
+                });
+            };
+            // Function to add a new task
+            const addTask = () => {
+                const taskText = taskInput.value.trim();
+                if (taskText !== '') {
+                    // Add new task with default false for emoji categories
+                    tasks.unshift(ensureTaskProperties({ text: taskText, completed: false }));
+                    taskInput.value = '';
+                    saveTasks();
+                    renderTasks();
+                }
+            };
+            // Function to delete a task
+            const deleteTask = (index) => {
+                tasks.splice(index, 1);
+                saveTasks();
+                renderTasks();
+            };
+            // Function to toggle a task's completion status
+            const toggleTaskCompletion = (index) => {
+                tasks[index].completed = !tasks[index].completed;
+                saveTasks();
+                renderTasks(); // Re-render to apply style and potentially re-sort if completion affects order
+            };
+            // Function to toggle an emoji category for a task
+            const toggleEmojiCategory = (index, categoryProp) => {
+                tasks[index][categoryProp] = !tasks[index][categoryProp];
+                saveTasks();
+                renderTasks(); // Re-render to update emojis, sort, and toggle style
+            };
+            // Event listener for the "Add" button
+            addTaskBtn.addEventListener('click', addTask);
+            // Event listener for the Enter key in the input field
+            taskInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    addTask();
+                }
+            });
+            // Initial render of tasks on page load
+            renderTasks();
+        });
+    </script>
+</body>
+</html>