diff --git a/Travel Budget Calculator/manifest.json b/Travel Budget Calculator/manifest.json new file mode 100644 index 00000000..6ad64439 --- /dev/null +++ b/Travel Budget Calculator/manifest.json @@ -0,0 +1,11 @@ +{ + "manifest_version": 3, + "name": "Travel Budget Calculator", + "version": "1.0", + "description": "Estimate the total cost of your trip, including flights, accommodation, food, and activities.", + "action": { + "default_popup": "popup.html" + }, + "permissions": [] + } + \ No newline at end of file diff --git a/Travel Budget Calculator/popup.css b/Travel Budget Calculator/popup.css new file mode 100644 index 00000000..cddd00ab --- /dev/null +++ b/Travel Budget Calculator/popup.css @@ -0,0 +1,115 @@ +@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap'); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inconsolata', monospace; + justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: linear-gradient(to right bottom, #ff7e7e, #ff6060, #ff3b3b, #ff1414, #ff0000); + height: 600px; + width: 400px; + margin: 0; + padding: 10px; +} + +h1 { + color: #fff; + font-family: 'Alfa Slab One', cursive; + font-weight: 100; + margin-bottom: 20px; + font-size: 24px; +} + +.card { + background: rgba(255, 69, 58, 0.1); + backdrop-filter: blur(10px); + border-radius: 15px; + padding: 20px; + text-align: center; + width: 100%; + margin-bottom: 20px; +} + +.input { + margin-bottom: 10px; + text-align: left; +} + +.input label { + display: block; + margin-bottom: 5px; + color: #fff; +} + +.input input { + width: calc(100% - 16px); + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; +} + +button { + align-items: center; + appearance: none; + background-image: radial-gradient(100% 100% at 100% 0, #ff7e7e 0, #ff0000 100%); + border: 0; + border-radius: 6px; + box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-flex; + font-family: "JetBrains Mono", monospace; + height: 40px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow .15s, transform .15s; + user-select: none; + white-space: nowrap; + will-change: box-shadow, transform; + font-size: 18px; + margin: 5px; +} + +button:hover { + box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #a50b0b 0 -3px 0 inset; + transform: translateY(-2px); +} + +button:active { + box-shadow: #ff7e7e 0 3px 7px inset; + transform: translateY(2px); +} + +.result { + margin-top: 10px; +} + +.result label { + display: block; + margin-bottom: 5px; + color: #fff; +} + +.result input { + width: calc(100% - 16px); + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + background-color: #f9f9f9; +} diff --git a/Travel Budget Calculator/popup.html b/Travel Budget Calculator/popup.html new file mode 100644 index 00000000..0b6a0e37 --- /dev/null +++ b/Travel Budget Calculator/popup.html @@ -0,0 +1,47 @@ + + + + + + Travel Budget Calculator + + + +
+

Travel Budget Calculator

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+
+
+ + + diff --git a/Travel Budget Calculator/popup.js b/Travel Budget Calculator/popup.js new file mode 100644 index 00000000..45900545 --- /dev/null +++ b/Travel Budget Calculator/popup.js @@ -0,0 +1,24 @@ +document.getElementById('calculate').addEventListener('click', function() { + const flights = parseFloat(document.getElementById('flights').value) || 0; + const accommodation = parseFloat(document.getElementById('accommodation').value) || 0; + const nights = parseFloat(document.getElementById('nights').value) || 0; + const food = parseFloat(document.getElementById('food').value) || 0; + const days = parseFloat(document.getElementById('days').value) || 0; + const activities = parseFloat(document.getElementById('activities').value) || 0; + + const accommodationTotal = accommodation * nights; + const foodTotal = food * days; + const totalCost = flights + accommodationTotal + foodTotal + activities; + + document.getElementById('result').value = totalCost.toFixed(2); +}); + +document.getElementById('reset').addEventListener('click', function() { + document.getElementById('flights').value = ''; + document.getElementById('accommodation').value = ''; + document.getElementById('nights').value = ''; + document.getElementById('food').value = ''; + document.getElementById('days').value = ''; + document.getElementById('activities').value = ''; + document.getElementById('result').value = ''; +});