Alright.

Browse Source
This commit is contained in:
retoor 2025-11-08 20:09:58 +01:00
parent a0a52fcaa2
commit fc6a555a33
6 changed files with 433 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
pages.md Normal file
View File

@ -0,0 +1,281 @@
Okay, I will generate detailed descriptions for each of the specified HTML pages for "Retoor's Cloud Solutions," using the image provided as a style reference (friendly and accessible "HomeBase" style) but adapting it for the "Retoor's" branding.
**Company Name:** Retoor's Cloud Solutions
**Overall Design Philosophy (for this set):** Friendly, Accessible, Clear, and Trustworthy. The aesthetic should be warm and inviting, using soft colors, rounded corners, and approachable imagery/icons.
**Color Palette:** Soft blues, greens, and oranges (similar to the provided image), complemented by a clean white or light grey background. A friendly blue will be used for primary CTAs and key interactive elements.
**Typography:** Modern, rounded sans-serif fonts (e.g., Lato, Rubik, or similar) for headings and body text, promoting readability and approachability.
**Imagery/Illustrations:** Friendly, illustrative icons or stylized vector graphics depicting people, families, professionals, and students interacting with technology or clouds, reinforcing the "solutions for everyone" concept.
**Layout:** Clean layouts with generous whitespace, clear content hierarchy, and responsive design.
---
### Detailed Design Descriptions for Retoor's Cloud Solutions Application Pages
---
### `index.html` - Home Page
* **Name**: Home Page
* **Purpose**: This is the primary entry point for users, designed to immediately convey that Retoor's Cloud Solutions offers something for everyone. It should feel welcoming, clear, and easy to understand.
* **Content/Function**:
* **Header/Navigation Bar:** A clean, horizontal bar at the top.
* **Logo:** Top-left, "Retoor's Cloud Solutions" logo (e.g., a stylized "R" or a small cloud icon next to the name, in a friendly blue).
* **Navigation Links:** Prominent, clearly labeled links (e.g., "Features," "Pricing," "Reviews," "Support") in a friendly, legible font.
* **CTA Button:** A primary "Start Your Free Trial" button in the top-right, using a warm, inviting color (e.g., an orange or friendly blue) with white text and rounded corners.
* **Utility Icons:** Potentially a small shopping cart or user profile icon.
* **Hero Section:**
* **Headline:** Large, bold, centered text: "Solutions for Everyone" (Dark blue or black).
* **Sub-headline:** "Solutions for Everyone" (Lighter grey, slightly smaller). (Note: This is repeated as per the prompt's image. In a real design, it would likely be more descriptive).
* **Feature Cards (3 modules):** Three distinct, equally sized, rounded-corner cards presented horizontally. Each card has:
* A prominent, friendly icon at the top (e.g., cloud with rain/family for families, document with arrows for professionals, graduation cap for students) in a color complementing the card's background.
* A bold title (e.g., "For Families," "For Professionals," "For Students").
* A brief, benefit-oriented description (e.g., "Securely backup and share precious photos and videos. Keep fond memories safe for generations.", "Organize important work documents, collaborate with teams, and access files for anywhere.", "Store projects, notes, research papers. Access study materials across your devices").
* **Visual Style:** Each card uses a distinct, soft background color (e.g., light blue, soft orange, light green) and has a subtle shadow.
* **Main CTA Button:** A large, centered button at the bottom of the section: "Find Your Perfect Plan" (Friendly blue background, white text, rounded corners).
* **Visual Style**: Soft, inviting background colors (e.g., a very light beige or white). Ample whitespace. Rounded elements throughout.
---
### `dashboard.html` - User Dashboard
* **Name**: User Dashboard
* **Purpose**: To provide a personalized, at-a-glance overview of the user's account, acting as their central hub within Retoor's Cloud Solutions. It should feel organized, intuitive, and reassuring.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with `index.html`, but with a "Logged In" state, e.g., showing user's avatar/name instead of "Start Your Free Trial" CTA, and possibly "My Files", "Settings" links).
* **Welcome Message:** A friendly greeting (e.g., "Welcome back, [User's Name]!").
* **Storage Usage Overview:**
* A prominent, easy-to-read visual (e.g., a donut chart or progress bar) showing current storage used vs. total allocated, in friendly colors (e.g., blue for used, light grey for available).
* Accompanying text: "X GB Used of Y GB Total."
* A clear button: "Manage Storage" or "Upgrade Plan."
* **Quick Access/Recent Activity:**
* A section displaying recently accessed files, shared items, or important notifications.
* Clean, card-like displays for each item (e.g., file name, date, small icon).
* A link to "View All Files" to navigate to the detailed file browser.
* **Account Status/Notifications:**
* Small area for system alerts (e.g., "Your plan renews in X days," "New shared file").
* **Help & Support Link:** A visible, but not intrusive, link to the support page or common FAQs.
* **Visual Style**: Clean, white background with modular cards for different sections. Consistent use of friendly icons and colors.
---
### `errors/404.html` - Not Found Error Page
* **Name**: Not Found Error Page
* **Purpose**: To gracefully inform the user that the requested page doesn't exist, while maintaining brand consistency and guiding them back to useful content.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Central Illustration/Icon:** A friendly, possibly slightly humorous, illustration of a broken link, a lost cloud, or a confused robot in brand colors.
* **Main Message:** Large, clear text: "Oops! Page Not Found." (Dark blue).
* **Descriptive Text:** A friendly, apologetic sentence: "We can't seem to find the page you're looking for. It might have moved or never existed." (Lighter grey).
* **Helpful Links:**
* A prominent button: "Go to Homepage" (Friendly blue background).
* A smaller link: "Contact Support" or "Visit our Help Center."
* **Visual Style**: Clean, uncluttered. Focus on the central message and illustration.
---
### `errors/500.html` - Internal Server Error Page
* **Name**: Internal Server Error Page
* **Purpose**: To inform the user of a server-side issue in a user-friendly manner, without exposing technical details, and suggesting next steps.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Central Illustration/Icon:** A friendly illustration of a cloud with a glitch, or a system down icon, in brand colors.
* **Main Message:** Large, clear text: "Something Went Wrong!" (Dark blue).
* **Descriptive Text:** A reassuring message: "We're experiencing a technical issue on our end. Please try again in a few moments." (Lighter grey).
* **Helpful Links:**
* A prominent button: "Reload Page" (Friendly blue background).
* A smaller link: "Contact Support" if the issue persists.
* **Visual Style**: Similar to `404.html`, clean and focused on the message.
---
### `forgot_password.html` - Forgot Password Page
* **Name**: Forgot Password Page
* **Purpose**: To provide a simple and secure form for users to initiate the password reset process.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Forgot Your Password?" (Dark blue).
* **Instructions:** A brief, friendly sentence: "Enter your registered email address below, and we'll send you a link to reset your password."
* **Input Field:**
* Label: "Email Address"
* Input box for email entry.
* **Submit Button:** "Send Reset Link" (Prominent, friendly blue background, rounded corners).
* **Back to Login Link:** A smaller link: "Remembered your password? Log In" below the button.
* **Visual Style**: Clean, simple form centered on the page, consistent with the overall friendly aesthetic.
---
### `login.html` - Login Page
* **Name**: Login Page
* **Purpose**: To allow existing users to securely access their Retoor's Cloud Solutions account.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Welcome Back!" or "Log In to Your Account" (Dark blue).
* **Login Form:**
* **Input Field:** "Email Address"
* **Input Field:** "Password" (with an optional 'show/hide' toggle).
* **Forgot Password Link:** A clear link: "Forgot Password?"
* **Login Button:** "Log In Securely" (Prominent, friendly blue background, rounded corners).
* **"New User?" Link:** "Don't have an account? Sign Up" linking to `register.html`.
* **Visual Style**: Clean, minimalist form, centered for ease of use. Consistent with the friendly aesthetic.
---
### `order.html` - Order Page
* **Name**: Order Page
* **Purpose**: To allow authenticated users to view, select, and modify their storage plans, making the upgrade or purchase process clear and straightforward.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with logged-in user header).
* **Page Title:** Large, clear text: "Choose Your Perfect Plan" or "Manage Your Storage Plan" (Dark blue).
* **Current Plan Display (if applicable):** A clear card showing the user's current plan, storage used, and renewal date.
* **Plan Options/Tiers:**
* A clear, comparative display of different storage plans (e.g., "Personal," "Professional," "Business").
* Each plan in a separate, rounded-corner card.
* Includes: Plan name, price (monthly/annually toggle), key features (checkbox list), and a prominent "Select Plan" or "Upgrade Now" button (friendly blue). The currently selected/active plan should be highlighted.
* **Payment Information (if upgrading/purchasing):**
* Secure input fields for credit card details (card number, expiry, CVV).
* Billing address input.
* Clear "Confirm Order" button.
* **Summary:** A small section summarizing the chosen plan and total cost before confirmation.
* **Visual Style**: Clean, professional, and trustworthy. Pricing cards should be easy to compare, using clear typography and visual hierarchy.
---
### `pricing.html` - Pricing Page
* **Name**: Pricing Page
* **Purpose**: To clearly present Retoor's Cloud Solutions' various pricing tiers and features to potential customers, helping them choose the best option.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Simple, Transparent Pricing" (Dark blue).
* **Sub-headline:** "Find the perfect plan for your needs."
* **Pricing Toggle:** A prominent toggle for "Monthly / Annually" pricing.
* **Pricing Tiers (3-4 cards):**
* Similar to the `order.html` plan options, but designed for public viewing.
* Each plan is in a distinct, rounded-corner card (e.g., "Free," "Personal," "Professional," "Business").
* Includes: Plan name, price (per month/year), a list of key features (checkbox or bullet list), and a strong "Sign Up Now" button (friendly blue background).
* **Highlight:** One plan (e.g., "Professional" or "Personal") might be visually highlighted as "Most Popular" or "Best Value."
* **FAQ Section (Optional but recommended):** A collapsible FAQ section below the pricing, addressing common questions about billing, upgrades, and cancellations.
* **Visual Style**: Clean, well-structured pricing table/cards, easy to read and compare. Uses brand colors to highlight CTAs.
---
### `register.html` - Registration Page
* **Name**: Registration Page
* **Purpose**: To facilitate the creation of new user accounts for Retoor's Cloud Solutions, making the process quick and secure.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Create Your Free Account" or "Join Retoor's Cloud Solutions" (Dark blue).
* **Registration Form:**
* **Input Field:** "Full Name"
* **Input Field:** "Email Address"
* **Input Field:** "Password" (with password strength indicator/suggestions).
* **Input Field:** "Confirm Password"
* **Checkbox:** "I agree to the [Terms of Service] and [Privacy Policy]" (with clickable links).
* **Register Button:** "Create Account" (Prominent, friendly blue background, rounded corners).
* **"Already have an account?" Link:** "Already have an account? Log In" linking to `login.html`.
* **Visual Style**: Clean, straightforward form, centered for ease of use. Focus on clarity and minimal required fields.
---
### `reset_password.html` - Reset Password Page
* **Name**: Reset Password Page
* **Purpose**: To allow users to securely set a new password after initiating a "forgot password" request.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Set Your New Password" (Dark blue).
* **Instructions:** A brief, clear sentence: "Enter and confirm your new password below."
* **Input Field 1:**
* Label: "New Password"
* Input box for new password (with password strength indicator).
* **Input Field 2:**
* Label: "Confirm New Password"
* Input box for confirming the new password.
* **Submit Button:** "Reset Password" (Prominent, friendly blue background, rounded corners).
* **Visual Style**: Clean, secure-looking form, similar to the `forgot_password.html` page.
---
### `security.html` - Security Page
* **Name**: Security Page
* **Purpose**: To build trust and reassure users by detailing Retoor's Cloud Solutions' robust security measures and commitment to data privacy.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Your Data, Our Priority. Uncompromising Security." (Dark blue).
* **Hero Illustration/Image:** An abstract, friendly illustration representing secure data flow, encryption, or a digital shield in brand colors.
* **Key Security Pillars (3-4 sections):** Each section uses a friendly icon and a clear, concise title.
* **Data Encryption:** Explanation of encryption in transit and at rest (e.g., AES-256, TLS).
* **Access Control:** Details on user authentication, permissions, and multi-factor authentication (MFA).
* **Privacy Policy:** Overview of data handling, compliance (e.g., GDPR, CCPA), and user data rights.
* **Infrastructure Security:** Information about physical security of data centers, network protection, and regular audits.
* **Trust Badges/Certifications:** Display of any relevant security certifications or compliance badges (e.g., ISO 27001, SOC 2).
* **FAQ Section:** Specific FAQs related to security and privacy.
* **Visual Style**: Clean, informative, using icons to break up text. Professional yet approachable tone.
---
### `solutions.html` - Solutions Page
* **Name**: Solutions Page
* **Purpose**: To provide a more in-depth overview of the core services and features offered by Retoor's Cloud Solutions, expanding on the high-level points from the homepage.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Powerful Cloud Solutions for Modern Needs" (Dark blue).
* **Introductory Paragraph:** A friendly paragraph describing the breadth of Retoor's offerings.
* **Solution Sections (3-5 detailed sections):** Each section focuses on a key solution area (e.g., "Secure File Sync & Share," "Automated Backup & Recovery," "Team Collaboration," "Media & Creative Storage").
* **Section Title:** Bold and descriptive.
* **Icon/Illustration:** A friendly, relevant icon or small illustration.
* **Detailed Description:** A few paragraphs explaining the solution's benefits, key features, and how it addresses user needs.
* **Bullet Points:** Specific features listed.
* **Call to Action:** A smaller button within each section like "Learn More" or "See Features."
* **Overall CTA:** A button at the bottom: "Ready to Explore Our Plans?" linking to `pricing.html`.
* **Visual Style**: Organized content with clear headings, subheadings, and icons to guide the user. Uses friendly brand colors.
---
### `support.html` - Support Page
* **Name**: Support Page
* **Purpose**: To serve as a central hub for users to find answers to their questions and get assistance, reinforcing Retoor's commitment to customer service.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "We're Here to Help You Succeed" (Dark blue).
* **Hero Illustration/Icon:** A friendly illustration of a person interacting with a help desk, or a support chat icon.
* **Search Bar (Knowledge Base):** A prominent search bar allowing users to find articles and FAQs.
* **Key Support Categories/FAQs:**
* **Section Title:** "Quick Answers" or "Popular Topics."
* Several clickable cards or links to common FAQs or guide categories (e.g., "Getting Started," "Billing Questions," "Troubleshooting," "Account Management"). Each with a friendly icon.
* **Contact Options:** Clearly defined ways to get direct help.
* **Live Chat:** Icon + "Chat with us now!" button (friendly blue).
* **Submit a Ticket:** Icon + "Submit a Support Ticket" button (friendly blue).
* **Phone Support:** Icon + Phone number and operating hours.
* **Community Forum Link (Optional):** A link if a user forum exists.
* **Visual Style**: Clean, organized, and reassuring. Uses icons to differentiate contact methods and categories.
---
### `use_cases.html` - Use Cases Page
* **Name**: Use Cases Page
* **Purpose**: To creatively illustrate how different types of users or organizations can leverage Retoor's Cloud Solutions to solve specific problems or enhance their operations.
* **Content/Function**:
* **Header/Navigation Bar:** (Consistent with public website header).
* **Page Title:** Large, clear text: "Retoor's for Your World: Real Solutions, Real Impact" (Dark blue).
* **Introductory Paragraph:** A compelling paragraph inviting users to discover how Retoor's can specifically benefit them.
* **Use Case Scenarios (Grid or Sections):**
* **Layout:** A grid of 3-4 distinct use case cards per row, or individual sections for more detailed descriptions.
* **Each Use Case:**
* **Icon/Illustration:** A unique, friendly illustration depicting the scenario (e.g., a family sharing photos, a remote team collaborating, a small business managing client files).
* **Title:** Bold and descriptive (e.g., "Family Photo Archiving," "Remote Team Collaboration," "Client Project Management," "Academic Research Storage").
* **Challenge/Solution Paragraph:** A brief description of a common challenge in that scenario and how Retoor's provides the solution.
* **Key Benefits:** A few bullet points highlighting specific advantages.
* **Call to Action (Optional):** "Learn More" or "See Plan for [Use Case]" button.
* **Overall CTA:** A button at the bottom: "Find Your Specific Solution" linking to `pricing.html` or a more detailed solutions page.
* **Visual Style**: Engaging and illustrative. Each use case should be visually distinct while maintaining overall brand consistency. Uses storytelling through visuals and concise text.

404
retoors/static/css/base.css
View File

@ -1,24 +1,24 @@
:root {
--primary-color: #2196F3; /* Clean Blue */
--accent-color: #00BCD4; /* Teal/Cyan */
--secondary-color: #607D8B; /* Desaturated Blue-Grey */
--background-color: #F5F5F5; /* Light Grey Background */
--text-color: #263238; /* Dark Blue-Grey Text */
--light-text-color: #757575; /* Lighter text for descriptions */
--border-color: #CFD8DC; /* Light Grey Blue Border */
--primary-color: #4A90E2; /* Blue from image */
--accent-color: #50E3C2; /* Greenish-blue from image */
--secondary-color: #B8C2CC; /* Light grey-blue */
--background-color: #F8F8F8; /* Very light grey background */
--text-color: #333333; /* Darker text */
--light-text-color: #666666; /* Lighter text for descriptions */
--border-color: #E0E0E0; /* Light grey border */
--card-background: #FFFFFF; /* White for cards */
--shadow-color: rgba(0, 0, 0, 0.08); /* Subtle shadow */
/* Button specific variables, using accent for primary CTAs */
--btn-primary-bg: var(--accent-color);
--btn-primary-bg: var(--primary-color);
--btn-primary-text: #FFFFFF;
--btn-primary-hover-bg: #00ACC1; /* Slightly darker teal */
--btn-primary-hover-bg: #3A7BD5; /* Slightly darker blue */
--btn-secondary-bg: #E0E0E0; /* Light grey for secondary buttons */
--btn-secondary-text: var(--text-color);
--btn-secondary-hover-bg: #BDBDBD; /* Darker grey for secondary hover */
--btn-outline-border: var(--accent-color);
--btn-outline-text: var(--accent-color);
--btn-outline-hover-bg: rgba(0, 188, 212, 0.1); /* Light teal hover */
--btn-outline-border: var(--primary-color);
--btn-outline-text: var(--primary-color);
--btn-outline-hover-bg: rgba(74, 144, 226, 0.1); /* Light blue hover */
}
html, body {
@ -146,336 +146,104 @@ p {
border-color: var(--btn-secondary-hover-bg);
}
/* General styles for other pages to maintain consistency */
main {
width: 100%;
max-width: 960px; /* Adjust for content pages */
margin: 40px auto; /* Add some top margin for content pages */
padding: 0 20px; /* Add horizontal padding */
box-sizing: border-box;
/* Header and Navigation */
header {
background-color: var(--card-background); /* White background for header */
box-shadow: 0 2px 4px var(--shadow-color);
padding: 15px 20px;
position: sticky;
top: 0;
z-index: 1000;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-color);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease-in-out;
}
a:hover {
color: var(--accent-color);
text-decoration: underline;
}
.btn-primary {
display: inline-block;
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
padding: 0.8rem 1.8rem;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
background-color: var(--btn-primary-hover-bg);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.btn-outline {
display: inline-block;
background-color: transparent;
color: var(--btn-outline-text);
border: 2px solid var(--btn-outline-border);
padding: 0.8rem 1.8rem;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.btn-outline:hover {
background-color: var(--btn-outline-hover-bg);
color: var(--btn-outline-text);
border-color: var(--btn-outline-border);
}
/* Form specific styles */
.form-container {
max-width: 450px;
margin: 50px auto;
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 6px 18px var(--shadow-color); /* Slightly stronger shadow */
padding: 2.5rem;
text-align: left;
}
.form-container h2 {
text-align: center;
margin-bottom: 30px;
color: var(--text-color);
font-size: 2rem;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-color);
font-size: 0.95rem;
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="number"] {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.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(--accent-color);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2);
outline: none;
}
.form-container .btn-primary {
width: 100%;
padding: 14px;
font-size: 18px;
margin-top: 25px;
border-radius: 5px;
}
.error {
color: #D32F2F; /* Red for errors */
background-color: #FFEBEE; /* Light red background */
border-color: #EF9A9A;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
font-size: 0.9rem;
font-weight: 500;
}
/* Dashboard specific styles */
.dashboard-header {
text-align: center;
margin-bottom: 2.5rem;
}
.storage-overview {
margin-bottom: 2.5rem;
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 12px var(--shadow-color);
padding: 2rem;
}
.storage-gauge {
background-color: var(--border-color);
border-radius: .25rem;
height: 20px;
margin-bottom: 0.5rem;
overflow: hidden; /* Ensure bar stays within bounds */
}
.storage-gauge-bar {
background-color: var(--accent-color);
height: 100%;
border-radius: .25rem;
transition: width 0.5s ease-in-out;
}
.storage-info {
nav {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
color: var(--light-text-color);
font-weight: 500;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.file-list table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 12px var(--shadow-color);
overflow: hidden; /* For rounded corners */
}
.file-list th, .file-list td {
padding: 1rem 1.5rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.file-list th {
background-color: var(--background-color);
color: var(--text-color);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
}
.file-list td {
color: var(--light-text-color);
}
.file-list tr:last-child td {
border-bottom: none;
}
.order-form {
nav .logo {
display: flex;
flex-direction: column;
gap: 1.5rem;
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 12px var(--shadow-color);
padding: 2.5rem;
max-width: 600px;
margin: 40px auto;
}
.price-display {
align-items: center;
text-decoration: none;
color: var(--text-color);
font-size: 1.5rem;
font-weight: 700;
text-align: center;
margin-top: 1.5rem;
color: var(--accent-color);
}
/* Custom Slider styles */
custom-slider {
display: block;
width: 100%;
nav .logo img {
height: 30px; /* Adjust logo size */
margin-right: 10px;
}
custom-slider .slider-container {
nav .nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}
custom-slider input[type="range"] {
flex-grow: 1;
-webkit-appearance: none; /* Override default look */
appearance: none;
height: 10px;
background: var(--border-color);
outline: none;
nav .nav-links a {
color: var(--text-color);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
nav .nav-links a:hover {
color: var(--primary-color);
}
.btn-primary-nav {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background 0.3s ease-in-out;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s ease;
}
custom-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
border: 3px solid var(--card-background);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
.btn-primary-nav:hover {
background-color: var(--btn-primary-hover-bg);
}
custom-slider input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
border: 3px solid var(--card-background);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
/* Main content area */
main {
flex-grow: 1; /* Allow main content to take available space */
width: 100%;
max-width: 1200px; /* Match header max-width */
margin: 0 auto; /* Center the main content */
padding: 40px 20px; /* Add padding */
box-sizing: border-box;
background-color: var(--background-color); /* Light background for main content */
}
custom-slider .slider-value {
font-weight: 700;
min-width: 60px; /* Ensure value doesn't jump around */
text-align: right;
color: var(--text-color);
font-size: 1.1rem;
}
/* Error Page Specific Styles */
.error-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 50px 20px;
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 6px 20px var(--shadow-color);
max-width: 600px;
margin: 50px auto;
}
.error-page-container h1 {
font-size: 3rem;
color: var(--text-color);
margin-bottom: 20px;
}
.error-page-container p {
font-size: 1.2rem;
color: var(--light-text-color);
margin-bottom: 30px;
}
.error-page-container .btn-primary {
padding: 0.8rem 2rem;
font-size: 1.1rem;
}
/* Responsive adjustments */
/* Responsive adjustments for base.css */
@media (max-width: 768px) {
.error-page-container h1 {
font-size: 2.5rem;
nav {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.error-page-container p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.error-page-container h1 {
font-size: 2rem;
}
.error-page-container p {
font-size: 0.9rem;
}
.error-page-container .btn-primary {
padding: 0.7rem 1.5rem;
font-size: 1rem;
nav .logo {
width: 100%;
justify-content: center;
margin-bottom: 10px;
}
nav .nav-links {
width: 100%;
justify-content: center;
margin-bottom: 10px;
}
.btn-primary-nav {
width: 100%;
text-align: center;
}
main {
padding: 20px 15px;
}
}

101
retoors/static/css/components/index.css
View File

@ -3,19 +3,17 @@
.hero-section {
text-align: center;
padding: 60px 20px;
background-color: var(--card-background); /* White background for hero */
/* Removed background-color and box-shadow to match image */
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 6px 20px var(--shadow-color);
position: relative;
overflow: hidden; /* For potential background images */
overflow: hidden;
}
.hero-section h1 {
font-size: 3.5rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 1.5rem;
margin-bottom: 0.5rem; /* Adjusted margin to match image */
line-height: 1.2;
}
@ -27,52 +25,12 @@
line-height: 1.5;
}
.hero-ctas {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.hero-image-container {
margin-top: 50px;
/* Placeholder for a hero image */
background-color: #ECEFF1; /* Light grey placeholder */
height: 300px; /* Example height */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--light-text-color);
font-style: italic;
font-size: 1.2rem;
overflow: hidden;
}
.hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.benefits-section {
padding: 40px 20px;
text-align: center;
background-color: var(--background-color); /* Use overall background color */
}
.benefits-section h2 {
font-size: 2.5rem;
color: var(--text-color);
margin-bottom: 40px;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
margin: 40px auto; /* Adjusted margin to separate from text */
}
.benefit-card {
@ -82,6 +40,11 @@
box-shadow: 0 4px 15px var(--shadow-color);
text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 250px; /* Ensure cards have a consistent height */
}
.benefit-card:hover {
@ -93,7 +56,7 @@
width: 60px;
height: 60px;
margin-bottom: 20px;
color: var(--accent-color); /* Assuming SVG icons can inherit color */
/* Icons in the image are colored, not inheriting text color */
}
.benefit-card h3 {
@ -108,6 +71,36 @@
line-height: 1.6;
}
/* Specific card colors from the image */
.family-card {
background-color: #D0E6F0; /* Light blue */
}
.professional-card {
background-color: #F0E0D0; /* Light orange */
}
.student-card {
background-color: #D0F0D0; /* Light green */
}
.find-plan-btn {
margin-top: 40px;
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 5px;
background-color: #4A90E2; /* Blue from the image */
color: white;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.find-plan-btn:hover {
background-color: #3A7BD5; /* Darker blue on hover */
}
/* Responsive adjustments for index.css */
@media (max-width: 992px) {
.hero-section h1 {
@ -116,9 +109,6 @@
.hero-section p {
font-size: 1.2rem;
}
.benefits-section h2 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
@ -131,16 +121,16 @@
.hero-section p {
font-size: 1rem;
}
.hero-ctas {
flex-direction: column;
gap: 15px;
}
.benefits-grid {
grid-template-columns: 1fr; /* Stack cards on small screens */
}
.benefit-card {
padding: 25px;
}
.find-plan-btn {
width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
@ -154,7 +144,4 @@
width: 100%;
box-sizing: border-box;
}
.benefits-section h2 {
font-size: 1.8rem;
}
}

20
retoors/templates/components/navigation.html
View File

@ -1,21 +1,15 @@
<header>
<nav aria-label="Main navigation">
<a href="/" class="logo" aria-label="Retoor's Cloud Solutions home">
<img src="/static/images/retoors-logo.svg" alt="Retoor's Cloud Solutions" />
<span>Retoor's Cloud Solutions</span>
<a href="/" class="logo" aria-label="HomeBase Storage home">
<img src="/static/images/retoors-logo.svg" alt="HomeBase Storage" />
<span>HomeBase Storage</span>
</a>
<ul>
<li><a href="/solutions" aria-label="Our Solutions">Solutions</a></li>
<ul class="nav-links">
<li><a href="/features" aria-label="Features">Features</a></li>
<li><a href="/pricing" aria-label="Pricing Plans">Pricing</a></li>
<li><a href="/security" aria-label="Security Information">Security</a></li>
<li><a href="/reviews" aria-label="Customer Reviews">Reviews</a></li>
<li><a href="/support" aria-label="Support Page">Support</a></li>
{% if request['user'] %}
<li><a href="/dashboard" aria-label="User Dashboard">Dashboard</a></li>
<li><a href="/logout" class="btn-nav" aria-label="Logout">Logout</a></li>
{% else %}
<li><a href="/login" class="btn-outline-nav" aria-label="Sign In to your account">Sign In</a></li>
<li><a href="/register" class="btn-primary-nav" aria-label="Start your free trial">Start Your Free Trial</a></li>
{% endif %}
</ul>
<a href="/register" class="btn-primary-nav" aria-label="Start your free trial">Start Your Free Trial</a>
</nav>
</header>

43
retoors/templates/pages/index.html
View File

@ -1,6 +1,6 @@
{% extends "layouts/base.html" %}
{% block title %}Elevate Your Business Data - Retoor's Cloud Solutions{% endblock %}
{% block title %}Solutions for Everyone - Retoor's Cloud Solutions{% endblock %}
{% block head %}
<link rel="stylesheet" href="/static/css/components/index.css">
@ -9,37 +9,26 @@
{% block content %}
<main>
<section class="hero-section">
<h1>Elevate Your Business Data. Securely. Collaborative.</h1>
<p>Cloud storage solutions built for performance, reliability, and peace of mind.</p>
<div class="hero-ctas">
<a href="/register" class="btn-primary">Start Free Trial</a>
<a href="/contact" class="btn-outline">Request Demo</a> {# Assuming a /contact page for demo requests #}
</div>
<div class="hero-image-container">
{# Placeholder for a high-quality, professional image depicting business professionals collaborating #}
<img src="/static/images/example.jpg" alt="Business professionals collaborating with Retoor's Cloud Solutions">
</div>
</section>
<section class="benefits-section">
<h2>Why Choose Retoor's?</h2>
<h1>Solutions for Everyone</h1>
<p>Solutions for Everyone</p>
<div class="benefits-grid">
<div class="benefit-card">
<img src="/static/images/icon-families.svg" alt="Security Icon" class="icon"> {# Reusing existing icon, ideally would be a shield #}
<h3>Bank-Grade Security</h3>
<p>Your data is encrypted end-to-end, ensuring maximum protection and privacy.</p>
<div class="benefit-card family-card">
<img src="/static/images/icon-families.svg" alt="Families Icon" class="icon">
<h3>For Families</h3>
<p>Securely backup and share precious photos and videos. Keep fond memories safe for generations.</p>
</div>
<div class="benefit-card">
<img src="/static/images/icon-professionals.svg" alt="Accessibility Icon" class="icon"> {# Reusing existing icon, ideally would be a globe #}
<h3>Global Accessibility</h3>
<p>Access files anywhere, anytime, on any device with seamless synchronization.</p>
<div class="benefit-card professional-card">
<img src="/static/images/icon-professionals.svg" alt="Professionals Icon" class="icon">
<h3>For Professionals</h3>
<p>Organize important work documents, collaborate in teams, and access files from anywhere.</p>
</div>
<div class="benefit-card">
<img src="/static/images/icon-students.svg" alt="Collaboration Icon" class="icon"> {# Reusing existing icon, ideally would be chat bubbles #}
<h3>Seamless Collaboration</h3>
<p>Share, edit, and co-author documents with ease, boosting team productivity.</p>
<div class="benefit-card student-card">
<img src="/static/images/icon-students.svg" alt="Students Icon" class="icon">
<h3>For Students</h3>
<p>Store projects, notes, research papers. Access study materials across your devices.</p>
</div>
</div>
<a href="/solutions" class="btn-primary find-plan-btn">Find Your Perfect Plan</a>
</section>
</main>
{% endblock %}

4
tests/test_site.py
View File

@ -4,8 +4,8 @@ async def test_index_get(client):
resp = await client.get("/")
assert resp.status == 200
text = await resp.text()
assert "Elevate Your Business Data" in text
assert "Start Free Trial" in text
assert "Solutions for Everyone" in text
assert "Find Your Perfect Plan" in text
async def test_dashboard_get_unauthorized(client):