HumanCenteredAI/Ollie
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>🧠 Ollie Feedback</title>7 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">8 <style>9 body {10 background: radial-gradient(circle at center, #0f2027, #203a43, #2c5364);11 color: #fff;12 font-family: "Poppins", sans-serif;13 text-align: center;14 margin: 0;15 padding: 40px 20px;16 }17 h1 {18 color: #00c6ff;19 text-shadow: 0 0 15px rgba(0,198,255,0.8);20 }21 .feedback-section {22 display: flex;23 flex-wrap: wrap;24 justify-content: center;25 gap: 40px;26 margin-top: 30px;27 }28 .video-box {29 flex: 1 1 400px;30 background: rgba(0,0,0,0.3);31 border-radius: 15px;32 padding: 20px;33 box-shadow: 0 0 15px rgba(0,198,255,0.3);34 }35 video {36 width: 100%;37 border-radius: 12px;38 }39 .tips {40 margin-top: 20px;41 text-align: left;42 background: rgba(255,255,255,0.05);43 padding: 20px;44 border-radius: 15px;45 box-shadow: 0 0 10px rgba(255,255,255,0.1);46 }47 ul { list-style-type: "💡 "; padding-left: 20px; }48 li { margin: 10px 0; font-size: 1.05rem; }49 .back-btn {50 display: inline-block;51 margin-top: 30px;52 padding: 12px 30px;53 background: linear-gradient(90deg, #007bff, #00c6ff);54 color: white;55 font-weight: bold;56 text-decoration: none;57 border-radius: 10px;58 box-shadow: 0 0 12px rgba(0,198,255,0.5);59 transition: 0.3s;60 }61 .back-btn:hover {62 background: linear-gradient(90deg, #00aaff, #00e0ff);63 transform: scale(1.05);64 }65 </style>66</head>67<body>68 <h1>🧠 Ollie Feedback</h1>69 <p>Your Ollie attempt was detected as <strong>{{ result }}</strong>.</p>70 71 <div class="feedback-section">72 <!-- User skeleton video -->73 <div class="video-box">74 <h3>🎥 Your Attempt</h3>75 <video controls autoplay loop>76 <source src="{{ video_path }}" type="video/mp4">77 </video>78 </div>79 80 <!-- Optional expert demo -->81 <div class="video-box">82 <h3>🏆 Expert Demo</h3>83 <video controls autoplay loop muted>84 <source src="{{ url_for('static', filename='demo.mp4') }}" type="video/mp4">85 </video>86 </div>87 </div>88 89 <!-- Textual feedback -->90 <div class="tips">91 <h3>📋 Tips for Improvement</h3>92 <ul>93 <li>Try bending your knees more before popping the board.</li>94 <li>Pop the tail harder and faster for more lift.</li>95 <li>Slide your front foot up to level the board mid-air.</li>96 <li>Keep your shoulders square and centered during the jump.</li>97 <li>Land with both feet near the bolts for balance.</li>98 </ul>99 </div>100 101 <a href="/ollie" class="back-btn">🔁 Try Again</a>102</body>103</html>104