114_TeamFuego

Quick Rent/renting-website/README.md

@@ -0,0 +1,62 @@
+# Renting Website
+
+## Overview
+This project is a renting website that allows users to register, log in, and choose between renting or buying items. The platform supports various categories, including watches, blazers, and household items. Users can upload pictures of items they wish to rent or sell, and the website includes a government verification portal for document uploads.
+
+## Features
+- User registration portal with an improved UI/UX
+- Government verification login portal for document uploads
+- Options for users to choose between buying or renting items
+- Functionality for users to upload pictures of items for rent or sale
+- Payment processing with delivery charges
+- Thank-you message for users after completing their purchase
+
+## Project Structure
+```
+renting-website
+├── src
+│   ├── assets
+│   │   ├── css
+│   │   │   └── styles.css
+│   │   ├── js
+│   │   │   └── scripts.js
+│   │   └── images
+│   ├── components
+│   │   ├── header.html
+│   │   ├── footer.html
+│   │   ├── navbar.html
+│   │   └── sidebar.html
+│   ├── pages
+│   │   ├── home.html
+│   │   ├── register.html
+│   │   ├── login.html
+│   │   ├── upload.html
+│   │   ├── buy.html
+│   │   ├── rent.html
+│   │   ├── payment.html
+│   │   └── thank-you.html
+│   └── utils
+│       └── helpers.js
+├── index.html
+└── README.md
+```
+
+## Setup Instructions
+1. Clone the repository to your local machine.
+2. Navigate to the project directory.
+3. Open `index.html` in your web browser to view the website.
+
+## Usage Guidelines
+- Users can register for an account through the registration page.
+- After registration, users can log in to access their accounts and upload necessary documents for verification.
+- Users can browse items available for rent or purchase and upload their own items.
+- The payment page allows users to complete transactions, including delivery charges.
+- A thank-you page will be displayed after a successful purchase.
+
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+
+## Contributing
+Contributions are welcome! Please submit a pull request or open an issue for any suggestions or improvements.

Quick Rent/renting-website/src/assets/css/styles.css

@@ -0,0 +1,109 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+header {
+    background: #35424a;
+    color: #ffffff;
+    padding: 10px 0;
+    text-align: center;
+}
+
+nav {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+}
+
+nav a {
+    color: #ffffff;
+    text-decoration: none;
+    padding: 10px 15px;
+    transition: background 0.3s;
+}
+
+nav a:hover {
+    background: #e8491d;
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+
+.footer {
+    background: #35424a;
+    color: #ffffff;
+    text-align: center;
+    padding: 10px 0;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+}
+
+.item-card {
+    background: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 5px;
+    margin: 15px;
+    padding: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.item-card img {
+    max-width: 100%;
+    border-radius: 5px;
+}
+
+.item-card h3 {
+    margin: 10px 0;
+}
+
+.button {
+    background: #e8491d;
+    color: #ffffff;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s;
+}
+
+.button:hover {
+    background: #35424a;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #dddddd;
+    border-radius: 5px;
+}
+
+@media (max-width: 768px) {
+    .container {
+        width: 95%;
+    }
+
+    nav {
+        flex-direction: column;
+    }
+
+    nav a {
+        padding: 10px;
+    }
+}

Quick Rent/renting-website/src/assets/images

@@ -0,0 +1 @@
+<!-- This directory is intended to hold image assets used throughout the website. -->

Quick Rent/renting-website/src/assets/js/scripts.js

@@ -0,0 +1,54 @@
+// JavaScript functions for handling user interactions, form submissions, and dynamic content updates
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Handle user registration form submission
+    const registerForm = document.getElementById('registerForm');
+    if (registerForm) {
+        registerForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            // Perform registration logic here
+            alert('Registration successful!');
+        });
+    }
+
+    // Handle login form submission
+    const loginForm = document.getElementById('loginForm');
+    if (loginForm) {
+        loginForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            // Perform login logic here
+            alert('Login successful!');
+        });
+    }
+
+    // Handle item upload form submission
+    const uploadForm = document.getElementById('uploadForm');
+    if (uploadForm) {
+        uploadForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            // Perform upload logic here
+            alert('Item uploaded successfully!');
+        });
+    }
+
+    // Handle payment process
+    const paymentForm = document.getElementById('paymentForm');
+    if (paymentForm) {
+        paymentForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            // Calculate delivery charges and process payment
+            const deliveryCharge = 10; // Example delivery charge
+            alert(`Payment successful! Delivery charge: $${deliveryCharge}`);
+            window.location.href = 'thank-you.html'; // Redirect to thank you page
+        });
+    }
+
+    // Function to dynamically load items for rent or sale
+    function loadItems(type) {
+        // Logic to fetch and display items based on type (buy/rent)
+        console.log(`Loading items for ${type}`);
+    }
+
+    // Example usage
+    loadItems('rent'); // Load rental items on page load
+});

Quick Rent/renting-website/src/components/footer.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../assets/css/styles.css">
+    <title>Footer</title>
+</head>
+<body>
+    <footer>
+        <div class="footer-content">
+            <p>&copy; 2023 Renting Website. All rights reserved.</p>
+            <ul class="footer-links">
+                <li><a href="../pages/home.html">Home</a></li>
+                <li><a href="../pages/register.html">Register</a></li>
+                <li><a href="../pages/login.html">Login</a></li>
+                <li><a href="../pages/contact.html">Contact Us</a></li>
+                <li><a href="../pages/faq.html">FAQ</a></li>
+            </ul>
+        </div>
+    </footer>
+</body>
+</html>

Quick Rent/renting-website/src/components/header.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../assets/css/styles.css">
+    <title>Renting Website</title>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <h1>Rent & Buy</h1>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="../pages/home.html">Home</a></li>
+                <li><a href="../pages/rent.html">Rent</a></li>
+                <li><a href="../pages/buy.html">Buy</a></li>
+                <li><a href="../pages/register.html">Register</a></li>
+                <li><a href="../pages/login.html">Login</a></li>
+            </ul>
+        </nav>
+    </header>
+</body>
+</html>

Quick Rent/renting-website/src/components/navbar.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../assets/css/styles.css">
+    <title>Navbar</title>
+</head>
+<body>
+    <nav class="navbar">
+        <div class="navbar-brand">
+            <a href="../pages/home.html">Rent & Buy</a>
+        </div>
+        <ul class="navbar-menu">
+            <li><a href="../pages/rent.html">Rent</a></li>
+            <li><a href="../pages/buy.html">Buy</a></li>
+            <li><a href="../pages/register.html">Register</a></li>
+            <li><a href="../pages/login.html">Login</a></li>
+            <li><a href="../pages/upload.html">Upload</a></li>
+        </ul>
+    </nav>
+</body>
+</html>

Quick Rent/renting-website/src/components/sidebar.html

@@ -0,0 +1,22 @@
+<div class="sidebar">
+    <h2>Filter Options</h2>
+    <ul>
+        <li>
+            <h3>Categories</h3>
+            <ul>
+                <li><a href="/pages/rent.html">Rent Items</a></li>
+                <li><a href="/pages/buy.html">Buy Items</a></li>
+            </ul>
+        </li>
+        <li>
+            <h3>Price Range</h3>
+            <input type="range" min="0" max="1000" value="500" id="priceRange">
+            <label for="priceRange">Up to $1000</label>
+        </li>
+        <li>
+            <h3>Item Condition</h3>
+            <label><input type="checkbox" name="condition" value="new"> New</label>
+            <label><input type="checkbox" name="condition" value="used"> Used</label>
+        </li>
+    </ul>
+</div>