c4l_funscript/index.html at main · c4llv07e/c4l_funscript · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C4l funscript player</title>
    <style>
      * {
          box-sizing: border-box;
          max-height: 100%;
      }
      html, body {
          background-color: black;
          color: white;
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          max-height: 100%;
          max-width: 100%;
      }
      .video_container {
          flex: 1 1 auto;
          display: flex;
          justify-content: center;
      }
      video {
          width: auto;
          height: auto;
          max-height: 80%; /* I GONNA RAPE FUCKING W3.ORG, IT'S INSANE! */
      }
    </style>
  </head>
  <body>
    <script lang="javascript" src="https://cdn.jsdelivr.net/npm/buttplug@3.0.0/dist/web/buttplug.min.js"></script>
    <div style="display: flex; flex-direction: column; height: 100%;">
      <div>
        <label for="intiface_address_input">Intiface address:</label>
        <input name="intiface_address_input" autocomplete="on" id="intiface_address_input" type="text" placeholder="Intiface websocket address">
      </div>
      <div>
        <button id="intiface_connect_button">Connect</button>
        <button id="intiface_disconnect_button">Disconnect</button>
        <button id="test_vibrate_button">Test vibrate</button>
        <input type="range" id="vibration_rate_input" name="vibration_rate_input" min="0" max="100">
        <label for="vibration_rate_input">Vibration rate</label>
        <input type="checkbox" id="difference_mode_input" name="difference_mode_input" min="0" max="100">
        <label for="difference_mode_input">Difference mode</label>
        <input type="checkbox" id="invert_mode_input" name="invert_mode_input" min="0" max="100">
        <label for="invert_mode_input">Invert mode</label>
      </div>
      <div>
        <label for="video_upload">Video</label>
        <input type="file" id="video_upload" accept="video/*">
        <label for="script_upload">Funscript</label>
        <input type="file" id="script_upload" accept=".funscript">
      </div>
      <div class="video_container">
        <video id="fun_player" controls>
          <p>Is it w3m or something? Why your browser doesn't support video playback?</p>
        </video>
      </div>
    </div>
    <script lang="javascript" src="main.js"></script>
  </body>
</html>