aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBobby <[email protected]>2023-04-05 23:26:27 -0400
committerBobby <[email protected]>2023-04-05 23:26:27 -0400
commitc6e411baf072114efdf3051dd7c30f57d7f63c35 (patch)
tree6dbcc01185f70c4eb12263dee73f62704cd39880
parent226ae0efed52ac5aac531122f5ad13a1d60f6d90 (diff)
downloadffxivmfp-c6e411baf072114efdf3051dd7c30f57d7f63c35.tar.xz
ffxivmfp-c6e411baf072114efdf3051dd7c30f57d7f63c35.zip
UI Design w/ elements
Diffstat
-rw-r--r--.gitignore2
-rw-r--r--index.html61
-rw-r--r--static/css/main.css237
-rw-r--r--static/images/background.jpgbin0 -> 4087561 bytes
-rw-r--r--static/images/divider.pngbin0 -> 25476 bytes
-rw-r--r--static/images/favicon.pngbin0 -> 9876 bytes
-rw-r--r--static/images/fflogo.pngbin0 -> 114579 bytes
-rw-r--r--static/images/gil.webpbin0 -> 47172 bytes
-rw-r--r--static/images/main.pngbin0 -> 829729 bytes
-rw-r--r--static/images/mfplogo.pngbin0 -> 7960 bytes
10 files changed, 300 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5ca0973
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ff9a7fe
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>FFXIV Market Flipping Profit Calculator</title>
+ <link rel="stylesheet" href="/static/css/main.css" type="text/css">
+ <link rel="icon" href="/static/images/favicon.png" type="image/x-icon">
+</head>
+<body>
+ <div id="main">
+ <div class="autoflex-2">
+ <div class="credits">
+ <img src="/static/images/fflogo.png" alt="FFXIV Logo" class="fflogo">
+ <img src="/static/images/mfplogo.png" alt="MFP Logo" class="mfplogo">
+ <div class="divider mt-2"></div>
+ <blockquote class="blockquote">
+ <p class="quote">Saw that sweet sweet item that got listed accidentally for 400 Gil, while it should be 400,000 Gil and wondered if you buy it and sell it again, how much profit you would make? You know you pay tax both ways, but how much will you end up with?</p>
+ </blockquote>
+ </div>
+ <div class="calculator">
+ <form>
+ <div class="form-block">
+ <label for="buyprice">Buying Price</label>
+ <input type="text" name="buyprice" id="buyprice" class="afnum" placeholder="Buying Price (Gil)" required autocomplete="off">
+ <img class="gillogo" src="/static/images/gil.webp" alt="Gil Logo">
+ </div>
+ <div class="form-block">
+ <label for="sellprice">Selling Price</label>
+ <input type="text" name="sellprice" id="sellprice" class="afnum" placeholder="Selling Price (Gil)" required autocomplete="off">
+ <img class="gillogo" src="/static/images/gil.webp" alt="Gil Logo">
+ </div>
+ <div class="form-block">
+ <label for="checkbox-taxrates">
+ <input type="checkbox" name="checkbox-taxrates" id="taxrates">
+ Reduced Tax Rates
+ <p class="tooltip">
+ Check this box if the market you're selling stuff in has reduced tax rates. If you don't know, leave it unchecked.
+ </p>
+ </label>
+ </div>
+ <div class="form-block">
+ <input type="submit" value="Calculate">
+ </div>
+ <div id="result"></div>
+ </form>
+ <div class="mt-2">
+ <p class="tooltip credit-text">
+ <span class="spl">1.</span> All graphics and icons used in this website are licensed under the <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
+ <br>
+ <span class="spl">2.</span> This project is not affiliated with Square Enix Co., Ltd. or any of its subsidiaries. The Final Fantasy XIV logo is a trademark of Square Enix Co., Ltd.
+ <br>
+ <span class="spl">3.</span> This project is licensed under the <a href="https://opensource.org/license/mit/" target="_blank">MIT License</a>. The source code can be found on <a href="https://github.com/luciferreeves/ffxivmfp" target="_blank">GitHub</a>.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..5d44712
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,237 @@
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital@0;1&display=swap');
+* {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ box-sizing: border-box;
+}
+
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: white;
+ background: url("../images/background.jpg");
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-position: center;
+ background-size: cover;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ font-family: 'Crimson Text', serif;
+}
+
+#main {
+ width: 100%;
+ max-width: 1000px;
+ padding: 2em;
+ margin: 0 auto;
+ background: url("../images/main.png");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ height: 667px;
+}
+
+label {
+ font-size: 0.8rem;
+ font-weight: bold;
+ color: #795b00;
+ font-family: sans-serif;
+}
+
+input[type="text"] {
+ font-size: 1rem;
+ font-weight: bold;
+ color: #8b6b00;
+ font-family: 'Crimson Text', serif;
+ background-color: rgba(183, 154, 26, 0.2);
+ border: 2px solid #795b00;
+ border-radius: 8px;
+ padding: 0.5em;
+ width: 100%;
+ max-width: 280px;
+}
+
+input:focus {
+ outline: none;
+}
+
+input[type="checkbox"] {
+ margin-right: 0.5em;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: 2px solid #795b00;
+ border-radius: 4px;
+ width: 1.2em;
+ height: 1.2em;
+ background-color: #ffefd0bd;
+ display: inline-block;
+ position: relative;
+ top: 3px;
+}
+
+input[type="checkbox"]:checked {
+ background-color: #ffefd0bd;
+ border: 2px solid #795b00;
+ border-radius: 4px;
+ width: 1.2em;
+ height: 1.2em;
+ background-color: #ffefd0bd;
+ display: inline-block;
+ position: relative;
+}
+
+input[type="checkbox"]:checked::after {
+ content: '\2714';
+ font-size: 1.3em;
+ color: #795b00;
+ position: absolute;
+ top: -0.3em;
+ left: 0.1em;
+}
+
+input[type="checkbox"]:focus {
+ outline: none;
+}
+
+input[type="submit"] {
+ background: linear-gradient(to bottom, #8b6b00, #795b00);
+ border-radius: 8px;
+ box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
+ color: #ffefd0bd;
+ font-size: 0.8rem;
+ font-weight: bold;
+ padding: 0.5em 1em;
+ cursor: pointer;
+
+}
+
+.form-block {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1em;
+}
+
+.gillogo {
+ width: 36px;
+ height: 36px;
+}
+
+.autoflex-2 {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 1em;
+}
+
+.credits,
+.calculator {
+ width: 100%;
+ max-width: 460px;
+ padding: 20px;
+ background-color: #ffefd0bd;
+ border: 2px solid Gold;
+ border-radius: 8px;
+ box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5);
+}
+
+.divider {
+ width: 100%;
+ background: url("../images/divider.png");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ height: 32px;
+}
+
+.mt-2 {
+ margin-top: 2em;
+}
+
+.fflogo {
+ width: 100%;
+ max-width: 355px;
+ height: 100px;
+ margin: 0 auto;
+ display: block;
+}
+
+.mfplogo {
+ width: 100%;
+ max-width: 230px;
+ height: 32px;
+ margin: 0 auto;
+ display: block;
+}
+
+.blockquote {
+ padding: 20px;
+}
+
+.quote {
+ font-size: 1.4rem;
+ line-height: 1.4;
+ font-style: italic;
+ text-align: justify;
+}
+
+.tooltip {
+ margin-top: 0.5em;
+ border-top: 1px solid #795b00;
+ padding-top: 0.5em;
+ font-weight: 700;
+ font-family: 'Crimson Text', serif;
+ color: #792200;
+}
+
+a, .spl {
+ color: #623a0c;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #9b7a0d;
+}
+
+.credit-text {
+ font-size: 12px;
+ font-weight: 700;
+ color: #2e345a;
+}
+
+#result {
+ min-height: 54px;
+}
+
+@media screen and (max-width: 1000px) {
+ .autoflex-2 {
+ flex-direction: column;
+ }
+
+ .credits, .calculator {
+ width: 100%;
+ max-width: 100%;
+ }
+}
+
+@media screen and (max-width: 500px) {
+ input[type="text"] {
+ max-width: 150px;
+ }
+}
+
+@media screen and (max-width: 360px) {
+ input[type="text"] {
+ max-width: 120px;
+ }
+} \ No newline at end of file
diff --git a/static/images/background.jpg b/static/images/background.jpg
new file mode 100644
index 0000000..add726a
--- /dev/null
+++ b/static/images/background.jpg
Binary files differ
diff --git a/static/images/divider.png b/static/images/divider.png
new file mode 100644
index 0000000..fb46908
--- /dev/null
+++ b/static/images/divider.png
Binary files differ
diff --git a/static/images/favicon.png b/static/images/favicon.png
new file mode 100644
index 0000000..12001fe
--- /dev/null
+++ b/static/images/favicon.png
Binary files differ
diff --git a/static/images/fflogo.png b/static/images/fflogo.png
new file mode 100644
index 0000000..f83d72a
--- /dev/null
+++ b/static/images/fflogo.png
Binary files differ
diff --git a/static/images/gil.webp b/static/images/gil.webp
new file mode 100644
index 0000000..c48f55a
--- /dev/null
+++ b/static/images/gil.webp
Binary files differ
diff --git a/static/images/main.png b/static/images/main.png
new file mode 100644
index 0000000..e8f33fc
--- /dev/null
+++ b/static/images/main.png
Binary files differ
diff --git a/static/images/mfplogo.png b/static/images/mfplogo.png
new file mode 100644
index 0000000..00d3068
--- /dev/null
+++ b/static/images/mfplogo.png
Binary files differ
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 01:41:19 +0000