InterdimentionalCable/index.html at main · raunakpatil/InterdimentionalCable · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>InterDimentional Cable TV</title>
  <meta name="description" content="A free browser-based broadcast TV simulator. Flip through bizarre channels of interdimensional cable — no pause, no rewind, just pure chaos.">
  <meta name="theme-color" content="#050403">

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">

  <!-- Favicon (CRT emoji) -->
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📺</text></svg>">

  <link rel="stylesheet" href="style.css?v=61">
</head>
<body>

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  ROOM CONTAINER (Used for zooming)                      -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <div id="room-container">

    <!-- ═══════════════════════════════════════════════════════ -->
    <!--  ROOM BACKGROUND                                       -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <div id="room-bg"></div>

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  THE TV UNIT                                            -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <div id="tv-unit">
    <div id="tv-shell">
      <div id="tv-screen">

        <!-- Video content wrapper (animated on power on/off) -->
        <div id="tv-content">

          <!-- YouTube player fills this -->
          <div id="yt-player"></div>

          <!-- Blocks all clicks/touches on the YouTube player -->
          <div id="player-blocker"></div>

        </div>
        <!-- /tv-content -->

        <!-- CRT effect overlays -->
        <div id="phosphor-overlay"></div>
        <div id="glass-reflection"></div>

        <!-- Static noise (canvas, shown during channel switch) -->
        <div id="static-overlay">
          <canvas id="static-canvas"></canvas>
        </div>

        <!-- On-screen displays -->
        <div id="channel-osd">
          <div class="osd-channel-num">CH 01</div>
        </div>
        <div id="commercial-bug">AD</div>

        <!-- Power off black screen -->
        <div id="power-off-screen" class="active"></div>

      </div>
      <!-- /tv-screen -->
    </div>
    <!-- /tv-shell -->
  </div>
  <!-- /tv-unit -->

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  TV OFF BACKGROUND (Initial Scene)                      -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <img id="tv-off-bg" src="assets/tvoff.jpeg" alt="TV Off">

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  ROOM OVERLAY (Chroma Key Canvas)                       -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <canvas id="room-overlay-canvas"></canvas>

  </div>
  <!-- /room-container -->

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  ON-SCREEN REMOTE CONTROL                               -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <div id="remote-control">
    <div id="remote-led"></div>
    <button class="remote-btn" id="btn-power" title="Power (P)" style="display: flex; align-items: center; justify-content: center;">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
        <line x1="12" y1="2" x2="12" y2="12"></line>
      </svg>
    </button>

    <div class="remote-label">CHANNEL</div>
    <div class="remote-row">
      <button class="remote-btn" id="btn-ch-down" title="Channel Down (←)">◀</button>
      <button class="remote-btn" id="btn-ch-up" title="Channel Up (→)">▶</button>
    </div>

    <div class="remote-label">VOLUME</div>
    <div class="remote-row">
      <button class="remote-btn" id="btn-vol-down" title="Volume Down (↓)">−</button>
      <button class="remote-btn" id="btn-vol-up" title="Volume Up (↑)">+</button>
    </div>

    <button class="remote-btn" id="btn-mute" title="Mute (M)" style="margin-top: 6px; display: flex; align-items: center; justify-content: center;">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
        <line x1="23" y1="9" x2="17" y2="15"></line>
        <line x1="17" y1="9" x2="23" y2="15"></line>
      </svg>
    </button>
  </div>

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  BOOT SEQUENCE TEXT                                     -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <div id="boot-text"></div>
  <div id="mobile-swipe-hint">You Can Also Swipe<br>Any Direction<br>To change the channels</div>

  <!-- ═══════════════════════════════════════════════════════ -->
  <!--  SCRIPTS (order matters — deps loaded first)            -->
  <!-- ═══════════════════════════════════════════════════════ -->
  <script src="channels.js?v=65"></script>
  <script src="commercials.js?v=65"></script>
  <script src="sounds.js?v=65"></script>
  <script src="effects.js?v=65"></script>
  <script src="youtube.js?v=65"></script>
  <script src="app.js?v=65"></script>

  <div id="creator-footer">
    <a href="https://github.com/raunakpatil" target="_blank">built with ❤️ by raunakpatil</a>
  </div>
</body>
</html>