Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ParisNeo
ParisNeo authored Jul 23, 2024
1 parent 29bc407 commit 0f283a6
Showing 1 changed file with 29 additions and 5 deletions.
34 changes: 29 additions & 5 deletions simple_todo_app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish To-Do List App</title>
<title class="font-bold text-3xl shadow-lg">Stylish To-Do List App</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body { transition: background-color 0.5s; }
Expand All @@ -13,16 +13,29 @@
.theme-blue { background-color: #3b82f6; color: #f9fafb; }
.theme-green { background-color: #10b981; color: #f9fafb; }
.input-dark { background-color: #374151; color: #f9fafb; }
.input-gray { background-color: #374151; color: #f9fafb; }
.input-blue { background-color: #374151; color: #f9fafb; }
.input-green { background-color: #374151; color: #f9fafb; }
.settings { display: none; transition: opacity 0.5s; }
.settings.active { display: block; opacity: 1; }
.settings.hidden { opacity: 0; }
.todo-item-dark { background-color: #374151; color: #f9fafb; }
.todo-item-gray { background-color: #374151; color: #f9fafb; }
.todo-item-blue { background-color: #374151; color: #f9fafb; }
.todo-item-green { background-color: #374151; color: #f9fafb; }
.rounded-btn { border-radius: 0.375rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.title { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
.theme-light .input-dark { background-color: #e5e7eb; }
.theme-dark .input-dark { background-color: #374151; }
.theme-gray .input-dark { background-color: #4b5563; }
.theme-blue .input-dark { background-color: #1e3a8a; }
.theme-green .input-dark { background-color: #065f46; }

</style>
</head>
<body class="theme-gray" id="body">
<div class="max-w-md mx-auto p-5">
<h1 class="text-2xl font-bold text-center mb-4">To-Do List</h1>
<h1 class="title text-3xl font-bold text-center mb-4">To-Do List</h1>
<input type="text" id="todo-input" placeholder="Add a new task..." class="border p-2 w-full mb-2" onkeypress="handleKeyPress(event)">
<div class="flex space-x-2 mb-4">
<button id="add-task-btn" onclick="addTodo()" class="bg-green-500 text-white p-2 flex items-center rounded-btn">
Expand All @@ -40,11 +53,14 @@ <h1 class="text-2xl font-bold text-center mb-4">To-Do List</h1>
<button onclick="toggleSettings()" class="bg-gray-500 text-white p-2 flex items-center rounded-btn">
Settings
</button>
<a href="https://github.com/ParisNeo/AI_Apps" target="_blank" class="bg-gray-800 text-white p-2 flex items-center rounded-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2C6.48 2 2 6.48 2 12c0 4.41 2.87 8.16 6.84 9.49.5.09.68-.22.68-.49 0-.24-.01-.87-.01-1.71-2.79.61-3.38-1.35-3.38-1.35-.45-1.14-1.1-1.44-1.1-1.44-.9-.61.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.64.35-1.09.64-1.34-2.22-.25-4.56-1.11-4.56-4.93 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0112 6.84c.85.004 1.71.115 2.5.34 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.83-2.35 4.68-4.58 4.93.36.31.68.92.68 1.85 0 1.34-.01 2.42-.01 2.75 0 .27.18.59.69.49C19.13 20.16 22 16.41 22 12c0-5.52-4.48-10-10-10z" /></svg>
GitHub
</a>
</div>
<ul id="todo-list" class="space-y-2"></ul>
<div id="settings" class="settings hidden">
<h2 class="text-xl font-bold mb-2">Settings</h2>
<button onclick="toggleSettings()" class="bg-red-500 text-white p-2 mb-4 rounded-btn">Back</button>
<label for="theme-selector" class="block mb-2">Select Theme:</label>
<select id="theme-selector" class="border p-2 w-full mb-4" onchange="changeTheme()">
<option value="gray">Gray Theme</option>
Expand All @@ -53,6 +69,7 @@ <h2 class="text-xl font-bold mb-2">Settings</h2>
<option value="blue">Blue Theme</option>
<option value="green">Green Theme</option>
</select>
<button onclick="toggleSettings()" class="bg-red-500 text-white p-2 mb-4 rounded-btn">Back</button>
</div>
</div>
<script>
Expand Down Expand Up @@ -141,11 +158,15 @@ <h2 class="text-xl font-bold mb-2">Settings</h2>
const body = document.getElementById('body');
const theme = document.getElementById('theme-selector').value;
body.className = `theme-${theme}`;
document.getElementById('todo-input').className = theme === 'dark' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
const inputClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
const selectClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-4 input-dark' : 'border p-2 w-full mb-4';
document.getElementById('todo-input').className = inputClass;
document.getElementById('theme-selector').className = selectClass;
localStorage.setItem('theme', theme);
renderTodos();
}


function toggleSettings() {
const settings = document.getElementById('settings');
const isActive = settings.classList.toggle('active');
Expand All @@ -157,7 +178,10 @@ <h2 class="text-xl font-bold mb-2">Settings</h2>
function loadTodos() {
const theme = localStorage.getItem('theme') || 'gray';
document.getElementById('body').className = `theme-${theme}`;
document.getElementById('todo-input').className = theme === 'dark' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
const inputClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
const selectClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-4 input-dark' : 'border p-2 w-full mb-4';
document.getElementById('todo-input').className = inputClass;
document.getElementById('theme-selector').className = selectClass;
document.getElementById('theme-selector').value = theme;
renderTodos();
}
Expand Down

0 comments on commit 0f283a6

Please sign in to comment.