From e0ca887623682d059c6513a1ce36228d4e8c4f21 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Fri, 27 Mar 2026 11:29:40 +0100 Subject: Upload to web repo --- static/Sparschwein.png | Bin 0 -> 22319 bytes static/bouncer.jpg | Bin 0 -> 26975 bytes static/couple_piggy.png | Bin 0 -> 126537 bytes static/filter.js | 34 +++++ static/green_dollar.jpg | Bin 0 -> 11491 bytes static/green_piggy.png | Bin 0 -> 273969 bytes static/piechart.js | 84 ++++++++++++ static/piggy_categories.png | Bin 0 -> 197495 bytes static/piggy_green__transp.png | Bin 0 -> 249474 bytes static/piggy_happy.png | Bin 0 -> 120801 bytes static/piggy_house.png | Bin 0 -> 145574 bytes static/piggy_increase.jpg | Bin 0 -> 48974 bytes static/piggy_increase_transp.png | Bin 0 -> 109240 bytes static/piggy_laptop.png | Bin 0 -> 225713 bytes static/piggy_main.jpg | Bin 0 -> 19549 bytes static/piggy_smashed.png | Bin 0 -> 267355 bytes static/red_dollar.jpg | Bin 0 -> 10853 bytes static/styles.css | 142 +++++++++++++++++++++ static/unused/green_dollar_stack.jpg | Bin 0 -> 25429 bytes ...tacks-of-dollar-banknotes-png-image_3432876.jpg | Bin 0 -> 16989 bytes ...tacks-of-dollar-banknotes-png-image_3432831.jpg | Bin 0 -> 10837 bytes static/unused/red_dollar_stack.jpg | Bin 0 -> 26400 bytes 22 files changed, 260 insertions(+) create mode 100644 static/Sparschwein.png create mode 100644 static/bouncer.jpg create mode 100644 static/couple_piggy.png create mode 100644 static/filter.js create mode 100644 static/green_dollar.jpg create mode 100644 static/green_piggy.png create mode 100644 static/piechart.js create mode 100644 static/piggy_categories.png create mode 100644 static/piggy_green__transp.png create mode 100644 static/piggy_happy.png create mode 100644 static/piggy_house.png create mode 100644 static/piggy_increase.jpg create mode 100644 static/piggy_increase_transp.png create mode 100644 static/piggy_laptop.png create mode 100644 static/piggy_main.jpg create mode 100644 static/piggy_smashed.png create mode 100644 static/red_dollar.jpg create mode 100644 static/styles.css create mode 100644 static/unused/green_dollar_stack.jpg create mode 100644 static/unused/pngtree-stacks-of-dollar-banknotes-png-image_3432876.jpg create mode 100644 static/unused/pngtree-two-thick-stacks-of-dollar-banknotes-png-image_3432831.jpg create mode 100644 static/unused/red_dollar_stack.jpg (limited to 'static') diff --git a/static/Sparschwein.png b/static/Sparschwein.png new file mode 100644 index 0000000..30283d3 Binary files /dev/null and b/static/Sparschwein.png differ diff --git a/static/bouncer.jpg b/static/bouncer.jpg new file mode 100644 index 0000000..c050c13 Binary files /dev/null and b/static/bouncer.jpg differ diff --git a/static/couple_piggy.png b/static/couple_piggy.png new file mode 100644 index 0000000..d68040b Binary files /dev/null and b/static/couple_piggy.png differ 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 new file mode 100644 index 0000000..a4d423c Binary files /dev/null and b/static/green_dollar.jpg differ diff --git a/static/green_piggy.png b/static/green_piggy.png new file mode 100644 index 0000000..84da5d4 Binary files /dev/null and b/static/green_piggy.png differ 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 new file mode 100644 index 0000000..12a3afe Binary files /dev/null and b/static/piggy_categories.png differ diff --git a/static/piggy_green__transp.png b/static/piggy_green__transp.png new file mode 100644 index 0000000..abc239d Binary files /dev/null and b/static/piggy_green__transp.png differ diff --git a/static/piggy_happy.png b/static/piggy_happy.png new file mode 100644 index 0000000..a4291aa Binary files /dev/null and b/static/piggy_happy.png differ diff --git a/static/piggy_house.png b/static/piggy_house.png new file mode 100644 index 0000000..56c42e3 Binary files /dev/null and b/static/piggy_house.png differ diff --git a/static/piggy_increase.jpg b/static/piggy_increase.jpg new file mode 100644 index 0000000..9ba9694 Binary files /dev/null and b/static/piggy_increase.jpg differ diff --git a/static/piggy_increase_transp.png b/static/piggy_increase_transp.png new file mode 100644 index 0000000..f179153 Binary files /dev/null and b/static/piggy_increase_transp.png differ diff --git a/static/piggy_laptop.png b/static/piggy_laptop.png new file mode 100644 index 0000000..5170dae Binary files /dev/null and b/static/piggy_laptop.png differ diff --git a/static/piggy_main.jpg b/static/piggy_main.jpg new file mode 100644 index 0000000..66b7056 Binary files /dev/null and b/static/piggy_main.jpg differ diff --git a/static/piggy_smashed.png b/static/piggy_smashed.png new file mode 100644 index 0000000..1f434e7 Binary files /dev/null and b/static/piggy_smashed.png differ diff --git a/static/red_dollar.jpg b/static/red_dollar.jpg new file mode 100644 index 0000000..94b9d30 Binary files /dev/null and b/static/red_dollar.jpg differ 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 new file mode 100644 index 0000000..ca99e95 Binary files /dev/null and b/static/unused/green_dollar_stack.jpg differ 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 new file mode 100644 index 0000000..115a362 Binary files /dev/null and b/static/unused/pngtree-stacks-of-dollar-banknotes-png-image_3432876.jpg differ 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 new file mode 100644 index 0000000..2100f0a Binary files /dev/null and b/static/unused/pngtree-two-thick-stacks-of-dollar-banknotes-png-image_3432831.jpg differ diff --git a/static/unused/red_dollar_stack.jpg b/static/unused/red_dollar_stack.jpg new file mode 100644 index 0000000..134e812 Binary files /dev/null and b/static/unused/red_dollar_stack.jpg differ -- cgit v1.2.3