| <!DOCTYPE html> |
| <html lang="he" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>ืืื ืืชืงืืืืช ืฉืืืขื - ืืืืจื ืืืชืืืืงื</title> |
| <style> |
| |
| @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;800&display=swap'); |
| |
| body { |
| font-family: 'Assistant', sans-serif; |
| background-color: #f8fafc; |
| color: #1e293b; |
| margin: 0; |
| padding: 40px; |
| direction: rtl; |
| } |
| |
| .container { |
| max-width: 800px; |
| margin: 0 auto; |
| background: white; |
| border-radius: 24px; |
| padding: 40px; |
| box-shadow: 0 10px 25px rgba(0,0,0,0.05); |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 40px; |
| border-bottom: 2px solid #e2e8f0; |
| padding-bottom: 20px; |
| } |
| |
| .header h1 { |
| color: #4f46e5; |
| font-size: 32px; |
| margin: 0 0 10px 0; |
| font-weight: 800; |
| } |
| |
| .header p { |
| color: #64748b; |
| font-size: 18px; |
| margin: 0; |
| } |
| |
| .stats-grid { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 40px; |
| gap: 20px; |
| } |
| |
| .stat-card { |
| flex: 1; |
| background: #eff6ff; |
| border-radius: 16px; |
| padding: 24px; |
| text-align: center; |
| border: 1px solid #bfdbfe; |
| } |
| |
| .stat-card h3 { |
| margin: 0 0 10px 0; |
| color: #3b82f6; |
| font-size: 16px; |
| } |
| |
| .stat-card .value { |
| font-size: 36px; |
| font-weight: 800; |
| color: #1d4ed8; |
| margin: 0; |
| } |
| |
| .content-flex { |
| display: flex; |
| gap: 40px; |
| margin-bottom: 40px; |
| } |
| |
| .chart-section { |
| flex: 1; |
| text-align: center; |
| background: #ffffff; |
| border-radius: 20px; |
| padding: 20px; |
| border: 1px solid #e2e8f0; |
| } |
| |
| .chart-section h2 { |
| color: #334155; |
| font-size: 20px; |
| margin-top: 0; |
| } |
| |
| .chart-img { |
| max-width: 100%; |
| height: auto; |
| } |
| |
| .skills-list { |
| flex: 1; |
| } |
| |
| .skill-item { |
| margin-bottom: 20px; |
| } |
| |
| .skill-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 8px; |
| } |
| |
| .skill-name { |
| font-weight: 600; |
| color: #334155; |
| } |
| |
| .skill-score { |
| font-weight: 800; |
| color: #4f46e5; |
| } |
| |
| .progress-bar { |
| height: 12px; |
| background: #e2e8f0; |
| border-radius: 10px; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #6366f1, #3b82f6); |
| border-radius: 10px; |
| } |
| |
| .sub-skills { |
| margin-top: 8px; |
| font-size: 14px; |
| color: #64748b; |
| } |
| |
| .notes-section { |
| background: #fdf2f8; |
| border-radius: 20px; |
| padding: 30px; |
| border: 1px solid #fbcfe8; |
| } |
| |
| .notes-section h2 { |
| color: #be185d; |
| margin-top: 0; |
| font-size: 20px; |
| } |
| |
| .note-item { |
| position: relative; |
| padding-right: 24px; |
| margin-bottom: 12px; |
| color: #831843; |
| font-size: 16px; |
| line-height: 1.5; |
| } |
| |
| .note-item::before { |
| content: "โข"; |
| position: absolute; |
| right: 0; |
| color: #ec4899; |
| font-size: 24px; |
| line-height: 1; |
| } |
| |
| .footer { |
| margin-top: 40px; |
| text-align: center; |
| color: #94a3b8; |
| font-size: 14px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>ืืื ืืชืงืืืืช ืฉืืืขื</h1> |
| <p>ืืืืจื ืืืชืืืืงื | ืฉืืืข {{ week_label }} | {{ student_name }}</p> |
| </div> |
|
|
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <h3>ืกื"ื ืชืจืืืืื ืฉื ืคืชืจื</h3> |
| <p class="value">{{ total_exercises }}</p> |
| </div> |
| <div class="stat-card"> |
| <h3>ืืืืฆืข ืฉืืืื ืืืื</h3> |
| <p class="value">{{ overall_mastery }}%</p> |
| </div> |
| </div> |
|
|
| <div class="content-flex"> |
| |
| <div class="chart-section"> |
| <h2>ืืคืช ืืืืื ืืืืช</h2> |
| <img class="chart-img" src="{{ chart_url }}" alt="Radar Chart"> |
| </div> |
|
|
| <div class="skills-list"> |
| <h2>ืคืืจืื ื ืืฉืืื</h2> |
| {% for skill in skills %} |
| <div class="skill-item"> |
| <div class="skill-header"> |
| <span class="skill-name">{{ skill.name }}</span> |
| <span class="skill-score">{{ skill.score }}%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: {{ skill.score }}%;"></div> |
| </div> |
| <div class="sub-skills"> |
| <strong>ืชืชื-ื ืืฉืืื ืฉืืืคืื:</strong> {{ skill.sub_skills | join(", ") }} |
| </div> |
| </div> |
| {% endfor %} |
| </div> |
| </div> |
|
|
| {% if parent_notes and parent_notes|length > 0 %} |
| <div class="notes-section" style="margin-bottom: 30px;"> |
| <h2>ื ืงืืืืช ืืฉืืืืจ ืืืืืืืง ๐ก</h2> |
| {% for note in parent_notes %} |
| <div class="note-item">{{ note }}</div> |
| {% endfor %} |
| </div> |
| {% endif %} |
|
|
| {% if focus_for_next_week %} |
| <div class="notes-section" style="background: #f0fdfa; border-color: #ccfbf1;"> |
| <h2 style="color: #0d9488;">ืืืจื ืืฉืืืข ืืื ๐ฏ</h2> |
| <div class="note-item" style="color: #115e59;">{{ focus_for_next_week }}</div> |
| </div> |
| {% endif %} |
|
|
| <div class="footer"> |
| <p>ืืืคืง ืขื ืืื ืืขืจืืช ืืืื ื ืืืืืืืชืืช ืฉื ืืืืจื ืืืชืืืืงื</p> |
| </div> |
| </div> |
| </body> |
| </html> |
|
|
