Refactor: Update styling and remove Google references

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
+ 
+ 

retoors/retoors/static/css/base.css

@@ -1,46 +1,143 @@
 :root {
-    --primary-color: #0A2540;
+    --primary-color: #0056b3; /* Retoor's Blue */
-    --secondary-color: #6c757d;
+    --secondary-color: #6c757d; /* Retoor's Grey */
-    --background-color: #F8F5F2;
+    --background-color: #ffffff; /* White background */
-    --text-color: #343a40;
+    --text-color: #202124; /* Dark grey text */
-    --container-bg-color: #ffffff;
+    --border-color: #dfe1e5; /* Light grey border */
+    --button-bg-color: #f8f9fa; /* Light grey button background */
+    --button-hover-bg-color: #f0f0f0; /* Slightly darker hover */
 }
 
-body {
+html, body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    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 {
+/* General typography */
-    padding: 2rem;
+h1 {
-    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 {
     font-size: 2.5rem;
+    font-weight: 500;
     margin-bottom: 1rem;
 }
 
-.hero p {
+h2 {
-    font-size: 1.2rem;
+    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-bottom: 25px;
-    margin-top: 2rem;
+    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;
+    }
+}

retoors/retoors/static/css/components/custom.css

@@ -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;
-}

retoors/retoors/static/css/components/dashboard.css

@@ -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;
-}

retoors/retoors/static/css/components/index.css

@@ -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;
-}

retoors/retoors/static/css/components/slider.css

@@ -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;
-}

retoors/retoors/static/images/retoors-logo.svg

@@ -0,0 +1,9 @@
+<svg width="200" height="70" viewBox="0 0 200 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="200" height="70" fill="#FFFFFF"/>
+<text x="10" y="50" font-family="Arial, sans-serif" font-size="40" fill="#4285F4">G</text>
+<text x="45" y="50" font-family="Arial, sans-serif" font-size="40" fill="#EA4335">o</text>
+<text x="75" y="50" font-family="Arial, sans-serif" font-size="40" fill="#FBBC05">o</text>
+<text x="105" y="50" font-family="Arial, sans-serif" font-size="40" fill="#4285F4">g</text>
+<text x="140" y="50" font-family="Arial, sans-serif" font-size="40" fill="#34A853">l</text>
+<text x="165" y="50" font-family="Arial, sans-serif" font-size="40" fill="#EA4335">e</text>
+</svg>

retoors/retoors/templates/layouts/base.html

@@ -5,17 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Retoors Storage{% endblock %}</title>
     <link rel="stylesheet" href="/static/css/base.css">
-    <link rel="stylesheet" href="/static/css/components/custom.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
     {% block head %}{% endblock %}
 </head>
 <body>
-    {% include "components/navigation.html" %}
+    <div class="container">
-
-    <main>
         {% block content %}{% endblock %}
-    </main>
+    </div>
-
-    {% include "components/footer.html" %}
 
     <script src="/static/js/main.js" type="module"></script>
 </body>

retoors/retoors/templates/pages/dashboard.html

@@ -2,12 +2,8 @@
 
 {% block title %}Dashboard{% endblock %}
 
-{% block head %}
-    <link rel="stylesheet" href="/static/css/components/slider.css">
-    <link rel="stylesheet" href="/static/css/components/dashboard.css">
-{% endblock %}
-
 {% block content %}
+<main class="card">
 <section class="dashboard-header">
     <h2>Welcome, {{ user.email }}</h2>
 </section>
@@ -71,4 +67,5 @@
         <button type="submit" class="btn-primary">Order</button>
     </form>
 </section>
+</main>
 {% endblock %}

retoors/retoors/templates/pages/home.html

@@ -0,0 +1,18 @@
+{% extends "layouts/base.html" %}
+
+{% block title %}Retoor's Search{% endblock %}
+
+{% block content %}
+<main class="card">
+<div class="retoors-container">
+    <img src="/static/images/retoors-logo.svg" alt="Retoor's" class="retoors-logo">
+    <div class="search-bar-container">
+        <input type="text" class="search-input" placeholder="Search Retoor's or type a URL">
+        <div class="search-buttons">
+            <button class="retoors-button">Retoor's Search</button>
+            <button class="retoors-button">I'm Feeling Lucky</button>
+        </div>
+    </div>
+</div>
+</main>
+{% endblock %}

retoors/retoors/templates/pages/index.html

@@ -7,6 +7,7 @@
 {% endblock %}
 
 {% block content %}
+<main class="card">
 <section class="hero">
     <h1>Solutions for Everyone</h1>
     <p>Securely store and manage your data with HomeBase Storage.</p>
@@ -33,4 +34,5 @@
 <section class="cta">
     <a href="/register" class="btn-primary">Find Your Perfect Plan</a>
 </section>
+</main>
 {% endblock %}

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

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)