Hugging Face's logo

Spaces:
luulinh90s
/
Tabular-LLM-Study-Forward-Simulation
Sleeping

App Files Community
luulinh90s commited on
Commit
66eae26
·
1 Parent(s): eb2147a

update

Browse files
Files changed (2) hide show
  1. templates/completed.html +102 -6
  2. templates/index.html +7 -3
templates/completed.html CHANGED
@@ -3,21 +3,117 @@
3
  <head>
4
  <title>Experiment Completed</title>
5
  <style>
6
- /* ... (keep existing styles) ... */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </style>
 
 
8
  </head>
9
  <body>
10
  <div class="container">
11
- <h1>Thank you! 😃😃😃</h1>
12
- <p>Experiment completed! Your predictions have been recorded.</p>
13
- <p>Prediction Accuracy: {{ accuracy }}%</p>
14
- <p>Predicted TRUE: {{ true_percentage }}%</p>
15
- <p>Predicted FALSE: {{ false_percentage }}%</p>
 
 
 
 
 
 
 
 
 
 
 
16
  <div class="button-container">
17
  <a href="/" style="text-decoration: none;">
18
  <button>Back to Start Page</button>
19
  </a>
20
  </div>
21
  </div>
 
 
 
 
 
 
 
 
22
  </body>
23
  </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/[email protected]/dist/confetti.browser.min.js"></script>
85
  </head>
86
  <body>
87
  <div class="container">
88
+ <h1>Congratulations! 🎉</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 animation
112
+ confetti({
113
+ particleCount: 100,
114
+ spread: 70,
115
+ origin: { y: 0.6 }
116
+ });
117
+ </script>
118
  </body>
119
  </html>
templates/index.html CHANGED
@@ -53,7 +53,7 @@
53
  font-size: 20px;
54
  border-radius: 10px;
55
  cursor: pointer;
56
- transition: background-color 0.3s ease, border 0.3s ease;
57
  border: 2px solid transparent;
58
  font-weight: bold;
59
  text-align: center;
@@ -79,7 +79,8 @@
79
  }
80
  .method-button.selected {
81
  border-color: #000000;
82
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 
83
  }
84
  button[type="submit"] {
85
  background-color: #4CAF50;
@@ -105,7 +106,10 @@
105
  buttons[i].classList.remove('selected');
106
  }
107
 
108
- document.querySelector(`.${method.toLowerCase().replace('-', '-')}`).classList.add('selected');
 
 
 
109
  }
110
 
111
  function validateForm() {
 
53
  font-size: 20px;
54
  border-radius: 10px;
55
  cursor: pointer;
56
+ transition: all 0.3s ease;
57
  border: 2px solid transparent;
58
  font-weight: bold;
59
  text-align: center;
 
79
  }
80
  .method-button.selected {
81
  border-color: #000000;
82
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
83
+ transform: scale(1.05);
84
  }
85
  button[type="submit"] {
86
  background-color: #4CAF50;
 
106
  buttons[i].classList.remove('selected');
107
  }
108
 
109
+ var selectedButton = document.querySelector(`.${method.toLowerCase().replace('-', '-')}`);
110
+ if (selectedButton) {
111
+ selectedButton.classList.add('selected');
112
+ }
113
  }
114
 
115
  function validateForm() {