TripleDNN

Current Directory: /home/kridsana/webapp.cm.in.th/673190902/u67319090028/P001

File Name	Size	Actions
index.php	10409 bytes	Edit \| Delete \| Rename \| Download
process_score.php	2114 bytes	Edit \| Delete \| Rename \| Download

<!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>

</body>
</html>