forked from mrmcpowned/interdimensionalcable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (157 loc) · 8.3 KB
/
index.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<!--
DONE: Add a zoom-in functionality
TODO: Volume animations
TODO: Offline Animations
TODO: Animation for Channel number on change
TODO: Info Button
TODO: Make proper remote
CANCELED: Upvote on reddit using up button?
DONE: Make sure Muting works
DONE: Turn off animation?
TODO: Opengraph meta data to make things look nice when finished
-->
<head>
<meta charset="UTF-8">
<title>Inter-Dimensional Cable</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/get-video.js"></script>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet" type="text/css">
<meta property="og:title" content="Inter-Dimensional Cable" />
<meta property="og:type" content="website" />
<meta name="description" content="A non-stop stream of intergalactic content from /r/InterdimensionalCable straight to your eyeholes." />
<meta property="og:description" content="A non-stop stream of intergalactic content from /r/InterdimensionalCable straight to your eyeholes." />
<meta property="og:url" content="http://inter-dimensionalcable.xyz" />
<meta property="og:image" content="http://inter-dimensionalcable.xyz/images/opengraph.png" />
<meta property="og:image:width" content="499" />
<meta property="og:image:height" content="279" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@MrMcPowned">
<meta name="twitter:creator" content="@MrMcPowned">
<meta name="twitter:title" content="Inter-Dimensional Cable">
<meta name="twitter:description" content="A non-stop stream of intergalactic content from /r/InterdimensionalCable straight to your eyeholes.">
<meta name="twitter:image" content="http://inter-dimensionalcable.xyz/images/opengraph.png">
<link rel="shortcut icon" href="favicon.png">
</head>
<body class="tv-off">
<div class="remote-area">
<div class="tips">
<ul>
<li><b>Power Button</b>: Turns TV On/Off</li>
<li><b>Zoom</b>: Zooms the TV in or out for a better view</li>
<li><b>MENU</b>: Shows the TV menu which gives you a list of previously played shows and info about the site</li>
<li><b>MUTE</b>: Mutes the TV's audio</li>
<li><b>CH +</b>: Changes the channel</li>
<li><b>VOL +/-</b>: Adjusts the TV's volume</li>
<li><b>OK</b>: Opens the current video's Reddit thread in a new tab</li>
<li><b>NO SIGNAL</b>: Reddit's API is down. Turn your TV On and Off again to see if the signal is back</li>
</ul>
</div>
<div class="remote">
<div class="top-row">
<span class="button red" id="power">Pwr</span>
<span class="button" id="zoom">Zoom</span>
</div>
<div class="matrix">
<span class="button">1</span>
<span class="button">2</span>
<span class="button">3</span>
<span class="button">4</span>
<span class="button">5</span>
<span class="button">6</span>
<span class="button">7</span>
<span class="button">8</span>
<span class="button">9</span>
<span class="button" id="menu">Menu</span>
<span class="button">0</span>
<span class="button" id="mute">Mute</span>
</div>
<div class="bottom">
<span class="button wide" id="channel-up">CH +</span>
<span class="button large" id="volume-down"><span>VOL<br/>-</span></span>
<a href="#" class="button center red" id="video-url">OK</a>
<span class="button large" id="volume-up"><span>VOL<br/>+</span></span>
<span class="button wide"></span>
</div>
</div>
</div>
<div class="container">
<!-- <img src="images/Rick-morty-tv.png" alt="Rick and Morty TV Background" class="rick-bg">-->
<video src="video/rick-tv.webm" class="rick-bg" id="rick-bg" preload>
</video>
<audio src="audio/tvoff.mp3" id="off-audio" preload></audio>
<audio src="audio/channel-switch.mp3" id="switch-audio" preload></audio>
<audio src="" id="quote-player"></audio>
<div id="video">
<div class="cover animated"></div>
<div class="cover"></div>
<div id="yt-contain" class="channel show" data-channel-id="??">
<div class="cover static"></div>
<div class="volume" data-volume="60"></div>
<div id="yt-iframe"></div>
</div>
<div class="tv-menu">
<div class="contents">
<div class="left">
<p>I'm <a href="https://mrmcpowned.com">Mr McPowned</a>. I <a href="http://gamepadviewer.com">kinda make stuff</a>. Some people call me <a href="http://chrisr.xyz">Chris</a>, and I don't really <a href="https://twitter.com/mrmcpowned">have much to say</a>. </p>
<p>This thing's also <a href="https://github.com/mrmcpowned/interdimensionalcable">on github</a> if you wanna check that out.</p>
<p><a href="https://steamcommunity.com/id/2Mill/">This guy</a> gave me the idea, but <a href="http://gravypod.com">this guy</a> actually helped me with stuff.</p>
</div>
<div class="right">
<h1>Menu - MrMcTV v1.0</h1>
<p><i>A non-stop stream of intergalactic content from <a href="https://reddit.com/r/InterdimensionalCable">/r/InterdimensionalCable</a> straight to your eyeholes.</i></p>
<h2>Past Shows</h2>
<div id="list-template">
<li>
<a href="">
<div>
<div class="poster">
<div></div>
</div>
<div class="video-info">
<span class="video-title"></span>
<span class="video-author"></span>
</div>
</div>
</a>
</li>
</div>
<ul class="shows">
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
//CSS USer Agent Selectors from http://rog.ie/blog/html5-boilerplate-addon
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform);
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window)) ? ' touch' : '');
//I'm lazy and don't wanna set target="_blank" on all those links
var thisSite = window.location.hostname;
$('a[href^="http://"], a[href^="https://"]').not('a[href^="http://' + thisSite + '"], a[href^="https://' + thisSite + '"]').attr('target', '_blank');
</script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-20916585-7', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>