Merge pull request #9 from Qichen-Liu/Zetao

home page done, please take look
Qichen-Liu · Dec 19, 2023 · 0faab8b · 0faab8b
2 parents eb79468 + 36e2ee9
commit 0faab8b
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "test": "mocha",
     "helloworld": "node src/helloWorld.js",
-    "format": "prettier --write \"**/*.js\"",
+    "format": "prettier --write \"**/*.{js,html}\"",
+    "prettier-check": "prettier --check './**/*.{js,html}'",
     "lint": "eslint . --ext .js",
     "lint:fix": "eslint --fix ./**/*.js"
   },

diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EasyFurniture - Home</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <div class="logo">
+          <a href="index.html">EasyFurniture</a>
+        </div>
+        <ul class="nav-links">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Browse</a></li>
+          <li><a href="#">Sell</a></li>
+          <li><a href="#">Profile</a></li>
+        </ul>
+        <div class="auth-links">
+          <a href="#">Login</a>
+          <a href="#">Register</a>
+        </div>
+      </nav>
+    </header>
+
+    <main>
+      <section class="hero">
+        <h1>Welcome to EasyFurniture</h1>
+        <p>Find and sell used furniture with ease.</p>
+        <a href="#" class="btn">Explore Now</a>
+      </section>
+
+      <section class="featured-items">
+        <h2>Featured Furniture</h2>
+        <div class="items-grid">
+          <!-- Dynamic furniture items will be loaded here -->
+        </div>
+      </section>
+
+      <section class="how-it-works">
+        <h2>How It Works</h2>
+        <div class="steps">
+          <div class="step">
+            <h3>Browse Listings</h3>
+            <p>Explore a wide range of furniture listings.</p>
+          </div>
+          <div class="step">
+            <h3>Choose Your Favorite</h3>
+            <p>Select furniture that meets your needs.</p>
+          </div>
+          <div class="step">
+            <h3>Make a Purchase</h3>
+            <p>Buy high-quality used furniture at affordable prices.</p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <p>&copy; 2023 EasyFurniture. All rights reserved.</p>
+    </footer>
+  </body>
+</html>
diff --git a/views/styles.css b/views/styles.css
@@ -0,0 +1,114 @@
+/* Reset some basic elements */
+body, h1, h2, h3, p, ul {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+/* Header and Navigation Styles */
+header {
+    background-color: #f8f9fa;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+}
+
+.nav-links, .auth-links {
+    list-style: none;
+    display: flex;
+}
+
+.nav-links li, .auth-links a {
+    margin-left: 20px;
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    padding: 2rem;
+    background-color: #e9ecef;
+}
+
+.hero h1 {
+    margin-bottom: 0.5rem;
+    font-size: 2.5rem;
+}
+
+.hero p {
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+}
+
+.btn {
+    display: inline-block;
+    background-color: #007bff;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+/* Featured Items */
+.featured-items {
+    padding: 2rem;
+}
+
+.items-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+}
+
+/* How It Works Section */
+.how-it-works {
+    background-color: #f8f9fa;
+    padding: 2rem;
+}
+
+.steps {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+}
+
+.step h3 {
+    margin-bottom: 0.5rem;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 1rem;
+    background-color: #343a40;
+    color: white;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .items-grid, .steps {
+        grid-template-columns: 1fr;
+    }
+
+    .nav-links li, .auth-links a {
+        margin-left: 10px;
+    }
+}