-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (108 loc) · 4.52 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
<!DOCTYPE html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Organization" prefix="og: http://ogp.me/ns#">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="xplex,stream,streaming,media,rtmp,multistream,multi-stream">
<meta name="description" content="Next Generation Streaming">
<!-- Page title -->
<title>XpleX</title>
<!-- Link elements, including stylesheets -->
<link rel="icon" href="img/[email protected]" sizes="16x16" type="image/png" />
<link rel="icon" href="img/[email protected]" sizes="32x32" type="image/png" />
<link rel="canonical" href="http://xplex.me/" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Roboto|Unica+One">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<img id="logo" src="img/logo.svg" />
<h1 class="brand title">XpleX</h1>
<h2 class="brand subtitle">Next Generation Streaming</h2>
</header>
<section class="banner">
<h2>
<span class="wordmark">XpleX</span> is now in early-access alpha phase
</h2>
<p class="notice">
That means we're testing it with handful of Streamers (thanks!)
</p>
<p class="notice">
Limited-access beta comes by end of February; when you can request access & register username.
</p>
<p class="notice">
Stay tuned!
</p>
</section>
<section class="feature">
<h1><span class="wordmark">XpleX</span> LETS YOU</h1>
<div class="entry">
<div class="sigil">
<img src="img/features/multi.svg" />
</div>
<div class="details">
<div class="label"><strong>Multi</strong>-stream</div>
<p>Why make a choice when you can have 'em all?</p>
<p>Reach out to more viewers by <em><strong>simultaneously streaming to multiple platforms</strong></em> like Twitch, YouTube, Mixer etc. at no extra resource usage (bandwidth, storage, memory or CPU) at all.</p>
<p>》Early-access Alpha</p>
</div>
</div>
<div class="entry">
<div class="sigil">
<img src="img/features/co.svg" />
</div>
<div class="details">
<div class="label"><strong>Co</strong>-stream</div>
<p>Get your whole squad to stream... together!</p>
<p>Join into a <em><strong>bundle of streams</strong></em> which viewers can watch all side-by-side or easily switch between them; may that be to change player perspectives or to change casting languages. You can also stream on behalf of another user as well, if they allow you to (as part of org accounts)!</p>
<p>》Coming Soon</p>
</div>
</div>
<div class="entry">
<div class="sigil">
<img src="img/features/x.svg" />
</div>
<div class="details">
<div class="label"><strong>X</strong>-stream</div>
<p>The streaming experience from the future...</p>
<p>Not only you-as-a-streamer, but you-as-a-viewer or you-as-a-developer will have more options with <span class="wordmark">XpleX</span> as well. New ways to communicate, more media controls, AR/VR experience; as well as Plugin supports, Auth and Webhooks API. <em><strong>It's going to be insane!</strong></em></p>
<p>》Coming Soon™</p>
</div>
</div>
</section>
<section class="social">
<a href="mailto:[email protected]" target="_blank">
<img src="img/mdi/email.svg" />
</a>
<a href="https://twitter.com/applait" target="_blank">
<img src="img/mdi/twitter.svg" />
</a>
<a href="https://twitter.com/applait" target="_blank">
<img src="img/mdi/facebook.svg" />
</a>
<a href="https://www.reddit.com/r/xplex" target="_blank">
<img src="img/mdi/reddit.svg" />
</a>
</section>
<footer>
— with <img src="img/mdi/heart.svg" /> from <a href="http://applait.com/" target="_blank">applait</a>.
</footer>
<script>
console.log([
"FELLOW DEVELOPERS"
, "HELLO AND WELCOME"
, "─┐ ┬┌─┐┬ ┌─┐─┐ ┬"
, "┌┴┬┘├─┘│ ├┤ ┌┴┬┘"
, "┴ └─┴ ┴─┘└─┘┴ └─"
].join("\n"))
var notices = document.getElementsByClassName('notice')
, banner = document.getElementsByClassName('banner')[0]
banner.addEventListener("click", function (e) {
for (var notice of notices) {
notice.style.display = (notice.style.display === "block") ? "none" : "block"
}
})
</script>
</body>
</html>