-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
470 lines (404 loc) · 19.5 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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MCU Random - Get random title from Marvel Cinematic Universe</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="MCU Random">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="title" content="MCU Random - Random Title to Watch from Marvel Cinematic Universe">
<meta name="description" content="With MCU Random you can choose what title from Marvel Cinematic Universe watch right now!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://mcurandom.com">
<meta property="og:title" content="MCU Random - Random Title to Watch from Marvel Cinematic Universe">
<meta property="og:description" content="With MCU Random you can choose what title from Marvel Cinematic Universe watch right now!">
<meta property="og:image" content=" ">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="http://mcurandom.com">
<meta property="twitter:title" content="MCU Random - Random Title to Watch from Marvel Cinematic Universe">
<meta property="twitter:description" content="With MCU Random you can choose what title from Marvel Cinematic Universe watch right now!">
<meta property="twitter:image" content="images/app/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/app/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/app/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/app/favicon/favicon-16x16.png">
<link rel="manifest" href="images/app/favicon/site.webmanifest">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/func-quickrandom.js"></script>
<script src="js/func-randomtype0.js"></script>
<script src="js/func-randomtype1.js"></script>
<script src="js/func-randomtype2.js"></script>
<script src="js/func-randomtype3.js"></script>
<script src="js/func-randomtype4.js"></script>
<script src="js/func-randomtype5.js"></script>
<script src="js/func-randomtype6.js"></script>
<script src="js/func-randomtype7.js"></script>
<script src="js/func-randomtype8.js"></script>
<script src="js/func-randomtype9.js"></script>
<script src="js/func-randomtype10.js"></script>
<script src="js/func-randomtype11.js"></script>
</head>
<body onload="QuickRandom();">
<a name="top"></a>
<script type="text/javascript">
function AppRandom() {
document.getElementById("app_wind_bg").style.display = "block";
document.getElementById("app_wind_win").style.display = "block";
document.body.style.overflow = "hidden";
document.body.style.height = "100%";
document.getElementById("app").classList.add("app_blur");
}
function CloseWindow() {
document.getElementById("app_wind_bg").style.display = "none";
document.getElementById("app_wind_win").style.display = "none";
document.body.style.overflow = "scroll";
document.body.style.height = "auto";
document.getElementById("app").classList.remove("app_blur");
}
function RepeatRandom(){
var repbtn = document.getElementById("repeatbutton");
var rbtn = repbtn.getAttribute("name");
if (rbtn == "all") { RandomType0(); }
if (rbtn == "allwe"){ RandomType1(); }
if (rbtn == "movies") { RandomType2(); }
if (rbtn == "tv") { RandomType3(); }
if (rbtn == "tvwe") { RandomType4(); }
if (rbtn == "oneshots") { RandomType5(); }
if (rbtn == "web") { RandomType6(); }
if (rbtn == "tvabc") { RandomType7(); }
if (rbtn == "tvnetflix") { RandomType8(); }
if (rbtn == "tvhf") { RandomType9(); }
if (rbtn == "tvdisney") { RandomType10(); }
if (rbtn == "nonmcu") { RandomType11(); }
}
</script>
<script type="text/javascript">
document.body.addEventListener('keypress', function(e) {
if(e.key === "Escape") {
document.getElementById("app_wind_bg").style.display = "none";
document.getElementById("app_wind_win").style.display = "none";
document.body.style.overflow = "scroll";
document.body.style.height = "auto";
document.getElementById("app").classList.remove("app_blur");
}
});
</script>
<script type="text/javascript">
function HelpPage(){
document.getElementById("cards").style.display = "none";
document.getElementById("app_help_page").style.display = "block";
}
function HelpPageClose() {
document.getElementById("cards").style.display = "block";
document.getElementById("app_help_page").style.display = "none";
}
</script>
<div class="app_window_bg" id="app_wind_bg" onclick="CloseWindow()"></div>
<div class="app_window app_result_bg" id="app_wind_win">
<div class="app_result_card">
<div class="app_result_poster"><a href=" " id="TitleIMDBLink" target="_blank"><img src=" " id="TitlePoster"></a></div>
<div class="app_result_landscape">
<div class="app_result_category" id="TitleCategory"></div>
<div class="app_result_title" id="TitleName"></div>
<div class="app_result_episode" id="TitleEpisode"></div>
<!-- ><div class="app_result_imdb">IMDb</div></a> -->
<div class="app_result_repeat" id="repeatbutton" onclick="RepeatRandom()" name="">Random</div>
<div class="app_window_close" id="repeatbutton" onclick="CloseWindow()" name="">Close</div>
</div>
</div>
</div>
<div class="app" id="app"> <!-- Application -->
<div class="app_head"> <!-- Header -->
<div class="app_head_logo">
<a href="index.html">
<picture>
<source srcset="images/app/logo_d.png" media="(prefers-color-scheme: dark)" />
<source srcset="images/app/logo_l.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
<img src="images/app/logo_l.png" class="app_head_logo_styles">
</picture>
</a>
</div> <!-- Logo - Left -->
<div class="app_head_quickrandom" onclick="QuickRandom()">
<div class="app_quickrandom_name">Quick Random:</div>
<div class="app_quickrandom_title app_quickrandom_egg" id="QuickRandomResult"></div>
</div> <!-- Quick Random Title -->
</div>
<div id="cards">
<div class="app_card app_card_bg_1" onclick="AppRandom(); RandomType0();">
<div class="app_card_name">
<div class="app_card_title">Full Random</div>
<div class="app_card_description">Get random from all titles.</div>
</div>
</div>
<div class="app_card app_card_bg_2" onclick="AppRandom(); RandomType1();">
<div class="app_card_name">
<div class="app_card_title">Full Random 2</div>
<div class="app_card_description">Get random from all titles exlude episodes.</div>
</div>
</div>
<div class="app_card app_card_bg_3" onclick="AppRandom(); RandomType2();">
<div class="app_card_name">
<div class="app_card_title">Only movies</div>
<div class="app_card_description">Get random from 23 movies.</div>
</div>
</div>
<div class="app_card app_card_bg_4" onclick="AppRandom(); RandomType3();">
<div class="app_card_name">
<div class="app_card_title">Only TV Shows</div>
<div class="app_card_description">Get random from 13 TV Shows.</div>
</div>
</div>
<div class="app_card app_card_bg_5" onclick="AppRandom(); RandomType4();">
<div class="app_card_name">
<div class="app_card_title">Only TV Shows 2</div>
<div class="app_card_description">Get random from 13 TV Shows exclude episodes.</div>
</div>
</div>
<div class="app_card app_card_bg_6" onclick="AppRandom(); RandomType5();">
<div class="app_card_name">
<div class="app_card_title">Only One-shots</div>
<div class="app_card_description">Get random from 6 one-shots</div>
</div>
</div>
<div class="app_card app_card_bg_7" onclick="AppRandom(); RandomType6();">
<div class="app_card_name">
<div class="app_card_title">Only Web Series</div>
<div class="app_card_description">Get random from 2 web series</div>
</div>
</div>
<div class="app_card app_card_bg_8" onclick="AppRandom(); RandomType7();">
<div class="app_card_name">
<div class="app_card_title">Only ABC</div>
<div class="app_card_description">Get random from 3 TV Shows</div>
</div>
</div>
<div class="app_card app_card_bg_9" onclick="AppRandom(); RandomType8();">
<div class="app_card_name">
<div class="app_card_title">Only Netflix</div>
<div class="app_card_description">Get random from 6 TV Shows</div>
</div>
</div>
<div class="app_card app_card_bg_10" onclick="AppRandom(); RandomType9();">
<div class="app_card_name">
<div class="app_card_title">Only Hulu & Freeform</div>
<div class="app_card_description">Get random from Runaways and Cloak & Dagger</div>
</div>
</div>
<div class="app_card app_card_bg_11" onclick="AppRandom(); RandomType10();">
<div class="app_card_name">
<div class="app_card_title">Only Disney+</div>
<div class="app_card_description">Get random from Marvel Studios TV Shows</div>
</div>
</div>
<div class="app_card app_card_bg_12" onclick="AppRandom(); RandomType11();">
<div class="app_card_name">
<div class="app_card_title">Non-MCU Movies</div>
<div class="app_card_description">Get random from Non-MCU Movies</div>
</div>
</div>
<a href="timeline.html">
<div class="app_card app_card_bg_13">
<div class="app_card_name">
<div class="app_card_title">MCU Timeline <span class="app_beta_tag">beta</span></div>
<div class="app_card_description">Marvel Cinematic Universe timline</div>
</div>
</div>
</a>
<div class="app_footer"> <!-- Footer -->
<a href="#top" onclick="HelpPage();">Help & About</a><br><br>
</div>
</div>
<div class="app_head_page" id="app_help_page">
<h1>Help & About</h1>
<p>Hi! 👋 <br>
Thank you for visiting <b>MCU Random</b>.<br>
I am a big fan of Marvel Cinematic Universe and like others, who like this Universe, often rewatch all projects.<br><br>
<img src="images/app/favicon/logo.png" style="width: 80px;"><br><br>
On one day I couldn't choose <b>what to watch today?</b> I was search in Google fast random from all MCU, but not found anything interesting. So i decide to make a <b>complete randomiser from all MCU projects</b>. It was hard, because i’m not professional web designer, but with Google and tenacity, after a few weeks, I present you: <b>MCU Random - Get random title from Marvel Cinematic Universe</b>! This random take part from <b>23 movies</b>, <b>13 TV shows (include episodes)</b>, <b>6 one-shots</b> and <b>2 web series</b>. And as a <b>bonus</b> you can make random from movies, which not join in MCU, starts from 1998 Blade movie. Over time and the release of new episodes and projects I’ll add this in Random. On site launch moment (and writing this text) last project is <b>The Falcon and The Winter Soldier (Season 1, Episode 6: One World, One People)</b>.</p>
<h3>Website</h3>
<p><b>MCU Random</b> is very simple site in functionality and code. Here I'll show you how to use it and little user tips.</p>
<img src="images/app/help/help_website.jpg">
<h3>QuickRandom</h3>
<p>On the top right of app you can see <b>Quick Random</b> function. It’s shows you random title from all MCU titles (exclude episodes) in one click. Press on this element and it’s shows you new title. Work like a watch. P.S And here you can find little Easter Egg 🐣</p>
<h3>Random Types.</h3>
<p>On the main page you can see different cards. It’s different types of random. You can see description of random type on card.</p>
<img src="images/app/help/help_random_card.jpg">
<p>Bellow you can see full list of titles what you can get in each random type:</p>
<details>
<summary>What's in random</summary>
<details>
<summary>Only Movies (23 movies)</summary>
<div class="app_ui_details">
Iron Man<br>
The Incredible Hulk<br>
Iron Man 2<br>
Thor<br>
Captain America: The First Avenger<br>
Marvel's The Avengers<br>
Iron Man 3<br>
Thor: The Dark World<br>
Captain America: The Winter Soldier<br>
Guardians of the Galaxy<br>
Avengers: Age of Ultron<br>
Ant-Man<br>
Captain America: Civil War<br>
Doctor Strange<br>
Guardians of the Galaxy Vol. 2<br>
Spider-Man: Homecoming<br>
Thor: Ragnarok<br>
Black Panther<br>
Avengers: Infinity War<br>
Ant-Man and the Wasp<br>
Captain Marvel<br>
Avengers: Endgame<br>
Spider-Man: Far From Home<br>
</div>
</details>
<details>
<summary>Only One-Shots (6 one-shots)</summary>
<div class="app_ui_details">
The Consultant<br>
A Funny Thing Happened on the Way to Thor's Hammer<br>
Item 47<br>
Agent Carter<br>
All Hail the King<br>
Peter's To-Do List<br>
</div>
</details>
<details>
<summary>Only Web-Series (2 web-series)</summary>
<div class="app_ui_details">
WHIH Newsfront (10 episodes)<br>
Agents of S.H.I.E.L.D.: Slingshot (6 episodes)<br>
</div>
</details>
<details>
<summary>Only ABC (3 tv shows)</summary>
<div class="app_ui_details">
Agents of S.H.I.E.L.D. (136 episodes)<br>
Agent Carter (TV) (18 episodes)<br>
Inhumans (8 episodes)<br>
</div>
</details>
<details>
<summary>Only Netflix (6 tv shows)</summary>
<div class="app_ui_details">
Daredevil (39 episodes)<br>
Jessica Jones (39 episodes)<br>
Luke Cage (26 episodes)<br>
Iron Fist (23 episodes)<br>
The Defenders (8 episodes)<br>
The Punisher (26 episodes)<br>
</div>
</details>
<details>
<summary>Only Hulu & Freeform (2 tv shows)</summary>
<div class="app_ui_details">
Runaways (33 episodes)<br>
Cloak & Dagger (20 episodes)<br>
</div>
</details>
<details>
<summary>Only Disney+ (2 tv shows)</summary>
<div class="app_ui_details">
WandaVision (9 episodes)<br>
The Falcon and The Winter Soldier (6 episodes)<br>
</div>
</details>
<details>
<summary>Non-MCU Movies (33 movies)</summary>
<div class="app_ui_details">
Blade<br>
X-Men<br>
Blade II<br>
Spider-Man<br>
Daredevil<br>
X2<br>
Hulk<br>
The Punisher<br>
Spider-Man 2<br>
Blade: Trinity<br>
Elektra<br>
Fantastic Four<br>
X-Men: The Last Stand<br>
Ghost Rider<br>
Spider-Man 3<br>
Fantastic Four: Rise of the Silver Surfer<br>
Punisher: War Zone<br>
X-Men Origins: Wolverine<br>
X-Men: First Class<br>
Ghost Rider: Spirit of Vengeance<br>
The Amazing Spider-Man<br>
The Wolverine<br>
The Amazing Spider-Man 2<br>
X-Men: Days of Future Past<br>
Fantastic Four (Remake)<br>
Deadpool<br>
X-Men: Apocalypse<br>
Logan<br>
Deadpool 2<br>
Venom<br>
Dark Phoenix<br>
The New Mutants<br>
</div>
</details>
</details>
<h3>Result Window</h3>
<p>When you press on <b>Card</b> it's shows you result instantly.<br>
You can press on <b>Random button</b> to show new result, <b>Close button</b> to close window.<br>
Press on <b>Poster image</b> to open current title on IMDb.<br>
Another way to close window is press <b>Esc</b> button on keyboard.</p>
<img src="images/app/help/help_result_window.jpg">
<h3>Light and Dark Themes</h3>
<p>Site changes colors based on device System Appearance.</p>
<img src="images/app/help/help_themes.jpg">
<h3>MCU Timeline <span class="app_beta_tag">beta</span></h3>
<p>At the bottom of Random Cards you can see MCU Timeline Card.</p>
<a href="timeline.html"><img src="images/app/help/help_timeline_card.jpg"></a>
<p>On this page you can see all MCU titles timline and sort it by story or release.</p>
<img src="images/app/help/help_timeline.jpg">
<p>By default titles sort by <b>Story</b></p>
<p>You can simply choose another sorting by press <b>Sort by</b> section.</p>
<p><b>Story</b> will sort all titles by <b>Main Story</b> timline. <b>Release</b> will sort all titles by projects <b>release date</b>.</p>
<p>If you want hide projects which not made by Marvel Studios you can press <b>Only Marvel Studios</b> in <b>Sort by</b> menu. This option show only Movies, One-Shots and Disney+ TV Shows made by Marvel Studios. This options works for all sorts types. To show all titles press <b>Sort by</b> and press <b>All titles</b>.</p>
<img src="images/app/help/help_timeline_menu.jpg">
<h3>Apps</h3>
<p>All site is <b>PWA</b> (Progressive Web App). It’s adapted to all devices.<br>You can add it on you Home Screen as application.</p>
<img src="images/app/help/help_pwa.jpg">
<p>You can <a class="app_ui_url2" href="https://github.com/redbrick1710/mcurandom/raw/main/macos/mcurandom.dmg" target="_blank" >download</a> <b>macOS app</b>.<br>It's have all website functionality, HQ images and works without Internet.</p>
<p>App in <b>beta</b> version. Supports from Mac OS X 10.9 and more.</p>
<a class="app_ui_url2" href="https://github.com/redbrick1710/mcurandom/raw/main/macos/mcurandom.dmg"><img src="images/app/help/help_macos.jpg" target="_blank"></a>
<p>It's made on MacGap 2. Source code of app you can find <a class="app_ui_url2" target="_blank" href="https://github.com/redbrick1710/mcurandom/tree/main/macos">here</a>.</p>
<h2>Contact and Copyrights</h2>
<p>Marvel logo, images, projects posters and characters belong to <a class="app_ui_url2" target="_blank" href="https://www.marvel.com">Marvel Entertainment</a> and protected by copyright.</p>
<p>Website's logo and design made by <a class="app_ui_url2" target="_blank" href="https://redbrick1710.github.io/">Red Brick 1710 Studio</a>. Coded by Red Brick 1710 Studio.<br>
If you found a bug, have ideas, or you just want to talk - be free to contact via email:<br>
<a class="app_ui_url2" href="mailto:[email protected]">[email protected]</a></p>
<p>Timeline gets from this <a class="app_ui_url2" target="_blank" href="https://docs.google.com/spreadsheets/u/0/d/1Xfe--9Wshbb3ru0JplA2PnEwN7mVawazKmhWJjr_wKs/htmlview">document</a>. Author is amazing! Check this to find more interesting MCU things.</p>
<p>Site is ad-free and non-comercial, works as is and contain only Random functionality.</p>
<p>Website source code is open: <a class="app_ui_url2" target="_blank" href="https://github.com/redbrick1710/mcurandom">GitHub</a><br>
MacOS App source code is open: <a class="app_ui_url2" target="_blank" href="https://github.com/redbrick1710/mcurandom/tree/main/macos">GitHub</a></p>
<h2>Coffee</h2>
<p>You can buy me a coffee, if this project is helpful.</p>
<p>
<a class="app_ui_url2" target="_blank" href="https://buymeacoffee.com/redbrick">Buy Me a Coffee</a><br>
<a class="app_ui_url2" onclick="alert('Bitcoin address for donations:\n15k6mE9Lsb42gNHxTGMtEasLoo3vkmUJNT')">Bitcoin</a><br>
<a class="app_ui_url2" onclick="alert('Ethereum address for donations:\n0x4a22ac10154391Ab4449EEF8551b74E7c7CA5ac5')">Ethereum</a><br>
<a class="app_ui_url2" onclick="alert('Dogecoin address for donations:\nDDe4gXMdvKKDRCUosW2W9mai7AovB69zmN')">Doge</a><br>
<!-- <a class="app_ui_url2" href="#">PayPal</a><br> -->
</p>
<p>Thank you!</p>
<div class="app_footer"> <!-- Footer -->
<a href="#top" onclick="HelpPageClose();">Back</a>
</div>
</div>
</div> <!-- Application -->
</body>
</html>
<!--
Design & Code:
Red Brick 1710 Studio
2021
-->