-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (146 loc) · 7.15 KB
/
index.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
<!DOCTYPE html>
<html lang="en" dir="ltr" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<link rel="stylesheet" href="master.css">
<script type="text/javascript" src="main.js"></script>
<title>Augmented Reality</title>
</head>
<body class="text-black h-100">
<style media="screen">
.bg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.big-200{
height: 200%;
}
</style>
<nav class="navbar navbar-expand-lg navbar-light fixed-top t-nav">
<span class="h4 text-white">Augmented Reality</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse h5" id="top-navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link b" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ar">What is AR</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#browser">AR in the browser</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#education">AR in education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#education-2">What has AR done for education</a>
</li>
</ul>
</div>
</nav>
<br><br>
<div class="container-fluid bg-white h-100 text-center padding-10 bg-ar bg text-white">
<br><br>
<div class="translucent-box-6-5 col-md-5 text-center">
<span class="display-3 text-center margin-10">Augmented Reality</span>
<br>
<span class="display-3 text-center">The Future</span>
<br><br>
</div>
</div>
<span id="ar"></span>
<div class="container-fluid bg-white h-50 text-center">
<br><br>
<span class="display-4 text-center appear">What is augmented reality ?</span>
<br><br>
<div class="h3 text-justify container float-in">
Augmented reality (AR) is an interactive experience of a real-world environment where the objects that reside in the real world are enhanced by computer-generated perceptual information.
Simply put, it means that the real-world environment as seen by the computers is modified to provide some information, or simply enhance user satisfaction.
</div>
</div>
<span id="browser"></span>
<div class="container-fluid bg bg-ar-work">
<div class="container-fluid text-white text-right bg-ar-work bg padding-15">
<span class="col-md-5 h1 text-justify translucent-box-9">Ever wondered how does it feel like ?</span>
</div>
<div class="container-fluid text-white text-left bg-ar-work bg padding-10">
<span class="col-md-5 h1 text-justify translucent-box-9">The world around you, just completely different...</span>
</div>
<div class="container-fluid text-white text-center bg-ar-work bg padding-10">
<div class="h1 text-center translucent-box-9">Follow the below steps to experience AR from within your browser.</div>
<div class="h1 text-center translucent-box-9">Built with the power of AR.js by Jérôme Etienne</div>
</div>
<div class="container text-white text-center bg-ar-work bg padding-10">
<div class="h1 text-center translucent-box-9">
Step 1:
<br>
Download the marker from <a href="marker.pdf" target="_blank">here</a> (pdf file).
</div>
</div>
<div class="container text-white text-center bg-ar-work bg padding-10">
<div class="h1 text-center translucent-box-9">
Step 2:
<br>
Go to <a href="ar-js.html" target="_blank">this page</a> and allow permissions for camera.
</div>
</div>
<div class="container-fluid text-white text-left bg-ar-work bg padding-10">
<div class="h1 text-center translucent-box-9">
Step 3:
<br>
Take a print-out of the marker (the pdf file) and hold it in front of the camera.
<br>
<img src="demo.png" alt="" height="20%" width="20%" style="border-radius: 10px;">
<br>
You should be able to see a cube on top of that marker on your screen as in the image.
<br>
Go ahead! Try to rotate it. The cube should rotate as well. This was just a glimpse of what Augmented Reality can do!
</div>
</div>
<br><br><br>
</div>
<span id="education"></span>
<div class="container-fluid bg-white h-50 text-center">
<br><br>
<span class="display-4 text-center appear">Augmented Reality in education</span>
<br><br>
<div class="h3 text-justify container float-in">
Augmented reality has a number of applications, and a prominent one is education. Using augmented reality in the classroom can turn an ordinary class into an engaging experience. AR technology provides virtual examples and adds gaming elements to support textbook materials. As a result, classes become more interactive. AR helps students better remember the information they’ve just learned.
</div>
</div>
<div class="container-fluid h-50 bg bg-ar-education"></div>
<span id="education-2"></span>
<div class="container-fluid bg-white h-75 text-center">
<br><br><br><br>
<span class="display-4 text-center appear">What all can AR do for education ?</span>
<br><br>
<div class="h3 text-justify container float-in">
AR can be and has been sucessfully implemented for the following:
<br>
<ul>
<li>Paleontology: Example - Dinasour 4D+</li>
<li>Chemistry: Example - Elements 4D</li>
<li>History and Science: Example - Google Expeditions</li>
<li>Medical Education and training: Example - Human Anatomy Atlas</li>
<li>Space education: Example - Project Sidekick</li>
<li>Military training: Example - Augmented Immersive Team Trainer (AITT)</li>
</ul>
</div>
</div>
<div class="h-50 bg bg-ar-education-2"></div>
<div class="footer text-center h5"><br>Augmented Reality : A game changer</div>
</body>
</html>