EncodeTheCode/schedule_planner6.htm

## schedule_planner6.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schedule Planner</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .n {
            background-color: #fff;
            width: 400px;
            height: 700px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
            border: 1px solid #ccc;
            overflow-y: auto;
            position: relative;
            background-image: url('https://www.transparenttextures.com/patterns/diamond-pattern.png'); /* Subtle texture */
            background-size: cover;
            margin-right:2.5em;
            padding-right:2.5em;
        }
        .h1 {
            text-align: center;
            font-size: 24px;
            margin: 0;
            padding: 10px 0;
            border-bottom: 2px solid #ddd;
            color: #333;
            font-family: 'Courier New', Courier, monospace;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Slight shadow for title */
        }
        .t {
            margin-top: 20px;
        }
        .ts {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
        }
        .ti {
            width: 70%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            background-color: #f9f9f9;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Slight inner shadow */
        }
        .ckm button {
            background-color: transparent;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }
        .ckg {
            color: green;
            margin-left: 10px;
        }
        .ckr {
            color: red;
        }
        .del {
            color: red;
            font-size: 16px;
            margin-left: 10px;
            cursor: pointer;
        }
        .ckm button:hover {
            opacity: 0.7;
        }
        .ts:last-child {
            border-bottom: none;
        }
        .add-btn {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
        .add-btn:hover {
            background-color: #45a049;
        }
        .save-btn,
        .import-btn {
            margin-top: 10px;
            padding: 10px 20px;
            border: none;
            background-color: #2196F3;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
        .save-btn:hover,
        .import-btn:hover {
            background-color: #1e88e5;
        }
        .import-container {
            margin-top: 20px;
        }
        .import-textarea {
            width: 100%;
            height: 80px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        /* Navigation buttons */
        .page-nav {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .page-nav button {
            padding: 10px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .page-nav button:hover {
            background-color: #555;
        }

        /* Page number display */
        .page-number {
            font-size: 16px;
            color: #333;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="n">
        <div class="h1">Schedule Planner</div>
        <div class="t" id="task-container">
            <!-- Tasks will go here -->
        </div>
        <button class="add-btn" id="add-task-btn">Add Task</button>
        <button class="save-btn">Save Tasks</button>
        <div class="import-container">
            <textarea class="import-textarea" placeholder="Paste base64 string here"></textarea>
            <button class="import-btn">Import Tasks</button>
        </div>
        <div class="page-nav">
            <button class="prev-btn" id="prev-page-btn" disabled>Previous Page</button>
            <button class="next-btn" id="next-page-btn">Next Page</button>
        </div>
        <div class="page-number" id="page-number">Page 1</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        const MAX_TASKS_PER_PAGE = 9;
        let currentPage = 0;
        let allTasks = [];

        function renderTasks() {
            const taskContainer = $('#task-container');
            taskContainer.empty();
            const startIndex = currentPage * MAX_TASKS_PER_PAGE;
            const endIndex = startIndex + MAX_TASKS_PER_PAGE;
            const tasksToRender = allTasks.slice(startIndex, endIndex);

            tasksToRender.forEach(task => {
                const taskHtml = `
                    <div class="ts">
                        <input type="text" class="ti" value="${task.text}" ${task.completed ? 'style="text-decoration: line-through; color: green;"' : ''}>
                        <div class="ckm">
                            <button class="ckg">✔</button>
                            <button class="ckr">✘</button>
                            <span class="del">🗑️</span>
                        </div>
                    </div>
                `;
                taskContainer.append(taskHtml);
            });

            // Update page number display
            $('#page-number').text(`Page ${currentPage + 1}`);

            // Enable/disable navigation buttons based on the current page
            $('#prev-page-btn').prop('disabled', currentPage === 0);
            $('#next-page-btn').prop('disabled', endIndex >= allTasks.length);

            // Reattach event listeners after rendering
            attachEventListeners();
        }

        function attachEventListeners() {
            // Mark task as completed
            $(".ckg").click(function() {
                $(this).closest('.ts').find('.ti').css({'text-decoration':'line-through','color':'green'});
            });

            // Mark task as not completed
            $(".ckr").click(function() {
                $(this).closest('.ts').find('.ti').css({'text-decoration':'none','color':'red'});
            });

            // Delete task
            $(".del").click(function() {
                const taskText = $(this).closest('.ts').find('.ti').val();
                allTasks = allTasks.filter(task => task.text !== taskText);
                renderTasks();
            });
        }

        function addTask(taskText = "") {
            allTasks.push({ text: taskText, completed: false });
            renderTasks();
        }

        // Add task on clicking the button
        $("#add-task-btn").click(function() {
            addTask("New Task");
        });

        // Navigate to previous page
        $("#prev-page-btn").click(function() {
            if (currentPage > 0) {
                currentPage--;
                renderTasks();
            }
        });

        // Navigate to next page
        $("#next-page-btn").click(function() {
            if ((currentPage + 1) * MAX_TASKS_PER_PAGE < allTasks.length) {
                currentPage++;
                renderTasks();
            }
        });

        $(".save-btn").click(function() {
            var base64 = btoa(JSON.stringify(allTasks));
            prompt("Copy this base64 string to save your tasks", base64);
        });

        $(".import-btn").click(function() {
            var base64 = $(".import-textarea").val().trim();
            if (base64) {
                try {
                    allTasks = JSON.parse(atob(base64));
                    currentPage = 0; // Reset to first page after import
                    renderTasks();
                } catch (e) {
                    alert("Invalid base64 string");
                }
            } else {
                alert("Please paste a base64 string to import tasks.");
            }
        });

        // Initial rendering of tasks
        renderTasks();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Schedule Planner</title>
	<style>
	body {
	background-color: #f0f0f0;
	font-family: 'Courier New', Courier, monospace;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	}
	.n {
	background-color: #fff;
	width: 400px;
	height: 700px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
	border: 1px solid #ccc;
	overflow-y: auto;
	position: relative;
	background-image: url('https://www.transparenttextures.com/patterns/diamond-pattern.png'); /* Subtle texture */
	background-size: cover;
	margin-right:2.5em;
	padding-right:2.5em;
	}
	.h1 {
	text-align: center;
	font-size: 24px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 2px solid #ddd;
	color: #333;
	font-family: 'Courier New', Courier, monospace;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Slight shadow for title */
	}
	.t {
	margin-top: 20px;
	}
	.ts {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	}
	.ti {
	width: 70%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
	background-color: #f9f9f9;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Slight inner shadow */
	}
	.ckm button {
	background-color: transparent;
	border: none;
	font-size: 20px;
	cursor: pointer;
	}
	.ckg {
	color: green;
	margin-left: 10px;
	}
	.ckr {
	color: red;
	}
	.del {
	color: red;
	font-size: 16px;
	margin-left: 10px;
	cursor: pointer;
	}
	.ckm button:hover {
	opacity: 0.7;
	}
	.ts:last-child {
	border-bottom: none;
	}
	.add-btn {
	margin-top: 20px;
	padding: 10px 20px;
	border: none;
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	}
	.add-btn:hover {
	background-color: #45a049;
	}
	.save-btn,
	.import-btn {
	margin-top: 10px;
	padding: 10px 20px;
	border: none;
	background-color: #2196F3;
	color: white;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	}
	.save-btn:hover,
	.import-btn:hover {
	background-color: #1e88e5;
	}
	.import-container {
	margin-top: 20px;
	}
	.import-textarea {
	width: 100%;
	height: 80px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
	}

	/* Navigation buttons */
	.page-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	}
	.page-nav button {
	padding: 10px;
	background-color: #333;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}
	.page-nav button:hover {
	background-color: #555;
	}

	/* Page number display */
	.page-number {
	font-size: 16px;
	color: #333;
	margin-top: 10px;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="n">
	<div class="h1">Schedule Planner</div>
	<div class="t" id="task-container">
	<!-- Tasks will go here -->
	</div>
	<button class="add-btn" id="add-task-btn">Add Task</button>
	<button class="save-btn">Save Tasks</button>
	<div class="import-container">
	<textarea class="import-textarea" placeholder="Paste base64 string here"></textarea>
	<button class="import-btn">Import Tasks</button>
	</div>
	<div class="page-nav">
	<button class="prev-btn" id="prev-page-btn" disabled>Previous Page</button>
	<button class="next-btn" id="next-page-btn">Next Page</button>
	</div>
	<div class="page-number" id="page-number">Page 1</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	const MAX_TASKS_PER_PAGE = 9;
	let currentPage = 0;
	let allTasks = [];

	function renderTasks() {
	const taskContainer = $('#task-container');
	taskContainer.empty();
	const startIndex = currentPage * MAX_TASKS_PER_PAGE;
	const endIndex = startIndex + MAX_TASKS_PER_PAGE;
	const tasksToRender = allTasks.slice(startIndex, endIndex);

	tasksToRender.forEach(task => {
	const taskHtml = `
	<div class="ts">
	<input type="text" class="ti" value="${task.text}" ${task.completed ? 'style="text-decoration: line-through; color: green;"' : ''}>
	<div class="ckm">
	<button class="ckg">✔</button>
	<button class="ckr">✘</button>
	<span class="del">🗑️</span>
	</div>
	</div>
	`;
	taskContainer.append(taskHtml);
	});

	// Update page number display
	$('#page-number').text(`Page ${currentPage + 1}`);

	// Enable/disable navigation buttons based on the current page
	$('#prev-page-btn').prop('disabled', currentPage === 0);
	$('#next-page-btn').prop('disabled', endIndex >= allTasks.length);

	// Reattach event listeners after rendering
	attachEventListeners();
	}

	function attachEventListeners() {
	// Mark task as completed
	$(".ckg").click(function() {
	$(this).closest('.ts').find('.ti').css({'text-decoration':'line-through','color':'green'});
	});

	// Mark task as not completed
	$(".ckr").click(function() {
	$(this).closest('.ts').find('.ti').css({'text-decoration':'none','color':'red'});
	});

	// Delete task
	$(".del").click(function() {
	const taskText = $(this).closest('.ts').find('.ti').val();
	allTasks = allTasks.filter(task => task.text !== taskText);
	renderTasks();
	});
	}

	function addTask(taskText = "") {
	allTasks.push({ text: taskText, completed: false });
	renderTasks();
	}

	// Add task on clicking the button
	$("#add-task-btn").click(function() {
	addTask("New Task");
	});

	// Navigate to previous page
	$("#prev-page-btn").click(function() {
	if (currentPage > 0) {
	currentPage--;
	renderTasks();
	}
	});

	// Navigate to next page
	$("#next-page-btn").click(function() {
	if ((currentPage + 1) * MAX_TASKS_PER_PAGE < allTasks.length) {
	currentPage++;
	renderTasks();
	}
	});

	$(".save-btn").click(function() {
	var base64 = btoa(JSON.stringify(allTasks));
	prompt("Copy this base64 string to save your tasks", base64);
	});

	$(".import-btn").click(function() {
	var base64 = $(".import-textarea").val().trim();
	if (base64) {
	try {
	allTasks = JSON.parse(atob(base64));
	currentPage = 0; // Reset to first page after import
	renderTasks();
	} catch (e) {
	alert("Invalid base64 string");
	}
	} else {
	alert("Please paste a base64 string to import tasks.");
	}
	});

	// Initial rendering of tasks
	renderTasks();
	</script>
	</body>
	</html>