github_mirrors/ua-parser-js
3
0
Fork 1
mirror of https://github.com/faisalman/ua-parser-js.git synced 2025-09-27 07:58:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

Simplify landing page

Browse Source
This commit is contained in:
Faisal Salman 2025-08-16 18:22:52 +07:00
parent 1a74d8228c
commit 0731651be0
2 changed files with 138 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
cloud/index.html
View File

@ -30,7 +30,7 @@
<a href="https://uaparser.dev/cloud"><h1>
UAParser @Cloud
</h1></a>
<h2>Understand your users. Instantly. Reliably.</h2>
<h2>Understand your traffic better. Instantly. Reliably.</h2>
<img alt="UAParser.js Illustration" class="ui centered image illustration" src="../images/uap-cloud-header.png" />
</div>
</div>
@ -69,34 +69,36 @@
</div>
</div>
</div>
<h3 class="ui dividing header" id="pricing">Pricing</h4>
<table class="ui center aligned collapsing celled unstackable table">
<h3 class="ui dividing header" id="pricing">Pricing<div class="sub header">Monthly API traffics</div></h4>
<table class="ui center aligned collapsing celled unstackable compact table">
<thead>
<tr><th></th>
<tr>
<th>Free</th>
<th>Starter</th>
<th>Growth</th>
<th>Scale</th>
<th>Business</th>
<th>Enterprise</th>
</tr></thead>
</tr>
</thead>
<tbody>
<tr>
<td>API Traffics
<td>1,000 reqs
</td>
<td>25,000
<td>25,000 reqs
</td>
<td>100,000
<td>100,000 reqs
</td>
<td>250,000
<td>250,000 reqs
</td>
<td>1,000,000
<td>1,000,000 reqs
</td>
<td>10,000,000
</td>
</tr>
<tr>
<td>
Monthly price
<p class="ui center aligned">FREE</p>
</td>
<td>
<h2 class="ui center aligned header">$5</h2>
@ -116,21 +118,22 @@
</tr>
<tr>
<td>
<button class="ui grey small button" disabled>SIGNUP</button>
</td>
<td>
<button class="ui grey button" disabled>SIGNUP</button>
<button class="ui grey small button" disabled>SIGNUP</button>
</td>
<td>
<button class="ui grey button" disabled>SIGNUP</button>
<button class="ui grey small button" disabled>SIGNUP</button>
</td>
<td>
<button class="ui grey button" disabled>SIGNUP</button>
<button class="ui grey small button" disabled>SIGNUP</button>
</td>
<td>
<button class="ui grey button" disabled>SIGNUP</button>
<button class="ui grey small button" disabled>SIGNUP</button>
</td>
<td>
<button class="ui grey button" disabled>SIGNUP</button>
<button class="ui grey small button" disabled>SIGNUP</button>
</td>
</tr>
</tbody>

140
index.html
View File

@ -86,7 +86,7 @@
</div>
<div class="what-provides">
What UAParser.js gives you = 🙂✨💡💰 ✅
<span class="ui mini green label">Smart</span>
<span class="ui mini green label">Efficient</span>
<span class="ui mini green label">Insightful</span>
<span class="ui mini green label">Valuable</span>
</div>
@ -286,7 +286,7 @@
</div>
</div>
</div>
<div class="ui horizontal divider">
<!--div class="ui horizontal divider">
QUICKSTART
</div>
<div class="ui top attached tabular menu">
@ -551,7 +551,7 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<a href="https://docs.uaparser.dev/intro/quick-start/using-cli.html" class="ui large violet button" target="_blank">READ DOCS <i class="icon arrow circle right"></i></a>
</div>
</div>
</div-->
<div class="ui horizontal divider">
LOVED BY DEVELOPERS
</div>
@ -1338,17 +1338,105 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
</div>
</div-->
<div class="ui horizontal divider">
CHOOSE YOUR DOWNLOAD PACKAGE
CHOOSE YOUR PACKAGE
</div>
<div class="ui tall stacked segment" id="download">
<div class="ui basic centered segment">
<h2 class="ui dividing header">UAParser.js Package Options<div class="sub header">Comparison between our open-source & commercial editions</div>
<h2 class="ui dividing header">
Package Options
<span class="sub header">Pricing & comparison between editions</span>
</h2>
<table class="ui center aligned collapsing celled unstackable table">
</div>
<div class="ui three stackable cards">
<div class="card">
<div class="content">
<div class="header">PRO Personal</div>
<div class="meta">$14 <span class="subtle">(one-time)</span></div>
</div>
<div class="content">
<div class="ui sub header">Non-commercial usage</div>
<div class="description">
<ul class="ui list">
<li>Full detection features</li>
<li>npm & downloadable</li>
<li>Non-commercial use</li>
<li>Unlimited projects</li>
<li>1 year support</li>
<li>Lifetime updates</li>
</ul>
</div>
</div>
<div class="extra content right aligned">
<a href="https://uaparserjs.lemonsqueezy.com/buy/e226f4da-2c89-428c-8e7a-dfdbdd48bf43"
class="ui violet button" target="_blank">GET NOW<i class="icon arrow circle right"></i></a>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">PRO Business</div>
<div class="meta">$29 <span class="subtle">(one-time)</span></div>
</div>
<div class="content">
<div class="ui sub header">1 License Per Project</div>
<div class="description">
<ul class="ui list">
<li>Full detection features</li>
<li>npm & downloadable</li>
<li>Commercial usage rights</li>
<li>1 project per license</li>
<li>1 year support</li>
<li>Lifetime updates</li>
</ul>
</div>
</div>
<div class="extra content right aligned">
<a href="https://uaparserjs.lemonsqueezy.com/buy/e226f4da-2c89-428c-8e7a-dfdbdd48bf43"
class="ui violet button" target="_blank">GET NOW<i class="icon arrow circle right"></i></a>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">PRO Enterprise</div>
<div class="meta">$599 <span class="subtle">(one-time)</span></div>
</div>
<div class="content">
<div class="ui sub header">Full usage rights</div>
<div class="description">
<ul class="ui list">
<li>Full detection features</li>
<li>npm & downloadable</li>
<li>Commercial usage rights</li>
<li>Unlimited projects</li>
<li>1 year support</li>
<li>Lifetime updates</li>
</ul>
</div>
</div>
<div class="extra content right aligned">
<a href="https://uaparserjs.lemonsqueezy.com/buy/e226f4da-2c89-428c-8e7a-dfdbdd48bf43"
class="ui violet button" target="_blank">GET NOW<i class="icon arrow circle right"></i></a>
</div>
</div>
</div>
<div class="ui styled fluid accordion" style="margin-top: 2em;">
<div class="title">
<i class="dropdown icon"></i>
See Detailed Feature Comparison
</div>
<div class="content">
<table class="ui center aligned collapsing very basic unstackable compact table">
<thead>
<tr>
<th class="left aligned"></th>
<th colspan="2">Open-Source Editions</th>
<th></th>
<th colspan="2">OSS Editions</th>
<th colspan="3">Commercial Editions</th>
</tr>
</thead>
@ -1466,7 +1554,7 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<td class="positive"><i class="large green checkmark icon"></i></td>
</tr>
<tr>
<td class="left aligned">npm module</td>
<td class="left aligned">npm module available</td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
@ -1482,7 +1570,7 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<td class="positive"><i class="large green checkmark icon"></i></td>
</tr>
<tr>
<td class="left aligned">Allows commercial use</td>
<td class="left aligned">Allows commercial usage</td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="negative" data-tooltip="Non-commercial use only (personal/educational/non-profit/etc)" data-inverted=""><i class="large red minus circle icon"></i></td>
@ -1498,7 +1586,15 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<td class="positive"><i class="large green checkmark icon"></i></td>
</tr>
<tr>
<td class="left aligned">Unlimited use per 1 license</td>
<td class="left aligned">No open-source obligations</td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="negative" data-tooltip="Copyleft license" data-inverted=""><i class="large red minus circle icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
</tr>
<tr>
<td class="left aligned">No usage limitation</td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td>
@ -1522,7 +1618,7 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<td class="positive"><i class="large green checkmark icon"></i></td>
</tr>
<tr>
<td class="left aligned">Price</td>
<td class="left aligned">Price (one-time fee)</td>
<td data-tooltip="Pay as you want" data-inverted="">FREE</td>
<td data-tooltip="Pay as you want" data-inverted="">FREE</td>
<td data-tooltip="$14 (one-time fee)" data-inverted="">$14</td>
@ -1533,19 +1629,27 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<tfoot>
<tr>
<th class="right aligned" colspan="6">
<a target="_blank" class="ui icon right labeled violet massive button" href="https://store.faisalman.com/checkout/buy/e236ea87-9b2b-400e-9683-24367f731b35">GET THE PACKAGE <i class="icon arrow circle right"></i></a>
<a target="_blank" class="ui icon right labeled violet huge button" href="https://uaparserjs.lemonsqueezy.com/buy/e226f4da-2c89-428c-8e7a-dfdbdd48bf43">GET NOW<i class="icon arrow circle right"></i></a>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
<div class="ui horizontal divider">
New: UAParser @Cloud
</div>
<div class="ui tall stacked segment">
<div class="ui basic centered segment" id="cloud">
<h2 class="ui dividing header">UAParser @Cloud<div class="floating ui red massive label">NEW</div><div class="sub header">Our @Cloud REST API / MCP service offers seamless integration with any tech stack or AI agent</div>
<h2 class="ui dividing header">UAParser @Cloud<div class="floating ui red label">NEW</div><div class="sub header">Our @Cloud REST API / MCP service offers seamless integration with any tech stack or AI agent</div>
</h2>
<a href="/cloud" target="_blank"><img alt="UAParser.js Illustration" class="ui centered image illustration" src="images/uap-cloud-api.png" /></a>
<pre><code># REST API Example
@ -1564,14 +1668,6 @@ Authorization: Bearer YOUR_API_KEY
</div>
</div>
</div>
<div class="ui horizontal divider">
BONUS: WEB DEVELOPMENT TRIVIA
</div>
<div class="ui tall stacked segment" id="trivia">
<img src="/images/bots-traffic.png" class="ui fluid image">
<img src="/images/client-hints.png" class="ui fluid image">
<img src="/images/device-type.png" class="ui fluid image">
</div>
<div class="ui hidden divider">
</div>
</div>