luulinh90s/Tabular-LLM-Study-Debugging

1<!DOCTYPE html>2<html>3<head>4    <title>Experiment Completed</title>5    <style>6        body {7            font-family: 'Roboto', sans-serif;8            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);9            margin: 0;10            padding: 0;11            display: flex;12            justify-content: center;13            align-items: center;14            height: 100vh;15            overflow: hidden;16        }17        .container {18            background-color: rgba(255, 255, 255, 0.9);19            border-radius: 20px;20            padding: 40px;21            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);22            text-align: center;23            max-width: 600px;24            width: 90%;25        }26        h1 {27            color: #2c3e50;28            font-size: 36px;29            margin-bottom: 30px;30            animation: bounce 1s ease;31        }32        .stats-container {33            display: flex;34            justify-content: space-around;35            flex-wrap: wrap;36            margin-bottom: 30px;37        }38        .stat-card {39            background-color: #fff;40            border-radius: 15px;41            padding: 20px;42            margin: 10px;43            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);44            flex: 1 1 200px;45            transition: transform 0.3s ease;46        }47        .stat-card:hover {48            transform: translateY(-5px);49        }50        .stat-title {51            font-size: 18px;52            color: #7f8c8d;53            margin-bottom: 10px;54        }55        .stat-value {56            font-size: 28px;57            font-weight: bold;58            color: #2c3e50;59        }60        .button-container {61            margin-top: 30px;62        }63        button {64            background-color: #3498db;65            color: white;66            border: none;67            padding: 15px 30px;68            font-size: 18px;69            border-radius: 50px;70            cursor: pointer;71            transition: background-color 0.3s ease, transform 0.3s ease;72        }73        button:hover {74            background-color: #2980b9;75            transform: scale(1.05);76        }77        @keyframes bounce {78            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}79            40% {transform: translateY(-30px);}80            60% {transform: translateY(-15px);}81        }82    </style>83    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">84    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>85</head>86<body>87    <div class="container">88        <h1>Thank you!</h1>89        <p>You've successfully completed the experiment. Your predictions have been recorded.</p>90        <div class="stats-container">91            <div class="stat-card">92                <div class="stat-title">Prediction Accuracy</div>93                <div class="stat-value">{{ accuracy }}%</div>94            </div>95            <div class="stat-card">96                <div class="stat-title">Predicted TRUE</div>97                <div class="stat-value">{{ true_percentage }}%</div>98            </div>99            <div class="stat-card">100                <div class="stat-title">Predicted FALSE</div>101                <div class="stat-value">{{ false_percentage }}%</div>102            </div>103        </div>104        <div class="button-container">105            <a href="/" style="text-decoration: none;">106                <button>Back to Start Page</button>107            </a>108        </div>109    </div>110    <script>111        // Trigger confetti animation112        confetti({113            particleCount: 100,114            spread: 70,115            origin: { y: 0.6 }116        });117    </script>118</body>119</html>