Skip to content

Render lang/arch/platform as inline radios instead of ugly list boxes #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xusheng6 merged 3 commits into from
Jul 26, 2026
Merged

Render lang/arch/platform as inline radios instead of ugly list boxes #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
076eacb
Render lang/arch/platform as inline radios instead of ugly list boxes…
xusheng6 Jul 26, 2026
cd2e590
Box the metadata choices, add difficulty radios, unify search (#169)
xusheng6 Jul 26, 2026
eb82f0d
Box the labels region on the upload form too (#169)
xusheng6 Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion app/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ def create_app(config_path=None, config=None):
def inject_globals():
from flask import session
from app.models.user import user_get_unread_notifications
from app.services.crackme_fields import (
DIFFICULTY_CHOICES, LANG_CHOICES, ARCH_CHOICES, PLATFORM_CHOICES)

username = session.get('name', '')
unread_notifs = 0
Expand All @@ -96,7 +98,11 @@ def inject_globals():
'AuthLevel': 'auth' if username else 'anon',
'usersess': username,
'unread_notifications': unread_notifs,
'RECAPTCHA_SITEKEY': config['Recaptcha'].get('SiteKey', '') if config['Recaptcha'].get('Enabled') else ''
'RECAPTCHA_SITEKEY': config['Recaptcha'].get('SiteKey', '') if config['Recaptcha'].get('Enabled') else '',
'DIFFICULTY_CHOICES': DIFFICULTY_CHOICES,
'LANG_CHOICES': LANG_CHOICES,
'ARCH_CHOICES': ARCH_CHOICES,
'PLATFORM_CHOICES': PLATFORM_CHOICES,
}

# Register template filters
Expand Down
53 changes: 53 additions & 0 deletions app/services/crackme_fields.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
"""Controlled vocabularies for a crackme's single-value classification fields.

Language, architecture and platform are each a single value chosen on the
upload and edit forms. Keeping the option lists here (instead of hardcoding
them into each template) means the upload form, the edit form and any future
consumer all agree on the exact same choices.
"""

# (submitted value, display label) pairs — the value is the stored integer.
DIFFICULTY_CHOICES = [
('1', '1. Very Easy'),
('2', '2. Easy'),
('3', '3. Medium'),
('4', '4. Hard'),
('5', '5. Very Hard'),
('6', '6. Insane'),
]

LANG_CHOICES = [
'C/C++',
'Assembler',
'Java',
'Go',
'Rust',
'WebAssembly',
'Python',
'AutoIt',
'(Visual) Basic',
'Borland Delphi',
'Turbo Pascal',
'.NET',
'Unspecified/other',
]

ARCH_CHOICES = [
'x86',
'x86-64',
'java',
'ARM',
'MIPS',
'RISC-V',
'other',
]

PLATFORM_CHOICES = [
'Mac OS X',
'Multiplatform',
'Unix/linux etc.',
'Windows',
'Android',
'iOS',
'Unspecified/other',
]
13 changes: 13 additions & 0 deletions static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,19 @@ a:active { color: #9acc14;}
.form-select:focus {
border-color: #9acc14;
}
/* Boxed inline radio/checkbox group (templates/partial/choice_inputs.html).
Keeps each metadata field (difficulty/lang/arch/platform) visually
separated instead of blending into the fields around it. */
.choice-box {
border: .05rem solid #444;
border-radius: .1rem;
padding: 8px 10px 4px;
}
.choice-box .form-radio,
.choice-box .form-checkbox {
margin-bottom: 4px;
}

button, select {
text-transform: none;
}
Expand Down
69 changes: 25 additions & 44 deletions templates/crackme/create.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,68 +38,47 @@ <h3>Quick Rules</h3>
<label class="form-label">Difficulty</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="difficulty" name="difficulty" multiple="">
<option value="1">1. Very Easy</option>
<option value="2">2. Easy</option>
<option value="3">3. Medium</option>
<option value="4">4. Hard</option>
<option value="5">5. Very Hard</option>
<option value="6">6. Insane</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'difficulty' %}
{% set choice_options = DIFFICULTY_CHOICES %}
{% set choice_selected = '' %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="lang">Language</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="lang" name="lang" multiple="">
<option value="C/C++">C/C++</option>
<option value="Assembler">Assembler</option>
<option value="Java">Java</option>
<option value="Go">Go</option>
<option value="Rust">Rust</option>
<option value="WebAssembly">WebAssembly</option>
<option value="Python">Python</option>
<option value="AutoIt">AutoIt</option>
<option value="(Visual) Basic">(Visual) Basic</option>
<option value="Borland Delphi">Borland Delphi</option>
<option value="Turbo Pascal">Turbo Pascal</option>
<option value=".NET">.NET</option>
<option value="Unspecified/other">Unspecified/other</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'lang' %}
{% set choice_options = LANG_CHOICES %}
{% set choice_selected = '' %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="arch">Arch</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="arch" name="arch" multiple="">
<option value="x86">x86</option>
<option value="x86-64">x86-64</option>
<option value="java">java</option>
<option value="ARM">ARM</option>
<option value="MIPS">MIPS</option>
<option value="RISC-V">RISC-V</option>
<option value="other">other</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'arch' %}
{% set choice_options = ARCH_CHOICES %}
{% set choice_selected = '' %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="platform">Platform</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="platform" name="platform" multiple="">
<option value="Mac OS X">Mac OS X</option>
<option value="Multiplatform">Multiplatform</option>
<option value="Unix/linux etc.">Unix/linux etc.</option>
<option value="Windows">Windows</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="Unspecified/other">Unspecified/other</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'platform' %}
{% set choice_options = PLATFORM_CHOICES %}
{% set choice_selected = '' %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
Expand All @@ -113,9 +92,11 @@ <h3>Quick Rules</h3>
applies, the specific technique underneath &mdash; ticking a technique ticks its category
automatically. Reviewers may adjust these later.
</p>
{% set label_input_name = 'labels' %}
{% set checked_labels = [] %}
{% include 'partial/labels_checkboxes.html' %}
<div class="choice-box">
{% set label_input_name = 'labels' %}
{% set checked_labels = [] %}
{% include 'partial/labels_checkboxes.html' %}
</div>
</div>
</div>
<div class="form-group">
Expand Down
48 changes: 15 additions & 33 deletions templates/crackme/edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,53 +16,35 @@ <h2>Edit crackme: {{ crackme.name }}</h2>
<label class="form-label" for="lang">Language</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="lang" name="lang" multiple="">
<option value="C/C++" {{ 'selected' if crackme.lang == 'C/C++' else '' }}>C/C++</option>
<option value="Assembler" {{ 'selected' if crackme.lang == 'Assembler' else '' }}>Assembler</option>
<option value="Java" {{ 'selected' if crackme.lang == 'Java' else '' }}>Java</option>
<option value="Go" {{ 'selected' if crackme.lang == 'Go' else '' }}>Go</option>
<option value="Rust" {{ 'selected' if crackme.lang == 'Rust' else '' }}>Rust</option>
<option value="WebAssembly" {{ 'selected' if crackme.lang == 'WebAssembly' else '' }}>WebAssembly</option>
<option value="Python" {{ 'selected' if crackme.lang == 'Python' else '' }}>Python</option>
<option value="AutoIt" {{ 'selected' if crackme.lang == 'AutoIt' else '' }}>AutoIt</option>
<option value="(Visual) Basic" {{ 'selected' if crackme.lang == '(Visual) Basic' else '' }}>(Visual) Basic</option>
<option value="Borland Delphi" {{ 'selected' if crackme.lang == 'Borland Delphi' else '' }}>Borland Delphi</option>
<option value="Turbo Pascal" {{ 'selected' if crackme.lang == 'Turbo Pascal' else '' }}>Turbo Pascal</option>
<option value=".NET" {{ 'selected' if crackme.lang == '.NET' else '' }}>.NET</option>
<option value="Unspecified/other" {{ 'selected' if crackme.lang == 'Unspecified/other' else '' }}>Unspecified/other</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'lang' %}
{% set choice_options = LANG_CHOICES %}
{% set choice_selected = crackme.lang %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="arch">Arch</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="arch" name="arch" multiple="">
<option value="x86" {{ 'selected' if crackme.arch == 'x86' else '' }}>x86</option>
<option value="x86-64" {{ 'selected' if crackme.arch == 'x86-64' else '' }}>x86-64</option>
<option value="java" {{ 'selected' if crackme.arch == 'java' else '' }}>java</option>
<option value="ARM" {{ 'selected' if crackme.arch == 'ARM' else '' }}>ARM</option>
<option value="MIPS" {{ 'selected' if crackme.arch == 'MIPS' else '' }}>MIPS</option>
<option value="RISC-V" {{ 'selected' if crackme.arch == 'RISC-V' else '' }}>RISC-V</option>
<option value="other" {{ 'selected' if crackme.arch == 'other' else '' }}>other</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'arch' %}
{% set choice_options = ARCH_CHOICES %}
{% set choice_selected = crackme.arch %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="platform">Platform</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="platform" name="platform" multiple="">
<option value="Mac OS X" {{ 'selected' if crackme.platform == 'Mac OS X' else '' }}>Mac OS X</option>
<option value="Multiplatform" {{ 'selected' if crackme.platform == 'Multiplatform' else '' }}>Multiplatform</option>
<option value="Unix/linux etc." {{ 'selected' if crackme.platform == 'Unix/linux etc.' else '' }}>Unix/linux etc.</option>
<option value="Windows" {{ 'selected' if crackme.platform == 'Windows' else '' }}>Windows</option>
<option value="Android" {{ 'selected' if crackme.platform == 'Android' else '' }}>Android</option>
<option value="iOS" {{ 'selected' if crackme.platform == 'iOS' else '' }}>iOS</option>
<option value="Unspecified/other" {{ 'selected' if crackme.platform == 'Unspecified/other' else '' }}>Unspecified/other</option>
</select>
{% set choice_type = 'radio' %}
{% set choice_name = 'platform' %}
{% set choice_options = PLATFORM_CHOICES %}
{% set choice_selected = crackme.platform %}
{% include 'partial/choice_inputs.html' %}
</div>
</div>
<div class="form-group">
Expand Down
22 changes: 22 additions & 0 deletions templates/partial/choice_inputs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{# Inline radio/checkbox group, boxed and laid out like the label checkboxes
(templates/partial/labels_checkboxes.html) instead of an ugly multi-line
select list box.

Expects:
choice_type - 'radio' (single-select) or 'checkbox' (multi-select)
choice_name - form field name (e.g. 'lang')
choice_options - list of options; each item is either a plain string
(value == label) or a (value, label) pair
choice_selected - radio: the selected value string ('' when none)
checkbox: a list of the selected values #}
<div class="choice-box">
{% for opt in choice_options %}
{% set val = opt if opt is string else opt[0] %}
{% set text = opt if opt is string else opt[1] %}
{% set is_checked = (val in choice_selected) if choice_type == 'checkbox' else (choice_selected == val) %}
<label class="form-{{ choice_type }}" style="display: inline-block; margin-right: 16px;">
<input type="{{ choice_type }}" name="{{ choice_name }}" value="{{ val }}"{{ ' checked' if is_checked else '' }}>
<i class="form-icon"></i> {{ text }}
</label>
{% endfor %}
</div>
Loading
Loading