Redirecting to Daily Progress Update...

/* ตั้งค่าพื้นฐานสำหรับ body */ body { font-family: 'Sarabun', sans-serif; /* ใช้ฟอนต์ Sarabun */ background-color: #e6ffe6; /* พื้นหลังสีเขียวอ่อน */ margin: 0; padding: 20px; display: flex; justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */ align-items: flex-start; /* จัดให้อยู่ด้านบนในแนวตั้ง (เพื่อการเลื่อนที่ดีบนมือถือ) */ min-height: 100vh; /* ความสูงขั้นต่ำเต็มหน้าจอ */ box-sizing: border-box; } /* สไตล์สำหรับ container หลักของเนื้อหา */ .container { max-width: 700px; /* ความกว้างสูงสุดของ container */ width: 100%; margin: 20px auto; /* ระยะห่างจากด้านบนและกึ่งกลางอัตโนมัติ */ background-color: #ffffff; /* พื้นหลังสีขาว */ border-radius: 12px; /* ขอบโค้งมน */ padding: 30px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* เงาของกล่อง */ text-align: center; /* จัดเนื้อหาใน container ให้อยู่กึ่งกลาง */ } /* สไตล์สำหรับรูปภาพ Header */ .header-image { max-width: 100%; /* ทำให้รูปภาพไม่เกินความกว้างของ container */ height: auto; /* รักษาอัตราส่วนของรูปภาพ */ margin-bottom: 20px; /* เว้นระยะห่างด้านล่างรูปภาพ */ border-radius: 8px; /* ทำให้ขอบรูปภาพโค้งมนเล็กน้อย */ display: block; /* เพื่อให้สามารถจัดกึ่งกลางด้วย margin auto ได้ */ margin-left: auto; /* จัดกึ่งกลางรูปภาพ */ margin-right: auto; /* จัดกึ่งกลางรูปภาพ */ } /* สไตล์สำหรับหัวเรื่อง h2 */ h2 { text-align: center; color: #1a5c1a; /* สีเขียวเข้มสำหรับหัวเรื่อง */ margin-bottom: 15px; font-size: 1.8em; /* ขนาดฟอนต์ที่ใหญ่ขึ้น */ } label { font-weight: bold; /* ตัวหนา */ display: block; /* แสดงเป็นบล็อกเต็มบรรทัด */ margin-top: 25px; margin-bottom: 8px; font-size: 1.1em; /* ขนาดฟอนต์ที่ใหญ่ขึ้น */ color: #333; } /* สไตล์สำหรับ input field */ input[type="text"] { padding: 12px; width: calc(100% - 24px); /* คำนวณความกว้างเผื่อ padding */ max-width: 300px; /* ความกว้างสูงสุด */ margin-top: 5px; margin-bottom: 20px; border: 1px solid #a8e6a8; /* เส้นขอบสีเขียว */ border-radius: 8px; /* ขอบโค้งมน */ font-size: 1.1em; /* ขนาดฟอนต์ที่ใหญ่ขึ้น */ text-align: center; /* จัดข้อความใน input ให้อยู่กึ่งกลาง */ box-sizing: border-box; /* ทำให้ padding ไม่เพิ่มขนาดรวม */ } /* สไตล์สำหรับปุ่ม */ button { background-color: #4CAF50; /* สีเขียวสำหรับปุ่ม */ color: white; /* ตัวอักษรสีขาว */ padding: 12px 25px; border: none; /* ไม่มีเส้นขอบ */ border-radius: 8px; /* ขอบโค้งมน */ cursor: pointer; /* เปลี่ยน cursor เป็น pointer เมื่อชี้ */ font-size: 1.1em; /* ขนาดฟอนต์ที่ใหญ่ขึ้น */ font-weight: bold; /* ตัวหนา */ transition: background-color 0.3s ease; /* เอฟเฟกต์เปลี่ยนสีพื้นหลังอย่างนุ่มนวล */ display: inline-block; /* แสดงผลแบบ inline-block เพื่อให้จัดกึ่งกลางได้ */ margin-top: 10px; } button:hover { background-color: #45a049; /* สีเขียวเข้มขึ้นเมื่อเมาส์ชี้ */ } /* สไตล์สำหรับตารางผลลัพธ์ */ table { width: 100%; border-collapse: collapse; /* ยุบเส้นขอบเซลล์ให้เป็นเส้นเดียว */ margin-top: 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* เงาตาราง */ border-radius: 8px; /* ขอบโค้งมนของตาราง */ overflow: hidden; /* ช่วยให้ border-radius แสดงผลถูกต้อง */ } /* สไตล์สำหรับหัวตารางและเซลล์ข้อมูล */ th, td { padding: 15px; text-align: center; border: 1px solid #eee; /* เส้นขอบสีเทาอ่อนมากสำหรับทุกด้านของเซลล์ */ font-size: 1em; } /* สไตล์สำหรับหัวตาราง */ th { background-color: #e6ffe6; /* สีเขียวอ่อนสำหรับพื้นหลังหัวตาราง */ color: #333; /* สีตัวอักษรเข้มขึ้น */ font-weight: bold; text-transform: uppercase; /* ตัวพิมพ์ใหญ่ทั้งหมด */ } /* สไตล์สำหรับแถวคู่ของตาราง */ tr:nth-child(even) { background-color: #f5f5f5; /* สีเทาอ่อนกว่าสำหรับแถวคู่ */ } /* Hover effect สำหรับแถวตาราง */ tr:hover { background-color: #fffacd; /* สีเหลืองอ่อนเมื่อเมาส์วางบนแถว */ cursor: pointer; /* เปลี่ยน cursor เป็น pointer */ } /* สไตล์สำหรับข้อความโหลดข้อมูล */ #loadingIndicator { display: none; text-align: center; color: #666; margin-top: 20px; font-size: 1em; } /* Modal Styles */ .modal { display: none; /* ซ่อน Modal เริ่มต้น */ position: fixed; /* ตำแหน่งคงที่บนหน้าจอ */ z-index: 999; /* อยู่ด้านบนสุดขององค์ประกอบอื่นๆ */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* มี scrollbar ถ้าเนื้อหาเกิน */ background-color: rgba(0,0,0,0.5); /* พื้นหลังทับซ้อนสีดำโปร่งแสง */ align-items: center; /* จัดกึ่งกลางแนวตั้ง */ justify-content: center; /* จัดกึ่งกลางแนวนอน */ } /* สไตล์สำหรับเนื้อหาใน Modal */ .modal-content { background-color: #fff; /* พื้นหลังสีขาว */ padding: 30px; border-radius: 12px; /* ขอบโค้งมน */ max-width: 450px; /* ความกว้างสูงสุด */ width: 90%; /* ความกว้างแบบ responsive */ margin: auto; box-shadow: 0 5px 20px rgba(0,0,0,0.35); /* เงาของ Modal */ text-align: center; position: relative; /* สำหรับตำแหน่งของปุ่มปิด */ } /* สไตล์สำหรับปุ่มปิด Modal (X) */ .modal-close-btn { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #aaa; transition: color 0.3s ease; } .modal-close-btn:hover { color: #666; } /* สไตล์สำหรับหัวเรื่องใน Modal */ #modalTitle { color: #1a5c1a; font-size: 1.5em; margin-bottom: 10px; } /* สไตล์สำหรับข้อความใน Modal */ #modalMessage { font-size: 1.1em; color: #555; margin-bottom: 25px; } /* สไตล์สำหรับกลุ่มปุ่มใน Modal */ .modal-buttons { margin-top: 20px; display: flex; justify-content: center; gap: 15px; /* ระยะห่างระหว่างปุ่ม */ } /* สไตล์สำหรับปุ่มใน Modal */ .modal-buttons button { padding: 10px 22px; border-radius: 8px; font-size: 1em; font-weight: normal; margin: 0; /* Override margin จากกฎ button ทั่วไป */ } /* สไตล์สำหรับปุ่มยืนยันใน Modal */ .confirm-btn { background-color: #4CAF50; } .confirm-btn:hover { background-color: #45a049; } /* สไตล์สำหรับปุ่มยกเลิกใน Modal */ .cancel-btn { background-color: #e74c3c; } .cancel-btn:hover { background-color: #c0392b; } /* Media Queries สำหรับ Responsive Design (สำหรับหน้าจอขนาดเล็กกว่า 600px) */ @media screen and (max-width: 600px) { body { padding: 10px; } .container { padding: 20px 15px; margin: 10px auto; } h2 { font-size: 1.5em; } label, input[type="text"], button { font-size: 1em; } th, td { padding: 10px; font-size: 0.9em; } .modal-content { padding: 20px; } #modalTitle { font-size: 1.3em; } #modalMessage { font-size: 1em; } }

Hello World!