forked from Malik04121/Clockify_clone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
upgrade.html
284 lines (264 loc) · 19 KB
/
upgrade.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./UPGRADE.css">
<link rel="stylesheet" href="./styles/upgrade.css">
<script
src="https://kit.fontawesome.com/04cd54677b.js"
crossorigin="anonymous"
></script>
<link rel="icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/navbar.css" />
<link rel="stylesheet" href="./styles/footer.css" />
</head>
<body>
<div id="navbar"></div>
<div id="mobNavbar" data-mobNavbar="0"></div>
<div class="top_section">
<h1 class="title">Choose your pricing plan</h1>
<p class="paragraph">Get started for free and UPGRADE to get more features!</p>
</div>
<div class="pricing_plans">
<div class="pricing_box">
<p>BASIC</p>
<p>Administration</p>
<p><br>$ <span class="bigger-number">3</span>.99 USD<br><span class="per-month">per <span class="kiosk-price-inline">full</span> user/month billed annually<br>(or $4.99 if billed monthly)</span></p>
<button>UPGRADE</button>
<ul id="detail_list">
<li><span >✓</span> All FREE features</li>
<hr>
<li><span >✓</span> <span >Add time for others<br></span></li>
<li><span >✓</span> <span >Hide time & pages<br></span></li>
<li><span >✓</span> <span >Required fields<br></span></li>
<li><span >✓</span> <span >Bulk edit<br></span></li>
<li><span >✓</span> <span >Decimal format<br></span></li>
<li><span >✓</span> <span >Time audit<br></span></li>
<li><span >✓</span> <span >Customize export<br></span></li>
<li><span >✓</span> <span >Historic rates<br></span></li>
<li><span >✓</span> <span >Import time<br></span></li>
<li><span >✓</span> <span >PIN & Break<br></span></li>
</ul>
</div>
<div class="pricing_box">
<p class="pricing_plans_head">STANDARD</p>
<p>Timesheeting & Billing</p>
<p><br>$ <span class="bigger-number">5</span>.49 USD<br><span class="per-month">per <span class="kiosk-price-inline">full</span> user/month billed annually<br>(or $6.99 if billed monthly)</span></p>
<button>UPGRADE</button>
<ul id="detail_list">
<li><span >✓</span> All FREE features</li>
<hr>
<li class="colorless"><span >✓</span> <span >Time off<br></span></li>
<li class="colorless"><span >✓</span> <span >invoicing<br></span></li>
<li class="colorless"><span >✓</span> <span >Approval<br></span></li>
<hr>
<li class="colorless"><span >✓</span> <span >Manager role<br></span></li>
<li class="colorless"><span >✓</span> <span >Lock timesheets<br></span></li>
<li class="colorless"><span >✓</span> <span >Rounding<br></span></li>
<li class="colorless"><span >✓</span> <span >QuickBooks Integration<br></span></li>
<li class="colorless"><span >✓</span> <span >Force 2FA<br></span></li>
<li class="colorless"><span >✓</span> <span >Customize kiosk<br></span></li>
</ul>
</div>
<div id="popular" >
<div><p >MOST POPULAR <img src="https://clockify.me/assets/images/most-popular.svg" alt="" ></p></div>
<p class="pricing_plans_head1">PRO</p>
<p>Productivity & Profit</p>
<p><br>$ <span class="bigger-number">7</span>.99 USD<br><span class="per-month">per <span class="kiosk-price-inline">full</span> user/month billed annually<br>(or $9.99 if billed monthly)</span></p>
<button>UPGRADE</button>
<ul id="detail_list">
<li><span >✓</span> All FREE features</li>
<hr>
<li><span >✓</span> <span >All STANDARD features<br></span></li>
<li><span >✓</span> <span >Scheduling<br></span></li>
<li><span >✓</span> <span >Budget & estimates<br></span></li>
<hr>
<li><span >✓</span> <span >custom fields<br></span></li>
<li><span >✓</span> <span >User fields<br></span></li>
<li><span >✓</span> <span >Labor cost & profit<br></span></li>
<li><span >✓</span> <span >Scheduled reports<br></span></li>
<li><span >✓</span> <span >Force timer<br></span></li>
<li><span >✓</span> <span >GPS tracking<br></span></li>
<li><span >✓</span> <span >Screenshots<br></span></li>
</ul>
</div>
<div class="pricing_box">
<p class="pricing_plans_head">ENTERPRISE</p>
<p >Control & Security</p>
<p><br>$ <span class="bigger-number">11</span>.99 USD<br><span class="per-month">per <span class="kiosk-price-inline">full</span> user/month billed annually<br>(or $14.99 if billed monthly)</span></p>
<button>UPGRADE</button>
<ul id="detail_list">
<li ><span >✓</span> All PRO features</li>
<hr>
<li><span >✓</span> Single sign-on(SSO)</li>
<li><span >✓</span> Custom subdomain</li>
<li><span >✓</span> Control accounts</li>
<li><span >✓</span> Audit log</li>
<hr>
</ul>
<p class="self-hosting-plan"><a>Request DEMO</a></p>
</div>
</div>
<div class="lower_topsection">
<span >FOREVER FREE</span>
<p >Unlimited tracking • Unlimited users • Unlimited projects • Unlimited reports<br>Apps and integrations • Team chat • Support • API</p>
<span ><a >GET STARTED NOW</a></span>
</div>
<hr style="width:75%">
<div class="customer">
<p>
<h2>Join millions of happy customer</h2>
<!-- <br> -->
<p>4.7 RATING • 4,000+ REVIEWS • 95% CUSTOMER SATISFACTION</p>
</p>
<img src="https://clockify.me/assets/images/customers-light-gray-3.svg">
<div class="rating">
<img src=" https://clockify.me/assets/images/review-site-capterra-gray.svg" alt="">
<img src="https://clockify.me/assets/images/review-site-software-advice-gray.svg" alt="">
<img src="https://clockify.me/assets/images/review-site-g2-crowd-gray.svg" alt="">
<img src="https://clockify.me/assets/images/review-site-crozdesk-gray.svg" alt="">
<img src="https://clockify.me/assets/images/review-site-trust-radius-gray.svg" alt="">
<img src="https://clockify.me/assets/images/review-site-getapp-gray.svg" alt="">
</div>
<hr>
</div>
<div>
<h2>Frequently asked questions</h2>
<div class="faq">
<div>
<h3>Are there any limits in the free plan?</h3>
<p>You can track as much time and invite as many users as you want, and use Clockify for free as long as you want. We also offer support to everyone, regardless of their plan. If you need additional features, you can UPGRADE at any time.</p>
</div>
<div class="faq-item">
<h3>Can I try out the paid features?</h3>
<p>Absolutely! You can try out all PRO features for free for 7 days, no credit card required. You can <a style="color:#03a9f4;" rel="nofollow" href="https://app.clockify.me/UPGRADE?freeTrial=true">activate the free trial</a> on the UPGRADE page. If you need more time, be sure to <a style="color:#03a9f4;" href="/help/contact/sales">contact our sales team</a> for an extension and a demo.</p>
</div>
<div>
<h3>What is a seat?</h3>
<p>Each active user requires a paid seat. If you deactivate some user, you free up their paid seat so you can invite a new user. If you buy another seat mid-cycle, you'll be charged a prorated price for that billing cycle.</p>
</div>
<div class="faq-item">
<h3>Are there any additional taxes?</h3>
<p>No, we take care of all the taxes. The price you see is what you'll get charged in the end. You can enter your VAT number, but it will only be used as an additional piece of information displayed on your invoices.</p>
</div>
<div>
<h3>How does canceling work?</h3>
<p>You can cancel your subscription at any time in just a couple of clicks on the UPGRADE page. Once you cancel and the current subscription expires, you will be downgraded to the free version and no further charges will be made. You won't lose any data (canceling only affects access to the extra features).</p>
</div>
<div class="faq-item">
<h3>What types of payment are supported?</h3>
<p>We support payments by credit card for all plans. We support wire transfers and purchase orders for ENTERPRISE plan (annual billing, over 50 seats).</p>
</div>
<div>
<h3>Do you offer refunds?</h3>
<p>We don't offer refunds. But, if you were mistakenly charged due to system error, contact us and we'll immediately issue you a refund. If you wish to test extra features, we recommend activating the <a style="color:#03a9f4;" href="https://app.clockify.me/UPGRADE?freeTrial=true">free 7-day trial</a> first, BEFORE making any payment.</p>
</div>
<div class="faq-item">
<h3>Do you offer discounts?</h3>
<p>We offer 20% OFF on all our plans when paying annually. Other than that, we don't offer any further discounts. We keep all our prices affordable so everyone gets the best possible deal, no negotiation necessary.</p>
</div>
<div>
<h3>How does kiosk pricing work?</h3>
<p>If you use the kiosk mode, you can add limited users and pay a separate lower price for them. Limited users can only use Clockify via the kiosk you open. You can transform them to full users by adding their email so they can access the rest of Clockify.</p>
</div>
<div class="faq-item">
<h3>How does yearly pricing work?</h3>
<p>You prepay a seat for the whole year in advance and get 20% OFF. If you add another seat midway, you pay a prorated price for the rest of the year. If you need someone for just a brief period, you can deactivate them later to free up their paid seat for someone else.</p>
</div>
<hr>
</div>
</div>
<div class="basic">
<div class="basic_head">
<h3><a style="color: black;">BASIC</a> <a>STANDARD</a> <a>PRO</a> <a>ENTERPRISE</a></h3>
<hr>
</div>
<p>
HIDE TIME & PAGES
</p>
<h3>Prevent users from seeing everything</h3>
<p>Usually, people in your workspace can see everyone's time entries. But you can limit their access and hide them completely so each regular user on the workspace can only view their own entries.</p>
<p>You can also hide pages from the sidebar that others don't need. In case you have a lot of contractors, you can hide the Team page so people don't see other members, or hide Projects and Reports so people can focus just on tracking time.</p>
<img src=" https://clockify.me/assets/images/extra-features/hide-time-pages-example.png">
<hr>
<p>REQUIRED FIELDS</p>
<h3>Prevent incomplete time entries</h3>
<p>Make your most important fields required so no one can create entries with missing information (like details of what was done). Once entries are properly categorized, you'll no longer have to spend hours fixing other people's timesheets.</p>
<img src="https://clockify.me/assets/images/extra-features/required-fields-example.png">
<hr>
<p>TIME AUDIT</p>
<h3>Clean up your reports</h3>
<p>Find all uncategorized entries or entries that are suspiciously short/long, and fix them. Once everything is properly labeled and cleaned up, you can lock them and share the report with clients.</p>
<img src="https://clockify.me/assets/images/extra-features/time-audit-example.png">
<hr>
<p>HISTORIC RATES</p>
<h3>Update all your past hourly rates</h3>
<p>When you change an hourly rate, you can choose if the new rate applies to only newly create time entries from now on, if you wish to overwrite previous rate on existing time entries, or if you wish apply the new rate from a certain date forward.</p>
<img src="https://clockify.me/assets/images/extra-features/historic-rates-example.png">
<hr>
<p>EDIT PROFILE</p>
<h3>Change your teammate's information</h3>
<p>Edit your team member's profile information (like their name or week start) directly yourself, without having to wait for them to do it.</p>
<img src="https://clockify.me/assets/images/extra-features/edit-profiles-example.png">
<hr>
<p>CUSTOMIZE EXPORT</p>
<h3>Add logo and remove columns from reports</h3>
<p>When exporting reports, choose which columns you don't need in the CSV/Excel, or what you wish to be displayed on the PDF (data, charts, different report name, company logo, etc).</p>
<img src=" https://clockify.me/assets/images/extra-features/customize-export-example.png">
<hr>
<p>BULK EDIT</p>
<h3>Update multiple entries and projects</h3>
<p>Select all the time entries or projects you wish to update, and then edit their properties. Perfect for record keeping, like when you need to mark entries as invoiced, move them to a different project, mark projects as private, etc.</p>
<img src=" https://clockify.me/assets/images/extra-features/bulk-edit-example.png">
<hr>
<p>DECIMAL FORMAT</p>
<h3>See and export time in decimal format</h3>
<p>Switch to decimal duration format, and all time will be displayed and exported in decimals (instead of the clock format).
Also, if you type a single digit in a timesheet cell, it will be treated as hour (eg. if you type 1, it will be transformed to 1h).</p>
<img src="https://clockify.me/assets/images/extra-features/decimal-format-example.png">
<hr>
<p>ADD TIME FOR OTHERS</p>
<h3>Log time on behalf of your team</h3>
<p>Add time on other people's behalf right from the report. You can add time either for a single user, or for a whole group at once. Or alternatively, switch to your teammate's timesheet and quickly populate their timesheet for them. This way, you'll no longer have to wait for someone to add the missing time.</p>
<img src=" https://clockify.me/assets/images/extra-features/add-time-others-example.png">
<hr>
<p>PROJECT TEMPLATES</p>
<h3>Set up a lot of identical projects</h3>
<p>Once you have a project with tasks set up, set it as a template. Then, every time you create a new project, you'll be able select the template and have all the tasks and settings copied over to the new project. Perfect if you have a lot of similar projects for different clients.</p>
<img src="https://clockify.me/assets/images/extra-features/project-templates-example.png">
<hr>
<p>PIN & BREAK</p>
<h3>Clock in with PIN and take breaks</h3>
<p>When clocking in and out via the kiosk, require employees to sign in with their personal 4-digit PIN code. You can also clock in for others using the kiosk's secret Universal PIN code/
You can also create multiple kiosks for different locations, plus have the same one open on multiple devices simultaneously.
You can enable breaks, so people can take a break while clocked in and track how much time they spend on breaks.</p>
<img src=" https://clockify.me/assets/images/extra-features/kiosk-pin-break-example.png">
<hr>
</div>
<div id="upgrade">UPGRADE NOW</div>
<div id="bottom_portion1">
<div id="bottom_portion">
<h2 class="sign_up_top">Start tracking time with Clockify</h2>
<div class="sign_up_mid">
<p>24/7 Support</p><p>•</p><p>Cancel Anytime</p><p>•</p><p>Free Forever</p>
</div>
<button class="sign_up__button">Create FREE account</button>
<p class="hero__text--signed-up-get-started"><img class="hero__text--signed-up-icon" src="https://clockify.me/assets/images/signed-up-icon.svg" alt="Number of people that started tracking time with Clockify in the last 7 days"><span class="NumberOfUsers">136,163 people signed up last month</span></p>
</div>
</div>
<div id="footer"></div>
<script type="module">
import { navbar, mobNavbar } from "./components/navbar.js";
let navbarContainer = document.querySelector("#navbar");
navbarContainer.innerHTML = navbar();
let mobnavbarContainer = document.querySelector("#mobNavbar");
mobnavbarContainer.innerHTML = mobNavbar();
import footer from "./components/footer.js";
let footerContainer = document.querySelector("#footer");
footerContainer.innerHTML = footer;
</script>
<script src="./scripts/navbar.js"></script>
</body>
</html>