File manager - Edit - /home/kridsana/webapp.cm.in.th/673190902/u67319090028/P001/index.php
Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ฟอร์มกรอกคะแนน</title> <style> body { font-family: Arial, sans-serif; background-color: #1A1A1D; color: #fff; margin: 0; padding: 0; overflow: hidden; position: relative; } .container { width: 60%; margin: 50px auto; background-color: #3B1C32; padding: 20px; border-radius: 12px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); position: relative; z-index: 1; } h1 { text-align: center; color: white; font-size: 36px; font-weight: bold; padding: 15px; margin-bottom: 30px; background: linear-gradient(45deg, #A64D79, #6A1E55); border-radius: 10px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); } input[type="number"] { padding: 10px; width: 100%; text-align: center; margin: 10px 0; border: 2px solid #A64D79; border-radius: 8px; background-color: #1A1A1D; color: white; font-size: 16px; } input[type="number"]:focus { background-color: #6A1E55; border-color: #FF9C73; box-shadow: 0 0 10px #FF9C73; } button { background-color: #A64D79; color: white; padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; margin-top: 20px; width: 100%; text-align: center; } button:hover { background-color: #FF9C73; } .result { margin-top: 30px; text-align: center; } /* ผลลัพธ์แสดงเกรด */ .grade-result { font-size: 36px; font-weight: bold; padding: 20px; margin-top: 30px; border-radius: 12px; text-align: center; color: white; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 0, 150, 0.8), 0 0 30px rgba(255, 0, 150, 0.8), 0 0 40px rgba(255, 0, 150, 0.8); } /* เกรด A */ .grade-A { background: linear-gradient(45deg, #A64D79, #6A1E55); color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด B+ */ .grade-B-plus { background-color: #3B1C32; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด B */ .grade-B { background-color: #6A1E55; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด C+ */ .grade-C-plus { background-color: #3B1C32; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด C */ .grade-C { background-color: #6A1E55; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด D+ */ .grade-D-plus { background-color: #A64D79; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด D */ .grade-D { background-color: #A64D79; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } /* เกรด F */ .grade-F { background-color: #FF6F61; color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 0, 150, 0.7); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 0, 150, 1); } .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .star { position: absolute; font-size: 30px; opacity: 0; animation: sparkle 2s ease-out infinite; } @keyframes sparkle { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(0.5); } } </style> <script> // ฟังก์ชันตรวจสอบคะแนนก่อนส่งข้อมูล function validateForm() { var scoreSpiritual = document.getElementById("score_spiritual").value; var scoreTest = document.getElementById("score_test").value; var scoreHomework = document.getElementById("score_homework").value; var scoreFinal = document.getElementById("score_final").value; if (scoreSpiritual > 20 || scoreSpiritual < 0) { alert("คะแนนจิตพิสัยต้องอยู่ระหว่าง 0 ถึง 20"); return false; } if (scoreTest > 30 || scoreTest < 0) { alert("คะแนนแบบทดสอบต้องอยู่ระหว่าง 0 ถึง 30"); return false; } if (scoreHomework > 20 || scoreHomework < 0) { alert("คะแนนงานต้องอยู่ระหว่าง 0 ถึง 20"); return false; } if (scoreFinal > 30 || scoreFinal < 0) { alert("คะแนนสอบปลายภาคต้องอยู่ระหว่าง 0 ถึง 30"); return false; } return true; } function submitForm(event) { event.preventDefault(); if (!validateForm()) return; var scoreSpiritual = document.getElementById("score_spiritual").value; var scoreTest = document.getElementById("score_test").value; var scoreHomework = document.getElementById("score_homework").value; var scoreFinal = document.getElementById("score_final").value; // สร้างดาว createStars(); // ส่งข้อมูลผ่าน AJAX var xhr = new XMLHttpRequest(); xhr.open("POST", "process_score.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = JSON.parse(xhr.responseText); document.getElementById("resultTable").innerHTML = result.table; document.getElementById("gradeResult").innerHTML = result.grade; document.getElementById("gradeResult").className = result.gradeClass; } }; var data = "score_spiritual=" + scoreSpiritual + "&score_test=" + scoreTest + "&score_homework=" + scoreHomework + "&score_final=" + scoreFinal; xhr.send(data); } function createStars() { var starsContainer = document.createElement('div'); starsContainer.classList.add('stars'); for (var i = 0; i < 50; i++) { var star = document.createElement('div'); star.classList.add('star'); var size = Math.random() * 10 + 20; var positionX = Math.random() * window.innerWidth; var positionY = Math.random() * window.innerHeight; var animationDuration = Math.random() * 2 + 1.5; star.style.left = positionX + 'px'; star.style.top = positionY + 'px'; star.style.fontSize = size + 'px'; star.style.animationDuration = animationDuration + 's'; star.innerHTML = "⭐"; starsContainer.appendChild(star); } document.body.appendChild(starsContainer); setTimeout(function() { starsContainer.remove(); }, 4000); } </script> </head> <body> <div class="container"> <h1>ฟอร์มกรอกคะแนน</h1> <form onsubmit="submitForm(event)"> <label for="score_spiritual">คะแนนจิตพิสัย (เต็ม 20 คะแนน): </label> <input type="number" id="score_spiritual" name="score_spiritual" min="0" max="20" required><br><br> <label for="score_test">คะแนนแบบทดสอบ (เต็ม 30 คะแนน): </label> <input type="number" id="score_test" name="score_test" min="0" max="30" required><br><br> <label for="score_homework">คะแนนงาน (เต็ม 20 คะแนน): </label> <input type="number" id="score_homework" name="score_homework" min="0" max="20" required><br><br> <label for="score_final">คะแนนสอบปลายภาค (เต็ม 30 คะแนน): </label> <input type="number" id="score_final" name="score_final" min="0" max="30" required><br><br> <button type="submit">ส่งข้อมูล</button> </form> <div class="result"> <div id="resultTable"></div> <div id="gradeResult" class="grade-result"></div> </div> </div> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.39 |
proxy
|
phpinfo
|
Settings