thrive4.github.io/webgl.html at main · thrive4/thrive4.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" />
  <meta name="keywords" content="shadertoy, webgl, opengl, shader">
  <title>webgl</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.jpg">
  <link rel="stylesheet" href="main.css" />
  <link rel="stylesheet" href="slide.css" />
  <script src="js/webgl.js"></script>
  <!-- <script src="https://xemantic.github.io/shader-web-background/dist/shader-web-background.min.js"></script> -->
  <!-- WebGL canvas inserted dynamically here -->
  <script type="x-shader/x-fragment" id="Image">
  </script>
</head>
<body>
    <div id="slideshow">
       <p id="time" class="kbslidetime"></p>
       <p id="date" class="kbslidedate"></p>
       <p id="desc" class="kbslidedesc"></p>
       <div id="slideshowcanvas"></div>
       <img src="">
        <div class="fullscreen">
             <button onclick="togglefullscreen();" class="btn"><br><br><br>
             <svg class="svglight" height="32px" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <g id="Fullscreen"><path d="M32,1c0-0.558-0.442-1-1-1l-8.985,0c-0.568,0-0.991,0.448-0.992,1.016C21.023,1.583,21.447,2,22.015,2L30,2
             l-0.016,8.023c0,0.568,0.432,1,1,1c0.568-0.001,1-0.432,1-1L32,1.015c0-0.003-0.001-0.005-0.001-0.007C31.999,1.005,32,1.003,32,1z"/>
             <path d="M10.016,0H1.031C1.028,0,1.026,0.001,1.023,0.001C1.021,0.001,1.018,0,1.016,0c-0.558,0-1,0.442-1,1
             L0,10.008C0,10.576,0.448,11,1.016,11C1.583,11,2,10.576,2,10.008L2.016,2h8c0.568,0,1-0.432,1-1C11.015,0.432,10.583,0,10.016,0z"/>
             <path d="M9.985,30H2v-8c0-0.568-0.432-1-1-1c-0.568,0-1,0.432-1,1v8.985c0,0.003,0.001,0.005,0.001,0.007
             C0.001,30.995,0,30.997,0,31c0,0.558,0.442,1,1,1h8.985c0.568,0,0.991-0.448,0.992-1.016C10.977,30.417,10.553,30,9.985,30z"/>
             <path d="M30.984,21.023c-0.568,0-0.985,0.424-0.984,0.992V30l-8,0c-0.568,0-1,0.432-1,1c0,0.568,0.432,1,1,1
             l8.985,0c0.003,0,0.005-0.001,0.007-0.001C30.995,31.998,30.997,32,31,32c0.558,0,1-0.442,1-1v-8.985 C32,21.447,31.552,21.023,30.984,21.023z"/>
             </g></svg>
             </button>
        </div>
    </div>
    <p id="shadername"></p>
    <p id="shaderid"></p>
    <!-- SVG Overlay -->
    <div id="shaderContainer" style="position:relative; width:100vw; height:100vh; overflow:hidden;">
      <svg id="svgOverlay" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:auto;" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
        <circle id="animatedCircle" cx="400" cy="300" r="50" fill="rgba(255, 255, 255, 0.5)" stroke-width="0" style="cursor:pointer;" />
      </svg>
    </div>
<script type="text/javascript" src="js/lib.js" defer></script>
<script type="text/javascript" src="js/slide.js" defer></script>
</body>
</html>