i467/tutorialVR.html at master · klemenkotar/i467 · GitHub

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">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="style/style.css">
    <link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

    <title>TUTORIAL</title>
  </head>

  <body>

<!-- NavBar -->
  <div class="navBar">
    <div id="NavBar-1" class="navBarElement"><a href="#QA1" class="white-text">01</a><span class="white-text"></span></div>
    <div id="NavBar-2" class="navBarElement"><a href="#QA2" class="white-text">02</a><span class="white-text"></span></div>
    <div id="NavBar-3" class="navBarElement"><a href="#QA3" class="white-text">03</a><span class="white-text"></span></div>
  </div>

  <a href="index.html#START" class="x"><img src="img/close.svg"></a>

    <div id="START" class="container-fluid">

    <div id="features" class="container-fluid features">

    <div class="row">
      <div class="col-12">
       <h1 class="vr-web" id="vr" style="position:relative;padding-bottom:0%">Tutorial</h1>
      </div>

    </div>
  </div>


  <div class="wave-wrapper">
  <iframe src="wireframes/inverse/noise.html" frameborder="0" allowfullscreen class="wave" scrolling="no"></iframe>
  </div>


  <!-- 1. VR -->
    <div id="QA0" class="container-fluid inverse">

    <div class="row">
      <div class="col-12">
       <p class="center-text large-text">Welcome to the web VR tutorial. Read through the features of the tour, then click start at the bottom of the page to launch the HFS Tour in your browser.</p>
      </div>
    </div>
  </div>


<!-- 1. Firefox -->
    <div id="QA2" class="container-fluid inverse">

    <div class="row">
      <div class="col-12">
       <h1 class="section-title">Firefox</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
       <p class="center-text large-text">Web VR is currently only supported by the Firefox web browser. You can download it for free on Mac, Windows or Linux.
        <br><br><a href="https://www.mozilla.org/en-US/firefox/new/" style="text-decoration:underline;color:white;">Downlaod Firefox</a></p>
      </div>
    </div>
  </div>

<!-- 2. Language -->
  	<div id="QA1" class="container-fluid inverse">

    <div class="row">
      <div class="col-12">
       <h1 class="section-title">Mandarin? 英文?</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
       <p class="center-text large-text">After entering the tour you will be prompted by two flags representing your narration language choices. Click on a flag to select the language.</p>
      </div>
    </div>
	</div>

  <!-- 3. Language -->
    <div id="QA1" class="container-fluid inverse">

    <div class="row">
      <div class="col-12">
       <h1 class="section-title">Gaze and Click</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
       <p class="center-text large-text">Inside the Web VR experience you can use your mouse to gaze around the room. If a door opens, or an animation appears you can click the left mouse button to move to anotheter part of the room.</p>
      </div>
    </div>
  </div>

  <!-- 4. Have Fun-->
    <div id="QA3" class="container-fluid inverse">

    <div class="row">
      <div class="col-12">
       <h1 class="section-title">Have Fun!
       </h1>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
       <p class="center-text large-text">Enjoy exploring your future home. As you walk around, a voice narration will provide you with information about the rooms, student life and UW in general. Click the Start button to launch the web app.</p>
      </div>
    </div>
  </div>

    <!-- 4. START -->
    <div id="START" class="container-fluid inverse">

    <div id="features" class="container-fluid features">

    <div class="row">
      <div class="col-12">
       <h1 class="vr-web" id="vr"><a class="start-link" href="webvr/index.html">START</a></h1>
      </div>

    </div>
  </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/main-tutorial.js"></script>
    <script src="js/scroll.js"></script>
  </body>
</html>