From abcce1796038884065caf1036b00b8473cec284d Mon Sep 17 00:00:00 2001 From: Jay Nagose <91650648+RADson2005official@users.noreply.github.com> Date: Sun, 1 Jun 2025 13:53:00 +0530 Subject: [PATCH 01/11] ANSWER for endsem PYQ --- web_tech_answer_sheet.md | 916 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 916 insertions(+) create mode 100644 web_tech_answer_sheet.md diff --git a/web_tech_answer_sheet.md b/web_tech_answer_sheet.md new file mode 100644 index 0000000..d6db396 --- /dev/null +++ b/web_tech_answer_sheet.md @@ -0,0 +1,916 @@ +# Web Technology Exam Answer Sheet +## BTL 3 Apply Level Questions + +### Question 1 +**a) Explain the different types of web application.** + +**Types of Web Applications:** + +1. **Static Web Applications** + - Fixed content, HTML/CSS files + - No server-side processing + - Example: Portfolio websites + +2. **Dynamic Web Applications** + - Content changes based on user interaction + - Server-side scripting (PHP, JSP) + - Database connectivity + +3. **E-commerce Applications** + - Online shopping functionality + - Payment gateway integration + - User authentication, cart management + +4. **Portal Web Applications** + - Multiple services in one platform + - User dashboards, content management + - Example: Government portals + +5. **Content Management Systems** + - User-friendly content editing + - Template-based design + - Example: WordPress, Drupal + +**b) What is web architecture? Explain the phases of website development.** + +**Web Architecture:** The structural design of web applications including client-server model, database integration, and component interaction. + +**Website Development Phases:** + +1. **Planning Phase** + - Requirement analysis + - Project scope definition + - Technology selection + +2. **Design Phase** + - UI/UX design + - Database design + - System architecture + +3. **Development Phase** + - Frontend development + - Backend development + - Database implementation + +4. **Testing Phase** + - Unit testing + - Integration testing + - User acceptance testing + +5. **Deployment Phase** + - Server setup + - Domain configuration + - Go-live process + +6. **Maintenance Phase** + - Bug fixes + - Updates and enhancements + - Performance monitoring + +### Question 2 +**a) What is Search Engine? Explain the different component of Search Engine.** + +**Search Engine:** A software system designed to search and retrieve information from the World Wide Web based on user queries. + +**Components of Search Engine:** + +1. **Web Crawler (Spider)** + - Automatically browses web pages + - Follows links to discover new content + - Updates index regularly + +2. **Indexer** + - Processes crawled web pages + - Creates searchable index + - Stores keywords and metadata + +3. **Search Interface** + - User query input system + - Search box and filters + - Results display mechanism + +4. **Ranking Algorithm** + - Determines result relevance + - Page ranking based on multiple factors + - Quality and authority assessment + +5. **Database** + - Stores indexed web pages + - Maintains search results + - User query history + +**b) What is Browser? Explain the different features of web servers.** + +**Browser:** A software application used to access and display web pages from the internet. + +**Web Server Features:** + +1. **HTTP Protocol Support** + - Handles HTTP requests/responses + - Supports HTTPS for security + - Multiple HTTP methods (GET, POST, PUT, DELETE) + +2. **Static Content Delivery** + - Serves HTML, CSS, JavaScript files + - Image and media file handling + - Fast file transfer capabilities + +3. **Dynamic Content Processing** + - Server-side scripting support (PHP, JSP) + - Database connectivity + - Real-time content generation + +4. **Security Features** + - SSL/TLS encryption + - Authentication mechanisms + - Access control and permissions + +5. **Performance Optimization** + - Caching mechanisms + - Load balancing + - Compression support + +6. **Logging and Monitoring** + - Access logs + - Error tracking + - Performance metrics + +### Question 3 +**a) Apply external JavaScript to display welcome message on webpage using HTML onclick event.** + +**index.html:** +```html + + +
+This paragraph will be hidden when you click the button below.
+ + + + + + +``` + +### Question 5 +**a) Write a program in PHP to create login form and store the username and password in session and retrieve it on other form.** + +**login.php:** +```php + + + + +Username:
+Password:
+ Logout + + +``` + +**logout.php:** +```php + +``` + +**b) Use PHP and MySQL connectivity to store the book details like book_id, book_name, author, price and quantity into database table ebookshop.** + +```php +Book details stored successfully!"; + } else { + echo "Error: " . mysqli_error($conn) . "
"; + } +} + +mysqli_close($conn); +?> + + + +Error: " . mysqli_error($conn) . "
"; + } +} + +mysqli_close($conn); +?> + + + +| Book ID | Book Name | Author |
|---|---|---|
| " + rs.getInt("book_id") + " | "); + out.println("" + rs.getString("book_name") + " | "); + out.println("" + rs.getString("book_author") + " | "); + out.println("
Welcome to the dashboard!
+ + +``` + +**error.jsp:** +```jsp +<%@ page language="java" %> + + +Square of <%= number %> is <%= result %>
+ + +``` + +**Directory Structure:** +``` +WebApp/ +├── WEB-INF/ +│ ├── web.xml +│ ├── classes/ +│ └── lib/ +├── square.jsp +├── login.html +└── index.html +``` + +### Question 12 +**a) Use struts MVC to display product_id, product_name and product_price provided by the input page.** + +**Product.java (Model):** +```java +public class Product { + private String productId; + private String productName; + private double productPrice; + + // Getters and Setters + public String getProductId() { return productId; } + public void setProductId(String productId) { this.productId = productId; } + + public String getProductName() { return productName; } + public void setProductName(String productName) { this.productName = productName; } + + public double getProductPrice() { return productPrice; } + public void setProductPrice(double productPrice) { this.productPrice = productPrice; } +} +``` + +**ProductAction.java:** +```java +import com.opensymphony.xwork2.ActionSupport; + +public class ProductAction extends ActionSupport { + private Product product = new Product(); + + public String execute() { + return "success"; + } + + public Product getProduct() { return product; } + public void setProduct(Product product) { this.product = product; } +} +``` + +**struts.xml:** +```xml +Product ID:
Product Name:
Product Price:
<%= num1 %> × <%= num2 %> = <%= result %>
+ + +``` + +**JSP Directory Structure:** +``` +WebApplication/ +├── WEB-INF/ +│ ├── web.xml +│ ├── classes/ +│ │ └── (compiled servlets) +│ ├── lib/ +│ │ └── (JAR files) +│ └── src/ +├── multiplication.jsp +├── META-INF/ +└── index.html +``` + +--- + From 343340e37e814934dc78aa4efd4c22e2fe80c357 Mon Sep 17 00:00:00 2001 From: Jay Nagose <91650648+RADson2005official@users.noreply.github.com> Date: Sun, 1 Jun 2025 18:21:36 +0530 Subject: [PATCH 02/11] Create Cia1.md --- Cia1.md | 422 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 422 insertions(+) create mode 100644 Cia1.md diff --git a/Cia1.md b/Cia1.md new file mode 100644 index 0000000..91a8eaf --- /dev/null +++ b/Cia1.md @@ -0,0 +1,422 @@ + +**Exam Type: CIA-1** +**Course: Web Technology (IT313)** +**Answer Sheet** + +--- + +**Q.1 Attempt All** + +**A. What is Search Engine? Explain the different components of Search Engine.** (5 Marks) + +**Answer:** + +**Search Engine:** +A search engine is a software system designed to search for information on the World Wide Web. It allows users to enter keywords or phrases, and it returns a list of results (web pages, images, videos, etc.) that are relevant to the query. + +**Different Components of a Search Engine:** + +1. **Web Crawler (Spider or Bot):** + * **Function:** This component systematically browses the World Wide Web, discovering and downloading web pages. It follows hyperlinks from one page to another to find new and updated content. + * **Application:** It gathers data from websites to be indexed. + +2. **Indexer (Indexing System):** + * **Function:** After web pages are crawled, the indexer processes and stores the information in a massive database called an index. It analyzes the content of each page (text, metadata, etc.) and organizes it in a way that allows for fast and efficient retrieval. Keywords, their locations, and other attributes are stored. + * **Application:** Creates a searchable data structure, making it quick to find pages relevant to user queries. + +3. **Search Algorithm (Query Processor & Ranking Algorithm):** + * **Function:** This is the core logic that handles user queries. + * **Query Processor:** It interprets the user's search query, understanding intent, correcting spelling, and expanding synonyms if necessary. + * **Ranking Algorithm:** It compares the processed query to the indexed documents and ranks the results based on relevance, authority, user location, and hundreds of other factors (e.g., PageRank). + * **Application:** Provides the most relevant and ordered list of search results to the user. + +4. **User Interface (Search Box & Results Page):** + * **Function:** This is the component the user interacts with. It includes the search box where users type their queries and the Search Engine Results Page (SERP) where the ranked list of results is displayed. + * **Application:** Allows users to input queries and view the output generated by the search engine. + +*(A neat sketch might show these components interacting: Crawler -> Indexer -> (User Query -> Query Processor -> Ranking Algorithm -> Results on UI))* + +--- + +**B. Explain with example different types of web applications.** (5 Marks) + +**Answer:** + +Web applications are programs that run on a web server and are accessed by users through a web browser over a network (like the internet or an intranet). + +**Different Types of Web Applications with Examples:** + +1. **Static Web Applications:** + * **Explanation:** Deliver content as stored on the server without any server-side processing or database interaction for the content itself. The content is fixed and the same for every user. Primarily built using HTML, CSS, and sometimes client-side JavaScript for minor interactivity. + * **Example:** A simple informational website for a small business with fixed content like "About Us," "Contact," and basic service descriptions. A personal portfolio site displaying unchanging project details. + +2. **Dynamic Web Applications:** + * **Explanation:** Generate content in real-time based on user interactions, data from databases, or other factors. They involve server-side scripting (e.g., PHP, Python, Java Servlets, Node.js) and often database interaction. Content can be personalized. + * **Example:** + * **E-commerce sites (e.g., Amazon):** Product listings change based on inventory, user searches, and recommendations. + * **Social Media platforms (e.g., Facebook):** Feeds are personalized and constantly updated. + * **Content Management Systems (e.g., WordPress blogs):** Content is dynamically pulled from a database and displayed based on templates. + +3. **Single-Page Applications (SPAs):** + * **Explanation:** Load a single HTML page and dynamically update content as the user interacts with the app. They provide a more fluid, desktop-like experience by rewriting the current page rather than loading entire new pages from the server. Often built using JavaScript frameworks like React, Angular, or Vue.js. + * **Example:** Gmail, Google Maps, Trello. When you click on an email in Gmail, only the content area updates, not the entire page. + +4. **Progressive Web Applications (PWAs):** + * **Explanation:** Web applications that use modern web capabilities to deliver an app-like experience to users. They can work offline (using service workers), be installed on the user's home screen, and send push notifications. They aim to combine the best of web and native mobile apps. + * **Example:** Twitter Lite, Pinterest PWA. These can be accessed via a browser but offer features traditionally associated with native apps. + +5. **Portal Web Applications:** + * **Explanation:** Provide a single point of access to a wide range of information and services, often personalized for specific user roles or groups. They aggregate content from different sources. + * **Example:** University portals for students (displaying courses, grades, announcements), internal employee portals (access to HR information, company news, tools). + +--- + +**Q.2 Attempt All** + +**A. Write javascript program to store employee id, name and salary using javascript object.** (5 Marks) + +**Answer:** + +```html + + + +You have successfully logged in.
+Your username stored in the session is:
+Note: For security reasons, actual passwords are not typically stored directly in sessions after validation. Only a login status and user identifier (like username or user ID) are stored.
+Name: " + name + "
"); + out.println("Mobile: " + mobile + "
"); + out.println("Email: " + email + "
"); + out.println("Address: " + address + "
"); + out.println(""); + out.println(""); + out.close(); + } +} +``` +*(Compile and place `RegisterServlet.class` in `WEB-INF/classes/com/example/` folder)* + +--- + +**B. Use JDBC to display the employee details like emp_id, emp_name and emp_salary from MySQL database using Httpservlet.** (5 Marks) + +**Answer:** + +**Assumptions:** +* MySQL database named `companydb`. +* Table named `employees` with columns `emp_id` (INT), `emp_name` (VARCHAR), `emp_salary` (DECIMAL). +* MySQL JDBC driver JAR is in `WEB-INF/lib`. + +**1. `web.xml` (Deployment Descriptor for Servlet Mapping):** +```xml +| ID | Name | Salary |
|---|---|---|
| " + id + " | " + name + " | " + salary + " |
| Error: " + e.getMessage() + " | ||
Please enter valid integer numbers.
+ <% + } + } + %> + + +``` + +**2. Directory Structure of JSP Program:** +A typical directory structure for a web application containing this JSP would be: + +``` +WebAppName/ +|-- multiply.jsp +|-- WEB-INF/ +| |-- web.xml (Deployment Descriptor - can be minimal or auto-generated for simple JSPs) +| |-- classes/ (For compiled Java classes, if any servlets are used) +| |-- lib/ (For JAR files like database drivers, etc.) +|-- index.html (Optional: an entry page that might link to multiply.jsp) +``` +For this specific problem, `multiply.jsp` is the core. `web.xml` is generally present but might not need specific configuration for a standalone JSP unless advanced features or servlet interactions are involved. + +--- + +**B. Use struts MVC to display product_id, product_name and product_price provided by the input page.** (6 Marks) + +**Answer:** + +**Assumptions:** Struts 1.x framework. + +**1. Input JSP (`inputProduct.jsp`):** +```jsp +<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> +<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> + + +Product ID:
Product Name:
Product Price:
Connection failed: " . $conn->connect_error . "
"); + } + + $sql = "SELECT roll_no, name, mobile, email, address FROM students"; + $result = $conn->query($sql); + + if ($result === false) { + echo "Error executing query: " . htmlspecialchars($conn->error) . "
"; + } elseif ($result->num_rows > 0) { + echo "| Roll No | Name | Mobile | Address | |
|---|---|---|---|---|
| " . htmlspecialchars($row["roll_no"]) . " | "; + echo "" . htmlspecialchars($row["name"]) . " | "; + echo "" . htmlspecialchars($row["mobile"]) . " | "; + echo "" . htmlspecialchars($row["email"]) . " | "; + echo "" . htmlspecialchars($row["address"]) . " | "; + echo "
No student records found.
"; + } + + // Close connection + $conn->close(); + ?> + + +``` +**Explanation:** +1. **Database Connection:** Establishes connection to MySQL using `mysqli`. +2. **SQL Query:** A `SELECT` query fetches `roll_no`, `name`, `mobile`, `email`, and `address` from the `students` table. +3. **Execute Query & Fetch Results:** + * `$conn->query($sql)` executes the query. + * `$result->num_rows > 0` checks if any records were returned. + * `$result->fetch_assoc()` fetches one row at a time as an associative array. +4. **Display in Table:** The data is formatted into an HTML table. `htmlspecialchars()` is used to prevent XSS vulnerabilities when displaying data. +5. **Error Handling & Closing:** Basic error checking for connection and query execution. The connection is closed. + +--- + +**B. Sort the given numbers using inbuilt sorting functions of PHP in ascending, decending and without changing indices. 7, 3, 9, 1, 8** (5 Marks) + +**Answer:** + +```php + 7 +// [1] => 3 +// [2] => 9 +// [3] => 1 +// [4] => 8 + +echo "\n--- Sorting while attempting to maintain key-value association ---\n"; +$numbers_assoc_asc = $numbers; // Create a copy +asort($numbers_assoc_asc); // Sorts array by values, maintaining key association +echo "\nSorted in Ascending Order by value, maintaining keys (asort()):\n"; +print_r($numbers_assoc_asc); +// Output will be: +// Array +// ( +// [3] => 1 +// [1] => 3 +// [0] => 7 +// [4] => 8 +// [2] => 9 +// ) + +$numbers_assoc_desc = $numbers; // Create a copy +arsort($numbers_assoc_desc); // Sorts array in reverse order by values, maintaining key association +echo "\nSorted in Descending Order by value, maintaining keys (arsort()):\n"; +print_r($numbers_assoc_desc); +// Output will be: +// Array +// ( +// [2] => 9 +// [4] => 8 +// [0] => 7 +// [1] => 3 +// [3] => 1 +// ) + +echo "\nNote: For a simple numerically indexed array, 'without changing indices' typically refers to using functions like asort() or arsort(), which preserve the original key associated with each value after sorting based on values. If the keys were meaningful (e.g., associative array keys), this becomes more apparent. For simple numeric arrays like [7,3,9,1,8], the keys are 0,1,2,3,4.\n"; + +?> +``` +**Explanation:** +* **`$numbers =;`**: The initial array of numbers. +* **Ascending Sort (`sort()`):** + * `sort($asc_numbers);` sorts the array elements from lowest to highest. + * **Important:** `sort()` re-indexes the array, so the keys will be 0, 1, 2, 3, 4 regardless of their original positions. +* **Descending Sort (`rsort()`):** + * `rsort($desc_numbers);` sorts the array elements from highest to lowest. + * **Important:** `rsort()` also re-indexes the array. +* **Sorting "Without Changing Indices" (Maintaining Key-Value Association):** + * This phrase is most meaningful for associative arrays where keys are explicit strings or numbers. For simple numerically indexed arrays, it means the value at original index `i` moves, but its association with that original index `i` is preserved if we use functions like `asort()` or `arsort()`. + * **`asort($numbers_assoc_asc);`**: Sorts an array by its **values** in ascending order, maintaining the original **key-value** associations. The output shows the original keys `(3, 1, 0, 4, 2)` associated with their sorted values. + * **`arsort($numbers_assoc_desc);`**: Sorts an array by its **values** in descending order, maintaining the original **key-value** associations. + +For the given simple numeric array, `sort()` and `rsort()` are the direct answers for ascending/descending. `asort()` and `arsort()` demonstrate how PHP handles sorting while preserving key associations, which addresses the "without changing indices" part by showing how values are sorted while their original keys follow them. + +--- +**End of Answer Sheet** From 098be3071cc68d0535dc8d7b46b3b26198fdf721 Mon Sep 17 00:00:00 2001 From: Jay Nagose <91650648+RADson2005official@users.noreply.github.com> Date: Sun, 1 Jun 2025 18:31:25 +0530 Subject: [PATCH 05/11] Update README.md --- README.md | 53 +---------------------------------------------------- 1 file changed, 1 insertion(+), 52 deletions(-) diff --git a/README.md b/README.md index a93a788..48f41ad 100644 --- a/README.md +++ b/README.md @@ -1,52 +1 @@ -# Timepiece Haven Website -my first project wbsite: - -A responsive e-commerce website for a luxury watch store called "Timepiece Haven". This project showcases a modern UI design with gradient animations and interactive elements. - -## 📋 Project Overview - -Timepiece Haven is a fictional luxury watch retailer website featuring product displays, contact forms, and responsive design. The project demonstrates modern web development practices including fluid layouts, CSS animations, and mobile-responsive design. - -## 🚀 Technologies Used - -- HTML5 -- CSS3 (with animations, flexbox, and grid) -- JavaScript (ES6) -- Font Awesome icons - -## ✨ Features - -- Responsive design that works on mobile, tablet, and desktop -- Interactive product cards with hover effects -- Contact form with validation -- Animated gradient backgrounds -- Mobile navigation menu -- Product filtering functionality - -## 📁 Project Structure -clock-shop-website/ ├── src/ │ ├── css/ │ │ ├── navigation.css │ │ └── styles.css │ ├── js/ │ │ └── main.js │ └── pages/ │ ├── index.html │ ├── products.html │ └── contact.html └── README.md - -## 🖥️ Setup and Installation - -1. Clone the repository: - -git clone https://github.com/RADson2005official/Web_techlab.git - -2. Navigate to the project directory: - -cd Web_techlab/clock-shop-website - -3. Open any HTML file in your browser to view the website. - -## 📸 Screenshots - - - - -## 👤 Author - -- [RADson2005official](https://github.com/RADson2005official) - -## 📝 License - -This project is open source and available under the [MIT License](LICENSE). \ No newline at end of file +quetion paper on WEB-technology Refference purpose only From 0c092c6e74a84b9c3f54a03a82bfae251ff9d10e Mon Sep 17 00:00:00 2001 From: Jay Nagose <91650648+RADson2005official@users.noreply.github.com> Date: Sun, 1 Jun 2025 18:33:24 +0530 Subject: [PATCH 06/11] Delete src directory --- src/css/navigation.css | 86 -------- src/css/style.css | 0 src/css/styles.css | 288 ------------------------- src/js/main.js | 66 ------ src/pages/about.html | 0 src/pages/contact.html | 299 -------------------------- src/pages/index.html | 455 ---------------------------------------- src/pages/products.html | 383 --------------------------------- 8 files changed, 1577 deletions(-) delete mode 100644 src/css/navigation.css delete mode 100644 src/css/style.css delete mode 100644 src/css/styles.css delete mode 100644 src/js/main.js delete mode 100644 src/pages/about.html delete mode 100644 src/pages/contact.html delete mode 100644 src/pages/index.html delete mode 100644 src/pages/products.html diff --git a/src/css/navigation.css b/src/css/navigation.css deleted file mode 100644 index 1ec75e4..0000000 --- a/src/css/navigation.css +++ /dev/null @@ -1,86 +0,0 @@ -/* Navigation styles */ -.navbar { - background-color: #2c3e50; - padding: 1rem 0; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -} - -.nav-container { - display: flex; - justify-content: space-between; - align-items: center; - width: 90%; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -.logo { - color: white; - font-size: 1.5rem; - font-weight: bold; - text-decoration: none; -} - -.nav-menu { - display: flex; - list-style: none; - margin: 0; - padding: 0; -} - -.nav-item { - margin: 0 1rem; -} - -.nav-link { - color: white; - text-decoration: none; - font-size: 1rem; - transition: color 0.3s ease; -} - -.nav-link:hover { - color: #3498db; -} - -.nav-toggle { - display: none; - flex-direction: column; - cursor: pointer; -} - -.nav-toggle span { - display: block; - width: 25px; - height: 3px; - margin: 2px 0; - background-color: white; -} - -/* Responsive navigation */ -@media screen and (max-width: 768px) { - .nav-menu { - position: fixed; - top: 70px; - left: -100%; - flex-direction: column; - background-color: #2c3e50; - width: 100%; - text-align: center; - transition: 0.3s; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); - } - - .nav-menu.active { - left: 0; - } - - .nav-item { - margin: 1.5rem 0; - } - - .nav-toggle { - display: flex; - } -} \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/css/styles.css b/src/css/styles.css deleted file mode 100644 index 1a7a30b..0000000 --- a/src/css/styles.css +++ /dev/null @@ -1,288 +0,0 @@ -/* General styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Arial', sans-serif; -} - -body { - background-color: #f8f8f8; - color: #333; - line-height: 1.6; -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; -} - -h1, h2, h3 { - margin-bottom: 20px; -} - -/* Contact form styles */ -.contact-form { - background-color: #fff; - max-width: 600px; - margin: 40px auto; - padding: 30px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} - -.form-group { - margin-bottom: 20px; -} - -.form-label { - display: block; - margin-bottom: 8px; - font-weight: bold; -} - -.form-control { - width: 100%; - padding: 10px; - border: 1px solid #ddd; - border-radius: 4px; - font-size: 16px; -} - -.form-control:focus { - outline: none; - border-color: #4a90e2; - box-shadow: 0 0 5px rgba(74, 144, 226, 0.3); -} - -textarea.form-control { - height: 150px; - resize: vertical; -} - -.btn { - display: inline-block; - background-color: #4a90e2; - color: #fff; - padding: 10px 20px; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 16px; - transition: background-color 0.3s ease; -} - -.btn:hover { - background-color: #3a7bc8; -} - -body { - font-family: Arial, sans-serif; - line-height: 1.6; - color: #333; -} - -.container { - width: 90%; - max-width: 1200px; - margin: 0 auto; - padding: 1rem; -} - -h1 { - font-size: 2.5rem; - margin: 2rem 0 1rem; - color: #2c3e50; -} - -h2 { - font-size: 2rem; - margin: 1.5rem 0; - color: #2c3e50; -} - -p { - margin-bottom: 1rem; -} - -/* Featured Products Section */ -.featured-products { - margin: 3rem 0; -} - -.product-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 2rem; -} - -.product-card { - border: 1px solid #e1e1e1; - border-radius: 5px; - overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.product-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); -} - -.product-image img { - width: 100%; - height: 200px; - object-fit: cover; -} - -.product-details { - padding: 1rem; -} - -.price { - font-weight: bold; - color: #2c3e50; - margin: 0.5rem 0; -} - -.view-btn { - display: inline-block; - background: #3498db; - color: white; - padding: 0.5rem 1rem; - text-decoration: none; - border-radius: 4px; - margin-top: 0.5rem; -} - -/* About Section */ -.about-section { - margin: 3rem 0; - padding: 2rem; - background-color: #f8f9fa; - border-radius: 5px; -} - -/* Footer */ -footer { - background-color: #2c3e50; - color: white; - padding: 1rem 0; - margin-top: 2rem; - text-align: center; -} - -/* Base styles */ -body { - font-family: 'Arial', sans-serif; - line-height: 1.6; - color: #333; - margin: 0; - padding: 0; - background-color: #f9f9f9; -} - -/* Container styling */ -.container { - max-width: 1200px; - margin: 0 auto; - padding: 1rem; -} - -/* Gradient elements */ -.gradient-bg { - background: linear-gradient(-45deg, #525cee, #c1ebff, #23a6d5, #23d5ab); - background-size: 400% 400%; - animation: gradient 15s ease infinite; -} - -/* Button styling */ -.btn { - display: inline-block; - background: linear-gradient(45deg, #23a6d5, #23d5ab); - color: white; - border: none; - border-radius: 30px; - padding: 0.75rem 1.5rem; - cursor: pointer; - font-weight: 600; - text-transform: uppercase; - font-size: 0.9rem; - transition: all 0.3s ease; -} - -.btn:hover { - transform: translateY(-3px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); -} - -/* Card styling */ -.card { - background: white; - border-radius: 20px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - padding: 1.5rem; - transition: all 0.3s ease; -} - -.card:hover { - transform: translateY(-5px); - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); -} - -/* Form styling - general */ -.form-group { - margin-bottom: 1.5rem; -} - -.form-label { - display: block; - margin-bottom: 0.5rem; - font-weight: 600; -} - -.form-control { - width: 100%; - padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 8px; - transition: border 0.3s; - font-size: 1rem; -} - -.form-control:focus { - outline: none; - border-color: #23a6d5; - box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2); -} - -/* Utility classes */ -.text-center { - text-align: center; -} - -.mt-1 { margin-top: 0.5rem; } -.mt-2 { margin-top: 1rem; } -.mt-3 { margin-top: 1.5rem; } -.mt-4 { margin-top: 2rem; } -.mt-5 { margin-top: 3rem; } - -.mb-1 { margin-bottom: 0.5rem; } -.mb-2 { margin-bottom: 1rem; } -.mb-3 { margin-bottom: 1.5rem; } -.mb-4 { margin-bottom: 2rem; } -.mb-5 { margin-bottom: 3rem; } - -/* Animation keyframes */ -@keyframes gradient { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .container { - padding: 1rem; - } -} diff --git a/src/js/main.js b/src/js/main.js deleted file mode 100644 index 1695466..0000000 --- a/src/js/main.js +++ /dev/null @@ -1,66 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - // Mobile menu toggle - const navToggle = document.querySelector('.nav-toggle'); - const navMenu = document.querySelector('.nav-menu'); - - if (navToggle && navMenu) { - navToggle.addEventListener('click', function() { - navMenu.classList.toggle('active'); - }); - } - - // Close mobile menu when clicking a nav link - const navLinks = document.querySelectorAll('.nav-link'); - navLinks.forEach(link => { - link.addEventListener('click', function() { - if (navMenu.classList.contains('active')) { - navMenu.classList.remove('active'); - } - }); - }); - - // Form validation (for contact form) - const contactForm = document.querySelector('.contact-form'); - - if (contactForm) { - contactForm.addEventListener('submit', function(event) { - event.preventDefault(); - - // Basic validation - const name = document.getElementById('name'); - const email = document.getElementById('email'); - const message = document.getElementById('message'); - - let isValid = true; - - if (!name.value.trim()) { - isValid = false; - alert('Please enter your name'); - } - - if (!email.value.trim()) { - isValid = false; - alert('Please enter your email'); - } else if (!isValidEmail(email.value)) { - isValid = false; - alert('Please enter a valid email address'); - } - - if (!message.value.trim()) { - isValid = false; - alert('Please enter your message'); - } - - if (isValid) { - // Here you would typically send the form data to a server - alert('Thank you for your message! We will get back to you soon.'); - contactForm.reset(); - } - }); - } - - function isValidEmail(email) { - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailRegex.test(email); - } -}); diff --git a/src/pages/about.html b/src/pages/about.html deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/contact.html b/src/pages/contact.html deleted file mode 100644 index 47add74..0000000 --- a/src/pages/contact.html +++ /dev/null @@ -1,299 +0,0 @@ - - - - - -Explore our collection of premium watches crafted with precision and designed for those who appreciate the artistry of time.
- Browse Collection -At Timepiece Haven, we believe in the art of watchmaking. Each timepiece in our collection represents decades of tradition combined with innovative technology.
-Our master craftsmen dedicate themselves to creating watches that not only tell time but tell a story. A story of precision, elegance, and timeless design.
- Learn More -Precision engineering with Swiss movement and sapphire crystal.
-$1,299.99
- -Precision engineering with Swiss movement and sapphire crystal.
-$1,299.99
- -uh0-iWCLSSA137-jl$YtP=;`DVB}yx&
zJ$;=(rDX{(n4W`!LuVmwzD-hjY+;2|BsxCOyW9(@WHvr&)tW-mC8#qobcu%o}^=K1hE4~#K*oXH)m
zf%4qmj1`YxopL7n^&h19eKUU^ZoTO`Yq=yFRh3^vm!vyVwO`Yp%llJ(gm jSEAjc~o~B7-yBzh21kO<(m5
z2?L3uqT*O7g(!B80@Vh>+kYnA_!pcSecEZ*lK8Ty2TZ5K9d*Sc{PQkTo4#xg<0ah{}wcQyOO}iCOEGtFT
zk4NL^(P!b>)hA%g{jJD*0DPu8Ip?V94lJ5>D<&^1Mb(e?!_i|x`v0^d?|DG^W*EBn
zM4WNJU?rcQ2fSc06&?3H)a^b7lb`XN>gFPwE*E_
zOKTrNZTjJQ)u;FV5j~KuLq#}a4Eel|KV0|MA_tH75w1gq)k%}C#?CwMjJlYD>r8z6
z?YFq}vda@Y?mIJPAn)ffbm&k3z`O6hi<$4emuwm9WN;4f@?CN0fqk*)?vrrZeT$F}
z!x*c<&gb8W^A6h|oB!wEn4P!8FWCk=?NEjMtWV+-DcKsshE^Ih4fuN6Ex2IX-FW!2
z=P~*CBe47by@#h-gGC%&3;@PN*wGnqEzV>`D=6*Y$70$GGk%NV86O&F?oEr7an{vh
z%4~S;iQZmt9$_FBm$s%a-1L}|^b_%b$gzJAw_Lo2!b<}yNrW0$LFp|Sjws07{>%+O
zTbDHbv^2Tqi25-lr<7mhSt}%{FDXVA01UcCnP$@Hbe1tm^WxBtXb`s6BWA)K77!1O
zHsA&gqYH!}5n10LWuO^Q;|Eaf$XlUt*5GB{K%k>QdPYG+lTKa)=_+l?v^8}r>ekw5
zsEkp=r*@=2v~+P!{mG6}t3fq<<`#NTL#chIs=BVgZj1$VKHS^DGIzm|0lGiam!16!m-hT2{uCre9
zKhzF6s&^E4Pi)qL|)-wKd0vfJul2b!&)1Y
z`A8-*w_m31WUuff(CH~;65D|Qv3;z8x`UQ)*3>+S46Q7OIAg&dL#RlZ`}YgIe@*hU)R^
z)zlHI0Rn#;vcF@iPF>*OW!}pX^jOqW<;S;$GO0XC7h{(j#@h;pVj>r
zS_n*VtT5Cvbat*V9TieTE?p2`8pu@%s2_?W%^g`d{x0t5uYJT}ZHc2R_pu)fnt6qV
zH|q!