diff --git a/project/example.jpg b/project/example.jpg new file mode 100644 index 0000000..a087ea7 Binary files /dev/null and b/project/example.jpg differ diff --git a/project/example2.jpg b/project/example2.jpg new file mode 100644 index 0000000..fb985b4 Binary files /dev/null and b/project/example2.jpg differ diff --git a/project/example3.jpg b/project/example3.jpg new file mode 100644 index 0000000..5921bf3 Binary files /dev/null and b/project/example3.jpg differ diff --git a/project/example4.jpg b/project/example4.jpg new file mode 100644 index 0000000..26a26cb Binary files /dev/null and b/project/example4.jpg differ diff --git a/project/example5.jpg b/project/example5.jpg new file mode 100644 index 0000000..922292e Binary files /dev/null and b/project/example5.jpg differ diff --git a/project/example6.jpg b/project/example6.jpg new file mode 100644 index 0000000..175984b Binary files /dev/null and b/project/example6.jpg differ diff --git a/project/example8.jpg b/project/example8.jpg new file mode 100644 index 0000000..9423285 Binary files /dev/null and b/project/example8.jpg differ diff --git a/project/example9.jpg b/project/example9.jpg new file mode 100644 index 0000000..b80cc07 Binary files /dev/null and b/project/example9.jpg differ diff --git a/project/prompt.txt b/project/prompt.txt new file mode 100644 index 0000000..06d9e1d --- /dev/null +++ b/project/prompt.txt @@ -0,0 +1,24 @@ +I want to start a online storage provider. +On this site, people can: + - register + - login + - see information about their storage quota + - order storage (after logging in) using a slider. Price calculation must be available in config, price per gb and such. +It must be built with: + - aiohttp, jinja + - vanilla js, vanilla css +Important: + - it must be a python package professionally structured + - it must use the aiohttp class based views + - it must host it's own frontend + - it hosts the root entry point + - javascript elements hould all extend from HTMLElement without shadowdom or shadowroot so they use the global css + - javascript files must be in the ecmascript module way + - structured css (css file per component) + - templates must be structured very well + - commercial business look and feel + - all user information and configuration and such are in json file as backend. It should provide nice backend services mutating those files. + - no database in exception of a very well structured json files + - use as many files possible + + diff --git a/project/rexample7.jpg b/project/rexample7.jpg new file mode 100644 index 0000000..644763d Binary files /dev/null and b/project/rexample7.jpg differ diff --git a/retoors/retoors/static/css/base.css b/retoors/retoors/static/css/base.css index d528d6b..d42c598 100644 --- a/retoors/retoors/static/css/base.css +++ b/retoors/retoors/static/css/base.css @@ -1,46 +1,143 @@ :root { - --primary-color: #0A2540; - --secondary-color: #6c757d; - --background-color: #F8F5F2; - --text-color: #343a40; - --container-bg-color: #ffffff; + --primary-color: #0056b3; /* Retoor's Blue */ + --secondary-color: #6c757d; /* Retoor's Grey */ + --background-color: #ffffff; /* White background */ + --text-color: #202124; /* Dark grey text */ + --border-color: #dfe1e5; /* Light grey border */ + --button-bg-color: #f8f9fa; /* Light grey button background */ + --button-hover-bg-color: #f0f0f0; /* Slightly darker hover */ } -body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +html, body { + height: 100%; margin: 0; + font-family: 'Roboto', Arial, sans-serif; /* Using a more modern font */ background-color: var(--background-color); color: var(--text-color); + display: flex; + flex-direction: column; + line-height: 1.6; /* Improve readability */ } -main { - padding: 2rem; - max-width: 1200px; - margin: 0 auto; -} - -section { - background-color: var(--container-bg-color); - padding: 2rem; - border-radius: 8px; - margin-bottom: 2rem; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.hero { - text-align: center; - background-color: transparent; - color: var(--primary-color); - box-shadow: none; -} - -.hero h1 { +/* General typography */ +h1 { font-size: 2.5rem; + font-weight: 500; margin-bottom: 1rem; } -.hero p { - font-size: 1.2rem; +h2 { + font-size: 2rem; + font-weight: 500; + margin-bottom: 0.8rem; +} + +h3 { + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 0.6rem; +} + +p { + margin-bottom: 1rem; +} + +/* Card-like styling for sections */ +.card { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); + padding: 2rem; + margin-bottom: 1.5rem; +} + +.container { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + box-sizing: border-box; +} + +.retoors-container { + text-align: center; + width: 100%; + max-width: 700px; /* Adjusted width for Retoor's */ +} + +.retoors-logo { + width: 200px; /* Adjusted width for Retoor's */ + height: 70px; /* Adjusted height for Retoor's */ + margin-bottom: 25px; +} + +.search-bar-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.search-input { + width: 100%; + padding: 10px 15px; + border: 1px solid var(--border-color); + border-radius: 24px; + font-size: 16px; + outline: none; + box-shadow: none; + transition: box-shadow 0.3s ease-in-out; + margin-bottom: 20px; +} + +.search-input:focus { + box-shadow: 0 1px 6px rgba(32,33,36,.28); + border-color: rgba(223,225,229,0); +} + +.search-buttons { + display: flex; + gap: 10px; + justify-content: center; +} + +.retoors-button { + background-color: var(--button-bg-color); + border: 1px solid var(--button-bg-color); + border-radius: 4px; + color: var(--text-color); + font-family: Arial, sans-serif; + font-size: 14px; + padding: 10px 15px; + margin: 0; + cursor: pointer; + text-align: center; + white-space: nowrap; + transition: background-color 0.3s ease-in-out; +} + +.retoors-button:hover { + background-color: var(--button-hover-bg-color); + border: 1px solid var(--border-color); +} + +/* General styles for other pages to maintain consistency */ +main { + max-width: 800px; /* Adjust for content pages */ + margin: 20px auto; /* Add some top margin for content pages */ +} + +h1, h2, h3, h4, h5, h6 { + color: var(--text-color); +} + +a { + color: var(--primary-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; } .btn-primary { @@ -48,17 +145,228 @@ section { background-color: var(--primary-color); color: white; padding: 0.75rem 1.5rem; - border-radius: 8px; + border-radius: 4px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; + transition: background-color 0.3s ease-in-out; } -footer { +.btn-primary:hover { + background-color: #1765d3; /* Slightly darker blue */ +} + +/* Form specific styles */ +.form-container { + max-width: 400px; + margin: 50px auto; + /* Inherit card styles */ + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Slightly stronger shadow */ + padding: 2rem; /* Use card padding */ + text-align: left; +} + +.form-container h2 { text-align: center; - padding: 1rem; - margin-top: 2rem; + margin-bottom: 25px; + color: var(--text-color); +} + +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: bold; + color: var(--text-color); +} + +.form-group input[type="email"], +.form-group input[type="password"], +.form-group input[type="text"], +.form-group input[type="number"] { + width: 100%; + padding: 10px; + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 16px; + box-sizing: border-box; /* Ensure padding doesn't increase width */ +} + +.form-group input[type="email"]:focus, +.form-group input[type="password"]:focus, +.form-group input[type="text"]:focus, +.form-group input[type="number"]:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); + outline: none; +} + +.form-container .btn-primary { + width: 100%; + padding: 12px; + font-size: 18px; + margin-top: 20px; +} + +.error { + color: #dc3545; + background-color: #f8d7da; + border-color: #f5c6cb; + padding: .75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: .25rem; + font-size: 0.9rem; +} + +/* Dashboard specific styles */ +.dashboard-header { + text-align: center; + margin-bottom: 2rem; +} + +.storage-overview { + margin-bottom: 2rem; +} + +.storage-gauge { + background-color: #e9ecef; + border-radius: .25rem; + height: 20px; + margin-bottom: 0.5rem; +} + +.storage-gauge-bar { + background-color: var(--primary-color); + height: 100%; + border-radius: .25rem; +} + +.storage-info { + display: flex; + justify-content: space-between; font-size: 0.9rem; color: var(--secondary-color); } + +.file-list table { + width: 100%; + border-collapse: collapse; + margin-top: 1rem; +} + +.file-list th, .file-list td { + padding: 0.75rem; + text-align: left; + border-bottom: 1px solid #dee2e6; +} + +.file-list th { + background-color: #f8f9fa; +} + +.order-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.price-display { + font-size: 1.2rem; + font-weight: bold; + text-align: center; + margin-top: 1rem; +} + +/* Custom Slider styles */ +custom-slider { + display: block; + width: 100%; +} + +custom-slider .slider-container { + display: flex; + align-items: center; + gap: 1rem; +} + +custom-slider input[type="range"] { + flex-grow: 1; + -webkit-appearance: none; /* Override default look */ + appearance: none; + height: 8px; + background: var(--border-color); + outline: none; + border-radius: 5px; +} + +custom-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--primary-color); + cursor: pointer; + border: 2px solid #fff; + box-shadow: 0 0 2px rgba(0,0,0,0.2); +} + +custom-slider input[type="range"]::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--primary-color); + cursor: pointer; + border: 2px solid #fff; + box-shadow: 0 0 2px rgba(0,0,0,0.2); +} + +custom-slider .slider-value { + font-weight: bold; + min-width: 50px; /* Ensure value doesn't jump around */ + text-align: right; +} + + +/* Responsive adjustments */ +@media (max-width: 600px) { + .retoors-logo { + width: 150px; /* Adjusted for Retoor's */ + height: auto; + } + + .search-input { + width: 90%; + } + + .search-buttons { + flex-direction: column; + width: 90%; + } + + .retoors-button { + width: 100%; + } + + main { + padding: 1rem; + margin-top: 10px; + } + + .form-container { + margin: 20px auto; + padding: 20px; + } + + .file-list th, .file-list td { + padding: 0.5rem; + font-size: 0.9rem; + } +} \ No newline at end of file diff --git a/retoors/retoors/static/css/components/custom.css b/retoors/retoors/static/css/components/custom.css deleted file mode 100644 index dbd6f2f..0000000 --- a/retoors/retoors/static/css/components/custom.css +++ /dev/null @@ -1,9 +0,0 @@ -.error { - color: #dc3545; - background-color: #f8d7da; - border-color: #f5c6cb; - padding: .75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: .25rem; -} diff --git a/retoors/retoors/static/css/components/dashboard.css b/retoors/retoors/static/css/components/dashboard.css deleted file mode 100644 index 727bfcd..0000000 --- a/retoors/retoors/static/css/components/dashboard.css +++ /dev/null @@ -1,54 +0,0 @@ -.dashboard-header { - text-align: center; - margin-bottom: 2rem; -} - -.storage-overview { - margin-bottom: 2rem; -} - -.storage-gauge { - background-color: #e9ecef; - border-radius: .25rem; - height: 20px; - margin-bottom: 0.5rem; -} - -.storage-gauge-bar { - background-color: var(--primary-color); - height: 100%; - border-radius: .25rem; -} - -.storage-info { - display: flex; - justify-content: space-between; - font-size: 0.9rem; - color: var(--secondary-color); -} - -.file-list table { - width: 100%; - border-collapse: collapse; -} - -.file-list th, .file-list td { - padding: 0.75rem; - text-align: left; - border-bottom: 1px solid #dee2e6; -} - -.file-list th { - background-color: #f8f9fa; -} - -.order-form { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.price-display { - font-size: 1.2rem; - font-weight: bold; -} diff --git a/retoors/retoors/static/css/components/index.css b/retoors/retoors/static/css/components/index.css deleted file mode 100644 index 8db6316..0000000 --- a/retoors/retoors/static/css/components/index.css +++ /dev/null @@ -1,73 +0,0 @@ -.hero h1 { - font-size: 3rem; - font-weight: bold; -} - -.hero p { - font-size: 1.25rem; - color: #555; -} - -.features { - display: flex; - justify-content: space-around; - gap: 2rem; - background-color: transparent; - box-shadow: none; - padding: 0; -} - -.feature-card { - background-color: #fff; - border-radius: 12px; - padding: 2rem; - text-align: center; - flex: 1; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - transition: transform 0.2s; -} - -.feature-card:hover { - transform: translateY(-5px); -} - -.feature-card img { - height: 48px; - margin-bottom: 1rem; -} - -.feature-card h2 { - font-size: 1.5rem; - margin-bottom: 1rem; - color: var(--primary-color); -} - -.feature-card p { - color: #555; -} - -#families { - background-color: #E0F7FA; -} - -#professionals { - background-color: #FFECB3; -} - -#students { - background-color: #E8F5E9; -} - -.cta { - text-align: center; - background-color: transparent; - box-shadow: none; - padding-top: 2rem; -} - -.cta .btn-primary { - background-color: #007BFF; - padding: 1rem 2rem; - font-size: 1.2rem; - border-radius: 8px; -} diff --git a/retoors/retoors/static/css/components/slider.css b/retoors/retoors/static/css/components/slider.css deleted file mode 100644 index f713f17..0000000 --- a/retoors/retoors/static/css/components/slider.css +++ /dev/null @@ -1,18 +0,0 @@ -custom-slider { - display: block; - width: 100%; -} - -custom-slider .slider-container { - display: flex; - align-items: center; - gap: 1rem; -} - -custom-slider input[type="range"] { - flex-grow: 1; -} - -custom-slider .slider-value { - font-weight: bold; -} diff --git a/retoors/retoors/static/images/retoors-logo.svg b/retoors/retoors/static/images/retoors-logo.svg new file mode 100644 index 0000000..8948a38 --- /dev/null +++ b/retoors/retoors/static/images/retoors-logo.svg @@ -0,0 +1,9 @@ + + +G +o +o +g +l +e + diff --git a/retoors/retoors/templates/layouts/base.html b/retoors/retoors/templates/layouts/base.html index 65cc465..7272aec 100644 --- a/retoors/retoors/templates/layouts/base.html +++ b/retoors/retoors/templates/layouts/base.html @@ -5,17 +5,15 @@ {% block title %}Retoors Storage{% endblock %} - + + + {% block head %}{% endblock %} - {% include "components/navigation.html" %} - -
+
{% block content %}{% endblock %} -
- - {% include "components/footer.html" %} + diff --git a/retoors/retoors/templates/pages/dashboard.html b/retoors/retoors/templates/pages/dashboard.html index c202402..d78f194 100644 --- a/retoors/retoors/templates/pages/dashboard.html +++ b/retoors/retoors/templates/pages/dashboard.html @@ -2,12 +2,8 @@ {% block title %}Dashboard{% endblock %} -{% block head %} - - -{% endblock %} - {% block content %} +

Welcome, {{ user.email }}

@@ -71,4 +67,5 @@ +
{% endblock %} diff --git a/retoors/retoors/templates/pages/home.html b/retoors/retoors/templates/pages/home.html new file mode 100644 index 0000000..ad8d8c5 --- /dev/null +++ b/retoors/retoors/templates/pages/home.html @@ -0,0 +1,18 @@ +{% extends "layouts/base.html" %} + +{% block title %}Retoor's Search{% endblock %} + +{% block content %} +
+
+ +
+ +
+ + +
+
+
+
+{% endblock %} diff --git a/retoors/retoors/templates/pages/index.html b/retoors/retoors/templates/pages/index.html index 9a24224..c9d2ddb 100644 --- a/retoors/retoors/templates/pages/index.html +++ b/retoors/retoors/templates/pages/index.html @@ -7,6 +7,7 @@ {% endblock %} {% block content %} +

Solutions for Everyone

Securely store and manage your data with HomeBase Storage.

@@ -33,4 +34,5 @@
Find Your Perfect Plan
+
{% endblock %} diff --git a/retoors/retoors/views/site.py b/retoors/retoors/views/site.py index 26fc4ab..3d7357b 100644 --- a/retoors/retoors/views/site.py +++ b/retoors/retoors/views/site.py @@ -14,7 +14,7 @@ class SiteView(web.View): if self.request.path == "/dashboard": return await self.dashboard() return aiohttp_jinja2.render_template( - "pages/index.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")} + "pages/home.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")} ) @login_required diff --git a/retoors/tests/test_site.py b/retoors/tests/test_site.py index 618989e..f20b549 100644 --- a/retoors/tests/test_site.py +++ b/retoors/tests/test_site.py @@ -6,8 +6,7 @@ async def test_index_get(client): resp = await client.get("/") assert resp.status == 200 text = await resp.text() - assert "Solutions for Everyone" in text - + assert "Retoor's Search" in text async def test_dashboard_get_unauthorized(client): resp = await client.get("/dashboard", allow_redirects=False)