From b64638dc31cbe45caa181b1ae7346c5743761435 Mon Sep 17 00:00:00 2001 From: "e2b-for-github[bot]" <134465507+e2b-for-github[bot]@users.noreply.github.com> Date: Mon, 17 Jul 2023 06:36:31 +0000 Subject: [PATCH 1/2] Initial commit From e9c7048776e33171378f18ebd62246e39b011f42 Mon Sep 17 00:00:00 2001 From: "e2b-for-github[bot]" <337977+e2b-for-github[bot]@users.noreply.github.com> Date: Mon, 17 Jul 2023 06:44:43 +0000 Subject: [PATCH 2/2] Add code based on the PR instructions --- README.md | 1 - about.html | 33 +++++++++++++++++++++++ contact.html | 30 +++++++++++++++++++++ courses.html | 33 +++++++++++++++++++++++ css/responsive.css | 56 ++++++++++++++++++++++++++++++++++++++ css/style.css | 61 ++++++++++++++++++++++++++++++++++++++++++ db/courses.sql | 13 +++++++++ index.html | 34 +++++++++++++++++++++++ js/courses.js | 50 ++++++++++++++++++++++++++++++++++ js/main.js | 22 +++++++++++++++ php/contact.php | 22 +++++++++++++++ php/purchase.php | 34 +++++++++++++++++++++++ shared_dependencies.md | 32 ++++++++++++++++++++++ 13 files changed, 420 insertions(+), 1 deletion(-) delete mode 100644 README.md create mode 100755 about.html create mode 100755 contact.html create mode 100755 courses.html create mode 100755 css/responsive.css create mode 100755 css/style.css create mode 100755 db/courses.sql create mode 100755 index.html create mode 100755 js/courses.js create mode 100755 js/main.js create mode 100755 php/contact.php create mode 100755 php/purchase.php create mode 100755 shared_dependencies.md diff --git a/README.md b/README.md deleted file mode 100644 index 00bcb6e..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# test \ No newline at end of file diff --git a/about.html b/about.html new file mode 100755 index 0000000..0d48674 --- /dev/null +++ b/about.html @@ -0,0 +1,33 @@ + + + + + + About Us + + + + +
+ Logo + +
+
+
+

About Us

+

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.

+
+
+ + + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100755 index 0000000..3e20a5b --- /dev/null +++ b/contact.html @@ -0,0 +1,30 @@ + + + + + + Contact Us + + + + +
+ Logo +
+
+
+
+
+
+
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/courses.html b/courses.html new file mode 100755 index 0000000..a21630a --- /dev/null +++ b/courses.html @@ -0,0 +1,33 @@ + + + + + + AI Courses + + + + +
+ Logo + +
+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/css/responsive.css b/css/responsive.css new file mode 100755 index 0000000..41a0e66 --- /dev/null +++ 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%; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..0a53750 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/db/courses.sql b/db/courses.sql new file mode 100755 index 0000000..730167e --- /dev/null +++ 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); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100755 index 0000000..89d1c23 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + AI Courses + + + + +
+ Logo + +
+
+
+

Welcome to AI Courses

+

Explore our wide range of AI courses and start learning today!

+ View Courses +
+
+ + + + \ No newline at end of file diff --git a/js/courses.js b/js/courses.js new file mode 100755 index 0000000..deb1513 --- /dev/null +++ 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 = ` + ${course.name} +

${course.name}

+

${course.description}

+ + `; + 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(); \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100755 index 0000000..7e40fd7 --- /dev/null +++ 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)); +} \ No newline at end of file diff --git a/php/contact.php b/php/contact.php new file mode 100755 index 0000000..9922645 --- /dev/null +++ b/php/contact.php @@ -0,0 +1,22 @@ + \ No newline at end of file diff --git a/php/purchase.php b/php/purchase.php new file mode 100755 index 0000000..9c9b318 --- /dev/null +++ b/php/purchase.php @@ -0,0 +1,34 @@ +connect_error) { + die("Connection failed: " . $conn->connect_error); + } + + // Get selected course + $selectedCourse = $_POST['selectedCourse']; + + // Purchase course + function purchaseCourse($selectedCourse) { + global $conn; + + $sql = "UPDATE Courses SET purchased = 1 WHERE id = $selectedCourse->id"; + + if ($conn->query($sql) === TRUE) { + echo "purchaseSuccess"; + } else { + echo "Error: " . $sql . "
" . $conn->error; + } + } + + // Call purchaseCourse function + purchaseCourse($selectedCourse); + + $conn->close(); +?> \ No newline at end of file diff --git a/shared_dependencies.md b/shared_dependencies.md new file mode 100755 index 0000000..a023758 --- /dev/null +++ b/shared_dependencies.md @@ -0,0 +1,32 @@ +1. Exported Variables: + - "coursesList" (Array of course objects, shared between "courses.html", "js/courses.js", and "db/courses.sql") + - "selectedCourse" (Object of selected course, shared between "courses.html", "js/courses.js", and "php/purchase.php") + +2. Data Schemas: + - "Course" (Schema for course data, shared between "courses.html", "js/courses.js", "php/purchase.php", and "db/courses.sql") + +3. ID Names of DOM Elements: + - "courseContainer" (Container for courses, used in "courses.html" and "js/courses.js") + - "purchaseButton" (Button for purchasing a course, used in "courses.html" and "js/courses.js") + - "contactForm" (Form for contacting, used in "contact.html" and "php/contact.php") + +4. Message Names: + - "purchaseSuccess" (Message after successful purchase, used in "js/main.js" and "php/purchase.php") + - "contactSuccess" (Message after successful contact form submission, used in "js/main.js" and "php/contact.php") + +5. Function Names: + - "displayCourses()" (Function to display courses, used in "js/courses.js" and "courses.html") + - "purchaseCourse()" (Function to purchase a course, used in "js/courses.js" and "php/purchase.php") + - "submitContactForm()" (Function to submit the contact form, used in "js/main.js" and "php/contact.php") + +6. CSS Classes: + - "course-card" (Style for course cards, used in "courses.html" and "css/style.css") + - "responsive" (Style for responsive design, used in all HTML files and "css/responsive.css") + +7. Image Files: + - "logo.png" (Website logo, used in all HTML files) + - "course1.jpg", "course2.jpg", "course3.jpg" (Course images, used in "courses.html") + - "background.jpg" (Background image, used in all HTML files) + +8. Database Tables: + - "Courses" (Table for storing course data, used in "db/courses.sql", "js/courses.js", and "php/purchase.php") \ No newline at end of file