52 lines
2.7 KiB
Plaintext
52 lines
2.7 KiB
Plaintext
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-6">
|
|
<div class="card glass-card shadow-lg border-0 mb-4">
|
|
<div class="card-body p-4">
|
|
<h2 class="mb-4 fw-bold text-center">What needs to be done?</h2>
|
|
|
|
<form action="/todos" method="post" class="mb-4">
|
|
<div class="input-group input-group-lg shadow-sm rounded-pill overflow-hidden">
|
|
<input type="text" name="content" class="form-control border-0 bg-dark-subtle px-4" placeholder="Add a new task..." required autofocus>
|
|
<button class="btn btn-primary px-4 fw-bold add-btn" type="submit">Add</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="todo-list">
|
|
<% if @todos.empty? %>
|
|
<div class="text-center text-muted py-5">
|
|
<p class="fs-5 mb-0">You're all caught up!</p>
|
|
<small>Add a task above to get started.</small>
|
|
</div>
|
|
<% else %>
|
|
<% @todos.each do |todo| %>
|
|
<div class="todo-item d-flex justify-content-between align-items-center p-3 mb-2 rounded-3 <%= todo.is_completed ? 'completed bg-dark-subtle opacity-75' : 'bg-dark text-light border border-secondary border-opacity-25' %>">
|
|
<div class="d-flex align-items-center flex-grow-1">
|
|
<form action="/todos/<%= todo.id %>/toggle" method="post" class="me-3 m-0">
|
|
<button type="submit" class="toggle-btn p-0 border-0 bg-transparent">
|
|
<div class="checkbox-custom <%= todo.is_completed ? 'checked' : '' %>"></div>
|
|
</button>
|
|
</form>
|
|
<span class="todo-text fs-5 <%= 'text-decoration-line-through text-muted' if todo.is_completed %>"><%= Rack::Utils.escape_html(todo.content) %></span>
|
|
</div>
|
|
<form action="/todos/<%= todo.id %>/delete" method="post" class="m-0 ms-2">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger delete-btn rounded-circle" title="Delete">✕</button>
|
|
</form>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% if current_user&.is_temporary %>
|
|
<div class="alert alert-warning shadow-sm border-0 rounded-4 d-flex align-items-center justify-content-between p-4 temp-warning">
|
|
<div>
|
|
<h5 class="alert-heading fw-bold mb-1">Temporary Session</h5>
|
|
<p class="mb-0 text-dark opacity-75">Your tasks will be lost if you clear your cookies. Create a free account to save them!</p>
|
|
</div>
|
|
<a href="/signup" class="btn btn-dark fw-bold px-4 rounded-pill">Sign Up Now</a>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|