Scribd
Upload
13 views24 pages

APP PROJECT Timepice

The document outlines a web project titled 'Timepiece', which is a watch website featuring various sections such as Home, Products, New Arrivals, Offers, and Collection. It includes HTML and CSS code for the website's layout, navigation, and styling, showcasing products like the Blue Omega SA and Quartz Casio watches. The design incorporates responsive elements and a footer crediting the designer, Dhruv Gawde.

Uploaded by

dhruvzack0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views24 pages

APP PROJECT Timepice

The document outlines a web project titled 'Timepiece', which is a watch website featuring various sections such as Home, Products, New Arrivals, Offers, and Collection. It includes HTML and CSS code for the website's layout, navigation, and styling, showcasing products like the Blue Omega SA and Quartz Casio watches. The design incorporates responsive elements and a footer crediting the designer, Dhruv Gawde.

Uploaded by

dhruvzack0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Name:Dhruv Gawde

Sybsc Ds
Roll no:47

APP PROJECT:
Timepiece(watch website):

First page Html:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Timepiece Website</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<!-- ---Section One--- -->


<section class="section-one section" id="Home">
<nav>
<div class="logo">Timepiece.</div>
<ul class="navlinks" id="navlinks">
<li>
<a href="#Home" class="active">Home</a>
</li>
<li>
<a href="#Arivals">Arivals</a>
</li>
<li>
<a href="#Offers">Offers</a>
</li>
<li>
<a href="#Product">Product</a>
</li>
<li>
<a href="#Collection">Collection</a>
</li>
</ul>
<div class="hamburger" id="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<header>
<div class="image-container">
<img src="photos/omega blue.png" class="header-image">
</div>
<div class="content">
<h1 class="header-heading">Pure Luxury</h1>
<h2 class="product-name">Blue Omega SA</h2>
<p class="header-pricing">$3,789</p>
<di class="btn-contanier">
<a href="cart.html"> <button class="primary-
btn">Discover</button></a>
<button class="secondary-btn">Add to cart</button>
</div>
</div>
</header>

</section>

<!---Section Two--- -->


<section class="section-two section" id="Product">
<div class="section-two-container">
<div class="section-two-inner-container">
<div class="content">
<h1 class="section-two-heading">Quartz Casio</h1>
<p class="section-two-part">Lorem ipsum dolor sit
amet consectetur adipisicing elit. Odio sequi sint voluptatibus aut
eligendi? Nostrum natus cum hic sunt id impedit quidem quia atque
explicabo.</p>
<p class="section-two-pricing">$ 3,899</p>
<button class="section-two-btn">Order Now</button>
</div>
<div class="image-container">
<img src="photos/product watch.png" class="section-
two-image">
</div>

</div>

</div>

</section>

<!-- ---SEction Three--- -->


<section class="section-three section" id="Arivals">
<h1 class="section-heading">New Arivals</h1>
<div class="card-container">

<div class="card">
<img src="photos/Tissot.png" class="card-image">
<h2>Tissot</h2>
<p class="card-pricing">$ 3,988</p>
<button class="secondary-btn">Discover</button>
</div>

<div class="card">
<img src="photos/Klassc.png" class="card-image">
<h2>Klassc</h2>
<p class="card-pricing">$ 3,988</p>
<button class="secondary-btn">Discover</button>
</div>

<div class="card">
<img src="photos/citizen.png" class="card-image">
<h2>Citizen</h2>
<p class="card-pricing">$ 3,988</p>
<button class="secondary-btn">Discover</button>
</div>

</div>
</section>

<!-- ---Section Four--- -->


<section class="section-four section" id="Offers">
<div class="section-four-container">
<div class="content">
<h1 class="section-four-offers">50% Off</h1>
<h1 class="section-four-heading">Special
Collection</h1>
<button class="section-four-btn">Shop Now</button>
</div>
</div>

</section>

<!-- ---section five--- -->


<section class="section-five section" id="Collection">
<h1 class="section-heading">Collection</h1>
<div class="grid-card-container">
<div class="grid-card" Collection="Rado"></div>
<div class="grid-card" Collection="Geneve"></div>
<div class="grid-card" Collection="Tissot"></div>
<div class="grid-card" Collection="Cartier"></div>
<div class="grid-card" Collection="Omega"></div>
<div class="grid-card" Collection="Fitron"></div>
</div>
</section>

<!-- ---FOOTER--- -->


<footer>
<p class="footer-txt"> Designed by DG</p>
</footer>

<script src="main.js"></script>
</body>
</html>
CSS part:

@import url('https://fonts.googleapis.com/css2?
family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700
;1,900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap')
;
@import url('https://fonts.googleapis.com/css2?
family=Grey+Qo&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Merriweather", serif;
}
:root{
--dark-blue: #0A1D3C;
--light-grey: #E5E5E5;
--white: #FFF;
--light-peach: #F9E3DC;
--dark-grey: #3E3F43;
--light-black: #1D1D1D;
}
html{
scroll-behavior: smooth;
}

/* ---section one--- */
.section{
min-height: 100vh;
width: 100%;
}
nav{
width: 80%;
height: 13vh;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;

}
header{
width: 80%;
height: calc(100vh - 13vh);
display: flex;
align-items: center;
justify-content: space-evenly;
margin: auto;
}
.navlinks{
display: flex;
}
.header-image{
width: 40rem;
}
.logo{
font-size: 3.8rem;
color: var(--dark-blue);
font-family: "Grey Qo", cursive;
}
.navlinks li{
list-style: none;
}
.navlinks li a{
text-decoration: none;
margin-left: 2.5rem;
color: var(--dark-grey);
font-size: 1rem;
letter-spacing: .03rem;
position: relative;

}
.header-heading{
font-size: 5rem;
position: relative;
}
.header-heading::before{
content: "New";
position: absolute;
top: -64px;
color: var(--dark-blue);
font-family: "Grey Qo", cursive;

}
.product-name{
font-size: 1.7rem;
}
.header-pricing{
font-size: 1.5rem;
margin: 1rem 0;
}
.btn-container{
display: flex;
margin-top: 2rem;
}
.primary-btn, .secondary-btn{
font-size: 1.1rem;
border: none;
padding: 1rem 1.7rem;
transition: transform .5s ease-in-out;
}
.primary-btn{
background: var(--light-grey);
}
.secondary-btn{
background: var(--dark-blue);
color: var(--white);
transform: scale(1.1);
}
.primary-btn:hover, .section-two-btn:hover, .section-four-btn:hover{
transform: scale(1.1);
cursor: pointer;
}
.secondary-btn:hover{
transform: scale(1);
}
.navlinks li a::after, .navlinks li .active::after{
content: "";
background: var(--dark-grey);
position: absolute;
height: .15rem;
width: 100%;
left: 0;
bottom: -5px;
transform: scaleX(0);
transition: transform .5s ease;
transform-origin: right;

}
.navlinks li a:hover::after, .naclinks li .active::after{
transform: scaleX(1);
transform-origin: left;
}
.link{
background: var(--dark-grey);
width: 2.5rem;
height: .2rem;
margin: .38rem;
}
.hamburger{
cursor: pointer;
display: none;
}

/* ---Section Two--- */
.section-two{
display: flex;
align-items: center;
}
.section-two-container{
background: var(--light-peach);
width: 100%;
height: 50vh;
transform: skewY(-6deg);
}
.section-two-image{
width: 28rem;

}
.section-two-inner-container{
transform: skewY(6deg);
width: 80%;

}
.section-two-container, .section-two-inner-container{
display: flex;
justify-content: center;
align-items: center;
}
.section-two-heading{
color: var(--dark-grey);
font-size: 4rem;
}
.section-two-part{
font-size: 1rem;
color: var(--dark-grey);
line-height: 1.8rem;
max-width: 80%;
margin: auto;

}
.section-two-pricing{
font-size: 1.6rem;
color: var(--dark-grey);
margin: .9rem 0;
}
.section-two-btn{
padding: .9rem 1.7rem;
border: .1rem solid var(--light-black);
font-size: 1.1rem;
background: transparent;
transition: transform .5s ease;

/* ---SEction Three--- */
.section-heading{
font-size: 2.5rem;
text-align: center;
margin-bottom: 1.2rem;

}
.card-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
gap: 3rem;

}
.card-image{
width: 20rem;
}
.card{
background: var(--light-grey);
padding: 2rem;
}
.card-pricing{
font-size: 1.2rem;
margin-top: .2rem;
margin-bottom: 1.2rem;
}

/* ---Setion Four--- */
.section-four{
display: flex;
align-items: center;
}
.section-four-container{

width: 100%;
height: 70vh;
background-image: url("photos/watch.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.section-four-offers{
font-size: 4rem;
color: var(--light-peach);
font-family: "Grey Qo", cursive;
text-transform: uppercase;
}
.section-four-heading{

font-size: 4rem;
color: var(--white);
margin-bottom: 1rem;

}
.section-four-btn{
font-size: 1.1rem;
padding: 1rem 1.7rem;
background: var(--light-peach);
border: none;
transition: transform .5s ease;
}
.section-four-container::before{
content: "";
background: rgba(0, 0, 0, 0.544);
position: absolute;
inset: 0;
}
.section-four-container .content{
z-index: 5;
}

/* ---section five--- */
.grid-card-container{
width: 60%;
height: 80vh;
margin: auto;
display: grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(2 , 1fr);
gap: 1.2rem;
grid-auto-rows: 15rem;
}
.grid-card{
background: var(--light-grey);
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.grid-card:nth-child(1){
grid-row: 1/4;
background-image: url("photos/rado\ watch.jpg");

}
.grid-card:nth-child(2){
grid-row: 1/3;
background-image: url("photos/geneve\ watch.jpg");
}
.grid-card:nth-child(3){
grid-row: 3/4;
background-image: url("photos/tissot\ watch.jpg");
}

.grid-card:nth-child(4){
background-image: url("photos/cartier\ watch.jpg");

}
.grid-card:nth-child(5){
background-image: url("photos/omega\ watch.jpg");

.grid-card:nth-child(6){
background-image: url("photos/fitron\ watch.jpg");

.grid-card::before{
content: "";
position: absolute;
background: rgba(0, 0, 0, 0.544);
inset: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 1s ease-in-out;
}
.grid-card:hover::before{
transform: scaleX(1);
transform-origin: left;
}
.grid-card::after{
content: attr(collection);
position: absolute;
text-transform: uppercase;
background: var(--light-peach);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem 1.7rem;
font-size: 1.1rem;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out;

}
.grid-card:hover::after{
opacity: 1;
visibility: visible;
}

/* ---FOOTER--- */
footer{
background: var(--light-black);
height: 20vh;
width: 100%;
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
.footer-txt{
color: white;
font-size: 1.5rem;

}
/* ---Media Queries--- */
@media screen and (max-width: 500px){

/* ---Section One--- */
.header-image{
display: none;
}
.navlinks{
flex-direction: column;
position: absolute;
top: 0;
background: var(--light-grey);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
right: 100%;
z-index: 2;
gap: 2rem;
}
.navlinks-active{
right: 0;
}
.navlinks li a{
font-size: 1.3rem;
margin-left: 0;
}
.hamburger{
display: block;
z-index: 5;
}
.section .logo{
z-index: 5;
}
.header-heading{
font-size: 4rem;
}
header{
justify-content: flex-start;
}

/* ---Section Two--- */
.section-two-image{
display: none;

}
.section-two-heading{
font-size: 2.9rem;
}
.section-two-part{
font-size: .93rem;
max-width: 100%;
}
.section-two-pricing{
font-size: 1.4rem;
}
.section-two-btn{
font-size: 1rem;
padding: .7rem 1rem;
}
.section-two-container{
height: 60vh;
}
.section-two-inner-container{
width: 90%;
}

/* ---Section Three--- */
.card-image{
width: 17rem;
}

/* ---section four-- */
.section-four-heading{
font-size: 2.8rem;
}
.section-four-offers{
font-size: 3.3rem;
}
.section-four-btn{
font-size: 1rem;
}

/* ---section five--- */
.grid-card-container{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 90%;
}
.grid-card:nth-child(1), .grid-card:nth-child(3){
grid-row: 1/2;
}
}

Javascript part:

const hamburger = document.getElementById("hamburger");


const navlinks = document.getElementById("navlinks");

hamburger.addEventListener("click", ()=>{

navlinks.classList.toggle("navlinks-active");
})

Output:
Backend:
"""
ASGI config for watch_feedback_project project.

It exposes the ASGI callable as a module-level variable named


``application``.

For more information on this file, see


https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
"""

import os

from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE',
'watch_feedback_project.settings')

application = get_asgi_application()
"""
Django settings for watch_feedback_project project.

Generated by 'django-admin startproject' using Django 5.1.

For more information on this file, see


https://docs.djangoproject.com/en/5.1/topics/settings/

For the full list of settings and their values, see


https://docs.djangoproject.com/en/5.1/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.


BASE_DIR = Path(__file__).resolve().parent.parent

# Quick-start development settings - unsuitable for production


# See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!


SECRET_KEY = 'django-insecure-um#ev$(_)3akneseb6k-
^blz*m^osou@4_bonilvx@jeqk2*1&'

# SECURITY WARNING: don't run with debug turned on in production!


DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'watch_feedback_project.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'watch_feedback_project.wsgi.application'

# Database
# https://docs.djangoproject.com/en/5.1/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}

# Password validation
# https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-
validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME':
'django.contrib.auth.password_validation.UserAttributeSimilarityValidat
or',
},
{
'NAME':
'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME':
'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME':
'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]

# Internationalization
# https://docs.djangoproject.com/en/5.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)


# https://docs.djangoproject.com/en/5.1/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type


# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-
field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
"""
URL configuration for watch_feedback_project project.

The `urlpatterns` list routes URLs to views. For more information


please see:
https://docs.djangoproject.com/en/5.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include,
path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

urlpatterns = [
path('admin/', admin.site.urls),
]
from django.contrib import admin
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from watch_app import views

router = DefaultRouter()
router.register(r'watches', views.WatchViewSet)
router.register(r'feedbacks', views.FeedbackViewSet)

urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include(router.urls)),
]
"""
WSGI config for watch_feedback_project project.

It exposes the WSGI callable as a module-level variable named


``application``.

For more information on this file, see


https://docs.djangoproject.com/en/5.1/howto/deployment/wsgi/
"""

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE',
'watch_feedback_project.settings')

application = get_wsgi_application()

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys
def main():
"""Run administrative tasks."""
os.environ.setdefault('DJANGO_SETTINGS_MODULE',
'watch_feedback_project.settings')
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
raise ImportError(
"Couldn't import Django. Are you sure it's installed and "
"available on your PYTHONPATH environment variable? Did you
"
"forget to activate a virtual environment?"
) from exc
execute_from_command_line(sys.argv)

if __name__ == '__main__':
main()

import qrcode
from io import BytesIO
from django.core.files.base import ContentFile
from .models import Watch

def generate_qr_code(watch_id):
watch = Watch.objects.get(id=watch_id)
qr = qrcode.QRCode(
version=1,
error_correction=qrcode.constants.ERROR_CORRECT_L,
box_size=10,
border=4,
)
qr.add_data(watch.qr_code)
qr.make(fit=True)
img = qr.make_image(fill='black', back_color='white')
buffer = BytesIO()
img.save(buffer, format='PNG')
file_name = f"{watch_id}_qr.png"
watch.qr_code.save(file_name, ContentFile(buffer.getvalue()))
watch.save()

You might also like