physim/optic.html at main · undeadevs/physim · 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
<!doctype html>
<html lang="id">

<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="./index.css" rel="stylesheet" />
</head>

<body>
    <a href="./" class="home-btn">
        <svg width="94" height="82" viewBox="0 0 94 82" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M49.3088 0.690256C47.9095 -0.230087 46.0905 -0.230085 44.6912 0.690259L1.87557 28.8519C-1.57225 31.1196 0.0469255 36.4444 4.18433 36.4444H12.1945V77.8586C12.1945 80.1458 14.0644 82 16.3711 82H30.2933C32.6001 82 34.47 80.1458 34.47 77.8586V57.1515C34.47 54.8643 36.34 53.0101 38.6467 53.0101H56.7455C59.0523 53.0101 60.9222 54.8643 60.9222 57.1515V77.8586C60.9222 80.1458 62.7922 82 65.0989 82H79.0211C81.3278 82 83.1977 80.1458 83.1977 77.8586V36.4444H89.8157C93.9531 36.4444 95.5722 31.1196 92.1244 28.8518L49.3088 0.690256Z"
                fill="white" />
        </svg>
    </a>
    <main>
        <input type="checkbox" id="controls-toggle" hidden>
        <div class="controls">
            <div class="input-wrapper">
                <input class="choice-controls-input" type="radio" name="sim" id="cermin" value="1" checked hidden />
                <label class="choice-controls-label" for="cermin"><button>Cermin</button></label>

                <input class="choice-controls-input" type="radio" name="sim" id="lensa" value="-1" hidden />
                <label class="choice-controls-label" for="lensa"><button>Lensa</button></label>
            </div>
            <div class="input-wrapper">
                <input class="choice-controls-input" type="radio" name="type" id="cekung" value="1" checked hidden />
                <label class="choice-controls-label" for="cekung"><button>Cekung</button></label>

                <input class="choice-controls-input" type="radio" name="type" id="cembung" value="-1" hidden />
                <label class="choice-controls-label" for="cembung"><button>Cembung</button></label>
            </div>
            <div class="input-wrapper">
                <label for="cursor-mode">Mode</label>
                <select name="cursor_mode" id="cursor-mode">
                    <option value="0" selected>Normal</option>
                    <option value="1">Portal</option>
                </select>
            </div>
            <div class="input-wrapper">
                <label for="obj">Objek</label>
                <select name="obj" id="obj">
                    <option value="0" selected>Paku Payung</option>
                    <option value="1">Balon</option>
                </select>
            </div>
            <div class="input-wrapper">
                <label for="do">Jarak Objek (do)</label>
                <input type="range" name="do" id="do" value="2" min="0" max="15" step="0.05" />
            </div>
            <div class="input-wrapper">
                <label for="ho">Tinggi Objek (ho)</label>
                <input type="range" name="ho" id="ho" value="2" min="0" max="15" step="0.05" />
            </div>
            <div class="input-wrapper">
                <label for="f">Jarak Fokus (f)</label>
                <input type="range" name="f" id="f" value="2.5" min="0" max="15" step="0.05" />
            </div>
            <div class="input-wrapper">
                <button id="clear-portal-btn">Clear Portal</button>
            </div>

            <label for="controls-toggle" class="action-btn"></button>
        </div>
        <canvas id="cv-optic"> </canvas>
    </main>
    <script src="./js/main/optic.js" type="module"></script>
</body>

</html>