DuoProject/index.html at master · jdarmoni/DuoProject · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>JuoLingo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="./assets/stylesheets/duoCSS.css">
    <link rel=icon href="./assets/images/DuoImage.png">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background: white;
            display: block;
            margin: 0 auto;
        }
    </style>
    <script type="application/javascript" src="./main.js"></script>
</head>

<body>

    <div>
        <canvas id="myCanvas" width="960" height="640"></canvas>

        <input name= "wordGuess" onfocus="this.blur()" id="translateSubmit" type="text" placeholder="Start Typing!" class="wordGuess" onsubmit="handleSubmit()"/>

    </div>
    <div id="CS">

    </div>
        <div id="hint" class="word-hint">
    </div>

    <div class=crop id ="crop">
        <img src="./assets/images/img-grading-ribbon (1).svg" class="banner" id="banner"/>
    </div>

    <div class="consoleBox">
     </div>

     <div class="terraceBox" id="terraceBox">
         <img src="./assets/images/DuoLogo.png" alt="">
    </div>


            <!--Trigger / Open The Modal-->
                <button id="myBtn" class="myBtn">Instructions</button>

                <!-- The Modal -->
                    <div id="myModal" class="modal">

                        <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <p class="instructions">Instructions!</p>

                <p>Move Duo around with the directional keys! </p>
                <img class="duo-instructions" src ="./assets/images/DuoImage.png" />
                <img class="direction-buttons" src="./assets/images/direction-keys.png"/>

                <p>Press 'Shift' on a box to choose a language or toggle a word!</p>

                <img class="shift-image" src="./assets/images/papa.png" alt="">
                <img class="shift-image2" src="./assets/images/father.png" alt="">

            </div>

            </div>


    <script>
        let myCanvas = document.getElementById('myCanvas').getBoundingClientRect()
        // set location inside of canvas initially
        document.getElementById('terraceBox').style.left = `${myCanvas.left}px`;
        document.getElementById('myBtn').style.left = `${myCanvas.left + 20}px`;
        document.getElementById('translateSubmit').style.right = document.getElementById('myCanvas').getBoundingClientRect().x + 30 + 'px';
        document.getElementById('CS').style.right = document.getElementById('myCanvas').getBoundingClientRect().x + 35 + 'px';


        // detect window resize and reposition inside the canvas
        $(window).resize(function () {
            document.getElementById('terraceBox').style.left = `${document.getElementById('myCanvas').getBoundingClientRect().x}px`;
            document.getElementById('myBtn').style.left = `${document.getElementById('myCanvas').getBoundingClientRect().x + 20}px`;
            document.getElementById('translateSubmit').style.right = document.getElementById('myCanvas').getBoundingClientRect().x + 30 + 'px';
            document.getElementById('CS').style.right = document.getElementById('myCanvas').getBoundingClientRect().x + 35 + 'px';

        });

    </script>


</body>

</html>