mohammadrajabraza · YAHYA-YOUNAS · Oct 9, 2021 · Oct 23, 2021
diff --git a/assignment_4/Cargo.toml b/assignment_4/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "assignment_4"
+version = "0.1.0"
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+actix-web = "2.0.0"
+actix-rt = "1.0.0"
+actix-files = "0.2.1"
diff --git a/assignment_4/src/main.rs b/assignment_4/src/main.rs
@@ -0,0 +1,58 @@
+use actix_web::{web, App, HttpResponse, HttpServer, Result};
+use actix_files as fs;
+
+#[actix_rt::main]
+async fn main() -> std::io::Result<()> {
+    HttpServer::new(|| {
+        App::new()
+            .service(fs::Files::new("/static", "./static").show_files_listing())
+            .service(web::resource("/").route(web::get().to(index)))
+            .service(web::resource("/products").route(web::get().to(products)))
+            .service(web::resource("/about").route(web::get().to(about)))
+            .service(web::resource("/contact").route(web::get().to(contact)))
+            .service(web::resource("/settings").route(web::get().to(settings)))
+    })
+    .bind("127.0.0.1:5000")?
+    .run()
+    .await  
+}
+
+async fn index() -> Result<HttpResponse> {
+    // This will render index.html in response
+    Ok(HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(include_str!("../static/index.html"))
+    )
+}
+
+async fn products() -> Result<HttpResponse> {
+    // This will render products.html in response
+    Ok(HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(include_str!("../static/products.html"))
+    )
+}
+
+async fn about() -> Result<HttpResponse> {
+    // This will render about.html in response
+    Ok(HttpResponse::Ok()
+        .content_type("text/html;image/jpg;image/png; charset=utf-8")
+        .body(include_str!("../static/about.html"))
+    )
+}
+
+async fn contact() -> Result<HttpResponse> {
+    // This will render contact.html in response
+    Ok(HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(include_str!("../static/contact.html"))
+    )
+}
+
+async fn settings() -> Result<HttpResponse> {
+    // This will render settings.html in response
+    Ok(HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(include_str!("../static/settings.html"))
+    )
+}
diff --git a/assignment_4/static/about.html b/assignment_4/static/about.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+    <link rel="stylesheet" href="/static/styles/header.css">
+    <link rel="stylesheet" href="/static/styles/footer.css">
+    <link rel="stylesheet" href="/static/styles/about.css">
+</head>
+<body>
+    <header>
+        <img src="/static/images/bg.png" alt="Background Image"/>
+        <nav>
+            <a href="/">Home</a>
+            <a href="/products">Products</a>
+            <a href="/about" class="active">About</a>
+            <a href="/contact">Contact</a>
+            <a href="/settings">Settings</a>
+        </nav>
+    </header>
+
+    <main>
+        <section id="main-content">
+            <img src="/static/images/about.jpg" alt="About Us"/>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore expedita facilis qui non minima tenetur iusto repellendus numquam libero quo corrupti cumque exercitationem veniam voluptatum quos, illo quibusdam autem esse.
+                Ab, reprehenderit. Ratione officia omnis commodi at! Cum beatae laborum quod cumque modi tempore magnam, commodi provident adipisci rem possimus libero illum dolore nemo dolorem voluptate fugit debitis ea iure!
+                Eligendi recusandae quas voluptate impedit mollitia vero facilis dolorum exercitationem quod omnis, saepe veniam rem quia doloremque quisquam illum itaque deserunt provident at, dolorem, consectetur iste laborum ipsa. Eius, sed.
+                <br> Distinctio necessitatibus eaque unde exercitationem velit fugit, possimus hic soluta! Magni, ullam fuga maiores explicabo itaque rerum! Facilis, repellat ipsam. Veniam quasi repellendus eaque labore fuga provident doloribus molestiae velit.
+                Debitis rem magnam harum eum beatae molestias, repudiandae odit quae laborum maxime facilis nesciunt molestiae saepe ratione maiores optio voluptas numquam a nemo explicabo. Vitae delectus repellat quas harum ratione!
+                Alias aliquam vitae, quod facere voluptatem corporis ea rerum nemo quo dolore, distinctio iste ad sit minus ratione sint perspiciatis? Dolorum, voluptatum. Totam quos voluptatibus atque aspernatur inventore vitae at.
+                Recusandae deleniti, fuga quibusdam vero aliquam corporis odit facilis repellat suscipit ducimus mollitia a quia eos necessitatibus quam doloremque illum ex soluta sapiente qui? Ipsa obcaecati nulla illum? Reiciendis, et!
+                Error, rerum vero? Illo, perferendis eaque voluptatem nihil impedit dolorem, temporibus nemo minus error exercitationem eum molestiae debitis est reiciendis quod vel nostrum nesciunt magnam, doloribus quas quaerat corrupti iusto.
+                <br> Dolor consequatur porro culpa quaerat vel dolores atque consectetur quia, fugit obcaecati nesciunt amet. Necessitatibus nihil ab ea consequatur, minima odio dicta harum enim porro aut, pariatur expedita reprehenderit eveniet.
+                Odio omnis eveniet natus suscipit. Quos ut numquam animi quis nihil doloremque minus ipsum consectetur consequatur, quidem ad, provident necessitatibus beatae veritatis totam velit recusandae cum error dolorum nostrum eos!
+            </p>
+        </section>
+    </main>
+
+    <footer>
+        <section class="copyrights">
+            <p>&copy; All Rights Reserved.</p>
+        </section>
+    </footer>
+</body>
+</html>
diff --git a/assignment_4/static/contact.html b/assignment_4/static/contact.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact</title>
+    <link rel="stylesheet" href="/static/styles/header.css">
+    <link rel="stylesheet" href="/static/styles/footer.css">
+    <link rel="stylesheet" href="/static/styles/contact.css">
+</head>
+<body>
+    <header>
+        <img src="/static/images/bg.png" alt="Background Image"/>
+        <nav>
+            <a href="/">Home</a>
+            <a href="/products">Products</a>
+            <a href="/about">About</a>
+            <a href="/contact" class="active">Contact</a>
+            <a href="/settings">Settings</a>
+        </nav>
+    </header>
+
+    <main>
+        <section id="main-content">
+            <img src="/static/images/contact.png " alt="Contact Us"/>
+        </section>
+
+        <section id="container">
+            <form action="/action_page.php">
+                <label for="fname">First Name</label>
+                <input type="text" id="fname" name="firstname" placeholder="Your name..">
+
+                <label for="lname">Last Name</label>
+                <input type="text" id="lname" name="lastname" placeholder="Your last name..">
+
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" placeholder="Your email..">
+
+                <label for="subject">Subject</label>
+                <textarea id="subject" name="subject" placeholder="Description.." style="height:200px"></textarea>
+
+                <input type="submit" value="Submit">
+              </form>
+        </section>
+    </main>
+
+    <footer>
+        <section class="copyrights">
+            <p>&copy; All Rights Reserved.</p>
+        </section>
+    </footer>
+</body>
+</html>
diff --git a/assignment_4/static/images/about.jpg b/assignment_4/static/images/about.jpg
diff --git a/assignment_4/static/images/appliances.jpg b/assignment_4/static/images/appliances.jpg
diff --git a/assignment_4/static/images/baby&toys.jpg b/assignment_4/static/images/baby&toys.jpg
diff --git a/assignment_4/static/images/bg.png b/assignment_4/static/images/bg.png
diff --git a/assignment_4/static/images/cars.jpg b/assignment_4/static/images/cars.jpg
diff --git a/assignment_4/static/images/computers.jpg b/assignment_4/static/images/computers.jpg
diff --git a/assignment_4/static/images/contact.png b/assignment_4/static/images/contact.png
diff --git a/assignment_4/static/images/cosmetics.jpg b/assignment_4/static/images/cosmetics.jpg
diff --git a/assignment_4/static/images/item-1.jpg b/assignment_4/static/images/item-1.jpg
diff --git a/assignment_4/static/images/item-2.jpg b/assignment_4/static/images/item-2.jpg
diff --git a/assignment_4/static/images/item-3.jpg b/assignment_4/static/images/item-3.jpg
diff --git a/assignment_4/static/images/item-4.jpg b/assignment_4/static/images/item-4.jpg
diff --git a/assignment_4/static/images/item-5.jpg b/assignment_4/static/images/item-5.jpg
diff --git a/assignment_4/static/images/logo.jpg b/assignment_4/static/images/logo.jpg
diff --git a/assignment_4/static/images/settings.jpg b/assignment_4/static/images/settings.jpg
diff --git a/assignment_4/static/images/sports.jpg b/assignment_4/static/images/sports.jpg
diff --git a/assignment_4/static/index.html b/assignment_4/static/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Homepage</title>
+    <link rel="stylesheet" href="/static/styles/header.css">
+    <link rel="stylesheet" href="/static/styles/categories.css">
+    <link rel="stylesheet" href="/static/styles/footer.css">
+    <link rel="stylesheet" href="/static/styles/index.css">
+
+</head>
+<body>
+    <header>
+        <img src="/static/images/bg.png" alt="Background Image"/>
+        <nav>
+            <a href="/" class="active">Home</a>
+            <a href="/products">Products</a>
+            <a href="/about">About</a>
+            <a href="/contact">Contact</a>
+            <a href="/settings">Settings</a>
+        </nav>
+    </header>
+
+    <main>
+        <section id="categories">
+            <ul>
+                <li><a href="#">Sports</a></li>
+                <li><a href="#">Cosmetics</a></li>
+                <li><a href="#">Automotives</a></li>
+                <li><a href="#">Baby & Toys</a></li>
+                <li><a href="#">Electronic Devices</a></li>
+                <li><a href="#">TV & Home Appliances</a></li>
+            </ul>
+        </section>
+
+        <section id="main-content">
+            <article>
+                <img src="/static/images/sports.jpg" alt="Sports"/>
+                <h3>Sports</h3>
+                <hr/>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit similique perspiciatis, natus iure vitae hic ea dicta error inventore assumenda eligendi molestias! Voluptatibus, quae quaerat. Consequuntur necessitatibus dolor culpa veniam.</p>
+            </article>
+            <article>
+                <img src="/static/images/cosmetics.jpg" alt="Cosmetics"/>
+                <h3>Cosmetics</h3>
+                <hr/>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit similique perspiciatis, natus iure vitae hic ea dicta error inventore assumenda eligendi molestias! Voluptatibus, quae quaerat. Consequuntur necessitatibus dolor culpa veniam.</p>
+            </article>
+            <article>
+                <img src="/static/images/cars.jpg" alt="Automotives"/>
+                <h3>Automotives</h3>
+                <hr/>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit similique perspiciatis, natus iure vitae hic ea dicta error inventore assumenda eligendi molestias! Voluptatibus, quae quaerat. Consequuntur necessitatibus dolor culpa veniam.</p>
+            </article>
+            <article>
+                <img src="/static/images/baby&toys.jpg" alt="Baby & Toy"/>
+                <h3>Baby & Toys</h3>
+                <hr/>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit similique perspiciatis, natus iure vitae hic ea dicta error inventore assumenda eligendi molestias! Voluptatibus, quae quaerat. Consequuntur necessitatibus dolor culpa veniam.</p>
+            </article>
+            <article>
+                <img src="/static/images/computers.jpg" alt="Electronic Devices"/>
+                <h3>Electronic Devices</h3>
+                <hr/>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit similique perspiciatis, natus iure vitae hic ea dicta error inventore assumenda eligendi molestias! Voluptatibus, quae quaerat. Consequuntur necessitatibus dolor culpa veniam.</p>
+            </article>
+            <article>
+                <img src="/static/images/appliances.jpg" alt="TV & Home Appliances"/>
+                <h3>TV & Home Appliances</h3>
+                <hr/>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit similique perspiciatis, natus iure vitae hic ea dicta error inventore assumenda eligendi molestias! Voluptatibus, quae quaerat. Consequuntur necessitatibus dolor culpa veniam.</p>
+            </article>
+        </section>
+    </main>
+
+    <footer>
+        <section class="copyrights">
+            <p>&copy; All Rights Reserved.</p>
+        </section>
+    </footer>
+
+</body>
+</html>
diff --git a/assignment_4/static/products.html b/assignment_4/static/products.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Products</title>
+    <link rel="stylesheet" href="/static/styles/header.css">
+    <link rel="stylesheet" href="/static/styles/categories.css">
+    <link rel="stylesheet" href="/static/styles/footer.css">
+    <link rel="stylesheet" href="/static/styles/products.css">
+</head>
+<body>
+    <header>
+        <img src="/static/images/bg.png" alt="Background Image"/>
+        <nav>
+            <a href="/">Home</a>
+            <a href="/products" class="active">Products</a>
+            <a href="/about">About</a>
+            <a href="/contact">Contact</a>
+            <a href="/settings">Settings</a>
+        </nav>
+    </header>
+
+    <main>
+        <section id="categories">
+            <ul>
+                <li><a href="#">Sports</a></li>
+                <li><a href="#">Cosmetics</a></li>
+                <li><a href="#">Automotives</a></li>
+                <li><a href="#">Baby & Toys</a></li>
+                <li><a href="#">Electronic Devices</a></li>
+                <li><a href="#">TV & Home Appliances</a></li>
+            </ul>
+        </section>
+
+        <section id="main-content">
+            <h1>Top Items</h1>
+            <div class="product-items">
+                <article>
+                    <img src="/static/images/item-1.jpg" alt="Sports"/>
+                    <div class="product-details">
+                        <h3>Headphones <br> Rs. 800</h3><br>
+                        <button class="add-to-cart-btn">Add To Cart</button>
+                    </div>
+                </article>
+                <article>
+                    <img src="/static/images/item-2.jpg" alt="Cosmetics"/>
+                    <div class="product-details">
+                        <h3>Laptop <br> Rs. 74000</h3><br>
+                        <button class="add-to-cart-btn">Add To Cart</button>
+                    </div>                
+                </article>
+                <article>
+                    <img src="/static/images/item-3.jpg" alt="Automotives"/>
+                    <div class="product-details">
+                        <h3>Walls <br> Rs. 1800</h3><br>
+                        <button class="add-to-cart-btn">Add To Cart</button>
+                    </div>
+                </article>
+                <article>
+                    <img src="/static/images/item-4.jpg" alt="Baby & Toy"/>
+                    <div class="product-details">
+                        <h3>Laptop <br> Rs. 91000</h3><br>
+                        <button class="add-to-cart-btn">Add To Cart</button>
+                    </div>              
+                </article>
+                <article>
+                    <img src="/static/images/item-5.jpg" alt="Electronic Devices"/>
+                    <div class="product-details">
+                        <h3>Cards <br> Rs. 2000</h3><br>
+                        <button class="add-to-cart-btn">Add To Cart</button>
+                    </div>                
+                </article>
+                <article>
+                    <img src="/static/images/appliances.jpg" alt="Washing Machine"/>
+                    <div class="product-details">
+                        <h3>Washing Machine <br> Rs. 22000</h3><br>
+                        <button class="add-to-cart-btn">Add To Cart</button>
+                    </div>
+                </article>
+            </div> 
+        </section>
+    </main>
+
+    <footer>
+        <section class="copyrights">
+            <p>&copy; All Rights Reserved.</p>
+        </section>
+    </footer>
+
+</body>
+</html>