-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding base template and rendered HTML files
- Loading branch information
Showing
6 changed files
with
158 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<form action=\"/transactions\" method=\"GET\" class=\"h-full w-full\"><input type=\"hidden\" name=\" | ||
\" value=\" | ||
\"><div class=\"p-6 border border-gray-300 rounded-lg bg-gray-50 hover:bg-yellow-400 cursor-pointer\" onclick=\"this.closest('form').submit()\"><h2 class=\"text-xl text-center font-bold mb-4\"> | ||
</h2><p><span class=\"font-bold\">Account Type:</span> | ||
</p><p><span class=\"font-bold\">Balance:</span> | ||
|
||
</p> | ||
<p><span class=\"font-bold\">Id:</span> | ||
</p><p><span class=\"font-bold\">Created At:</span> | ||
</p> | ||
</div></form> | ||
<div class=\"flex items-center justify-center min-h-screen bg-gray-100\"><div class=\"container mx-auto p-8 bg-gradient-to-r from-orange-50 to-orange-200 shadow-lg rounded-lg\"><h1 class=\"text-4xl font-bold text-center mb-8\">Accounts - Details</h1> | ||
</div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
package templates | ||
|
||
templ Base(title string) { | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"/> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
<script src="https://unpkg.com/htmx.org@1.9.11"></script> | ||
<link rel="stylesheet" href="/static/css/output.css"/> | ||
<title>{ title }</title> | ||
</head> | ||
<body> | ||
{ children... } | ||
</body> | ||
</html> | ||
} | ||
|
||
templ GridOrganiser() { | ||
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-20"> | ||
{ children... } | ||
</ul> | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><script src=\"https://unpkg.com/htmx.org@1.9.11\"></script><link rel=\"stylesheet\" href=\"/static/css/output.css\"><title> | ||
</title></head><body> | ||
</body></html> | ||
<ul class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-20\"> | ||
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<div> | ||
</div> | ||
<div>404 - Not found</div> | ||
<div>Global: | ||
</div><div>User: | ||
</div> | ||
<form action=\"/counter\" method=\"POST\"><div><button type=\"submit\" name=\"global\" value=\"global\">Global</button></div><div><button type=\"submit\" name=\"user\" value=\"user\">User</button></div></form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<div class=\"container mx-auto p-8\"><h1 class=\"text-4xl font-bold mb-6\">Transactions</h1><div class=\"overflow-y-auto max-h-96 border border-gray-200 rounded-lg\"><table class=\"min-w-full table-auto bg-gray-50 border border-gray-200 p-10\"><thead class=\"bg-gray-200\"><tr><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Transaction Amount</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Description</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Status</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Time</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Message</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Category</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Purchase Method</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Card Number</th></tr></thead> <tbody class=\"bg-grey-light\"> | ||
<tr class=\"hover:bg-yellow-400\"><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td><td class=\"px-4 py-2 border-b border-gray-300\"> | ||
</td></tr> | ||
</tbody></table></div></div> | ||
<div class=\"p-6 bg-white rounded-lg shadow-lg\"><label for=\"slider\" class=\"block text-lg font-semibold mb-4\">Number of Transactions</label><!-- Slider --><input type=\"range\" id=\"slider\" min=\"1\" max=\"10000\" value=\" | ||
\" class=\"w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer\"><!-- Displayed value as an input field --><div class=\"mt-4 flex items-center space-x-2\"><label for=\"sliderValue\" class=\"text-sm font-medium text-gray-700\">Value:</label> <input type=\"number\" id=\"sliderValue\" value=\" | ||
\" min=\"1\" max=\"100\" class=\"w-32 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div><!-- Button to grab the slider value and refresh the page --><button id=\"submitButton\" class=\"mt-6 px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Set Transactions</button></div><script>\n const slider = document.getElementById('slider');\n const sliderValueInput = document.getElementById('sliderValue');\n const submitButton = document.getElementById('submitButton');\n\n // Sync input field when slider changes\n slider.addEventListener('input', function() {\n sliderValueInput.value = slider.value;\n });\n\n // Sync slider when input field changes\n sliderValueInput.addEventListener('input', function() {\n if (sliderValueInput.value >= slider.min && sliderValueInput.value <= slider.max) {\n slider.value = sliderValueInput.value;\n }\n });\n\n // On button click, update URL with the query parameter and refresh the page\n submitButton.addEventListener('click', function() {\n const sliderValue = slider.value;\n const url = new URL(window.location.href);\n url.searchParams.set('numTransactions', sliderValue);\n window.location.href = url.toString(); // Refresh the page with the updated query parameter\n });\n </script> | ||
<div class=\"p-6 bg-white rounded-lg shadow-lg max-w-2xl\"><h2 class=\"text-xl font-bold mb-4 text-gray-700\">Select Date Range</h2><div class=\"flex space-x-4\"><!-- Start Date Input --><div class=\"flex flex-col\"><label for=\"start-date\" class=\"mb-2 text-sm font-medium text-gray-600\">Start Date</label> <input type=\"datetime-local\" id=\"start-date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div><!-- End Date Input --><div class=\"flex flex-col\"><label for=\"end-date\" class=\"mb-2 text-sm font-medium text-gray-600\">End Date</label> <input type=\"datetime-local\" id=\"end-date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div></div><button id=\"dateSubmitButton\" class=\"mt-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Submit</button><script>\n const startDateInput = document.getElementById('start-date');\n const endDateInput = document.getElementById('end-date');\n const dateSubmitButton = document.getElementById('dateSubmitButton');\n\n // On button click, update URL with the query parameters for startDate and endDate and refresh the page\n dateSubmitButton.addEventListener('click', function() {\n const startDate = startDateInput.value;\n const endDate = endDateInput.value;\n\n // Create a new URL object\n const url = new URL(window.location.href);\n\n // Add or update the query parameters for startDate and endDate\n if (startDate) {\n url.searchParams.set('startDate', startDate);\n }\n if (endDate) {\n url.searchParams.set('endDate', endDate);\n }\n if (startDate == null && endDate == null) {\n return;\n }\n\n // Refresh the page with the updated URL\n window.location.href = url.toString();\n });\n </script></div> | ||
|
||
|
||
|