-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlifear_business.html
223 lines (217 loc) · 11 KB
/
lifear_business.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
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<link rel="stylesheet" href="scss/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DGApps - LifeAR</title>
<link rel="shortcut icon" type="image/png" href="Resources/universal/logo.png" />
</head>
<body>
<div id="disclaimer"></div>
<script>
$("#disclaimer").load("html-elements/LifeARDisclaimer.html");
</script>
<!-- template -->
<div id="header"></div>
<div id="nav"></div>
<script>
$("#header").load("html-elements/header.html", function () {
$(".headerTitle").text("LifeAR");
$(".headerImage").attr("src", "Resources/pages/lifear/LifeARLogo.png");
$(".headerLogo").remove();
$(".headerSubtitle").text("Ready To Discover AR?");
$(".header").addClass("lifear");
$(".headerSubtitle").addClass("dark");
});
$("#nav").load("html-elements/nav.html", function () {
$(".burger").addClass("lifear");
$(".bar").addClass("lifear");
$("#menu").addClass("lifear");
$(".innerMenuLink").addClass("lifear");
});
</script>
<!-- main content -->
<div id="contents">
<div class="Section">
<h2 class="text-lifear">Modernizing Traditional Print Media</h2>
<p>LifeAR is a universal augmented reality (AR) platform
that presents information in an interactive and engaging
ways. Use LifeAR to enhance your presentations and to
create unique viewer experiences.</p>
</div>
<div class="TwoColumnSection">
<div class="Section">
<img class="icon small" src="Resources/pages/lifear/discover.svg">
<h2 class="text-lifear-dark">1. Discover</h2>
<p style="margin-top:0;">Point your device at any material that is part of the LifeAR database</p>
</div>
<div class="Section">
<img class="icon small" src="Resources/pages/lifear/info.svg">
<h2 class="text-lifear-dark">2. Learn more</h2>
<p style="margin-top:0;">Watch 3D models, videos, images, websites and more appear</p>
</div>
<div class="Section">
<img class="icon small" src="Resources/pages/lifear/share.svg">
<h2 class="text-lifear-dark">3. Share & Save</h2>
<p style="margin-top:0;">Save the content for later or share it with friends</p style="margin-top:0;">
</div>
</div>
<div class="Section">
<h2 class="text-lifear">What is AR</h2>
<video id="video" class="ColumnSVG" controls>
<source src="Resources/pages/lifear/lifear-demo.mp4" type="video/mp4">Video not supported</video>
<p>
The power of augmented reality (AR) makes images, videos and 3D
models emerge from printed materials and become interactive.
Imagine user manuals or informational flyers with embedded customized videos or 3D models.
With AR, you can make you advertisments standout for your clients!
</p>
</div>
<div class="Section">
<h2 class="text-lifear">Modernizing Printed Marketing</h2>
<table id="table" cellspacing="0">
<tbody id="tableContents">
<tr class="tableHeader">
<th style="color: white;">Capability</th>
<th class="lifearColumn first">LifeAR</th>
<th style="color: white;">Paper</th>
</tr>
<tr>
<td>Interactivity</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td>
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Effects, hidden content, etc.</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td
class="lifearColumn">
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Links to websites</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td>
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Buttons</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td
class="lifearColumn">
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Tracking</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td
class="lifearColumn">
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Quick Content Swapping</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td
class="lifearColumn">
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Download and watch later</td>
<td class="lifearColumn"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg"></td
class="lifearColumn">
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
<tr>
<td>Share with remote friends</td>
<td class="lifearColumn last"><img class="tableIcon" src="Resources/pages/lifear/checkmark.svg">
</td class="lifearColumn">
<td><img class="tableIcon" src="Resources/pages/lifear/x.svg"></td>
</tr>
</tbody>
</table>
</div>
<div id="AddingTargets" class="TwoColumnSection">
<img src="Resources/pages/lifear/how_to_manage_targets.png" class="lifearImage">
<div>
<h2 class="text-lifear">Single Click Target Management</h2>
<p>
All target/content manipulation is done via the LifeAR app. This simplifies the process and allows
you to easily add or remove your targets quickly and easily. Just tap the garbage can to delete or
the Add Target button to add a new target.
</p>
</div>
</div>
<div class="TwoColumnSection">
<div>
<h2 class="text-lifear">Load Targets From Anywhere</h2>
<p>
LifeAR's content management approach allows for adding content and targets from your favourite Cloud
storage providers (i.e. Google Drive) as well as straight from your phone.
</p>
</div>
<img src="Resources/pages/lifear/locations_to_add_from.png" class="lifearImage">
</div>
<div class="TwoColumnSection">
<img src="Resources/pages/lifear/how_to_upload_targets.png" class="lifearImage">
<div>
<h2 class="text-lifear">Add New Targets in 5 Steps</h2>
<ol>
<li>Select a Name</li>
<li>Select a Target (what is recognized by LifeAR)</li>
<li>Select Content (what LifeAR shows ontop of your target)</li>
<li>(Optional). Select your extras (additional content ideas, such as a website or button, that
users can interact with)</li>
<li>Click Upload</li>
</ol>
</div>
</div>
<div class="Section">
<div class="TwoColumnSection">
<a style="width: 100%" href="lifear-faq.html" class="button btn-lifear">FAQ</a>
<a style="width: 100%" href="lifear-gallery.html" class="button btn-lifear">Gallery</a>
</div>
</div>
<!-- id used for anchor -->
<div class="Section" id="Pricing">
<h2 class="text-lifear">Pricing</h2>
<p><strong>Note:</strong> The app is free to use. The prices below only apply to uploading targets to the
database</p>
<div class="row">
<div class="rowItem" id="pricingBasic"></div>
<div class="rowItem" id="pricingSmall"></div>
<div class="rowItem" id="pricingMedium"></div>
<div class="rowItem" id="pricingLarge"></div>
</div>
<div id="pricingCustom"></div>
<div id="included" class="pricingTable custom">
<h3 class="planTitle">Included:</h3>
<ul>
<li>Unlimited free swapping</li>
<li>Saving and sharing options</li>
<li>HTML and Button extras (displayed below the main content area)</li>
</ul>
</div>
</div>
<div id="ActivismSection"></div>
</div>
</div>
<div id="footer"></div>
<div id="superFooter"></div>
<script>
$("#pricingBasic").load("html-elements/pricing-table.html", function () {
createPricingTable("#pricingBasic", "STARTER", "", "1", "$10", false);
});
$("#pricingSmall").load("html-elements/pricing-table.html", function () {
createPricingTable("#pricingSmall", "SMALL", "", "3", "$15", false);
});
$("#pricingMedium").load("html-elements/pricing-table.html", function () {
createPricingTable("#pricingMedium", "MEDIUM", "", "5", "$40", false);
});
$("#pricingLarge").load("html-elements/pricing-table.html", function () {
createPricingTable("#pricingLarge", "LARGE", "", "10", "$60", false);
});
$("#pricingCustom").load("html-elements/pricing-table.html", function () {
createPricingTable("#pricingCustom", "Custom", "Customize your plan fully. Includes displaying images and videos as well as 3D models, transparent video effects as well as HTML extra support and auto upload", "", "$100+", true);
});
$("#footer").load("html-elements/lifearFooter.html");
</script>
<!-- main content ends -->
</body>
</html>