MyTaskManager V1
This commit is contained in:
Flatlogic Bot
parent
ba60ef5da0
commit
caaaf66daf
60
assets/css/custom.css
Normal file
60
assets/css/custom.css
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: #F8F9FA;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
transition: box-shadow 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card:hover {
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card.completed {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card.completed .card-title,
|
||||||
|
.task-card.completed .card-text {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #4A90E2;
|
||||||
|
border-color: #4A90E2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #357ABD;
|
||||||
|
border-color: #357ABD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background-color: #50E3C2;
|
||||||
|
border-color: #50E3C2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
background-color: #38A89D;
|
||||||
|
border-color: #38A89D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control, .form-select {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-container {
|
||||||
|
z-index: 1090;
|
||||||
|
}
|
||||||
18
assets/js/main.js
Normal file
18
assets/js/main.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Initialize toasts if they are present
|
||||||
|
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
|
||||||
|
var toastList = toastElList.map(function (toastEl) {
|
||||||
|
return new bootstrap.Toast(toastEl, { delay: 3000 });
|
||||||
|
});
|
||||||
|
toastList.forEach(toast => toast.show());
|
||||||
|
|
||||||
|
// Add confirmation to delete buttons
|
||||||
|
const deleteForms = document.querySelectorAll('form.delete-task-form');
|
||||||
|
deleteForms.forEach(form => {
|
||||||
|
form.addEventListener('submit', function (event) {
|
||||||
|
if (!confirm('Are you sure you want to delete this task?')) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
346
index.php
346
index.php
@ -1,150 +1,216 @@
|
|||||||
<?php
|
<?php
|
||||||
declare(strict_types=1);
|
// index.php
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
// --- CONFIG AND DB SETUP ---
|
||||||
@date_default_timezone_set('UTC');
|
require_once __DIR__ . '/db/config.php';
|
||||||
|
|
||||||
|
$message = null;
|
||||||
|
$message_type = 'success';
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
// Idempotent table creation
|
||||||
|
$pdo->exec("
|
||||||
|
CREATE TABLE IF NOT EXISTS tasks (
|
||||||
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
title VARCHAR(255) NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
status ENUM('pending', 'completed') DEFAULT 'pending' NOT NULL,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)
|
||||||
|
");
|
||||||
|
|
||||||
|
// --- HANDLE POST REQUESTS ---
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
if (session_status() == PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
$action = $_POST['action'] ?? '';
|
||||||
|
|
||||||
|
if ($action === 'add_task') {
|
||||||
|
$title = trim($_POST['title'] ?? '');
|
||||||
|
$description = trim($_POST['description'] ?? '');
|
||||||
|
|
||||||
|
if (!empty($title)) {
|
||||||
|
$stmt = $pdo->prepare("INSERT INTO tasks (title, description) VALUES (?, ?)");
|
||||||
|
$stmt->execute([$title, $description]);
|
||||||
|
$_SESSION['message'] = 'Task added successfully!';
|
||||||
|
$_SESSION['message_type'] = 'success';
|
||||||
|
} else {
|
||||||
|
$_SESSION['message'] = 'Task title cannot be empty.';
|
||||||
|
$_SESSION['message_type'] = 'danger';
|
||||||
|
}
|
||||||
|
} elseif ($action === 'update_status') {
|
||||||
|
$task_id = filter_var($_POST['task_id'] ?? 0, FILTER_VALIDATE_INT);
|
||||||
|
if ($task_id) {
|
||||||
|
$stmt = $pdo->prepare("UPDATE tasks SET status = 'completed' WHERE id = ?");
|
||||||
|
$stmt->execute([$task_id]);
|
||||||
|
$_SESSION['message'] = 'Task marked as completed!';
|
||||||
|
$_SESSION['message_type'] = 'success';
|
||||||
|
}
|
||||||
|
} elseif ($action === 'delete_task') {
|
||||||
|
$task_id = filter_var($_POST['task_id'] ?? 0, FILTER_VALIDATE_INT);
|
||||||
|
if ($task_id) {
|
||||||
|
$stmt = $pdo->prepare("DELETE FROM tasks WHERE id = ?");
|
||||||
|
$stmt->execute([$task_id]);
|
||||||
|
$_SESSION['message'] = 'Task deleted successfully!';
|
||||||
|
$_SESSION['message_type'] = 'success';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to self to prevent form resubmission
|
||||||
|
header("Location: " . $_SERVER['PHP_SELF']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for session message
|
||||||
|
if (session_status() == PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
if (isset($_SESSION['message'])) {
|
||||||
|
$message = $_SESSION['message'];
|
||||||
|
$message_type = $_SESSION['message_type'];
|
||||||
|
unset($_SESSION['message']);
|
||||||
|
unset($_SESSION['message_type']);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- FETCH TASKS FOR DISPLAY ---
|
||||||
|
$stmt = $pdo->query("SELECT * FROM tasks ORDER BY status ASC, created_at DESC");
|
||||||
|
$tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
$error_message = "Database error: " . $e->getMessage();
|
||||||
|
$tasks = [];
|
||||||
|
$message = $error_message;
|
||||||
|
$message_type = 'danger';
|
||||||
|
}
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
?>
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
|
||||||
<?php
|
<!-- SEO and Meta Tags -->
|
||||||
// Read project preview data from environment
|
<title>MyTaskManager</title>
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<meta name="description" content="A simple and beautiful task manager built with Flatlogic.">
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<meta name="keywords" content="task manager, to-do list, productivity, project management, simple tasks, online to-do, Flatlogic Generator, php task manager">
|
||||||
?>
|
<meta property="og:title" content="MyTaskManager">
|
||||||
<?php if ($projectDescription): ?>
|
<meta property="og:description" content="A simple and beautiful task manager built with Flatlogic.">
|
||||||
<!-- Meta description -->
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<!-- Open Graph meta tags -->
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
||||||
<!-- Twitter meta tags -->
|
<!-- Stylesheets -->
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<?php endif; ?>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||||
<?php if ($projectImageUrl): ?>
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
<!-- Open Graph image -->
|
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<?php endif; ?>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<div class="card">
|
<!-- Navbar -->
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="container">
|
||||||
<span class="sr-only">Loading…</span>
|
<a class="navbar-brand" href="#">
|
||||||
</div>
|
<i class="bi bi-check2-square text-primary"></i>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
MyTaskManager
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
</a>
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="container my-5">
|
||||||
|
|
||||||
|
<!-- Add Task Form -->
|
||||||
|
<section id="add-task" class="mb-5">
|
||||||
|
<div class="card task-card">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h2 class="card-title h4 mb-3">Add a New Task</h2>
|
||||||
|
<form action="index.php" method="POST">
|
||||||
|
<input type="hidden" name="action" value="add_task">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="title" class="form-label">Task Title</label>
|
||||||
|
<input type="text" class="form-control" id="title" name="title" placeholder="e.g., Finish project report" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="description" class="form-label">Description (Optional)</label>
|
||||||
|
<textarea class="form-control" id="description" name="description" rows="3" placeholder="Add more details about the task..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary w-100 py-2">
|
||||||
|
<i class="bi bi-plus-lg"></i> Add Task
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Task List -->
|
||||||
|
<section id="task-list">
|
||||||
|
<h2 class="h4 mb-4">Your Tasks</h2>
|
||||||
|
<?php if (empty($tasks)): ?>
|
||||||
|
<div class="text-center text-muted p-5 bg-light rounded-3">
|
||||||
|
<i class="bi bi-clipboard-check" style="font-size: 3rem;"></i>
|
||||||
|
<p class="mt-3 mb-0">You have no tasks yet. Add one above to get started!</p>
|
||||||
|
</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="list-group">
|
||||||
|
<?php foreach ($tasks as $task): ?>
|
||||||
|
<div class="list-group-item list-group-item-action task-card <?php echo $task['status'] === 'completed' ? 'completed' : ''; ?>">
|
||||||
|
<div class="d-flex w-100 justify-content-between">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-1"><?php echo htmlspecialchars($task['title']); ?></h5>
|
||||||
|
<p class="mb-1 small text-muted"><?php echo htmlspecialchars($task['description']); ?></p>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex gap-2 align-items-center">
|
||||||
|
<?php if ($task['status'] === 'pending'): ?>
|
||||||
|
<form action="index.php" method="POST" class="d-inline">
|
||||||
|
<input type="hidden" name="action" value="update_status">
|
||||||
|
<input type="hidden" name="task_id" value="<?php echo $task['id']; ?>">
|
||||||
|
<button type="submit" class="btn btn-sm btn-success" title="Mark as completed">
|
||||||
|
<i class="bi bi-check-lg"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<?php endif; ?>
|
||||||
|
<form action="index.php" method="POST" class="d-inline delete-task-form">
|
||||||
|
<input type="hidden" name="action" value="delete_task">
|
||||||
|
<input type="hidden" name="task_id" value="<?php echo $task['id']; ?>">
|
||||||
|
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete task">
|
||||||
|
<i class="bi bi-trash"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Toast Notification -->
|
||||||
|
<?php if ($message): ?>
|
||||||
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||||
|
<div class="toast align-items-center text-white bg-<?php echo $message_type; ?> border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">
|
||||||
|
<?php echo htmlspecialchars($message); ?>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<?php endif; ?>
|
||||||
<footer>
|
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<!-- Footer -->
|
||||||
</footer>
|
<footer class="text-center text-muted py-4 mt-5 border-top">
|
||||||
|
<p class="mb-0">© <?php echo date('Y'); ?> MyTaskManager. Built with <a href="https://flatlogic.com" target="_blank" class="text-decoration-none">Flatlogic</a>.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user