-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathindex.html
executable file
·61 lines (56 loc) · 2.85 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aframe-material😲😆😛</title>
<meta name="description" content="Aframe-Material">
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
<script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
<script src="dist/aframe-material.js"></script>
<script type="text/javascript">
AFRAME.ASSETS_PATH = "./assets";
</script>
</head>
<body>
<a-scene>
<a-entity laser-controls="hand: right"></a-entity>
<a-entity> <a-camera look-controls-enabled wasd-controls-enabled mouse-cursor></a-camera></a-entity>
<!-- BEGIN INPUTS/KEYBOARD -->
<a-keyboard physical-keyboard="true"></a-keyboard>
<a-input position="-0.7 1 -2.5" placeholder="Username" color="black" width="1"></a-input>
<a-input position="-0.7 0.8 -2.5" type="password" placeholder="Password" color="black" width="1"></a-input>
<!-- END INPUTS/KEYBOARD -->
<!-- BEGIN FORM -->
<a-rounded position="0.5 0.5 -2.5" width="4" height="3.1" radius="0.05" rotation="0 -20 0" scale="0.3 0.3 0.3">
<a-form>
<a-switch position="0.2 2.7 0" enabled="true"></a-switch>
<a-radio position="0.2 2.4 0" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>
<a-radio position="0.2 2.1 0" width="3" name="food" label="Veggies" checked="true" disabled="true"></a-radio>
<a-radio position="0.2 1.8 0" width="3" name="food" label="Ice cream"></a-radio>
<a-checkbox position="0.2 1.5 0" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>
<a-checkbox position="0.2 1.2 0" width="3" name="stuff" label="And I am another one" checked="true" disabled="true"></a-checkbox>
<a-button position="0.2 0.8 0" name="stuff" value="Click me" type="raised"></a-button>
<a-button position="0.2 0.35 0" width="3" name="stuff" value="You cannot click me" disabled="true"></a-button>
</a-form>
</a-rounded>
<!-- END FORM -->
<!-- BEGIN TOAST -->
<a-toast message="This is a toast" action="Got it"></a-toast>
<!-- END TOAST -->
<!-- BEGIN ENVIRONEMENT -->
<a-gradient-sky material="shader: gradient; topColor: 255 0 0; bottomColor: 0 121 255;"></a-gradient-sky>
<!-- END ENVIRONEMENT -->
</a-scene>
<script type="text/javascript">
let button = document.querySelector('a-button');
let toast = document.querySelector('a-toast');
toast.addEventListener('actionclick', ()=>{
toast.hide();
});
button.addEventListener('click', ()=> {
toast.show();
});
</script>
</body>
</html>