dolphin/index.html at main · guyotJs/dolphin · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <link rel="apple-touch-icon" href="https://guyotjs.github.io/duckclear2.png">
  <title>Guyot</title>
  <link rel="icon" type="image/x-icon" href="https://guyotjs.github.io/duckclear2.png"/>
  <link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc.css">
  <link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc-colors.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./main.css">
</head>
<body data='{view:0,toSearch:"",showSearch:""}' id="body">

    <div class="p-m">
        <a href="https://github.com/guyotjs/"><i class="fa-lg white fa m-m fa-github"></i></a>
        <a href="https://x.com/westonschnee"><i class="fa-lg white fa m-m fa-twitter"></i></a>
    </div>

    <div class="text-center m"><br>
        <p class="f-xxl karla fw-strong bold"><span class="grad fw-strong karla prevent-select">Guyot</span></p><br/>
    </div>

    <br>
    <div class="text-center m-m scale" style="position:relative;z-index:10000;" computer>
        <fieldset class="left-center border-light p r bg-blur grid-2 plr-l" >
            <legend class="plr-m"><i onclick="$('view=0;')" class="fa absolute true-pos-search z-top fa-search m gray fa-lg"></i></legend>
            <input type="text" class="plr-m m-m bg-blur no-bg border-light r karla p white" bind="toSearch" id="updateElement" placeholder="Search for a game!"/><br>
            <div id="links"></div>
        </fieldset>
    </div>
    <br><br><br><br><br>
    <div class="text-center m-m scale" computer>
        <fieldset class="left-center border-light p r bg-blur grid-2">
            <legend class="plr-m"><i onclick="$('view=0;')" class="fa absolute true-pos z-top fa-gamepad m gray fa-lg"></i></legend>
                <div class="border-right-light">
                    <div if="view==0"><div class="incl" style="scale:1.1;" incl="./mode/noselect.html"></div></div>
                    <div if="view==1"><div class="incl" incl="./mode/n64.html"></div></div>
                    <div if="view==2"><div class="incl" incl="./mode/snes.html"></div></div>
                    <div if="view==3"><div class="incl" incl="./mode/gba.html"></div></div>
                    <div if="view==4"><div class="incl" incl="./mode/flash.html"></div></div>
                </div>
                <div class="plr-l p-m">
                    <span onclick="$('view=1;')" class="grad point hover-fw-strong hover-f-m karla">N64</span><br>
                    <span onclick="$('view=2;')" class="grad point hover-fw-strong hover-f-m karla">SNES</span><br>
                    <span onclick="$('view=3;')" class="grad point hover-fw-strong hover-f-m karla">GBA</span><br>
                    <span onclick="$('view=4;')" class="grad point hover-fw-strong hover-f-m karla">FLASH</span><br>
                </div>
                <div style="margin-bottom: 0px;"></div>
        </fieldset>
    </div>
    <br><br><br><br><br><br><br><br>
    <div class="text-center m-m scale" computer>
        <fieldset class="left-center border-light pb-s r bg-blur true-width">
            <legend class="plr-m"> <i class="fa absolute true-pos-file z-top fa-file-text m gray fa-lg"></i></legend>
            <div class="text-center" incl="./mode/apps.html"></div>
        </fieldset>
    </div>

    <!-- <canvas id="myCanvas"></canvas>
    <script src="./moss.js"></script>
    <script src="./snow.js"></script> -->

    <script src="./games.js"></script>
    <script src="./crystalErrorBind.js"></script>
    <script>
        let isPresent;
        let toShow;
        let ljks = document.getElementById("links");
        function search(){
            isPresent = games.filter(([name, _]) => name.toLowerCase().includes(data.toSearch.toLowerCase()));
            // console.log(isPresent)
            toShow = ""
            if(data.toSearch!=""){
                for(let i=0;i<isPresent.length;i++){
                    toShow += `<a href="${isPresent[i][1]}" class="grad-bottom">${isPresent[i][0]}</a><br/>`
                }
                ljks.innerHTML = toShow;
            }else{
                toShow = "";
                ljks.innerHTML = ""
            }
            if(isPresent!=-1){
                data.showSearch = `<a href="${games[isPresent][1]}" class="grad-bottom">${games[isPresent][0]}</a>`
            }else if(data.showSearch!=""){
                data.showSearch = "";
            }
        }
        document.getElementById("updateElement").addEventListener('input',function(evt){
            setTimeout(()=>{
                search();
            },0);
        })
    </script>
</body>
</html>