PHP/JavaScript webapp to analyse spending habits
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 2.1KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Spending Analyser</title>
  5. <script src="externals/flot/jquery.js" type="text/javascript"></script>
  6. <script src="externals/flot/jquery.flot.js" type="text/javascript"></script>
  7. <script src="externals/flot/jquery.flot.pie.js" type="text/javascript"></script>
  8. <script src="externals/flot/jquery.flot.selection.js" type="text/javascript"></script>
  9. <script src="externals/flot/jquery.flot.stack.js" type="text/javascript"></script>
  10. <script src="externals/jquery.history/jquery.history.js" type="text/javascript"></script>
  11. <script src="data.php" type="text/javascript"></script>
  12. <script src="analyser.js" type="text/javascript"></script>
  13. <style type="text/css">
  14. .categoryIgnored td { color: gray; }
  15. .left { width: 45%; padding: 20px; float: left; }
  16. .right { margin-left: 50%; padding: 20px; }
  17. body { margin: 0; font-family: sans-serif; }
  18. #header { background: url('res/gradient.png') repeat-x; height: 100px; margin: 0 0 10px 0; overflow: hidden; z-index: 0; }
  19. #header h1 { color: white; margin: 0; font-size: 60px; position: absolute; top: 42px; left: 20px; z-index: 2; }
  20. #headershadow { font-size: 60px; position: absolute; top: 42px; left: 25px; font-weight: bold; z-index: 1; }
  21. h2 { margin-top: 10; }
  22. table { border-collapse: collapse; }
  23. tr.alt td { background-color: #ddd; }
  24. td { padding: 3px; }
  25. th { text-align: left; }
  26. .graph { margin-bottom: 40px; }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="header">
  31. <h1>Money Analyser</h1>
  32. </div>
  33. <span id="headershadow">Money Analyser</span>
  34. <div class="left">
  35. <h2>Transaction History</h2>
  36. <div id="history" style="width: 600px; height: 300px;" class="graph"></div>
  37. <div id="historytable" style="display: none;"><h3>Transactions for ??</h3><table><tr><th>Date</th><th>Type</th><th>Category</th><th>Description</th><th>Amount</th></tr></table></div>
  38. </div>
  39. <div class="right">
  40. <h2>Categories</h2>
  41. <div id="expense" style="width: 600px; height: 300px;" class="graph"></div>
  42. <h2>Expense Categories</h2>
  43. <div id="cathistory" style="width: 600px; height: 600px;" class="graph"></div>
  44. </div>
  45. </body>
  46. </html>