diff options
Diffstat (limited to 'static')
22 files changed, 260 insertions, 0 deletions
diff --git a/static/Sparschwein.png b/static/Sparschwein.png Binary files differnew file mode 100644 index 0000000..30283d3 --- /dev/null +++ b/static/Sparschwein.png diff --git a/static/bouncer.jpg b/static/bouncer.jpg Binary files differnew file mode 100644 index 0000000..c050c13 --- /dev/null +++ b/static/bouncer.jpg diff --git a/static/couple_piggy.png b/static/couple_piggy.png Binary files differnew file mode 100644 index 0000000..d68040b --- /dev/null +++ b/static/couple_piggy.png diff --git a/static/filter.js b/static/filter.js new file mode 100644 index 0000000..9318c23 --- /dev/null +++ b/static/filter.js @@ -0,0 +1,34 @@ +// Filter-search a table +// Code expanded from this source: https://www.w3schools.com/howto/howto_js_filter_table.asp + +function filter() { + let selector, val; + selector = document.getElementsByName("select"); + + // Loop through the radio buttons to determine the filter-settings + for (let i = 0; i < selector.length; i++) { + if (selector[i].checked) { + val = parseInt(selector[i].value); + break; + } + } + + let input, insensitive, table, tr, td, txtValue; + input = document.getElementById("search_history"); + insensitive = input.value.toUpperCase(); + table = document.getElementById("history"); + tr = table.getElementsByTagName("tr"); + + // Loop through all table rows, and hide those that don't match the search query + for (let i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName("td")[val]; + if (td) { + txtValue = td.textContent || td.innerText; + if (txtValue.toUpperCase().indexOf(insensitive) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + } +} diff --git a/static/green_dollar.jpg b/static/green_dollar.jpg Binary files differnew file mode 100644 index 0000000..a4d423c --- /dev/null +++ b/static/green_dollar.jpg diff --git a/static/green_piggy.png b/static/green_piggy.png Binary files differnew file mode 100644 index 0000000..84da5d4 --- /dev/null +++ b/static/green_piggy.png diff --git a/static/piechart.js b/static/piechart.js new file mode 100644 index 0000000..9baab35 --- /dev/null +++ b/static/piechart.js @@ -0,0 +1,84 @@ +// Change background image depending on budget balance +document.addEventListener('DOMContentLoaded', function() { + let budget = document.getElementById('budget').innerHTML.split('$').pop(); + if (parseFloat(budget) <= 0) { + document.getElementById('dollar').setAttribute('src', '/static/red_dollar.jpg'); + } else { + document.getElementById('dollar').setAttribute('src', '/static/green_dollar.jpg'); + } +}); + +// https://www.chartjs.org/docs/latest/ +// https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html +let context, labels, colors, data, source; +//Pie chart settings +context = document.getElementById('piechart').getContext('2d'); +labels = [ + 'Rent & Bills', + 'Maintenance', + 'Food', + 'Family', + 'Pets', + 'Clothes', + 'Hobbies & Entertainment', + 'Investing', + 'Other' +]; + +colors = [ + '#f75a3a', + '#1288da', + '#ffc300', + '#ffe7b0', + '#f39ad9', + '#6dc9ff', + '#ffc31d', + '#71e748', + '#b10981' +]; + +// Getting the data from hidden HTML div +data = []; +source = document.getElementById('hidden_data').getElementsByTagName('p'); +for (let i = 0; i < source.length; i++) { + data.push(source[i].innerHTML); +} + + +// Pie chart +let myPie = new Chart(context, { + type: 'pie', + data: { + labels: labels, + datasets: [{ + data: data, + backgroundColor: colors + }] + }, + options: { + plugins: { + datalabels: { + borderColor: '#000', + color: 'black', + align: 'start', + font: { + weight: 'bold', + size: '14' + }, + formatter: (value) => { + return '$ ' + value; + } + }, + legend: { + position: 'right', + align: 'center' + }, + title: { + display: false, + text: "Title" + } + }, + responsive: true + }, + plugins: [ChartDataLabels] +}); diff --git a/static/piggy_categories.png b/static/piggy_categories.png Binary files differnew file mode 100644 index 0000000..12a3afe --- /dev/null +++ b/static/piggy_categories.png diff --git a/static/piggy_green__transp.png b/static/piggy_green__transp.png Binary files differnew file mode 100644 index 0000000..abc239d --- /dev/null +++ b/static/piggy_green__transp.png diff --git a/static/piggy_happy.png b/static/piggy_happy.png Binary files differnew file mode 100644 index 0000000..a4291aa --- /dev/null +++ b/static/piggy_happy.png diff --git a/static/piggy_house.png b/static/piggy_house.png Binary files differnew file mode 100644 index 0000000..56c42e3 --- /dev/null +++ b/static/piggy_house.png diff --git a/static/piggy_increase.jpg b/static/piggy_increase.jpg Binary files differnew file mode 100644 index 0000000..9ba9694 --- /dev/null +++ b/static/piggy_increase.jpg diff --git a/static/piggy_increase_transp.png b/static/piggy_increase_transp.png Binary files differnew file mode 100644 index 0000000..f179153 --- /dev/null +++ b/static/piggy_increase_transp.png diff --git a/static/piggy_laptop.png b/static/piggy_laptop.png Binary files differnew file mode 100644 index 0000000..5170dae --- /dev/null +++ b/static/piggy_laptop.png diff --git a/static/piggy_main.jpg b/static/piggy_main.jpg Binary files differnew file mode 100644 index 0000000..66b7056 --- /dev/null +++ b/static/piggy_main.jpg diff --git a/static/piggy_smashed.png b/static/piggy_smashed.png Binary files differnew file mode 100644 index 0000000..1f434e7 --- /dev/null +++ b/static/piggy_smashed.png diff --git a/static/red_dollar.jpg b/static/red_dollar.jpg Binary files differnew file mode 100644 index 0000000..94b9d30 --- /dev/null +++ b/static/red_dollar.jpg diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..ac4a055 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,142 @@ +/* Markes the currently active nav tab */ +#active-nav { + color: black; + background-color: #0dce1d; + border-radius: 25px; + border: 2px; + text-decoration: none; +} + +#header-main { + color: #0a762c; + font-family: 'Josefin Sans', sans-serif; + font-size: 44px; + font-weight: bold +} + +#name { + color: #0a762c; + font-family: 'Lucida Handwriting', cursive; + font-size: 28px; + font-weight: bold; +} + +#text-welcome { + font-family: 'Josefin Sans', sans-serif; + font-style: italic; + font-weight: bold; + margin-top: 10px; + margin-bottom: 10px; + text-align: justify; +} + +/* Displaying prices from bargain finder */ +.bargain-price { + color: green; + font-size: 22px; + font-weight: bold; +} + +.carousel-img { + width: 40%; + height: auto; +} + +.carousel-text { + font-weight: bold; +} + +.container-money { + position: relative; + text-align: center; +} + +/* Float value displayed on top of dollar bill */ +.centered-money { + color: black; + font-size: 30px; + font-weight: bold; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.footnote { + font-size: 11px; + margin-top: 5px; +} + +.pie-wrapper { + width: 100%; + height: auto; + max-width: 600px; +} + +.text { + font-size: 20px; +} + +.text-bullet { + font-size: 20px; + font-style: italic; + font-weight: bold; + margin-top: 10px; + margin-bottom: 10px; +} + +body { + background-color: #f7f6f2; +} + +input { + margin-top: 10px; +} + +/* Increase the default size of radio buttons */ +input[type='radio'] { + margin: 10px; + transform: scale(1.5); +} + +main .form-control { + /* Center form controls */ + display: inline-block; + + /* Override Bootstrap's 100% width for form controls */ + width: auto; +} + +main { + /* Scroll horizontally as needed */ + overflow-x: auto; + + /* Center contents */ + text-align: center; +} + +/* Constrain images on small screens */ +main img { + max-width: 100%; +} + +nav .nav-item { + margin-left: 10px; + margin-right: 10px; +} + +nav .navbar-brand { + font-size: xx-large; + margin-left: 15px; +} + +nav .navbar-title { + color: white; + font-weight: bold; + margin-left: 20px; +} + +.navbar-nav .nav-item .nav-link { + color: white; + text-decoration: none; +} diff --git a/static/unused/green_dollar_stack.jpg b/static/unused/green_dollar_stack.jpg Binary files differnew file mode 100644 index 0000000..ca99e95 --- /dev/null +++ b/static/unused/green_dollar_stack.jpg diff --git a/static/unused/pngtree-stacks-of-dollar-banknotes-png-image_3432876.jpg b/static/unused/pngtree-stacks-of-dollar-banknotes-png-image_3432876.jpg Binary files differnew file mode 100644 index 0000000..115a362 --- /dev/null +++ b/static/unused/pngtree-stacks-of-dollar-banknotes-png-image_3432876.jpg diff --git a/static/unused/pngtree-two-thick-stacks-of-dollar-banknotes-png-image_3432831.jpg b/static/unused/pngtree-two-thick-stacks-of-dollar-banknotes-png-image_3432831.jpg Binary files differnew file mode 100644 index 0000000..2100f0a --- /dev/null +++ b/static/unused/pngtree-two-thick-stacks-of-dollar-banknotes-png-image_3432831.jpg diff --git a/static/unused/red_dollar_stack.jpg b/static/unused/red_dollar_stack.jpg Binary files differnew file mode 100644 index 0000000..134e812 --- /dev/null +++ b/static/unused/red_dollar_stack.jpg |
