162 lines
6.9 KiB
HTML
162 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" type="image/icon" href="favicon.ico">
|
|
<link rel="apple-touch-icon" href="images/icon.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="app to track your calories fast" />
|
|
<meta name="theme-color" content="#000000" />
|
|
|
|
<link rel="manifest" href="/manifest.json" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/css/materialize.css" />
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
|
|
<link rel="stylesheet" type="text/css" href="/css/layout.css" />
|
|
<script src="/js/materialize.js"></script>
|
|
<title>Fast Calorie</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<div class="layout-app">
|
|
<header class="layout-header">
|
|
<nav>
|
|
<div class="nav-wrapper brown">
|
|
<a href="/" class="brand-logo">Fast Calorie</a>
|
|
<ul id="nav" class="right">
|
|
<li class="datepicker" style="margin-right: 1rem;">
|
|
<i class="material-icons">date_range</i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main class="layout-content">
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col s2"></div>
|
|
<div class="col s8 center"><h5 class="marginless">{this.date}</h5> </div>
|
|
<div class="col s2 right"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s4 center">
|
|
<strong>Cals Left</strong>
|
|
<p>{this.left}</p>
|
|
</div>
|
|
<div class="col s4 center">
|
|
<strong>Goal</strong>
|
|
<p>{this.settings.goal}</p>
|
|
</div>
|
|
<div class="col s4 center">
|
|
<strong>Used</strong>
|
|
<p>{this.used}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<form id="entry" action="">
|
|
<div class="row">
|
|
<div class="col s8">
|
|
<label for="">Name</label>
|
|
<input type="text" id="name" placeholder="Item Description (optional)">
|
|
</div>
|
|
<div class="col s4">
|
|
<label for="">Calories</label>
|
|
<input type="number" id="calories" placeholder="Item Calories" @keyup="search">
|
|
</div>
|
|
</div>
|
|
<div :if="this.choices.length" class="collection ">
|
|
<div :for="item, i in this.choices" class="row collection-item" idx="{i}">
|
|
<div class="col s2 grey-text text-lighten-1" idx="{i}">{item.type}</div>
|
|
<div class="col s8" idx="{i}">{item.name} - <em>{item.description}</em></div>
|
|
<div class="col s2" idx="{i}">
|
|
<button class="btn brown right" idx="{i}" @click="order">
|
|
Add
|
|
<i class="material-icons left">add_circle_outline</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col right">
|
|
<button class="btn green" @click="save">Add Calories</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section :if="this.history.length">
|
|
<ul class="collection with-header">
|
|
<li class="collection-header">
|
|
<h5>Today's Entries<span class="right" style="margin-right: 1rem;">{this.history.length}</span></h5>
|
|
</li>
|
|
<li :for="entry, i in this.history" idx="{i}" class="collection-item row modal-trigger" @click="details"
|
|
data-target="detailsModal">
|
|
<div class="col s2 grey-text text-lighten-1" idx="{i}">{entry.type}</div>
|
|
<div class="col s8" idx="{i}">{entry.name || 'Add Entry Description'}</div>
|
|
<div class="col s2">
|
|
<span class="right" idx="{i}">{entry.value}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="row">
|
|
<div class="col s8"></div>
|
|
<div class="col s2 center">
|
|
<h6><strong>Total</strong></h6>
|
|
</div>
|
|
<h6 class="col s2"><span class="right" style="margin-right: 1rem;">{this.used}</span> </h6>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<footer class="layout-footer orange">
|
|
<div class="container">
|
|
|
|
</div>
|
|
<div class="footer-copyright">
|
|
<div class="container">
|
|
© 2020 Negative9.NET
|
|
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Modal Structure -->
|
|
<div id="detailsModal" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Entry Details</h4>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<th>Name</th>
|
|
<td>{this.selected.name}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Calories</th>
|
|
<td>{this.selected.value}</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
|
|
<button class="btn red" @click="remove" idx="{this.selected.idx}">Remove Entry</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/index.js"></script>
|
|
</body>
|
|
</html>
|