public/index.html (278 lines of code) (raw):
<!--
* Copyright 2022 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Home | Lunar Industries</title>
<link
type="text/css"
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css"
/>
<link type="text/css" rel="stylesheet" href="/style.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.js"
integrity="sha512-DJw15+xxGmXB1/c6pvu2eRoVCGo5s6rdeswkFS4HLFfzNQSc6V71jk6t+eMYzlyakoLTwBrKnyhVc7SCDZOK4Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="js/auth-status.js" defer></script>
<script src="js/home.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="robots" name="robots" content="noindex, nofollow" />
</head>
<body>
<header>
<div class="navigation-bar section">
<a href="/" class="logo">
<img
src="/assets/img/lunar-industries-logo.png"
alt="Lunar Industries"
/>
</a>
<div class="navigation-buttons">
<a class="no-style-link" href="/my-account.html">
<button class="nav-button" id="my-account-button">
<img
src="/assets/img/Spotify-profile-icon.png"
width="28"
height="28"
/>
<span>My Account</span>
</button>
</a>
<a class="auth-status-link">
<button class="auth-status-button primary nav-button"></button>
</a>
</div>
</div>
<div id="landing-page-notice" class="section">
<h2>Lunar Industries is a fictitious podcast network</h2>
<p>
This fake web app simulates an Open Access integration to help
prospective partners visualize how their content would integrate with
Spotify. Click the Login/subscribe button to create an account and log
in, so that you can see how the linking works.
</p>
<p>
You can decide if you want to lead users to your content on Spotify
directly (and be redirected back here to link account), or if you want
users to link their account by clicking on the content.
</p>
</div>
</header>
<div class="container">
<div class="spotlight">
<h2 class="section-header">Spotlight</h2>
<hr />
<div class="spotlight-wrapper">
<a
href="https://open.spotify.com/show/0EwATaqqn7Yb0LX6O9XiqI"
class="spotlight-episode-cover-wrapper"
>
<img
class="episode-cover"
alt="Podcast artwork of the latest episode of Living on the Moon"
src="/assets/img/living-on-the-moon-ep-01.jpg"
/>
</a>
<div class="spotlight-episode-info">
<h2>Living on the Moon: a new adventure</h2>
<p>
Our new premium show is for subscribers only, log in to listen
now!
</p>
<div>
<a class="auth-status-link display-if-not-authenticated">
<button class="subscribe-button cta"></button>
</a>
<a
id="soa-connect"
href="https://content-access.spotify.com/link/2zkvpokj55bj2sCHxCejJs?spotifyShowUri=spotify%3Ashow%3A0EwATaqqn7Yb0LX6O9XiqI"
rel="nofollow"
>
<img
src="/assets/img/spotify-podcast-badge-blk-wht-330x80.png"
class="los-badge"
alt="Listen on Spotify"
/>
</a>
</div>
</div>
</div>
</div>
<div class="customer-social-proof quote">
<h2>An original outlook on the vast potential of life</h2>
<p class="quote-attribution">Patrick. C, subscriber</p>
</div>
<div class="cta-banner full-bleed">
<div class="align-with-container">
<div class="cta-banner-inner-wrapper">
<div class="cta-banner-info">
<h2>Listen without limits</h2>
<p>
Subscribe or log in to continue to listen to stellar content.
Become a subscriber today and get unlimited access!
</p>
</div>
<a class="auth-status-link">
<button class="subscribe-button cta"></button>
</a>
</div>
</div>
</div>
<div class="show-banner">
<h2>Unlimited access to uplifting stories from the future</h2>
<div class="shows">
<div class="episode">
<div class="image-row">
<a
href="https://open.spotify.com/show/7inz2m1bx25SgNBZcRzqBP"
rel="nofollow"
>
<img
class="show-cover"
src="/assets/img/moonshots-artwork.jpg"
alt="Podcast artwork of the show called Moonshots"
/> </a
><br /><br />
<a
href="https://open.spotify.com/show/7inz2m1bx25SgNBZcRzqBP"
rel="nofollow"
>
<img
src="/assets/img/spotify-podcast-badge-blk-wht-330x80.png"
class="los-badge"
alt="Listen on Spotify"
/>
</a>
<a
href="https://content-access.spotifycdn.com/lunar-industries/moonshots.rss"
rel="nofollow"
>
<img
src="/assets/img/rss-icon.png"
class="rss-badge"
alt="Get RSS Feed"
/>
</a>
</div>
<h3 class="episode-title">Moonshots</h3>
<p class="episode-description">
Moonshots (free) is a public project and does not require a paid
subscription.
</p>
</div>
<div class="episode">
<div class="image-row">
<a
href="https://open.spotify.com/show/0hFhphwy0gCuuFkOGF4BRu"
rel="nofollow"
>
<img
class="show-cover"
src="/assets/img/the-dark-side-artwork.jpg"
alt="Podcast artwork of the show called The Dark Side"
/> </a
><br /><br />
<a
href="https://open.spotify.com/show/0hFhphwy0gCuuFkOGF4BRu"
rel="nofollow"
>
<img
src="/assets/img/spotify-podcast-badge-blk-wht-330x80.png"
class="los-badge"
alt="Listen on Spotify"
/>
</a>
<a
href="https://content-access.spotifycdn.com/lunar-industries/the-dark-side-bonus.rss"
rel="nofollow"
>
<img
src="/assets/img/rss-icon.png"
class="rss-badge"
alt="Get RSS Feed"
/>
</a>
</div>
<h3 class="episode-title">The Dark Side</h3>
<p class="episode-description">
The Dark Side (bonus content) is a public program that has a few
bonus episodes available to subscribers in the “Bonus Content”
tier or higher.
</p>
</div>
<div class="episode">
<div class="image-row">
<a
href="https://open.spotify.com/show/0EwATaqqn7Yb0LX6O9XiqI"
rel="nofollow"
>
<img
class="show-cover"
src="/assets/img/living-on-the-moon-artwork.jpg"
alt="Podcast artwork of the show Living on the Moon"
/> </a
><br /><br />
<a
href="https://open.spotify.com/show/0EwATaqqn7Yb0LX6O9XiqI"
rel="nofollow"
>
<img
src="/assets/img/spotify-podcast-badge-blk-wht-330x80.png"
class="los-badge"
alt="Listen on Spotify"
/>
</a>
<a
href="https://content-access.spotifycdn.com/lunar-industries/living-on-the-moon.rss"
rel="nofollow"
>
<img
src="/assets/img/rss-icon.png"
class="rss-badge"
alt="Get RSS Feed"
/>
</a>
</div>
<h3 class="episode-title">Living on the Moon</h3>
<p class="episode-description">
Living on the Moon (premium) is for “Premium Tier” subscribers
only.
</p>
</div>
</div>
</div>
</div>
<footer>
<ul>
<li>
<a href="https://github.com/spotify/soa-reference-integration"
>Lunar Industries on Github</a
>
</li>
<li>
<a href="https://developer.spotify.com/documentation/open-access/"
>Spotify Open Access Developer Guides</a
>
</li>
<li>
<a href="https://validator.w3.org/feed/" target="_blank"
>RSS Feed Validator</a
>
</li>
</ul>
<a
class="footer-logo"
href="https://developer.spotify.com/documentation/open-access/"
target="_blank"
><img
src="/assets/img/soa-logo-footer.png"
alt="Spotify Open Access logo"
/></a>
</footer>
</body>
</html>