commit ed7e4588623174d8ac5eae93a99e5b17790fb45d
Author: root <root@hub.scroll.pub> Date: 2025-01-02 21:06:55 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..adfb8df --- /dev/null +++ b/body.html @@ -0,0 +1,61 @@ +<header> + <h1>Forex Trading Journal</h1> + <p>Track, Analyze, and Improve Your Trades</p> +</header> + +<main> + <section class="trade-entry"> + <h2>New Trade</h2> + <form id="tradeForm"> + <label for="pair">Currency Pair:</label> + <input type="text" id="pair" name="pair" required> + + <label for="date">Date:</label> + <input type="date" id="date" name="date" required> + + <label for="direction">Direction:</label> + <select id="direction" name="direction" required> + <option value="buy">Buy</option> + <option value="sell">Sell</option> + </select> + + <label for="entry">Entry Price:</label> + <input type="number" step="0.0001" id="entry" name="entry" required> + + <label for="exit">Exit Price:</label> + <input type="number" step="0.0001" id="exit" name="exit" required> + + <label for="size">Position Size:</label> + <input type="number" step="0.01" id="size" name="size" required> + + <button type="submit">Add Trade</button> + </form> + </section> + + <section class="trade-history"> + <h2>Trade History</h2> + <div class="chart-container"> + <canvas id="profitChart"></canvas> + </div> + <table id="tradeTable"> + <thead> + <tr> + <th>Pair</th> + <th>Date</th> + <th>Direction</th> + <th>Entry</th> + <th>Exit</th> + <th>Size</th> + <th>P/L</th> + </tr> + </thead> + <tbody> + <!-- Trade rows will be inserted here by JavaScript --> + </tbody> + </table> + </section> +</main> + +<footer> + <p>Your Forex Trading Companion</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..3c10b07 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://forexfolio.scroll.pub +metaTags +editButton /edit.html +title Forex Trading Journal +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..13d9202 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "d90804ef-5eda-4f13-9333-709ba0ec82eb", + "object": "chat.completion", + "created": 1735851990, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nforexfolio.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://forexfolio.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Forex Trading Journal\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Forex Trading Journal</h1>\n <p>Track, Analyze, and Improve Your Trades</p>\n</header>\n\n<main>\n <section class=\"trade-entry\">\n <h2>New Trade</h2>\n <form id=\"tradeForm\">\n <label for=\"pair\">Currency Pair:</label>\n <input type=\"text\" id=\"pair\" name=\"pair\" required>\n\n <label for=\"date\">Date:</label>\n <input type=\"date\" id=\"date\" name=\"date\" required>\n\n <label for=\"direction\">Direction:</label>\n <select id=\"direction\" name=\"direction\" required>\n <option value=\"buy\">Buy</option>\n <option value=\"sell\">Sell</option>\n </select>\n\n <label for=\"entry\">Entry Price:</label>\n <input type=\"number\" step=\"0.0001\" id=\"entry\" name=\"entry\" required>\n\n <label for=\"exit\">Exit Price:</label>\n <input type=\"number\" step=\"0.0001\" id=\"exit\" name=\"exit\" required>\n\n <label for=\"size\">Position Size:</label>\n <input type=\"number\" step=\"0.01\" id=\"size\" name=\"size\" required>\n\n <button type=\"submit\">Add Trade</button>\n </form>\n </section>\n\n <section class=\"trade-history\">\n <h2>Trade History</h2>\n <div class=\"chart-container\">\n <canvas id=\"profitChart\"></canvas>\n </div>\n <table id=\"tradeTable\">\n <thead>\n <tr>\n <th>Pair</th>\n <th>Date</th>\n <th>Direction</th>\n <th>Entry</th>\n <th>Exit</th>\n <th>Size</th>\n <th>P/L</th>\n </tr>\n </thead>\n <tbody>\n <!-- Trade rows will be inserted here by JavaScript -->\n </tbody>\n </table>\n </section>\n</main>\n\n<footer>\n <p>Your Forex Trading Companion</p>\n</footer>\n---style.css---\n:root {\n --primary: #4CAF50;\n --secondary: #2196F3;\n --background: #f5f5f5;\n --text: #333;\n --border: #ddd;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text);\n background-color: var(--background);\n margin: 0;\n padding: 0;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.trade-entry {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n margin-bottom: 2rem;\n}\n\nform {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\nlabel {\n font-weight: 600;\n margin-bottom: 0.5rem;\n}\n\ninput, select, button {\n padding: 0.75rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n width: 100%;\n}\n\nbutton {\n background-color: var(--primary);\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n.trade-history {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.chart-container {\n height: 300px;\n margin-bottom: 2rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid var(--border);\n}\n\nth {\n background-color: var(--background);\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--secondary);\n color: white;\n}\n\n@media (max-width: 768px) {\n form {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\nconst tradeForm = document.getElementById('tradeForm');\nconst tradeTable = document.getElementById('tradeTable').getElementsByTagName('tbody')[0];\nconst ctx = document.getElementById('profitChart').getContext('2d');\n\nlet trades = [];\nlet chart;\n\nfunction calculatePL(entry, exit, size, direction) {\n const pips = (exit - entry) * (direction === 'buy' ? 1 : -1);\n return pips * size;\n}\n\nfunction addTradeToTable(trade) {\n const row = tradeTable.insertRow();\n row.innerHTML = `\n <td>${trade.pair}</td>\n <td>${trade.date}</td>\n <td>${trade.direction}</td>\n <td>${trade.entry}</td>\n <td>${trade.exit}</td>\n <td>${trade.size}</td>\n <td>${calculatePL(trade.entry, trade.exit, trade.size, trade.direction).toFixed(2)}</td>\n `;\n}\n\nfunction updateChart() {\n const labels = trades.map(trade => trade.date);\n const data = trades.map(trade => calculatePL(trade.entry, trade.exit, trade.size, trade.direction));\n \n if (chart) {\n chart.destroy();\n }\n\n chart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Profit/Loss',\n data: data,\n borderColor: '#4CAF50',\n fill: false\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n });\n}\n\ntradeForm.addEventListener('submit', function(e) {\n e.preventDefault();\n \n const trade = {\n pair: document.getElementById('pair').value,\n date: document.getElementById('date').value,\n direction: document.getElementById('direction').value,\n entry: parseFloat(document.getElementById('entry').value),\n exit: parseFloat(document.getElementById('exit').value),\n size: parseFloat(document.getElementById('size').value)\n };\n\n trades.push(trade);\n addTradeToTable(trade);\n updateChart();\n \n tradeForm.reset();\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 242, + "completion_tokens": 1579, + "total_tokens": 1821, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 242 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..8d88ca7 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# forexfolio2.scroll.pub +Website generated by DeepSeek from prompt: build a forex trading journal with nice visuals \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..788450c --- /dev/null +++ b/script.js @@ -0,0 +1,74 @@ +const tradeForm = document.getElementById('tradeForm'); +const tradeTable = document.getElementById('tradeTable').getElementsByTagName('tbody')[0]; +const ctx = document.getElementById('profitChart').getContext('2d'); + +let trades = []; +let chart; + +function calculatePL(entry, exit, size, direction) { + const pips = (exit - entry) * (direction === 'buy' ? 1 : -1); + return pips * size; +} + +function addTradeToTable(trade) { + const row = tradeTable.insertRow(); + row.innerHTML = ` + <td>${trade.pair}</td> + <td>${trade.date}</td> + <td>${trade.direction}</td> + <td>${trade.entry}</td> + <td>${trade.exit}</td> + <td>${trade.size}</td> + <td>${calculatePL(trade.entry, trade.exit, trade.size, trade.direction).toFixed(2)}</td> + `; +} + +function updateChart() { + const labels = trades.map(trade => trade.date); + const data = trades.map(trade => calculatePL(trade.entry, trade.exit, trade.size, trade.direction)); + + if (chart) { + chart.destroy(); + } + + chart = new Chart(ctx, { + type: 'line', + data: { + labels: labels, + datasets: [{ + label: 'Profit/Loss', + data: data, + borderColor: '#4CAF50', + fill: false + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true + } + } + } + }); +} + +tradeForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const trade = { + pair: document.getElementById('pair').value, + date: document.getElementById('date').value, + direction: document.getElementById('direction').value, + entry: parseFloat(document.getElementById('entry').value), + exit: parseFloat(document.getElementById('exit').value), + size: parseFloat(document.getElementById('size').value) + }; + + trades.push(trade); + addTradeToTable(trade); + updateChart(); + + tradeForm.reset(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d1f8e63 --- /dev/null +++ b/style.css @@ -0,0 +1,107 @@ +:root { + --primary: #4CAF50; + --secondary: #2196F3; + --background: #f5f5f5; + --text: #333; + --border: #ddd; +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + color: var(--text); + background-color: var(--background); + margin: 0; + padding: 0; +} + +header { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + padding: 2rem; + text-align: center; +} + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.trade-entry { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + margin-bottom: 2rem; +} + +form { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; +} + +label { + font-weight: 600; + margin-bottom: 0.5rem; +} + +input, select, button { + padding: 0.75rem; + border: 1px solid var(--border); + border-radius: 4px; + width: 100%; +} + +button { + background-color: var(--primary); + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #45a049; +} + +.trade-history { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.chart-container { + height: 300px; + margin-bottom: 2rem; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid var(--border); +} + +th { + background-color: var(--background); +} + +footer { + text-align: center; + padding: 1rem; + background-color: var(--secondary); + color: white; +} + +@media (max-width: 768px) { + form { + grid-template-columns: 1fr; + } +} \ No newline at end of file