Yisroel Baum
807458ebe8
apply the new design system to the home page: wrap content in a container/stack shell with a site-header for the logout and today links, render the texts list as a vertical stack of cards via the list-cards primitive, and dress the create plan modal with the new modal/btn classes. js renders each text as an li.card with the create-plan button preserved so existing cypress hooks (li, .create-plan, .plan-name, .save-plan, .cancel-plan, ids) keep matching.
45 lines
1.5 KiB
PHP
45 lines
1.5 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Daily Goals - Home</title>
|
|
<link rel="stylesheet" href="/css/app.css">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="site-header-inner">
|
|
<h1>Home</h1>
|
|
<div class="cluster">
|
|
<a class="btn btn-secondary" href="/today">
|
|
Today's schedule
|
|
</a>
|
|
<button id="logout" class="btn btn-danger">Logout</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="container stack-lg">
|
|
<ul id="texts-list" class="list-cards"></ul>
|
|
</main>
|
|
<div id="create-plan-modal" class="modal" hidden>
|
|
<div class="modal-content stack">
|
|
<h2>Create plan</h2>
|
|
<label>Name
|
|
<input class="plan-name" type="text" />
|
|
</label>
|
|
<label>Start date
|
|
<input class="plan-date-start" type="date" />
|
|
</label>
|
|
<label>End date
|
|
<input class="plan-date-end" type="date" />
|
|
</label>
|
|
<div class="cluster cluster-end">
|
|
<button class="cancel-plan btn btn-secondary">Cancel</button>
|
|
<button class="save-plan btn btn-primary">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/auth.js"></script>
|
|
<script src="/js/home.js"></script>
|
|
</body>
|
|
</html>
|