Skip to content

Instantly share code, notes, and snippets.

@cxytomo

cxytomo/index.html

Created October 17, 2012 13:24
Show Gist options
  • Save cxytomo/3905515 to your computer and use it in GitHub Desktop.
Save cxytomo/3905515 to your computer and use it in GitHub Desktop.
Download ZIP
index
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Clean Up Everyday!</title>
<link rel="stylesheet" type="text/css" href="index.css" media="all">
</head>
<body>
<div class="header">
<a href="#" title="Clean Up Everyday!">
<img src="images/cashbook-index.png" alt="cashbook">
</a>
</div>
<div class="wrapper">
<ul class="nav">
<li class="menu star" title="sorted by starred">
<a href="#">
</a>
</li>
<li class="menu calendar" title="sorted by date">
<a href="#">
</a>
</li>
<li class="menu category" title="sorted by category">
<a href="#">
</a>
</li>
<li class="add-more" title="add more" >
<a href="#">
</a>
</li>
</ul>
<p class="title">This Month’s Expenses
</p>
<!--
<div id="cash-in">
<div class="overview">
<span class="cash-in">
CASH-IN
</span>
<span class="total">
Total:
</span>
<span>
<a href="#" title="expand for details">
￥50
</a>
</span>
</div>
</div>
<div id="cash-out">
<div class="overview">
<span class="cash-out">
CASH-OUT
</span>
<span class="total">
Total:
</span>
<span>
<a href="#" title="expand for details">
￥50
</a>
</span>
</div>
</div>
-->
<div id="data-table">
<div class="table-header">
<span class="date">DATE</span>
<span class="category">CATEGORY</span>
<span class="detail">DETAIL</span>
<span class="expenses">EXPENSES</span>
<span class="edit-dropdown">EDIT</span>
</div>
<div class="table-main">
<div class="expense-1 single expenses clothes">
<div class="tag">
<a class="category-clothes star" title="star" href="#">
<span class="col-1 ">star</span>
</a>
</div>
<span class="date">12-01</span>
<span class="category">clothes</span>
<span class="detail">bag</span>
<span class="expenses">¥50</span>
<a class="edit-dropdown" title="edit" href="#">
<span class="col-7">edit</span>
</a>
</div>
<div class="expense-2 single expenses food">
<div class="tag">
<a class="category-food unstar" title="unstar" href="#">
<span class="col-1 ">star</span>
</a>
</div>
<span class="date">12-11</span>
<span class="category">food</span>
<span class="detail">bag</span>
<span class="expenses">¥50</span>
<a class="edit-dropdown edit" title="edit" href="#">
<span class="col-7">
edit
</span>
</a>
</div>
<div class="expense-3 non-single">
<div class="day-total expenses">
<span class="date">12-31</span>
<span class="category">...</span>
<span class="detail">...</span>
<span class="expenses">¥550</span>
<a class="edit-dropdown daytotal" title="dropdown" href="#">
<span class="col-7 ">dropdown</span>
</a>
</div>
<div class="day-detail">
<div class="day-detail-1 single expenses clothes">
<div class="tag">
<a class="category-clothes unstar" title="unstar" href="#">
<span class="col-1 ">unstar</span>
</a>
</div>
<span class="date">12-31</span>
<span class="category">clothes</span>
<span class="detail">dress</span>
<span class="expenses">¥500</span>
<a class="edit-dropdown" title="edit" href="#">
<span class="col-7">
edit
</span>
</a>
</div>
<div class="day-detail-2 single expenses clothes">
<div class="tag">
<a class="category-clothes star" title="star" href="#">
<span class="col-1">star</span>
</a>
</div>
<span class="date">12-31</span>
<span class="category">clothes</span>
<span class="detail">dress</span>
<span class="expenses">¥500</span>
<a class="edit-dropdown" title="edit" href="#">
<span class="col-7">
edit
</span>
</a>
</div>
</div>
</div>
<div class="expense-3 non-single">
<div class="day-total expenses">
<span class="date">12-31</span>
<span class="category">...</span>
<span class="detail">...</span>
<span class="expenses">¥550</span>
<a class="edit-dropdown daytotal" title="dropdown" href="#">
<span class="col-7 ">dropdown</span>
</a>
</div>
<div class="day-detail">
<div class="day-detail-1 single expenses clothes">
<div class="tag">
<a class="category-clothes unstar" title="unstar" href="#">
<span class="col-1 ">unstar</span>
</a>
</div>
<span class="date">12-31</span>
<span class="category">clothes</span>
<span class="detail">dress</span>
<span class="expenses">¥500</span>
<a class="edit-dropdown" title="edit" href="#">
<span class="col-7">
edit
</span>
</a>
</div>
<div class="day-detail-2 single expenses clothes">
<div class="tag">
<a class="category-clothes star" title="star" href="#">
<span class="col-1">star</span>
</a>
</div>
<span class="date">12-31</span>
<span class="category">clothes</span>
<span class="detail">dress</span>
<span class="expenses">¥500</span>
<a class="edit-dropdown" title="edit" href="#">
<span class="col-7">
edit
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="add-more">
<a href="">Add More</a>
</div>
<form action="" method="post">
<fieldset>
<div class="conten">
<p class="cash_in_out">
<span>Cash in/out:</span>
<input type="radio" name="radio" id="cash_in" class="cash_in">
<label for="cash_in">in</label>
<input type="radio" name="radio" id="cash_out" class="cash_out">
<label for="cash_out">out</label>
</p>
<p class="date">
<label for="date">Date:</label>
<select name="" id="date" class="date">
<option value="today">today</option>
<option value="yesterday">yesterday</option>
<option value="calendar">calendar</option>
</select>
</p>
<p class="cash_out">
<label for="category_out">Category:</label>
<select name="category" id="category_out" class="category cash_out" >
<option value="food">food</option>
<option value="cloth">cloth</option>
<option value="transport">transport</option>
</select>
</p>
<!-- <p class="cash_in">
<label for="category_in">Category</label>
<select name="category" id="category_in" class="category cash_in" >
<option value="wage">wage</option>
<option value="bonous">bonous</option>
<option value="lotter">lotter</option>
</select>
</p>
-->
<p class="expenses">
<label for="expenses">Expenses:</label>
<input name="expenses" id="expenses" type="text" placeholder="enter expenses">
</p>
<p class="details">
<label for="details">Details:</label>
<textarea name="details" id="details" cols="50" rows="13" placeholder="enter some details ...">
</textarea>
</p>
<p class="submit cancel">
<input id="submit" class="submit" type="submit" name="submit" value="Submit">
<input id="cancel" class="cancel" type="submit" name="cancel" value="Cancel">
</p>
</div>
</fieldset>
</form>
</div>
<div class="footer">
<p>
©2012 Tomo All right reserved
</p>
</div>
<script type="text/javascript" src="detail-dropdown.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment