WebTheoryAss3(020,021)

Comsats University Islamabad Attock
Campus
Department of Computer Science
Lab Assignment no: 03
Course title: WebTechnologies
Submitted by:
Nimbra bibi(Fa21-bse-020)
Wasifa Kanwal(Fa21-bse-021)
Submitted to: Mam Faiza Khan
Date: 12th Dec. 2024

Project Tile: Online grocery shopping website
Index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Online Shop</title>
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
<script src="script.js" defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>

<div class="top-bar1">

<div class="search-box">
<input type="text" placeholder="Search..." />
</div>


<p class="shipping-info">Nationwide Shipping</p>


<div class="auth-buttons">
<a href="/GroceryStore/signup" class="auth-button">Sign Up</a>
<a href="/GroceryStore/signin" class="auth-button">Login</a>
</div>
</div>


<header >
<div class="logo"><img src="{{asset('assets/logo (2).png')}}"
alt="Logo"></div>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="/GroceryStore/about">About</a></li>
<li><a href="/GroceryStore/shop">Shop</a></li>
<li><a href="/GroceryStore/conatct">Contact</a></li>
</ul>
</nav>
<div class="icons">
<a href="/GroceryStore/conatct"><img
src="https://img.icons8.com/ios/50/000000/contact-card.png" alt="Contact"></a>
<a href="/GroceryStore/cart"><img
src="https://img.icons8.com/ios/50/000000/shopping-cart--v1.png" alt="Cart"></a>
</div>
</header>

<div class="slider">
<div class="slide"><img src=" {{ asset('assets/slide/veg.jfif') }}" alt="Slide
1"></div>
<div class="slide"><img src="{{ asset('assets/slide/cak.jfif') }}"alt="Slide
2"></div>
<div class="slide"><img src="{{ asset('assets/slide/drink.jfif') }}" alt="Slide
3"></div>
<div class="controls">
<button id="playBtn" class="control-btn">
<span class="material-icons">play_arrow</span>
</button>
<button id="pauseBtn" class="control-btn">
<span class="material-icons">pause</span>
</button>
</div>
</div>


<section class="new-arrivals">
<h2>Newest Arrivals</h2>
<div class="product-row">
<div class="product-card">
<img src="{{asset('assets/shop/product-07/04.jpg')}}" alt="Horlicks">
<p>Horlicks</p>
</div>
<img src="{{asset('assets/shop/product-02/01.webp')}}" alt="Dates">
<p>Dates</p>
</div>
<img src="{{asset('assets/shop/product-06/04.jpg')}}" alt="Choclate">
<p>Choclate</p>
</div>
</div>
</section>


<section class="best-selling">
<h2>Best Selling</h2>
<img src="{{asset('assets\shop\product-02\03.webp')}}" alt="Best Selling
1">
<p>Ajwa Khajoor</p>
</div>
<img src="{{asset('assets/shop/product-05/01.webp')}}" alt="Best Selling
2">
<p>Dove Soap</p>
</div>
<img src="{{asset('assets/shop/product-06/01.jpeg')}}" alt="Best Selling
3">
<p>Choclate</p>
</div>
</div>
</section>


<section class="info-section">
<div class="info-column">
<img src="{{asset('assets/logo (2).png')}}" alt="Logo" class="footer-
logo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
quo voluptatum officiis amet laborum cum quod totam, consequatur earum suscipit?</p>
</div>
<h4>Featured</h4>
<ul>
<li>Home & Cleaning</li>
<li>Beauty Products</li>
<li>Kitchen Appliances</li>
<li>Health Products</li>
</ul>
</div>
<h4>Our Policies</h4>
<ul>
<li>Privacy Policy</li>
<li>Shipping Policy</li>
<li>Return Policy</li>
<li>Refund Policy</li>
</ul>
</div>
<h4>Contact Us</h4>
<p>+92 034-567890</p>
<p>info@example.com</p>
<p>Attock 1216</p>
<div class="social-icons">
<a href="#"><img src="https://img.icons8.com/ios/30/000000/facebook-
new.png" alt="Facebook"></a>
<a href="#"><img
src="https://img.icons8.com/ios/30/000000/instagram-new.png" alt="Instagram"></a>
<a href="#"><img
src="https://img.icons8.com/ios/30/000000/twitter.png" alt="Twitter"></a>
</div>
</div>
</section>

<div class="top-bar">
<p>Phone: +123-456-7890 || Address: 123 Main St, City ||
Email: info@example.com </p>
</div>
</body>
</html>
Shop.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us - My Online Shop</title>
</head>
<body>
</div>


</div>
</div>

<header>
alt="Logo"></div>
<ul>
<li><a href="/GroceryStore/index">Home</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
<div class="icons">
</div>
</header>

<h2 style="margin:10px; padding: 10px;">Our Products</h2><br>
<section class="shop-section">

<h3>Oil & Masala</h3>
<img src="{{asset('assets/shop/product-11/02.jpg')}}" alt="Product 1">
<p>Oil Product 1</p>
<div class="rating">★ ★ ★ ★</div>
<div class="price">₨ 1,000</div>
<button class="add-to-cart">Add to Cart</button>
</div>
<img src="{{asset('assets/shop/product-10/02.jpeg')}}" alt="Product 2">
</div>
</div>
</div>


<h3>Beverages</h3>
<p>Beverage Product 1</p>
</div>
<img src="{{asset('assets/shop/product-04/03.webp')}}" alt="Product 5">
</div>
</div>
</div>


<h3>Food Grains</h3>
<img src="{{asset('assets/shop/product-12/02.jpeg')}}" alt="Product 7">
<p>Food Grain Product 1</p>
</div>
</div>
</div>
</div>


<h3>Fruits & Veggies</h3>
<img src="{{asset('assets\shop\product-11\01.jpeg')}}" alt="Product 10">
<p>Fruit Product 1</p>
<div class="price">₨ 500</div>
</div>
<img src="{{asset('assets\shop\product-11\02.jpg')}}" alt="Product 11">
<p>Veggie Product 1</p>
</div>
<p>Veggie Product 2</p>
</div>
</div>


<h3>Bakery</h3>
<p>Bakery Product 1</p>
</div>
<img src="{{asset('assets\shop\product-09\04.jpeg')}}" alt="Product 14">
<p>Bakery Product 2</p>
</div>
<p>Meat Product 1</p>
</div>
</div>


<h3>Snacks</h3>
<img src="{{asset('assets\shop\product-02\02.webp')}}" alt="Product 15">
<p>Snack Product 1</p>
</div>
<p>Snack Product 2</p>
</div>
<img src="{{asset('assets\shop\product-01\nestle-nescafe-classic-
instant-coffee-jar-50-gm (3).webp')}}" alt="Product 17">
</div>
</div>


<h3>Beauty</h3>
</div>
<p>Fish Product 1</p>
</div>
</div>
</div>
</section>

<img src="{{asset('assets/logo (2).png')}}" alt="Logo" class="footer-logo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quo
voluptatum officiis amet laborum cum quod totam, consequatur earum suscipit?</p>
</div>
<h4>Featured</h4>
<ul>
</ul>
</div>
<ul>
</ul>
</div>
<h4>Contact Us</h4>
<p>+92 034-567890</p>
<p>Attock 1216</p>
<a href="#"><img src="https://img.icons8.com/ios/30/000000/instagram-
new.png" alt="Instagram"></a>
<a href="#"><img src="https://img.icons8.com/ios/30/000000/twitter.png"
alt="Twitter"></a>
</div>
</div>
</section>

<footer>
</div>
</footer>
</body>
</html>
Contact.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us - My Online Shop</title>
</head>
<body>
</div>


</div>
</div>

<header>
alt="Logo"></div>
<ul>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="icons">
</div>
</header>


<section class="contact-section">
<h2>Contact Us</h2>


<div class="map-section">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26594.921354012626!2d72.6
0579931083984!3d33.569866800000014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1
s0x38df759c8e2df507%3A0x32b6ceeec0076f13!2sTaqwa%20Mart%2C%20Fateh%20Jang!5e0!3m2!1s
en!2s!4v1727367821727!5m2!1sen!2s"
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"></iframe>
</div>


<div class="form-section">
<div class="form-column">
<form>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name" required>
<label for="last-name">Last Name</label>

<input type="text" id="last-name" name="last-name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" required>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required>
</form>
</div>
<div class="form-column">
<label for="message">Message</label>
<textarea id="message" name="message" rows="18 "
required></textarea>
<button class="send-message">Send Message</button>
</div>
</div>
</section>

logo">
</div>
<h4>Featured</h4>
<ul>
</ul>
</div>
<ul>
</ul>
</div>
<h4>Contact Us</h4>
<p>+92 034-567890</p>
<p>Attock 1216</p>
<a href="#"><img
<a href="#"><img
</div>
</div>
</section>

<footer>
</div>
</footer>
</body>
</html>
About.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us - My Online Shop</title>
</head>
<body>
</div>


</div>
</div>

<header>
alt="Logo"></div>
<ul>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="icons">
</div>
</header>


<section class="about-section">
<h2>About Us</h2>
<p>Welcome to My Online Shop! We are dedicated to providing our customers
with the best shopping experience possible. Our team works tirelessly to curate a
wide range of products that cater to all your needs, ensuring quality and value with
every purchase.</p>
<p>Founded in [Year], My Online Shop has grown to become a trusted name in

the e-commerce industry. Our commitment to customer satisfaction is unmatched, and
we strive to build lasting relationships with our customers by offering exceptional
service and support.</p>
<p>We understand the challenges of grocery shopping in today's fast-paced
world. That's why we offer a wide range of products to meet your daily needs, from
fresh fruits and vegetables to household essentials and personal care items. We work
hard to ensure that all of our products are sourced from trusted suppliers and are
of the highest quality.</p>

logo">
</div>
<h4>Featured</h4>
<ul>
</ul>
</div>
<ul>
</ul>
</div>
<h4>Contact Us</h4>
<p>+92 034-567890</p>
<p>Attock 1216</p>
<a href="#"><img
<a href="#"><img
</div>
</div>
</section>

<footer>
</div>
</footer>
</body>
</html>
Signin.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign In - My Online Shop</title>
<script src="script.js" defer></script>
</head>
<body>
</div>


</div>
</div>

<header>
alt="Logo"></div>
<ul>
</ul>
</nav>
<div class="icons">
</div>
</header>


<section class="sign-in-section">
<h2>Sign In</h2>
<form class="sign-in-form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<label for="password">Password:</label>
<input type="password" id="password" required>
</div>
<button type="submit" class="submit-button">Sign In</button>
</div>
</form>
</section>

<footer>
</div>
</footer>
</body>
</html>
Signup.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up - My Online Shop</title>
</head>
<body>
</div>

</div>
</div>

<header>
alt="Logo"></div>
<ul>
</ul>
</nav>
<div class="icons">
</div>
</header>


<section class="sign-up-section">
<h2>Create an Account</h2>
<form class="sign-up-form" id="signUpForm">


<fieldset>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" required>
</div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" required>
</div>
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<label for="age">Age:</label>
<input type="number" id="age" min="0" required>
</div>
<label for="gender">Gender:</label>
<select id="gender" required>
<option value="" disabled selected>Select your
gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<label for="income-range">Income Range:</label>
<select id="income-range" required>
<option value="" disabled selected>Select your income
range</option>
<option value="below-20k">Below Rs20,000</option>
<option value="20k-50k">Rs20,000 - Rs50,000</option>
<option value="50k-100k">Rs50,000 - Rs100,000</option>
<option value="above-100k">Above Rs100,000</option>
</select>
</div>
</fieldset>


<fieldset>
<label for="shopping-frequency">Shopping Frequency:</label>
<select id="shopping-frequency" required>
<option value="" disabled selected>Select frequency</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="annually">Annually</option>
</select>
</div>
<label for="location">Location:</label>
<input type="text" id="location" required>
</div>
</fieldset>


<fieldset>
<label for="interests">Interests (comma-separated):</label>
<input type="text" id="interests" placeholder="e.g., Cooking,
Fitness ,Health">
</div>
<label for="lifestyle">Lifestyle Choices:</label>
<select id="lifestyle">
<option value="" disabled selected>Select your
lifestyle</option>
<option value="bakery">Bakery Products</option>
<option value="vegetarian">Vegetarian</option>
<option value="health-conscious">Health-conscious</option>
<option value="junk-food">Junk Food</option>
<option value="none">None</option>
</select>
</div>
<label for="dietary-restrictions">Dietary Restrictions:</label>
<input type="text" id="dietary-restrictions" placeholder="e.g.,
Gluten-free, Nut allergy">
</div>
</fieldset>


<fieldset>
<label for="password">Password:</label>
<input type="password" id="password" required>
</div>
<button type="submit" class="submit-button">Sign Up</button>
<p>If you already have an account, click <span style="text-
decoration:underline; color: rgb(35, 35, 133);"><a href="/GroceryStore/signin">Sign
In</a></span></p>
</div>
</fieldset>
</form>
</section>

<footer>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Web.php:
<?php
use Illuminate\Support\Facades\Route;
//Route::get('/student', 'App\Http\Controllers\AppController@index');
Route::get('GroceryStore/index', 'App\Http\Controllers\AppController@Home');
Route::get('GroceryStore/cart', 'App\Http\Controllers\AppController@cart');
Route::get('GroceryStore/signin', 'App\Http\Controllers\AppController@signin');
Route::get('GroceryStore/signup', 'App\Http\Controllers\AppController@signup');
Route::get('GroceryStore/shop', 'App\Http\Controllers\AppController@shop');
Route::get('GroceryStore/about', 'App\Http\Controllers\AppController@about');
Route::get('GroceryStore/conatct', 'App\Http\Controllers\AppController@contact');
AppController.php:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class appController extends Controller
{
//
public function Home () {
return view('GroceryStore/index');}
public function cart () {
return view('GroceryStore/cart');
}
public function about () {
return view('GroceryStore/about');
}
public function contact () {
return view('GroceryStore/conatct');
}
public function shop () {
return view('GroceryStore/shop');
}
public function signin() {
return view('GroceryStore/signin');
}
public function signup () {
return view('GroceryStore/signup');
}
Styles:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
/* Top Bar Styling */
.top-bar1 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
background-color: #28a745; /* Green background */
font-family: Arial, sans-serif;
font-size: 14px;
color: #fff;
}
/* Search Box Styling */
.search-box input {
display: flex;
width: 100%;
margin-top: 2px;
font-size: 14px;
padding-left: 5px;
color: #333;
}
/* Nationwide Shipping Styling */

.shipping-info {
font-weight: bold;
font-size: 16px;
flex: 1;
text-align: center;
color: #fff; /* White text */
}
/* Auth Buttons Styling */

.auth-buttons {
display: flex;
gap: 10px;
}
.auth-button {
text-decoration: none;
color: #fff;
background-color: #c22b2b; /* Blue background for buttons */
padding: 5px 15px;
border-radius: 5px;
font-size: 14px;
height: 20px;
font-weight: bold;
transition: background-color 0.3s;
}
.auth-button:hover {
background-color: #c44636; /* Darker blue on hover */
}
/* Top Bar */
.top-bar {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
font-size: 14px;
margin-right: 5px ;
}
/* Header Styles */
header {
display: flex;
margin-top: 0%;
padding: 10px 50px; /* Reduced padding */
background-color: #f8f8f8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.logo img {
height: 60px;
.navbar ul {
list-style: none;
display: flex;
gap: 20px;
}
.navbar ul li a {
padding: 10px 15px;
position: relative;
}
.navbar ul li a:hover {
color: #007BFF; /* Change color on hover */
}
.icons a {
margin-left: 15px;
}
.icons img {
width: 20px;
}
/* Slider Styles */
.slider {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slider .slide {
width: 100%;
height: 100%;
animation: slide 15s infinite; /* Simple slide animation */

}
.slider .slide img {

width: 100%;
height: 100%;
object-fit: cover;
}
/* Controls Styles */
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex; /* Use flexbox to align items */
gap: 10px; /* Space between buttons */
}
.control-btn {
width: 50px; /* Make buttons circular */
height: 50px; /* Match width and height */
border: none; /* Remove default button border */
border-radius: 50%; /* Circular shape */
display: flex; /* Center icon inside the button */
justify-content: center;
background-color: #060706; /* Background color for buttons */
color: white; /* Icon color */
cursor: pointer; /* Pointer cursor on hover */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
}
.control-btn:hover {
background-color: #0056b3; /* Slightly darker on hover */
}
.control-btn .material-icons {
font-size: 24px; /* Icon size */
}
/* New Arrivals and Best Selling Sections */

section {
padding: 50px 50px;
}
h2 {
font-size: 28px;
margin-bottom: 20px;
}
.product-card {
display: inline-block;
width: 25%;
padding: 20px;
text-align: center;
margin: 20px;
}
.product-card img {
width: 80%;
height: 200px;
object-fit: cover;
}
.product-card p {
margin-top: 10px;
}
.shop-section {
padding: 50px;
display: flex;
flex-wrap: wrap;
}
.product-card {
width: 23%; /* Four cards in a row */
padding: 15px;
text-align: center;
}
.product-card img {
width: 100%;
height: auto;
object-fit: cover;
}
.rating {
color: gold; /* Gold stars for rating */
}
.price {
font-weight: bold;
margin-top: 10px;
}
.add-to-cart {
background-color: #28a745; /* Green button */
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
margin-top: 10px;
}
.add-to-cart:hover {
background-color: #218838; /* Darker green on hover */
}
/* Contact Section Styles */

.contact-section {
padding: 50px;
text-align: center;
}
.contact-section h2 {
font-size: 28px;
}
.map-section {
}
.form-section {
display: flex;
}
.form-column {
flex: 1;
margin: 0 20px; /* Space between columns */
}
.form-column label {
display: block;
margin-bottom: 5px;
}
.form-column input,
.form-column textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.send-message {
background-color: #28a745; /* Green button */
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
}
.send-message:hover {
background-color: #218838; /* Darker green on hover */
}
/* Cart Section Styles */
.cart-section {
padding: 50px;
text-align: center;
}
.cart-section h2 {
font-size: 28px;
}
.cart-items {
display: flex;
flex-direction: column;
gap: 20px;
}
.cart-item {
display: flex;
width: 80%;
padding: 15px;
border-radius: 5px;
}
.cart-item img {
width: 100px;
height: auto;
object-fit: cover;
}
.item-details {
flex: 1;
padding: 0 15px;
text-align: left;
}
.item-details h4 {
margin: 0;
}
.price {
font-weight: bold;
margin: 5px 0;
}
.quantity {
width: 60px;
padding: 5px;
border-radius: 4px;
}
.remove-item {
background-color: #dc3545; /* Red */
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
}
Output:

WebTheoryAss3(020,021)

Uploaded by

Copyright:

Available Formats

WebTheoryAss3(020,021)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebTheoryAss3(020,021)

Uploaded by

Copyright:

Available Formats

Comsats University Islamabad Attock

Department of Computer Science

Lab Assignment no: 03

Course title: WebTechnologies

Submitted to: Mam Faiza Khan

Date: 12th Dec. 2024

<label for="last-name">Last Name</label>

<p>Founded in [Year], My Online Shop has grown to become a trusted name in

/* Search Box Styling */

/* Nationwide Shipping Styling */

/* Auth Buttons Styling */

animation: slide 15s infinite; /* Simple slide animation */

.slider .slide img {

/* New Arrivals and Best Selling Sections */

/* Contact Section Styles */

You might also like