Skip to content

Commit

Permalink
Added first version of pricing overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@NikkelM
NikkelM committed Jun 23, 2024
1 parent 79248f9 commit 476cb86
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 27 deletions.
5 changes: 5 additions & 0 deletions src/html/shufflePlus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,14 @@ function getDomElements() {
googleLoginSuccessP: document.getElementById("googleLoginSuccessP"),

// SUBSCRIBE
// TODO: Move into product overview
// Subscribe button
manageSubscribtionButtonDiv: document.getElementById("manageSubscribtionButtonDiv"),
manageSubscribtionButton: document.getElementById("manageSubscribtionButton"),

// PRODUCT OVERVIEW
// Product overview div
productOverviewDiv: document.getElementById("productOverviewDiv"),
// Currency selector
currencySelectorSelect: document.getElementById("currencySelectorSelect"),

Expand Down
42 changes: 42 additions & 0 deletions static/css/shufflePlus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.outlinedContainer {
width: 60%;
margin: auto;
border: 1px solid #ccc; /* Slight border */
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.alignTopRight {
position: absolute;
top: 0; /* Aligns the container to the top of the parent div */
right: 0; /* Aligns the container to the right of the parent div */
margin: 10px; /* Optional: Adjusts margin to ensure it sticks to the very top-right corner */
}

.prettyList {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: left;
}

.multiColumns {
display: flex;
flex-direction: row; /* Arrange children side by side */
justify-content: space-around; /* This will space out the product containers evenly */
align-items: flex-start; /* Align items at the start of the container */
}

.productContainer {
margin: 0 50px 10px;
}

@media (max-width: 768px) {
.multiColumns {
flex-direction: column;
align-items: center; /* Center align the product containers on smaller screens */
}
}
69 changes: 42 additions & 27 deletions static/html/shufflePlus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
<title>Shuffle+ - Random YouTube Video</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link id="RandomYoutubeVideoStyleSheet" rel="stylesheet" href="../css/popup.css" />
<link id="RandomYoutubeVideoStyleSheet" rel="stylesheet" href="../css/loadingOverlay.css" />
<link rel="stylesheet" href="../css/popup.css" />
<link rel="stylesheet" href="../css/loadingOverlay.css" />
<link rel="stylesheet" href="../css/shufflePlus.css" />
</head>

<body id="randomYoutubeVideoBody">
Expand All @@ -19,7 +20,7 @@ <h2 id="welcomeHeader">Welcome! Sign in below to get started</h2>
<br />

<div id="googleLoginButtonDiv" class="hidden">
<button id="googleLoginButton" class="randomYoutubeVideoButton highlight-green" type="button"
<button id="googleLoginButton" class="randomYoutubeVideoButton highlight-green" type="button" style="margin-bottom: 10px;"
title="Sign in to Random YouTube Video with your Google account to enable the extension to view your YouTube account. Subscribe to Shuffle+ to take full advantage of the offered features!">
Sign in with Google
</button>
Expand All @@ -31,14 +32,44 @@ <h2 id="welcomeHeader">Welcome! Sign in below to get started</h2>
<p id="googleLoginSuccessP">Subscribe to Shuffle+ to get access to all premium features!</p>
</div>

<div id="currencySelector">
<label for="currencySelectorLabel">Currency:</label>
<select id="currencySelectorSelect" class="currencySelector" name="currencySelect">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="RUB">RUB</option>
</select>
<div id="productOverviewDiv" class="outlinedContainer">
<div id="currencySelectorContainer" class="alignTopRight">
<label for="currencySelector">Currency:</label>
<select id="currencySelectorSelect" class="currencySelector" name="currencySelect">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="RUB">RUB</option>
</select>
</div>

<!-- Benefit showcase -->
<div id="benefitsShowcaseDiv" class="prettyList">
<h2>Shuffle+ benefits</h2>
<p>Subscribe to Shuffle+ to gain access to a wide range of new features to further improve your experience:</p>
<ul id="benefitsList" style="text-align: left;">
<!-- TODO: Implement features -->
<li>Shuffle from your subscriptions/from multiple channels at once (coming soon)</li>
<li>Ignore already watched videos (coming soon)</li>
<li>More filter options (coming soon)</li>
<li>Favourite channels for quick access in the popup (coming soon)</li>
<li>Immediate access to all future premium features</li>
<li>Support the development and maintenance of the extension</li>
</ul>
</div>

<div id="pricingDiv" class="multiColumns">
<div class="productContainer">
<h3>3-monthly plan</h3>
<p>Stay flexible with this short-term plan, and get all benefits of the yearly plan!</p>
<button class="randomYoutubeVideoButton highlight-green" type="button" style="min-width: 60px;">$2.99 / quarter</button>
</div>
<div class="productContainer">
<h3>Yearly Plan</h3>
<p>Save over 15% when compared to the 3-monthly plan!</p>
<button class="randomYoutubeVideoButton highlight-green-animated" type="button" style="min-width: 60px;">$9.99 / year</button>
</div>
</div>
</div>

<!-- Manage subscription/Subscribe button -->
Expand All @@ -49,22 +80,6 @@ <h2 id="welcomeHeader">Welcome! Sign in below to get started</h2>
</button>
</div>

<!-- Benefit showcase -->
<br />
<br />
<div id="benefitsShowcaseDiv" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
<h2>Shuffle+ benefits</h2>
<p>Subscribe to Shuffle+ to gain access to a wide range of new features to further improve your experience:</p>
<ul id="benefitsList" style="text-align: left;">
<li>Shuffle from your subscriptions/from multiple channels at once</li>
<li>Ignore already watched videos</li>
<li>More filter options</li>
<li>Favourite channels for quick access in the popup</li>
<li>All future premium features included</li>
<li>Support the development and maintenance of the extension</li>
</ul>
</div>

<div id="googleRevokeAccessConfirmationPopup" class="overlayDiv hidden">
<div>
<h2>Are you sure you want to leave?</h3>
Expand Down

0 comments on commit 476cb86

Please sign in to comment.