Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Results Summary</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Hanken Grotesk', sans-serif; | |
| } | |
| body { | |
| background-color: #ECF2FF; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| background-color: white; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| max-width: 700px; | |
| width: 90%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .result { | |
| background: linear-gradient(to top, #4E21CA, #7857FF); | |
| color: white; | |
| text-align: center; | |
| padding: 30px; | |
| } | |
| .result h2 { | |
| font-size: 1rem; | |
| opacity: 0.75; | |
| } | |
| .circle { | |
| background: #4E21CA; | |
| margin: 20px auto; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| .circle h1 { | |
| font-size: 2rem; | |
| } | |
| .circle p { | |
| font-size: 0.8rem; | |
| opacity: 0.75; | |
| } | |
| .result h3 { | |
| margin-top: 10px; | |
| font-size: 1.2rem; | |
| } | |
| .result p { | |
| margin-top: 10px; | |
| font-size: 0.85rem; | |
| opacity: 0.8; | |
| } | |
| .summary { | |
| padding: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .summary h3 { | |
| font-size: 1.1rem; | |
| color: #333; | |
| } | |
| .score { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px; | |
| border-radius: 10px; | |
| font-weight: 700; | |
| } | |
| .reaction { background: #FFF6F5; color: #D73C3C; } | |
| .memory { background: #FFFBF2; color: #EFAD23; } | |
| .verbal { background: #F2FBFA; color: #3A9F8F; } | |
| .visual { background: #F3F3FD; color: #4C4FC1; } | |
| .score span:last-child { | |
| color: #666; | |
| } | |
| button { | |
| margin-top: 10px; | |
| padding: 15px; | |
| background-color: #303B59; | |
| color: white; | |
| border: none; | |
| border-radius: 30px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| button:hover { | |
| background: linear-gradient(to right, #4E21CA, #7857FF); | |
| } | |
| @media (min-width: 768px) { | |
| .container { | |
| flex-direction: row; | |
| } | |
| .result, .summary { | |
| width: 50%; | |
| padding: 40px; | |
| } | |
| .result { | |
| border-radius: 20px 0 0 20px; | |
| } | |
| button { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="result"> | |
| <h2>Your Result</h2> | |
| <div class="circle"> | |
| <h1>76</h1> | |
| <p>of 100</p> | |
| </div> | |
| <h3>Great</h3> | |
| <p>You scored higher than 65% of the people who have taken these tests.</p> | |
| </div> | |
| <div class="summary"> | |
| <h3>Summary</h3> | |
| <div class="score reaction"> | |
| <span>Reaction</span> | |
| <span>80 / 100</span> | |
| </div> | |
| <div class="score memory"> | |
| <span>Memory</span> | |
| <span>92 / 100</span> | |
| </div> | |
| <div class="score verbal"> | |
| <span>Verbal</span> | |
| <span>61 / 100</span> | |
| </div> | |
| <div class="score visual"> | |
| <span>Visual</span> | |
| <span>73 / 100</span> | |
| </div> | |
| <button>Continue</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |