Website for Digital Business & Usage of AI Class!

MafuSaku · Nov 27, 2024 · 1f197e8 · 1f197e8
1 parent ce4bd56
commit 1f197e8
Show file tree

Hide file tree

Showing 10 changed files with 739 additions and 0 deletions.
diff --git a/2024/25-11-2024 (Week 5)/AI Work/Images/cat.png b/2024/25-11-2024 (Week 5)/AI Work/Images/cat.png
diff --git a/2024/25-11-2024 (Week 5)/AI Work/index-alt.html b/2024/25-11-2024 (Week 5)/AI Work/index-alt.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cat</title>
+
+    <!-- Link to custom font from Bunny Fonts -->
+    <link href="https://fonts.bunny.net/css?family=abeezee:400,400i" rel="stylesheet" />
+    <!-- Link to external CSS file -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <main>
+        <section id="cat-form">
+            <h1>กรอกฟอร์มข้อมูลเกี่ยวกับคุณ</h1>
+
+            <!-- Form for user information -->
+            <form onsubmit="handleSubmit(event)">
+                <div class="information">
+                    <label for="nameInput">ชื่อ:</label>
+                    <input type="text" id="nameInput" name="name" placeholder="มานะ อย่าขาด" required>
+
+                    <label for="ageInput">อายุ:</label>
+                    <input type="number" id="ageInput" name="age" placeholder="19" required>
+
+                    <label for="telephoneInput">เบอร์โทร:</label>
+                    <input type="tel" id="telephoneInput" name="tel" placeholder="088-541-5578" required>
+
+                    <label for="dateInput">วันเกิด:</label>
+                    <input type="datetime-local" id="dateInput" name="birthday" required>
+
+                    <label for="addressInput">ที่อยู่:</label>
+                    <input type="text" id="addressInput" name="address" placeholder="24/85 หมู่ 12 ตำบล บ้านใน จังหวัดกูแพ้ กูงอน" required>
+
+                    <label for="genderSelect">เพศ:</label>
+                    <select id="genderSelect" required>
+                        <option>ชาย</option>
+                        <option>หญิง</option>
+                        <option>อื่นๆ</option>
+                    </select>
+                </div>
+
+                <div class="favoriteSubject">
+                    <p>วิชาที่โปรด:</p>
+                    <div class="radio-group">
+                        <input type="radio" id="Coding" name="favoriteSubject" value="Coding">
+                        <label for="Coding">Coding</label>
+
+                        <input type="radio" id="UIUXDesign" name="favoriteSubject" value="UI/UX Design">
+                        <label for="UIUXDesign">UI/UX Design</label>
+
+                        <input type="radio" id="History" name="favoriteSubject" value="ประวัติศาสตร์">
+                        <label for="History">ประวัติศาสตร์</label>
+                    </div>
+                </div>
+
+                <!-- Submit button -->
+                <button type="submit">ส่งข้อมูล</button>
+            </form>
+        </section>
+    </main>
+
+    <!-- Link to external JavaScript file -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/2024/25-11-2024 (Week 5)/AI Work/index.html b/2024/25-11-2024 (Week 5)/AI Work/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cat</title>
+
+    <!-- Link to custom font from Bunny Fonts -->
+    <link href="https://fonts.bunny.net/css?family=abeezee:400,400i" rel="stylesheet" />
+    <!-- Link to external CSS file -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <main>
+        <section id="cat-form">
+            <h1>กรอกฟอร์มข้อมูลเกี่ยวกับคุณ</h1>
+
+            <!-- Image container with rounded corners -->
+            <div class="image-container">
+              <img src="./Images/cat.png" alt="Image of a kitty cat staring to the screen" id="topImage">
+           </div>
+
+            <!-- Form for user information -->
+            <form onsubmit="handleSubmit(event)">
+                <div class="information">
+                    <label for="nameInput">ชื่อ:</label>
+                    <input type="text" id="nameInput" name="name" placeholder="มานะ อย่าขาด" required>
+
+                    <label for="ageInput">อายุ:</label>
+                    <input type="number" id="ageInput" name="age" placeholder="19" required>
+
+                    <label for="telephoneInput">เบอร์โทร:</label>
+                    <input type="tel" id="telephoneInput" name="tel" placeholder="088-541-5578" required>
+
+                    <label for="dateInput">วันเกิด:</label>
+                    <input type="datetime-local" id="dateInput" name="birthday" required>
+
+                    <label for="addressInput">ที่อยู่:</label>
+                    <input type="text" id="addressInput" name="address" placeholder="24/85 หมู่ 12 ตำบล บ้านใน จังหวัดกูแพ้ กูงอน" required>
+
+                    <label for="genderSelect">เพศ:</label>
+                    <select id="genderSelect" required>
+                        <option>ชาย</option>
+                        <option>หญิง</option>
+                        <option>อื่นๆ</option>
+                    </select>
+                </div>
+
+                <div class="favoriteSubject">
+                    <p>วิชาที่โปรด:</p>
+                    <div class="radio-group">
+                        <input type="radio" id="Coding" name="favoriteSubject" value="Coding">
+                        <label for="Coding">Coding</label>
+
+                        <input type="radio" id="UIUXDesign" name="favoriteSubject" value="UI/UX Design">
+                        <label for="UIUXDesign">UI/UX Design</label>
+
+                        <input type="radio" id="History" name="favoriteSubject" value="ประวัติศาสตร์">
+                        <label for="History">ประวัติศาสตร์</label>
+                    </div>
+                </div>
+
+                <!-- Submit button -->
+                <button type="submit">ส่งข้อมูล</button>
+            </form>
+        </section>
+    </main>
+
+    <!-- Link to external JavaScript file -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/2024/25-11-2024 (Week 5)/AI Work/script.js b/2024/25-11-2024 (Week 5)/AI Work/script.js
@@ -0,0 +1,28 @@
+// This function handles form submission
+function handleSubmit(event) {
+    event.preventDefault(); // Prevents the page from refreshing when the form is submitted
+
+    // Gather data from the form fields
+    var name = document.getElementById("nameInput").value;
+    var age = document.getElementById("ageInput").value;
+    var tel = document.getElementById("telephoneInput").value;
+    var date = document.getElementById("dateInput").value;
+    var address = document.getElementById("addressInput").value;
+    var gender = document.getElementById("genderSelect").value;
+
+    // Handle the favorite subject (radio buttons)
+    var favoriteSubject = document.querySelector('input[name="favoriteSubject"]:checked');
+    var favoriteSubjectValue = favoriteSubject ? favoriteSubject.value : "ไม่ได้เลือกวิชา!";
+
+    // Display collected data in an alert box
+    alert(
+        "ชื่อของคุณคือ: " + name + 
+        "\nอายุของคุณคือ: " + age +
+        "\nเบอร์โทรของคุณคือ: " + tel + 
+        "\nวันเกิดของคุณคือ: " + date + 
+        "\nที่อยู่ของคุณคือ: " + address + 
+        "\nเพศของคุณคือ: " + gender + 
+        "\nวิชาโปรดของคุณคือ: " + favoriteSubjectValue +
+        "\nข้อมูลนี้ถูกส่งมาให้เรา!"
+    );
+}
diff --git a/2024/25-11-2024 (Week 5)/AI Work/style-alt.css b/2024/25-11-2024 (Week 5)/AI Work/style-alt.css
@@ -0,0 +1,149 @@
+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body styles */
+body {
+    font-family: 'ABeeZee', sans-serif;
+    background: linear-gradient(135deg, #f4a261, #2a9d8f); /* Gradient background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #fff; /* Default text color for body */
+    overflow: hidden; /* Prevent content overflow */
+}
+
+/* Container for the form */
+#cat-form {
+    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
+    padding: 40px;
+    border-radius: 15px; /* Rounded corners for the form */
+    width: 100%;
+    max-width: 500px; /* Maximum width to keep form from stretching too wide */
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    animation: fadeIn 1s ease-in-out; /* Fade-in animation */
+    overflow: hidden; /* Prevent form overflow */
+}
+
+/* Fade-in animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Header styles */
+h1 {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 30px;
+    color: #264653; /* Dark color for the header */
+}
+
+/* Form styling for inputs, labels, and buttons */
+label, input, select, button {
+    font-size: 16px;
+    display: block;
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+/* Label color fix for readability */
+label {
+    font-weight: 600;
+    color: #264653; /* Dark color for labels for visibility */
+}
+
+/* Input and Select box styling */
+input, select {
+    padding: 12px;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    font-size: 16px;
+    background-color: #f7f7f7;
+    transition: all 0.3s ease;
+}
+
+input:focus, select:focus {
+    border-color: #2a9d8f;
+    box-shadow: 0 0 5px rgba(42, 157, 143, 0.5);
+}
+
+/* Radio buttons */
+.favoriteSubject input[type="radio"] {
+    margin-right: 10px;
+    accent-color: #2a9d8f; /* Color for the radio button */
+}
+
+.radio-group {
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+/* Button styling */
+button {
+    background-color: #264653;
+    color: white;
+    border-radius: 8px;
+    padding: 14px;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #2a9d8f; /* Hover color */
+}
+
+/* Section for user information */
+.information {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Section for favorite subjects */
+.favoriteSubject {
+    background-color: #ffffff;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Section title styles */
+.favoriteSubject p {
+    font-size: 20px;
+    font-weight: 600;
+    color: #264653;
+    margin-bottom: 10px;
+}
+
+/* Responsive design: Form should be more flexible on smaller screens */
+@media (max-width: 600px) {
+    #moodeng-form {
+        padding: 20px;
+    }
+    h1 {
+        font-size: 28px;
+    }
+    label, input, select, button {
+        font-size: 14px;
+    }
+    .radio-group {
+        flex-direction: column;
+        gap: 10px;
+    }
+}