Skip to content

Commit ef1e7b3

Browse files
tdunn891tdunn891
committed
Improve styling of landing page (index.html)
1 parent 441ece7 commit ef1e7b3

File tree

1 file changed

+217
-12
lines changed

1 file changed

+217
-12
lines changed

‎accounts/templates/index.html‎

Lines changed: 217 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,220 @@
11
{% extends 'base.html' %}
2-
{% block page_heading %}
3-
<h1>Home</h1>
4-
{% endblock %}
2+
{% load bootstrap_tags %}
3+
{% block title %}TrackIt | Home{% endblock %}
4+
{% block page_heading %}{% endblock %}
55
{% block content %}
6-
<br>
7-
<hr>
8-
{% if messages %}
9-
<div>
10-
{% for message in messages %}
11-
{{ message }}
12-
{% endfor %}
13-
</div>
14-
{% endif %}
6+
<div class="row">
7+
<div class="col-5 col-md-4 text-right" style="min-height: 260px;">
8+
<br>
9+
<i class="material-icons align-top" style="font-size: 66px;">track_changes</i>
10+
<div class="vl float-right" style="border-left: 1px solid black;
11+
height: 200px; margin-left: 25px;"></div>
12+
<h2>Log it<br> TrackIt<br> Crack on</h2>
13+
</div>
14+
<div class="col-7 col-md-8">
15+
<h2 class="display-5">Issue and Feature tracking done right</h2>
16+
<br>
17+
<!-- If user already logged in, hide Login and Create Account buttons -->
18+
{% if not user.is_authenticated %}
19+
<!-- <a href="#" class="btn btn-primary btn-sm">
20+
<i class="material-icons align-middle">person</i> Log in as Demo User
21+
</a> -->
22+
<p>Get started today:</p>
23+
<a href="{% url 'registration' %}" class="btn btn-primary"><i class="material-icons align-top">
24+
person_add</i> Create Free Account</a>
25+
<br>
26+
<br>
27+
<p>Returning Users: </p>
28+
<a href="{% url 'login' %}" class="btn btn-outline-primary btn-sm" style="min-width: 160px;"><i
29+
class="material-icons align-top">
30+
input</i> Log In</a>
31+
{% else %}
32+
<br>
33+
<p>Logged in as: <b>{{ user.username }}</b></p>
34+
<p><a href="{% url 'profile' %}">My Account</a></p>
35+
{% endif %}
36+
</div>
37+
</div>
38+
<!-- Features -->
39+
<div class="row bg-light">
40+
<div class="container">
41+
<div class="row">
42+
<div class="col-12">
43+
<br>
44+
<h4 class="text-right"><i class="material-icons align-bottom">build</i> Features</h4>
45+
<br>
46+
</div>
47+
</div>
48+
<div class="row bg-light" style="min-height: 230px;">
49+
<div class="col-12 col-md-4">
50+
<h5><i class="material-icons-outlined align-bottom">confirmation_number</i><br>
51+
Tickets</h5>
52+
<p class="text-muted">Raise Tickets & Feature Requests</p>
53+
</div>
54+
<div class="col-12 col-md-4">
55+
<h5><i class="material-icons-outlined align-bottom">assessment</i><br> Dashboard</h5>
56+
<p class="text-muted">Dynamic charting, providing on-demand insights</p>
57+
<p class="text-muted">At a glance view Tickets by Age, Priority and more</p>
58+
</div>
59+
<div class="col-12 col-md-4">
60+
<h5><i class="material-icons-outlined align-bottom">view_week</i><br> Kanban (PRO)</h5>
61+
<p class="text-muted">Intuitive Kanban view, unlocked with PRO Plan</p>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
<!-- Testimonials -->
67+
<div class="row" style="min-height: 230px;">
68+
<div class="container">
69+
<div class="row">
70+
<div class="col-12">
71+
<br>
72+
<h4><i class="material-icons align-bottom">rate_review</i> Our users tell us</h4>
73+
<br>
74+
</div>
75+
<div class="col-12 col-md-3">
76+
<h5>Useful</h5>
77+
</div>
78+
<div class="col-12 col-md-3">
79+
<h5>Excellent</h5>
80+
</div>
81+
<div class="col-12 col-md-3">
82+
<h5>Great</h5>
83+
</div>
84+
<div class="col-12 col-md-3">
85+
<h5>Nice</h5>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
<!-- Customers -->
91+
<div class="row bg-light" style="min-height: 230px;">
92+
<div class="container">
93+
<div class="row">
94+
<div class="col-12">
95+
<br>
96+
<h4 class="text-right"><i class="material-icons align-bottom">verified_user</i> See Our Customers</h4>
97+
<br>
98+
</div>
99+
<div class="col-12 col-md-3">
100+
<h5>Organisation 1</h5>
101+
</div>
102+
<div class="col-12 col-md-3">
103+
<h5>Organisation 2</h5>
104+
</div>
105+
<div class="col-12 col-md-3">
106+
<h5>Organisation 3</h5>
107+
</div>
108+
<div class="col-12 col-md-3">
109+
<h5>Organisation 4</h5>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
<!-- Plans -->
115+
<div class="row" style="min-height: 230px;">
116+
<div class="container">
117+
<div class="row">
118+
<div class="col-12 text-center">
119+
<br>
120+
<h4>Plans</h4>
121+
<br>
122+
</div>
123+
<div class="col-12 text-center">
124+
<div class="card-deck text-center justify-content-center">
125+
<div class="card border-primary" style="max-width: 18rem;">
126+
<!-- <div class="card-header">Free -->
127+
<div class="card-header">Get Started
128+
<!-- If user is logged in Basic User, show CURRENT -->
129+
{% if user.is_authenticated and not user.profile.is_pro_user %}
130+
<span class="badge badge-primary align-middle">Current Plan</span>
131+
{% endif %}
132+
</div>
133+
<div class="card-body text-primary">
134+
<!-- <h5 class="card-title">Get started</h5> -->
135+
<h5 class="card-title">FREE</h5>
136+
<ul class="list-group text-left">
137+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i> Up to
138+
10 Tickets/month</li>
139+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i>
140+
Dashboard View</li>
141+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i> Image
142+
uploads</li>
143+
</ul>
144+
{% if not request.user.is_authenticated %}
145+
<!-- If user is already authenticated, hide Sign Up button -->
146+
<a href="{% url 'registration' %}" class="btn btn-primary"><i class="material-icons align-top">
147+
person_add</i> Create Account</a>
148+
<br>
149+
<br>
150+
<p>Obligation-free</p>
151+
<p>No credit card required</p>
152+
{% endif %}
153+
</div>
154+
</div>
155+
<div class="card border-primary" style="max-width: 18rem;">
156+
<div class="card-header">PRO
157+
{% if user.profile.is_pro_user %}
158+
<!-- If PRO User, show CURRENT -->
159+
<span class="badge badge-primary align-middle">Current Plan</span>
160+
{% endif %}
161+
</div>
162+
<div class="card-body text-primary">
163+
<!-- <h5 class="card-title">Go PRO</h5> -->
164+
<h5 class="card-title">&euro;9.90 <br>(Single Payment)</h5>
165+
<ul class=" list-group text-left">
166+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i>
167+
UNLIMITED Tickets/month
168+
</li>
169+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i>
170+
Dashboard View</li>
171+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i>
172+
Image
173+
uploads</li>
174+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i>
175+
KANBAN
176+
View</li>
177+
<li class="list-group-item"><i class="material-icons align-top">check_circle_outline</i> 24/7
178+
Live Support
179+
</li>
180+
</ul>
181+
{% if not user.profile.is_pro_user %}
182+
<a href="{% url 'checkout' %}" class="btn btn-primary">Go PRO</a>
183+
{% endif %}
184+
</div>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
<!-- FAQ -->
192+
<div class="row bg-light" style="min-height: 230px;">
193+
<div class="container">
194+
<div class="row">
195+
<div class="col-12">
196+
<br>
197+
<h4><i class="material-icons align-bottom">help_outline</i> Frequently Asked Questions</h4>
198+
<br>
199+
</div>
200+
<div class="col-12 col-md-4">
201+
<b>How many tickets can I raise?</b>
202+
<p class="text-muted">BASIC: 10/month<br>PRO: Unlimited</p>
203+
</div>
204+
<div class="col-12 col-md-4">
205+
<b>What file types can I upload?</b>
206+
<p class="text-muted">All standard image files (&lt;5MB) are supported - JPG, TIFF, PNG.</p>
207+
</div>
208+
<div class="col-12 col-md-4">
209+
<b>How many users can be added?</b>
210+
<p class="text-muted">Up to 500 Users. Please contact us if you require additional users.</p>
211+
</div>
212+
<div class="col-12 col-md-4">
213+
<b>What if I change my mind?</b>
214+
<p class="text-muted">If you are not entirely satified with your PRO membership, refunds are available
215+
within 7 days of payment.</p>
216+
</div>
217+
</div>
218+
</div>
219+
</div>
15220
{% endblock %}

0 commit comments

Comments
 (0)