CompGraphics-Project/index.html at master · alevanno/CompGraphics-Project · 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
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Furniture Shop</title>
    <link rel="stylesheet" href="styles/style.css">
    <script src="lib/utils.js"></script>
    <script src="lib/app.js"></script>
    <audio src="models/music.mp3" autoplay></audio>
</head>

<body onload="main();">

     <div id="container">
        <canvas id="c" width="1024" height="768" style="background-color: gray;">
            Your browser doesn't support the Canvas Element!
        </canvas>


        <div id='infobox'>
            <p>
            <h1>Furniture Shop</h1>
            <b>How to explore:</b>
            <ul>
                <li>Use the <b>up and down arrow keys</b> to move forward or backward into the furniture shop</li>
                <li>Use <b>left and right arrow keys</b> to rotate the direction</li>
                <li>Use <b>A</b>, <b>D</b> to move left or right into the furniture shop</li>
                <li>Use <b>W</b>, <b>S</b> to rotate the elevation</li>
                <li>When you are near an article, a box with some <b>information</b> and a <b>color selector</b> will pop up
                </li>
                <li>Use the <b>spacebar</b> to toggle a coordinate box</li>
            </ul>
            </p>
        </div>

        <div id='descrbox'>
            <h2 id="furnName">Title</h2>
            <h3>Price:</h3>
            <p>999€</p>
            <h3>Description:</h3>
            <p>An elegant piece of furniture!</p>
            <div id="colourSelector">
                <h3>Colours:</h3>
                <button id="colourBtn1">btn1</button>
                <button id="colourBtn2">btn2</button>
            </div>
        </div>

        <div id="posbox">Position</div>
     </div>


</body>

</html>