krishnashakula · e2b-for-github · Jul 17, 2023 · Jul 17, 2023
diff --git a/README.md b/README.md
diff --git a/about.html b/about.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/responsive.css">
+</head>
+<body style="background-image: url('img/background.jpg')">
+    <header>
+        <img src="img/logo.png" alt="Logo">
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="courses.html">Courses</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section>
+            <h1>About Us</h1>
+            <p>We are a leading provider of online AI courses. Our mission is to make AI education accessible to everyone. We believe that everyone should have the opportunity to learn about the latest technologies and use them to transform their lives and the world around them.</p>
+        </section>
+    </main>
+    <footer>
+        <p>© 2022 AI Courses. All rights reserved.</p>
+    </footer>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/responsive.css">
+</head>
+<body style="background-image: url('img/background.jpg')">
+    <header>
+        <img src="img/logo.png" alt="Logo">
+    </header>
+    <main>
+        <form id="contactForm" action="php/contact.php" method="post">
+            <label for="name">Name:</label><br>
+            <input type="text" id="name" name="name" required><br>
+            <label for="email">Email:</label><br>
+            <input type="email" id="email" name="email" required><br>
+            <label for="message">Message:</label><br>
+            <textarea id="message" name="message" required></textarea><br>
+            <input type="submit" value="Submit">
+        </form>
+    </main>
+    <footer>
+        <p>© 2022 AI Courses. All rights reserved.</p>
+    </footer>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/courses.html b/courses.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Courses</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/responsive.css">
+</head>
+<body>
+    <header>
+        <img src="img/logo.png" alt="Logo">
+        <nav>
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+            <a href="contact.html">Contact</a>
+        </nav>
+    </header>
+    <main>
+        <section id="courseContainer">
+            <!-- Courses will be dynamically inserted here by displayCourses() function -->
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2022 AI Courses</p>
+    </footer>
+    <script src="js/main.js"></script>
+    <script src="js/courses.js"></script>
+    <script>
+        displayCourses();
+    </script>
+</body>
+</html>
diff --git a/css/responsive.css b/css/responsive.css
@@ -0,0 +1,56 @@
+@media screen and (max-width: 600px) {
+  body {
+    font-size: 18px;
+  }
+
+  .course-card {
+    width: 100%;
+    padding: 10px;
+  }
+
+  #courseContainer {
+    grid-template-columns: 1fr;
+  }
+
+  #contactForm, #purchaseButton {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 601px) and (max-width: 1024px) {
+  body {
+    font-size: 20px;
+  }
+
+  .course-card {
+    width: 45%;
+    padding: 20px;
+  }
+
+  #courseContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  #contactForm, #purchaseButton {
+    width: 50%;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  body {
+    font-size: 22px;
+  }
+
+  .course-card {
+    width: 30%;
+    padding: 30px;
+  }
+
+  #courseContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  #contactForm, #purchaseButton {
+    width: 33.33%;
+  }
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: url('../img/background.jpg') no-repeat center center fixed;
+    background-size: cover;
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+}
+
+.header {
+    padding: 20px;
+    text-align: center;
+    background-color: #f8f9fa;
+}
+
+.header img {
+    height: 80px;
+}
+
+.course-card {
+    border: 1px solid #ddd;
+    margin: 10px;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+}
+
+.course-card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.course-card img {
+    width: 100%;
+    height: auto;
+}
+
+.course-card button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    margin: 10px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    opacity: 0.9;
+}
+
+.course-card button:hover {
+    opacity:1;
+}
+
+.footer {
+    padding: 20px;
+    text-align: center;
+    background-color: #f8f9fa;
+}
diff --git a/db/courses.sql b/db/courses.sql
@@ -0,0 +1,13 @@
+CREATE TABLE Courses (
+    id INT AUTO_INCREMENT,
+    title VARCHAR(255) NOT NULL,
+    description TEXT,
+    image VARCHAR(255),
+    price DECIMAL(10, 2),
+    PRIMARY KEY(id)
+);
+
+INSERT INTO Courses (title, description, image, price) VALUES
+('AI Course 1', 'This is a description for AI Course 1', 'img/course1.jpg', 99.99),
+('AI Course 2', 'This is a description for AI Course 2', 'img/course2.jpg', 149.99),
+('AI Course 3', 'This is a description for AI Course 3', 'img/course3.jpg', 199.99);
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Courses</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/responsive.css">
+</head>
+<body style="background-image: url('img/background.jpg')">
+    <header>
+        <img src="img/logo.png" alt="Logo">
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="courses.html">Courses</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section>
+            <h1>Welcome to AI Courses</h1>
+            <p>Explore our wide range of AI courses and start learning today!</p>
+            <a href="courses.html" class="course-card">View Courses</a>
+        </section>
+    </main>
+    <footer>
+        <p>© 2022 AI Courses. All rights reserved.</p>
+    </footer>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/courses.js b/js/courses.js
@@ -0,0 +1,50 @@
+let coursesList = [];
+let selectedCourse = {};
+
+function fetchCourses() {
+    fetch('db/courses.sql')
+        .then(response => response.json())
+        .then(data => {
+            coursesList = data;
+            displayCourses();
+        })
+        .catch(error => console.error('Error:', error));
+}
+
+function displayCourses() {
+    const courseContainer = document.getElementById('courseContainer');
+    courseContainer.innerHTML = '';
+    coursesList.forEach(course => {
+        const courseCard = document.createElement('div');
+        courseCard.className = 'course-card';
+        courseCard.innerHTML = `
+            <img src="img/${course.image}" alt="${course.name}">
+            <h2>${course.name}</h2>
+            <p>${course.description}</p>
+            <button id="purchaseButton" onclick="purchaseCourse(${course.id})">Purchase</button>
+        `;
+        courseContainer.appendChild(courseCard);
+    });
+}
+
+function purchaseCourse(courseId) {
+    selectedCourse = coursesList.find(course => course.id === courseId);
+    fetch('php/purchase.php', {
+        method: 'POST',
+        body: JSON.stringify(selectedCourse),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.message === 'purchaseSuccess') {
+            alert('Purchase successful!');
+        } else {
+            alert('Purchase failed. Please try again.');
+        }
+    })
+    .catch(error => console.error('Error:', error));
+}
+
+fetchCourses();
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', function() {
+    displayCourses();
+    document.getElementById('contactForm').addEventListener('submit', submitContactForm);
+});
+
+function displaySuccessMessage(message) {
+    alert(message);
+}
+
+function submitContactForm(event) {
+    event.preventDefault();
+    // AJAX call to php/contact.php
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', 'php/contact.php', true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.onload = function() {
+        if (this.status === 200) {
+            displaySuccessMessage('contactSuccess');
+        }
+    };
+    xhr.send(new FormData(event.target));
+}
diff --git a/php/contact.php b/php/contact.php
@@ -0,0 +1,22 @@
+<?php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = $_POST['name'];
+    $email = $_POST['email'];
+    $message = $_POST['message'];
+
+    $to = 'info@ai-courses.com';
+    $subject = 'New Contact Form Submission';
+    $headers = "From: $email" . "\r\n" .
+               "Reply-To: $email" . "\r\n" .
+               'X-Mailer: PHP/' . phpversion();
+
+    $body = "You have received a new message from your website contact form.\n\n".
+            "Here are the details:\n\nName: $name\n\nEmail: $email\n\nMessage:\n$message";
+
+    if(mail($to, $subject, $body, $headers)){
+        echo 'contactSuccess';
+    } else{
+        echo 'Error';
+    }
+}
+?>