forked from hedyorg/hedy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexplore.html
125 lines (124 loc) · 8.61 KB
/
explore.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
{% extends "auth.html" %}
{% block body %}
<div class="px-8 py-12">
{% if achievement %}
<script>
$(function() {
hedyApp.showAchievements({{ achievement|safe }}, false, "");
});
</script>
{% endif %}
<!-- <h2 class="px-8 mb-4">{{_('explore_programs')}}</h2> -->
<!--
<div class="mb-4">
{{_('explore_explanation')}}
</div>
-->
<div class="w-full mb-4" id="program_filter">
<form onsubmit="event.preventDefault (); hedyApp.filter_programs();">
<div class="flex flex-row px-4 w-full items-center border border-gray-400 py-2 rounded-lg gap-4">
<select id="explore_page_adventure" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
<option disabled selected value="">{{ _('adventure') }}</option>
{% for adventure_key, name in adventures_names.items() %}
<option value="{{ adventure_key }}" {% if filtered_adventure and adventure_key == filtered_adventure %}selected{% endif %}>{{ name }}</option>
{% endfor %}
</select>
<select id="explore_page_level" class="block appearance-none w-1/3 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
<option disabled selected value="">{{_('level')}}</option>
{% for i in range(1, (max_level + 1)) %}
<option value="{{ i }}" {% if filtered_level and i|string == filtered_level %}selected{% endif %}>{{ i }}</option>
{% endfor %}
</select>
<select id="explore_page_language" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
<option disabled selected value="">{{_('language')}}</option>
<option value="{{ current_language().lang}}" {% if filtered_lang and filtered_lang == current_language().lang %}selected{% endif %}>{{current_language().sym}}</option>
{% for language in other_languages() %}
<option value="{{language.lang}}"{% if filtered_lang and filtered_lang == language.lang %}selected{% endif %}>{{language.sym}}</option>
{% endfor %}
</select>
<button type="reset" class="red-btn" onclick="window.open('/explore', '_self');">Reset</button>
<button type="submit" class="green-btn px-4">{{_('search_button')}}</button>
</div>
</form>
</div>
<!-- Only show our selected favourites when not filtering -->
{% if not filtered_level and not filtered_adventure and favourite_programs %}
<div class="border rounded-lg border-yellow-500 mb-4 py-2">
<h2 class="text-center z-10 font-bold pb-0 mb-0 text-3xl">{{_('hedy_choice_title')}}</h2>
<div class="flex flex-wrap mx-auto justify-center gap-4 turn-pre-into-ace" id="explore_favourite_programs">
{% for program in favourite_programs %}
<div class="explore-program-box overflow-hidden">
<div class="flex flex-col h-full">
<div class="explore-program-box-title bg-yellow-500">
{{ program.name | truncate(20) }}
</div>
<div class="px-4">
{{_('level')}}: <b>{{ program.level }}</b>
</div>
<div class="px-4">
{{_('number_lines')}}: <b>{{ program.number_lines }}</b>
</div>
<div class="px-4 mb-1 z-10">
{{_('creator')}}: <a {% if program.public_user %}onclick="window.open('/user/{{program.username}}', '_self')"{% endif %} class="{% if program.public_user %}cursor-pointer{% else %}text-black{% endif %} no-underline {% if program.username|length > 12 %} text-sm{% endif %}">{{ program.username|truncate(18) }}</a>
</div>
<div class="relative px-4">
<pre class="no-copy-button" level="{{ program.level }}">{{ program.code }}</pre>
</div>
<div class="mt-auto mb-2 flex items-center justify-around">
<button class="blue-btn px-2 border border-blue-600 py-1 rounded-lg" onclick="window.open (hedyApp.viewProgramLink('{{program.id}}'))">{{_('view_program')}}</button>
<span class="fa fa-flag bg-blue-300 hover:bg-blue-600 p-2 rounded-full text-white cursor-pointer" onclick="hedyApp.report_program('{{_('report_program')}}','{{ program.id }}')"></span>
{% if is_admin %}
<i class="fa fa-star p-2 bg-blue-300 {% if program.hedy_choice %}text-yellow-500{% else %}text-white{% endif %} rounded-full cursor-pointer hover:bg-blue-600" id="{{program.id}}" onclick="hedyApp.set_explore_favourite('{{ program.id }}', {% if program.hedy_choice %}0{% else %}1{% endif %});" aria-hidden="true"></i>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="flex flex-wrap mx-auto justify-center gap-4 turn-pre-into-ace" id="explore_page_programs">
{% for program in programs %}
<div class="explore-program-box overflow-hidden">
<div class="flex flex-col h-full">
<div class="explore-program-box-title {% if program.error %}bg-red-500{% else %}bg-blue-600{% endif %}">
{{ program.name | truncate(20) }}
</div>
<div class="px-4">
{{_('level')}}: <b>{{ program.level }}</b>
</div>
<div class="px-4">
{{_('number_lines')}}: <b>{{ program.number_lines }}</b>
</div>
<div class="px-4 mb-1 z-10">
{{_('creator')}}: <a {% if program.public_user %}onclick="window.open('/user/{{program.username}}', '_self')"{% endif %} class="{% if program.public_user %}cursor-pointer{% else %}text-black{% endif %} no-underline {% if program.username|length > 12 %} text-sm{% endif %}">{{ program.username|truncate(18) }}</a>
</div>
<div class="relative px-4">
<pre class="no-copy-button" level="{{ program.level }}">{{ program.code }}</pre>
</div>
<div class="mt-auto mb-2 flex items-center justify-around">
<button class="blue-btn px-2 border border-blue-600 py-1 rounded-lg" onclick="window.open (hedyApp.viewProgramLink('{{program.id}}'))">{{_('view_program')}}</button>
<span class="fa fa-flag bg-blue-300 hover:bg-blue-600 p-2 rounded-full text-white cursor-pointer" onclick="hedyApp.report_program('{{_('report_program')}}','{{ program.id }}')"></span>
{% if is_admin %}
<i class="fa fa-star p-2 bg-blue-300 {% if program.hedy_choice %}text-yellow-500{% else %}text-white{% endif %} rounded-full cursor-pointer hover:bg-blue-600" id="{{program.id}}" onclick="hedyApp.set_explore_favourite('{{ program.id }}', {% if program.hedy_choice %}0{% else %}1{% endif %});" aria-hidden="true"></i>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{static('/vendor/jquery.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
<script src="{{static('/vendor/ace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
<script src="{{static('/vendor/ext-whitespace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
<script src="{{static('/vendor/ext-rtl.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
<script src="{{static('/vendor/skulpt.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
<script src="{{static('/vendor/skulpt-stdlib.js')}}" type="text/javascript" crossorigin="anonymous"></script>
<script>
window.State = {};
window.State.keyword_language = "{{ g.lang }}";
</script>
<script src="{{static('/js/appbundle.js')}}" type="text/javascript" crossorigin="anonymous"></script>
{% endblock %}