Webmeta/index.html at main · techit45/Webmeta · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>COM-SCI | IT | Cyber | AI</title>
  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Navbar -->
  <nav class="fade-in-down">
    <h1>Login Meta Comp</h1>
    <div>
      <a href="#hero">หน้าแรก</a>
      <a href="#projects">โครงงาน</a>
      <a href="#learn">สอน/เวิร์กช็อป</a>
      <a href="#faculty">คณะ/สาขา</a>
      <a href="#contact">ติดต่อ</a>
    </div>
  </nav>

  <!-- Hero Section -->
  <section id="hero" class="hero fade-in">
    <div class="hero-content">
      <img src="Ai_hero.jpg" class="hero-img animate-pop" alt="AI & Technology Hero">
      <div>
        <h2>เส้นทางเทคโนโลยีแห่งอนาคต</h2>
        <p>เรียนรู้สาย COM-SCI, IT, Cybersecurity และ AI ผ่านโปรเจกต์จริง<br>ตั้งแต่ AI, Data Analysis, Web Security, Automation, และ Web-App</p>
        <a href="#projects" class="cta-btn glow-on-hover">ดูตัวอย่างโครงงาน</a>
      </div>
    </div>
  </section>

  <!-- Projects Section -->
  <div id="projects" class="section-title fade-in-up">ตัวอย่างโครงงานเด่น</div>
  <section class="projects-grid fade-in-up">
    <div class="project-card animate-pop">
      <img src="Data.jpg" alt="Data Analysis" class="project-img">
      <h4>วิเคราะห์ข้อมูลด้วย Python & AI</h4>
      <ul>
        <li>เรียนรู้เครื่องมือพื้นฐานสำหรับ Data Analysis</li>
        <li>ฝึกใช้ AI เพื่อทำนายหรือวิเคราะห์ข้อมูล</li>
        <li>Mini Project: วิเคราะห์ชุดข้อมูลจริง</li>
      </ul>
    </div>
    <div class="project-card animate-pop">
      <img src="Cyber.jpg" alt="Cybersecurity" class="project-img">
      <h4>Cybersecurity Project</h4>
      <ul>
        <li>สร้างเว็บพร้อมระบบความปลอดภัย</li>
        <li>ทดลอง Authentication, SSL, 2FA ฯลฯ</li>
        <li>Mini Project: Web Security Challenge</li>
      </ul>
    </div>
    <div class="project-card animate-pop">
      <img src="AIMarget.jpg" alt="AI Automation" class="project-img">
      <h4>AI-Automation for Marketing</h4>
      <ul>
        <li>สร้าง Chatbot ด้วย AI</li>
        <li>Workflow Automation สำหรับ Marketing</li>
        <li>Mini Project: Chatbot Demo</li>
      </ul>
    </div>
    <div class="project-card animate-pop">
      <img src="Ai_comp.jpg" alt="Web-App" class="project-img">
      <h4>Web-App สำหรับองค์กร</h4>
      <ul>
        <li>ระบบบันทึกเข้า-ออกพนักงาน</li>
        <li>Dashboard & รายงาน</li>
        <li>Mini Project: Staff Attendance App</li>
      </ul>
    </div>
  </section>

  <!-- Learning Path Section -->
  <div id="learning" class="section-title fade-in-up">เส้นทางการเรียนรู้</div>
  <section class="learning-path fade-in-up">
    <img src="roadmap.jpg" alt="Learning Path Infographic" class="learning-img animate-pop">
    <ol>
      <li>เรียนรู้พื้นฐานภาษา Python, HTML/CSS, JavaScript</li>
      <li>เลือกสายงานที่สนใจ (AI, Cybersecurity, Web-App)</li>
      <li>ลงมือทำโปรเจกต์จริง / ส่งประกวด</li>
      <li>นำเสนอผลงาน และเตรียม Portfolio</li>
    </ol>
  </section>

  <!-- Learn Section -->
  <section id="learn" class="learn-block fade-in">
    <div class="section-title-wrapper">
      <h2 class="section-title">เสริมทักษะและโปรเจกต์สายคอม-วิศวะกับหัวข้อยอดนิยม</h2>
    </div>
    <div class="learn-list">
      <div class="learn-card animate-pop">
        <img src="plancom.jpg" alt="Computer Engineering Project" class="learn-card-img">
        <h4>สอนทำโครงงานด้านวิศวะคอมพิวเตอร์</h4>
        <p>แนะแนวคิด การวางระบบ การออกแบบวงจร และการนำซอฟต์แวร์มาประยุกต์ในโปรเจกต์ฮาร์ดแวร์ เช่น IoT, Robot, Automation</p>
      </div>
      <div class="learn-card animate-pop">
        <img src="game.jpg" alt="Game Dev Godot Unity" class="learn-card-img">
        <h4>สอนสร้างเกมด้วย Godot และ Unity</h4>
        <p>เริ่มตั้งแต่พื้นฐานจนถึงการสร้างเกม 2D/3D ระบบฟิสิกส์, UI, AI และการปล่อยลงแพลตฟอร์มต่าง ๆ</p>
      </div>
      <div class="learn-card animate-pop">
        <img src="automate.jpg" alt="AI Automate Make.com N8N" class="learn-card-img">
        <h4>สอนทำ AI Automation ด้วย Make.com & N8N</h4>
        <p>เรียนรู้ระบบ Automation เชื่อมต่อ API, Bot, Workflow อัตโนมัติทั้งแบบ no-code และ low-code</p>
      </div>
      <div class="learn-card animate-pop">
        <img src="basic.jpg" alt="Coding Basic Python C C++ Java" class="learn-card-img">
        <h4>สอนพื้นฐานการเขียนโค้ด Python, C, C++, Java</h4>
        <p>เข้าใจหลักการคิดเชิงตรรกะ อัลกอริทึม การเขียนโค้ดเบื้องต้น พร้อมตัวอย่างงานจริง</p>
      </div>
      <div class="learn-card animate-pop">
        <img src="app.jpg" alt="Web Dev React" class="learn-card-img">
        <h4>สอนสร้างเว็บแอปฯ ด้วย React</h4>
        <p>ตั้งแต่โครงสร้างเว็บ การใช้ Component, State, Props การเชื่อมต่อ API และ Deploy เว็บขึ้นออนไลน์</p>
      </div>
      <div class="learn-card animate-pop">
        <img src="react.jpg" alt="Image Processing Object Detection Classification" class="learn-card-img">
        <h4>สอน Image Processing (Object Detection, Classification)</h4>
        <p>ปูพื้นฐานการใช้ Python, OpenCV, TensorFlow/YOLO เพื่อจำแนกและตรวจจับวัตถุในภาพ</p>
      </div>
    </div>
  </section>

  <!-- Faculty Category Section -->
  <div id="faculty">
    <!-- วาง faculty-category-block.html ที่ตอบไว้ก่อนหน้านี้ตรงนี้เลย -->
    <div class="faculty-category-block">
      <div class="section-title-wrapper"><h2 class="section-title">คณะวิทยาศาสตร์ (สาขาคอมพิวเตอร์และที่เกี่ยวข้อง)</h2></div>
      <p style="text-align:center; margin-top:-1.5rem; margin-bottom: 2rem;">ข้อมูลเบื้องต้นรอบ Portfolio (โปรดตรวจสอบประกาศล่าสุดจากมหาวิทยาลัย)</p>
      <div class="program-list">
        <!-- จุฬา -->
        <div class="program-card-new">
          <div class="program-card-new-header">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_of_Chulalongkorn_University.svg/1200px-Logo_of_Chulalongkorn_University.svg.png" alt="จุฬาฯ Logo" class="program-card-logo">
            <div class="uni-program-name">
              <h5>จุฬาลงกรณ์มหาวิทยาลัย</h5>
              <div class="program-card-subheader">คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์</div>
            </div>
          </div>
          <div class="program-card-new-body">
            <div class="requirements-grid">
              <div class="requirement-block"><h6>GPAX</h6><p><span class="score">≥ 3.25-3.5</span> (ตามโครงการ)</p></div>
              <div class="requirement-block"><h6>English Test</h6><p>พิจารณา (บางโครงการ)</p></div>
              <div class="requirement-block"><h6>จำนวนรับ (รอบพอร์ต)</h6><p>~ <span class="score">20-30</span> คน</p></div>
              <div class="requirement-block"><h6>ค่าเทอม (โดยประมาณ)</h6><p>~ <span class="score">21,000</span> บ./เทอม</p></div>
            </div>
            <div class="popular-majors-info">
              <div class="popular-majors-trigger">ข้อมูลสาขายอดฮิต
                <div class="popular-majors-popup">
                  <h5>ตัวอย่างสาขา/แนวทางยอดฮิตและเกณฑ์เบื้องต้น</h5>
                  <ul>
                    <li><strong>AI & Machine Learning:</strong> GPAX ≥ 3.5, Portfolio (โครงงาน AI/ML), รางวัล สอวน. คอมฯ</li>
                    <li><strong>Software Development:</strong> GPAX ≥ 3.25, Portfolio (ผลงาน Application/Web)</li>
                  </ul>
                  <div class="general-criteria-heading">สิ่งที่ต้องเตรียม (ภาพรวม)</div>
                  <ul><li>Portfolio ผลงานเด่นด้านคอมพิวเตอร์, รางวัลการแข่งขัน, ผลคะแนนภาษาอังกฤษ (ถ้ามี), สอบสัมภาษณ์</li></ul>
                  <div class="rounds-info-heading">จำนวนรับในแต่ละรอบ (โดยประมาณ)</div>
                  <ul class="rounds-info-list">
                    <li>รอบ 1 Portfolio: ส่วนใหญ่</li>
                    <li>รอบอื่นๆ: ตรวจสอบประกาศ</li>
                  </ul>
                  <p style="font-size:0.75em; opacity:0.8; margin-top:10px;"><em>*เป็นข้อมูลโดยประมาณ</em></p>
                </div>
              </div>
            </div>
          </div>
          <div class="program-card-new-footer">
            <a href="https://www.chula.ac.th/academic/faculty-of-science/" target="_blank" rel="noopener noreferrer" class="program-card-link">เว็บไซต์คณะวิทยาศาสตร์ จุฬาฯ</a>
          </div>
        </div>
        <!-- เกษตร -->
        <div class="program-card-new">
          <div class="program-card-new-header">
            <img src="https://upload.wikimedia.org/wikipedia/th/thumb/5/51/Logo_ku_th.svg/1200px-Logo_ku_th.svg.png" alt="ม.เกษตรฯ Logo" class="program-card-logo">
            <div class="uni-program-name">
              <h5>มหาวิทยาลัยเกษตรศาสตร์</h5>
              <div class="program-card-subheader">คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์</div>
            </div>
          </div>
          <div class="program-card-new-body">
            <div class="requirements-grid">
              <div class="requirement-block"><h6>GPAX</h6><p><span class="score">≥ 3.00</span> (ตามโครงการ)</p></div>
              <div class="requirement-block"><h6>English Test</h6><p>พิจารณา (บางโครงการ)</p></div>
              <div class="requirement-block"><h6>จำนวนรับ (รอบพอร์ต)</h6><p>~ <span class="score">30-50</span> คน</p></div>
              <div class="requirement-block"><h6>ค่าเทอม (โดยประมาณ)</h6><p>~ <span class="score">17,000</span> บ./เทอม</p></div>
            </div>
            <div class="popular-majors-info">
              <div class="popular-majors-trigger">ข้อมูลสาขายอดฮิต
                <div class="popular-majors-popup">
                  <h5>ตัวอย่างสาขา/แนวทางยอดฮิตและเกณฑ์เบื้องต้น</h5>
                  <ul>
                    <li><strong>Data Science:</strong> GPAX ≥ 3.00, Portfolio (โครงงานวิเคราะห์ข้อมูล), ความรู้สถิติ/โปรแกรมมิ่ง</li>
                    <li><strong>Game Development:</strong> GPAX ≥ 3.00, Portfolio (ผลงานเกม, Art, Story)</li>
                  </ul>
                  <div class="general-criteria-heading">สิ่งที่ต้องเตรียม (ภาพรวม)</div>
                  <ul><li>Portfolio ผลงาน, โครงการ, ความสามารถพิเศษ, คะแนนสอบมาตรฐาน (ถ้ามี), สัมภาษณ์</li></ul>
                  <div class="rounds-info-heading">จำนวนรับในแต่ละรอบ (โดยประมาณ)</div>
                  <ul class="rounds-info-list">
                    <li>รอบ 1 Portfolio: ส่วนใหญ่</li>
                    <li>รอบอื่นๆ: ตรวจสอบประกาศ</li>
                  </ul>
                  <p style="font-size:0.75em; opacity:0.8; margin-top:10px;"><em>*เป็นข้อมูลโดยประมาณ</em></p>
                </div>
              </div>
            </div>
          </div>
          <div class="program-card-new-footer">
            <a href="https://www.ku.ac.th/th/faculty-of-science/" target="_blank" rel="noopener noreferrer" class="program-card-link">เว็บไซต์คณะวิทยาศาสตร์ เกษตรฯ</a>
          </div>
        </div>
        <!-- มหิดล -->
        <div class="program-card-new">
          <div class="program-card-new-header">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Mahidol_U.png" alt="มหิดล Logo" class="program-card-logo">
            <div class="uni-program-name">
              <h5>มหาวิทยาลัยมหิดล</h5>
              <div class="program-card-subheader">คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์</div>
            </div>
          </div>
          <div class="program-card-new-body">
            <div class="requirements-grid">
              <div class="requirement-block"><h6>GPAX</h6><p>ตามกำหนดคณะ</p></div>
              <div class="requirement-block"><h6>English Test</h6><p>พิจารณา</p></div>
              <div class="requirement-block"><h6>จำนวนรับ (รอบพอร์ต)</h6><p>โปรดตรวจสอบ</p></div>
              <div class="requirement-block"><h6>ค่าเทอม (โดยประมาณ)</h6><p>~ <span class="score">25,000</span> บ./เทอม</p></div>
            </div>
            <div class="popular-majors-info">
              <div class="popular-majors-trigger">ข้อมูลสาขายอดฮิต
                <div class="popular-majors-popup">
                  <h5>ตัวอย่างสาขา/แนวทางยอดฮิตและเกณฑ์เบื้องต้น</h5>
                  <ul><li><strong>Computational Science:</strong> GPAX ≥ 3.00, Portfolio (เน้นการประยุกต์ใช้คอมพิวเตอร์ในงานวิจัย)</li></ul>
                  <div class="general-criteria-heading">สิ่งที่ต้องเตรียม (ภาพรวม)</div>
                  <ul><li>Portfolio ผลงานที่เกี่ยวข้องกับวิทยาการคอมพิวเตอร์, คะแนนภาษาอังกฤษ (อาจมีการพิจารณา), สัมภาษณ์</li></ul>
                  <div class="rounds-info-heading">จำนวนรับในแต่ละรอบ (โดยประมาณ)</div>
                  <ul class="rounds-info-list">
                    <li>รอบ 1 Portfolio: ส่วนใหญ่</li>
                    <li>รอบอื่นๆ: ตรวจสอบประกาศ</li>
                  </ul>
                  <p style="font-size:0.75em; opacity:0.8; margin-top:10px;"><em>*เป็นข้อมูลโดยประมาณ</em></p>
                </div>
              </div>
            </div>
            <p><em>(ข้อมูลสาขา Com Sci ในคณะวิทย์ มหิดล อาจต้องตรวจสอบเพิ่มเติมจากประกาศรับตรงของคณะ)</em></p>
          </div>
          <div class="program-card-new-footer">
            <a href="https://science.mahidol.ac.th/th/" target="_blank" rel="noopener noreferrer" class="program-card-link">เว็บไซต์คณะวิทยาศาสตร์ มหิดล</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Section -->
  <footer id="contact" class="footer-main">
    <div class="container">
      <div class="footer-logos-container">
        <div class="footer-logo">
          <img src="Logo.png" alt="Login Learning Co. Logo">
        </div>
        <div class="partner-logo">
          <img src="LogoMeta.png" alt="Login Meta Co. Logo">
        </div>
      </div>
      <p>ที่อยู่: 917 จรัญสนิทวงศ์ 75 บางพลัด บางพลัด</p>
      <p>พี่ก้อง: <a href="tel:0909699578">090-969-9578</a> / พี่เก็ก: <a href="tel:0834360294">083-436-0294</a></p>
      <p>© 2024 LOGIN LEARNING Co. All rights reserved.</p>
    </div>
  </footer>
  <script src="popup-fix.js"></script>
</body>
</html>