Skip to content

Commit 4405610

Browse files
rinkitadhanarinkitadhana
authored
Fix: Range Slider bug fixed and Entire UX of bug hunt page. (OWASP-BLT#3848)
* hunt page enhanced and all bugs solved * changed name from 'bughunt' to 'bug bounty'
1 parent c1a8898 commit 4405610

File tree

1 file changed

+84
-91
lines changed

1 file changed

+84
-91
lines changed

‎website/templates/hunt.html

+84-91
Original file line numberDiff line numberDiff line change
@@ -2,124 +2,117 @@
22
{% load static %}
33
{% load i18n %}
44
{% load custom_tags %}
5-
{% block style %}
6-
<style>
7-
.slider {
8-
width: 100% !important;
9-
}
10-
</style>
11-
{% endblock style %}
125
{% block content %}
6+
{% include "includes/sidenav.html" %}
137
<script src="{% static "js/jquery.validate.js" %}"></script>
148
<!-- Add jQuery UI CSS and JS -->
159
<link rel="stylesheet"
1610
href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
1711
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
18-
<link href="{% static "css/bootstrap-slider.css" %}" rel="stylesheet">
1912
<form role="form"
2013
action="{% url 'hunt' %}"
2114
method="post"
22-
enctype="multipart/form-data"
23-
class="mt-2">
15+
enctype="multipart/form-data">
2416
{% csrf_token %}
25-
<div class="w-full flex justify-center items-center p-8">
26-
<div class="w-[700px] bg-white p-5 shadow-[0px_0px_10px_rgb(174,174,174)]">
27-
<div class="text-center">
28-
<div class="flex justify-center items-center text-5xl font-black space-x-2 sm:text-6xl xs:text-3xl">
29-
<p class="whitespace-nowrap">START A</p>
30-
<p class="text-red-500">BUGHUNT</p>
31-
</div>
32-
<p class="font-bold mt-2">{% trans "Enter URL, APP name or GPS location of issue" %}</p>
33-
<hr class="my-4">
17+
<div class="md:w-[800px] my-8 md:mx-auto mx-2 bg-white md:p-8 p-4 border shadow-md border-gray-200 rounded-lg">
18+
<div class="flex flex-col justify-center items-center ">
19+
<div class="flex justify-center border-b-2 w-fit border-red-300 pb-2.5 gap-2.5 items-center text-4xl font-bold text-black/90 md:text-5xl">
20+
<p class="whitespace-nowrap">{% trans "Start a" %}</p>
21+
<p class="text-red-500">{% trans "Bug Bounty" %}</p>
3422
</div>
35-
{% csrf_token %}
36-
<div class="space-y-4">
37-
<div class="flex items-center border rounded-md overflow-hidden">
38-
<i class="fa fa-bug bg-red-500 text-white p-4"></i>
39-
<input class="w-full p-2 outline-none"
40-
type="text"
41-
placeholder="Name of the bughunt"
42-
name="name"
43-
value="{{ form.url.value|default:'' }}">
44-
</div>
45-
{% if form.errors %}<p class="text-red-500 text-sm mt-1">{{ form.url.errors }}</p>{% endif %}
46-
<div class="flex items-center border rounded-md overflow-hidden">
47-
<i class="fa fa-link bg-red-500 text-white p-4"></i>
48-
<input class="w-full p-2 outline-none"
49-
type="text"
50-
placeholder="http://example.com"
51-
name="url"
52-
value="{{ form.url.value|default:'' }}">
53-
</div>
54-
{% if form.errors %}<p class="text-red-500 text-sm mt-1">{{ form.name.errors }}</p>{% endif %}
55-
<div class="flex items-center border rounded-md overflow-hidden">
56-
<i class="fa fa-file-picture-o bg-red-500 text-white p-5"></i>
57-
<input class="w-full p-2 outline-none" type="file" name="logo">
58-
</div>
59-
{% if form.logo.errors %}<p class="text-red-500 text-sm mt-1">{{ form.logo.errors }}</p>{% endif %}
60-
<div class="flex items-start border rounded-md overflow-hidden">
61-
<i class="fa fa-pencil-square-o bg-red-500 text-white p-4"></i>
62-
<textarea name="description"
63-
id="description"
64-
rows="3"
65-
class="w-full p-2 outline-none"
66-
placeholder="Describe bug issue">{{ form.description.value|default:'' }}</textarea>
23+
<p class="font-medium text-black/60 mt-4">{% trans "Enter URL, APP name or GPS location of issue." %}</p>
24+
</div>
25+
<div class="border-t border-gray-300 my-8"></div>
26+
{% csrf_token %}
27+
<div class="space-y-4">
28+
<div class="flex items-center border rounded-lg overflow-hidden">
29+
<i class="fa fa-bug bg-red-500 text-white p-4"></i>
30+
<input class="w-full py-2 px-3 outline-none placeholder:text-base"
31+
type="text"
32+
placeholder="Name of the bug bounty"
33+
name="name"
34+
value="{{ form.url.value|default:'' }}">
35+
</div>
36+
{% if form.errors %}<p class="text-red-500 text-sm mt-1">{{ form.url.errors }}</p>{% endif %}
37+
<div class="flex items-center border rounded-lg overflow-hidden">
38+
<i class="fa fa-link bg-red-500 text-white p-4"></i>
39+
<input class="w-full py-2 px-3 outline-none placeholder:text-base"
40+
type="text"
41+
placeholder="http://example.com"
42+
name="url"
43+
value="{{ form.url.value|default:'' }}">
44+
</div>
45+
{% if form.errors %}<p class="text-red-500 text-sm mt-1">{{ form.name.errors }}</p>{% endif %}
46+
<div class="relative flex flex-col border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-red-500 transition-colors duration-300 group">
47+
<div class="flex items-center justify-center mb-4">
48+
<i class="fa fa-cloud-upload text-4xl text-red-500 group-hover:scale-110 transition-transform duration-300"></i>
6749
</div>
68-
{% if form.description.errors %}
69-
<p class="text-red-500 text-sm mt-1">{{ form.descriptioon.errors }}</p>
70-
{% endif %}
71-
<div>
50+
<p class="text-center text-gray-600 mb-2">Drag and drop your files here or</p>
51+
<label for="logo-upload"
52+
class="flex items-center justify-center cursor-pointer bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 transition-colors duration-200 mx-auto">
53+
<i class="fa fa-file-o mr-2"></i>
54+
Browse files
55+
</label>
56+
<input id="logo-upload" class="hidden" type="file" name="logo">
57+
<p class="text-center text-xs text-gray-500 mt-2">All file formats are supported</p>
58+
</div>
59+
{% if form.logo.errors %}<p class="text-red-500 text-sm mt-1">{{ form.logo.errors }}</p>{% endif %}
60+
<div class="flex items-start border rounded-lg overflow-hidden">
61+
<i class="fa fa-pencil-square-o bg-red-500 text-white p-4"></i>
62+
<textarea name="description"
63+
id="description"
64+
rows="3"
65+
class="w-full py-2 px-3 outline-none placeholder:text-base h-[180px]"
66+
placeholder="Describe bug issue">{{ form.description.value|default:'' }}</textarea>
67+
</div>
68+
{% if form.description.errors %}<p class="text-red-500 text-sm mt-1">{{ form.descriptioon.errors }}</p>{% endif %}
69+
<div>
70+
<div class="flex items-center border rounded-lg overflow-hidden">
71+
<i class="fa fa-tag bg-red-500 text-white p-4"></i>
7272
<select name="plan"
7373
id="bughunt-select-plan"
74-
class="w-full bg-white text-black border p-2 rounded-md text-lg font-bold">
74+
class="w-full py-2 px-3 bg-white outline-none cursor-pointer placeholder:text-base appearance-none">
7575
<option value="Flea">{% trans "Flea Plan" %} $9.00 / {% trans "Month" %}</option>
7676
<option value="Ant">{% trans "Ant Plan" %} $99.00 / {% trans "Month" %}</option>
7777
<option value="Wasp">{% trans "Wasp Plan" %} $499.00 / {% trans "Month" %}</option>
7878
<option value="Scorpion">{% trans "Scorpion Plan" %} $1499.00 / {% trans "Month" %}</option>
7979
</select>
8080
</div>
81-
<div>
82-
<strong>{% trans "Grand Prize" %}:</strong>
83-
<p>{% trans "Max amount awarded to winner" %}</p>
84-
<input class="slider"
85-
type="text"
81+
</div>
82+
<div>
83+
<h1 class="text-xl font-semibold text-black/85 mt-6 ">{% trans "Grand Prize" %}</h1>
84+
<p class="text-sm text-gray-500">{% trans "Max amount awarded to winner" %}</p>
85+
<div class="relative py-6 px-4 my-6">
86+
<input class="w-full appearance-none h-2 rounded-full bg-gray-200 focus:outline-none"
87+
type="range"
8688
name="prize"
8789
value="{{ form.prize.value|default:'100' }}"
88-
data-provide="slider"
89-
data-slider-min="100"
90-
data-slider-max="10000"
91-
data-slider-step="100"
92-
data-slider-value="{{ form.prize.value|default:'100' }}">
93-
{% if form.prize.errors %}<p class="text-red-500 text-sm mt-1">{{ form.prize.errors }}</p>{% endif %}
94-
</div>
95-
<div class="flex justify-end">
96-
<button type="submit"
97-
class="bg-red-600 text-white font-bold text-lg py-2 px-4 rounded-md hover:bg-red-700">
98-
{% trans "START BUGHUNT" %}!
99-
</button>
90+
min="100"
91+
max="10000"
92+
step="100"
93+
oninput="document.getElementById('prize-value').textContent = '$' + this.value">
94+
<div class="absolute -top-4 left-0 right-0 text-center">
95+
<span class="bg-red-500 text-white px-3 py-1 rounded-md text-sm font-medium"
96+
id="prize-value">${{ form.prize.value|default:'100' }}</span>
97+
</div>
98+
<div class="flex justify-between mt-2 text-xs text-gray-500">
99+
<span>$100</span>
100+
<span>$5,000</span>
101+
<span>$10,000</span>
102+
</div>
100103
</div>
104+
{% if form.prize.errors %}<p class="text-red-500 text-sm mt-1">{{ form.prize.errors }}</p>{% endif %}
105+
</div>
106+
<div class="flex justify-end">
107+
<button type="submit"
108+
class="bg-red-500 text-white font-bold text-lg py-2 px-4 rounded-md hover:bg-red-600">
109+
{% trans "Start Bug Bounty" %}!
110+
</button>
101111
</div>
102112
</div>
103113
</div>
104-
<h1 class="text-center mt-6 font-semibold mb-12">
114+
<h1 class="text-center font-medium my-12">
105115
{% env 'PROJECT_NAME' %} is 100% {% trans "free to use" %}, {% trans "Open Source and a non-commercial" %}, {% trans "not for profit initiative" %}.
106116
</h1>
107117
</form>
108118
{% endblock content %}
109-
{% block after_js %}
110-
<script src='{% static "js/bootstrap-slider.js" %}'></script>
111-
<script>
112-
function numberWithCommas(x) {
113-
var parts = x.toString().split(".");
114-
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
115-
return parts.join(".");
116-
}
117-
118-
$(".slider").slider({
119-
tooltip: 'always',
120-
formatter: function (value) {
121-
return '$' + numberWithCommas(value);
122-
}
123-
});
124-
</script>
125-
{% endblock after_js %}

0 commit comments

Comments
 (0)