-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
359 lines (353 loc) · 24.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Lantean Entertainment</title>
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="canonical" href="https://icarus.lanteacorp.com" />
<meta name="description" content="Media discovery tool for the Plex ecosystem." />
<meta property="og:site_name" content="Lantean Entertainment" data-rh="true" />
<link rel="stylesheet" href="css/stylesheet.css" data-n-g="" /><noscript data-n-css=""></noscript>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: scroll;
}
.nav-links {
display: flex;
justify-content: flex-end;
}
@media (max-width: 1024px) {
.nav-links {
justify-content: center;
gap: 1rem;
}
}
@media (max-width: 640px) {
.nav-links {
justify-content: center;
gap: 1rem;
}
}
#background-container {
height: 68%;
width: 100%;
background-size: cover;
background-position: center;
position: relative;
}
#black-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0;
transition: opacity 4s ease-in-out;
z-index: 0;
}
.fade-out {
opacity: 1;
}
@media (max-width: 768px) {
#background-container {
background-size: cover;
background-position: center;
}
}
.footer-image {
width: 100px;
height: auto;
}
@media (max-width: 768px) {
.footer-image {
width: 80px;
}
}
@media (max-width: 480px) {
.footer-image {
width: 60px;
}
}
footer ul {
display: flex;
width: 100%;
}
footer li {
display: flex;
align-items: center;
}
footer .ml-auto {
margin-left: auto;
}
</style>
</head>
<body>
<div id="background-container">
<div id="black-overlay"></div>
<div id="__next">
<div class="flex flex-col mx-auto max-w-7xl">
<div class="relative z-50 pb-8 sm:pb-16 md:pb-16 lg:w-full lg:pb-28 xl:pb-16">
<div class="relative px-4 pt-6 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="nav-links flex-1 items-center md:ml-10 md:pr-4 md:space-x-8 md:flex">
<a href="https://fiesta.lanteacorp.com" class="font-medium text-gray-400 hover:text-white">Game</a>
<a href="https://relay.lanteacorp.com" class="font-medium text-gray-400 hover:text-white">Watch</a>
<a href="https://request.lanteacorp.com" class="font-extrabold text-gray-300 hover:text-white">Request</a>
</div>
</nav>
</div>
</div>
<div class="absolute inset-x-0 top-0 image-fader">
<div class="absolute inset-0" style="background-image:linear-gradient(180deg, rgba(17, 24, 39, 0.70) 0%, rgba(17, 24, 39, 1) 600%)">
</div>
</div>
</div>
<main>
<div class="flex flex-col mx-auto max-w-7xl">
<div class="z-40 flex-1 px-4 pt-6 pb-24 md:px-6 md:py-12">
<div class="relative z-50 flex flex-col items-center justify-center mx-auto space-y-12">
<h1 class="text-4xl font-extrabold tracking-tight text-center text-gray-100 sm:text-5xl md:text-6xl"><span class="block leading-tight xl:inline">Beautiful Discovery</span><span class="block leading-tight text-transparent bg-clip-text bg-gradient-to-br from-indigo-500 to-purple-300">Simple Entertainment</span></h1>
<p class="mt-3 text-base text-center text-gray-400 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">Lantean Entertainment utilizes a request management and media discovery tool built to work with the Plex ecosystem.</p>
<div class="w-full overflow-hidden bg-gray-800 rounded-md shadow-2xl md:rounded-xl">
<div style="display:block;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
<div style="display:block;box-sizing:border-box;padding-top:59.818731117824775%"></div><img alt="" src="images/screen_main.jpg" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" /></div>
</div>
</div>
</div>
</div>
<div class="relative pb-32 overflow-hidden md:pt-16">
<div class="relative">
<div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div class="max-w-xl px-4 mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
<div>
<div><span class="flex items-center justify-center w-12 h-12 rounded-md bg-gradient-to-br from-indigo-500 to-purple-500"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg></span></div>
<div class="mt-6">
<h2 class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-indigo-500 to-purple-300">The best way to discover</h2>
<p class="mt-4 text-lg text-gray-400">Icarus helps you find media you
<!-- --><em class="font-bold">want</em> to watch. With inline recommendations and suggestions, you will find yourself deeper and deeper in a rabbit hole of content you never knew you just had to see.</p>
</div>
</div>
<div class="pt-6 mt-8 border-t border-gray-700">
<blockquote>
<div>
<p class="text-base text-gray-400">Media pages display organized, easy-to-digest information. We show you the information you care about seeing: RottenTomatoes scores, the cast and crew, and more.</p>
</div>
</blockquote>
</div>
</div>
<div class="mt-12 sm:mt-16 lg:mt-0">
<div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full"><img class="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="images/screen_movie_details.jpg" alt="Inbox user interface" /></div>
</div>
</div>
</div>
<div class="mt-24">
<div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div class="max-w-xl px-4 mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div>
<div><span class="flex items-center justify-center w-12 h-12 rounded-md bg-gradient-to-br from-indigo-500 to-purple-500"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></span></div>
<div class="mt-6">
<h2 class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-indigo-500 to-purple-300">Requesting has never been so easy</h2>
<p class="mt-4 text-lg text-gray-400">Icarus presents you with a request interface that is incredibly easy to understand and use. You can even select the exact seasons you want to watch.</p>
</div>
</div>
</div>
<div class="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
<div class="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full"><img class="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none" src="images/screen_season_requests.jpg" alt="Customer profile user interface" /></div>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-purple-800 to-indigo-700">
<div class="max-w-4xl px-4 py-16 mx-auto sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:pt-24 lg:px-8">
<h2 class="text-3xl font-extrabold tracking-tight text-white">A request system built for ease of use</h2>
<p class="max-w-3xl mt-4 text-lg text-indigo-200">Icarus aims to make your life more effortless than ever before. Here are some other useful features we support:</p>
<div class="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-4 lg:gap-x-8 lg:gap-y-16">
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Easy Request Management</h3>
<p class="mt-2 text-base text-indigo-200">Easily keep track of what you want to watch. You can even set up automatic requests using Plex Watchlists.</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path></svg></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Security Focused</h3>
<p class="mt-2 text-base text-indigo-200">You only need to log in once to watch. We keep your login information safe and secure using a SSO (Secure Single Sign-on).</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Endless Options</h3>
<p class="mt-2 text-base text-indigo-200">Whether it is new blockbuster movies or timeless TV classics, we have got everything you need.</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><img src="icons/4k.svg" class="w-6 h-6 text-white" aria-hidden="true"/></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">4K Support</h3>
<p class="mt-2 text-base text-indigo-200">Not all content is available in 4K yet, but we show the higher quality versions whenever we can.</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><img src="icons/plex.svg" class="w-6 h-6 text-white" aria-hidden="true"/></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Plex-Enhanced Experience</h3>
<p class="mt-2 text-base text-indigo-200">Our system is fully synced with Plex, so you can preview available content before making a request.</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Upcoming Releases</h3>
<p class="mt-2 text-base text-indigo-200">Stay ahead of the curve by requesting future releases, available as soon as they drop.</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Mobile-Friendly Experience</h3>
<p class="mt-2 text-base text-indigo-200">Use Icarus as a near-native mobile app by adding it to your home screen. Icarus is designed for use on any screen size.</p>
</div>
</div>
<div>
<div><span class="flex items-center justify-center w-12 h-12 bg-white rounded-md bg-opacity-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg></span></div>
<div class="mt-6">
<h3 class="text-lg font-medium text-white">Tailored Experience</h3>
<p class="mt-2 text-base text-indigo-200">Enjoy a personalized experience by choosing your preferred languages, ratings, studios, and platforms.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="px-4 py-16 mx-auto max-w-7xl sm:py-24 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-center text-gray-200">Frequently Asked Questions</h2>
<div class="mt-12">
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
<div><dt class="text-lg font-medium leading-6 text-gray-300">Is there support for other languages?</dt>
<dd class="mt-2 text-base text-gray-400">Icarus has already localized into several languages thanks to the community! If your language has not been added yet, we are always accepting new translations!</dd>
</div>
<div><dt class="text-lg font-medium leading-6 text-gray-300">Can I request upcoming titles?</dt>
<dd class="mt-2 text-base text-gray-400">Yes! Stay ahead by requesting future releases. Once available, they’ll be ready for you to watch immediately.</dd>
</div>
<div><dt class="text-lg font-medium leading-6 text-gray-300">How customizable is my viewing experience?</dt>
<dd class="mt-2 text-base text-gray-400">You have full control! Customize what you see—from languages and ratings to specific studios and platforms—ensuring a tailored entertainment experience.</dd>
</div>
<div><dt class="text-lg font-medium leading-6 text-gray-300">What is Plex integration?</dt>
<dd class="mt-2 text-base text-gray-400">Our Plex-enhanced experience allows you to preview available content directly within Plex before making a request, ensuring seamless access.</dd>
</div>
<div><dt class="text-lg font-medium leading-6 text-gray-300">Is Icarus mobile-friendly?</dt>
<dd class="mt-2 text-base text-gray-400">Absolutely! Add Icarus to your home screen for a near-native app experience. It’s designed to work flawlessly on any screen size.</dd>
</div>
<div><dt class="text-lg font-medium leading-6 text-gray-300">Does Icarus support 4K content?</dt>
<dd class="mt-2 text-base text-gray-400">While not all content is available in 4K, we prioritize higher quality versions whenever possible, ensuring a better viewing experience.</dd>
</div>
</dl>
</div>
</div>
</div>
<div>
<div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden rounded-lg shadow-xl bg-gradient-to-br from-indigo-600 to-purple-500 lg:grid lg:grid-cols-2 lg:gap-4">
<div class="px-6 pt-10 pb-12 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div class="lg:self-center">
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"><span class="block">Sound awesome?</span></h2>
<p class="mt-4 text-lg leading-6 text-indigo-200">Icarus is easy to use. Simply login in with your provided Plex credentials, find the item you would like to request and follow the on-screen prompts.</p><a href="https://request.lanteacorp.com" class="inline-flex items-center px-5 py-3 mt-8 mr-2 text-base font-medium text-indigo-600 bg-white border border-transparent rounded-md shadow hover:bg-indigo-50">Request</a><a href="https://relay.lanteacorp.com" class="inline-flex items-center px-5 py-3 mt-8 text-base font-medium text-indigo-600 bg-white border border-transparent rounded-md shadow hover:bg-indigo-50">Watch</a></div>
</div>
<div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1"><img class="object-cover object-left-top transform translate-x-6 translate-y-6 rounded-md sm:translate-x-16 lg:translate-y-20" src="images/screen_trending.jpg" alt="App screenshot" /></div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-800">
<div class="flex flex-col mx-auto max-w-7xl">
<ul class="flex items-center justify-between px-4 py-6 mx-auto text-sm text-white lg:container md:px-6">
<li class="flex items-center space-x-2">
<svg class="w-6 h-6" fill="white" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
<span>Open Source</span>
</li>
<li class="ml-auto">
<a href="https://icarus.lanteacorp.com">
<img src="images/badge.svg" alt="Triangle Studios by Lantean Entertainment" class="footer-image" />
</a>
</li>
</ul>
</div>
</footer>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const apiKey = 'ee48e99897613a53c20631a1da5fb117'; // place your API Key here
const apiURL = `https://api.themoviedb.org/3/trending/all/day?api_key=${apiKey}`;
const imageBaseURL = 'https://image.tmdb.org/t/p/original';
const container = document.getElementById("background-container");
const overlay = document.getElementById("black-overlay");
let images = [];
let currentIndex = 0;
async function fetchImages() {
try {
const response = await fetch(apiURL);
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
const data = await response.json();
console.log('Fetched data:', data);
images = data.results.map(item => {
if (item.backdrop_path) {
return `${imageBaseURL}${item.backdrop_path}`;
}
if (Array.isArray(item.known_for) && item.known_for.length > 0) {
const knownForBackdrop = item.known_for[0].backdrop_path;
return knownForBackdrop ? `${imageBaseURL}${knownForBackdrop}` : null;
}
return null;
}).filter(path => path);
if (images.length > 0) {
preloadImage(images[0], () => {
container.style.backgroundImage = `url("${images[0]}")`;
setInterval(changeBackground, 6000); // Change every X seconds
});
} else {
console.error('No images found');
}
} catch (error) {
console.error('Error fetching images:', error);
}
}
function preloadImage(src, callback) {
const img = new Image();
img.src = src;
img.onload = callback;
}
function changeBackground() {
const nextIndex = (currentIndex + 1) % images.length;
preloadImage(images[nextIndex], () => {
overlay.classList.add('fade-out');
setTimeout(() => {
container.style.backgroundImage = `url("${images[nextIndex]}")`;
currentIndex = nextIndex;
setTimeout(() => {
overlay.classList.remove('fade-out');
}, 4000);
}, 2000);
});
}
fetchImages();
});
</script>
</body>
</html>