diff --git a/src/html/shufflePlus.js b/src/html/shufflePlus.js index bccd27d9..574b58e4 100644 --- a/src/html/shufflePlus.js +++ b/src/html/shufflePlus.js @@ -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"), diff --git a/static/css/shufflePlus.css b/static/css/shufflePlus.css new file mode 100644 index 00000000..874c0dc9 --- /dev/null +++ b/static/css/shufflePlus.css @@ -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 */ + } +} \ No newline at end of file diff --git a/static/html/shufflePlus.html b/static/html/shufflePlus.html index bd5f514d..24632d26 100644 --- a/static/html/shufflePlus.html +++ b/static/html/shufflePlus.html @@ -4,8 +4,9 @@ Shuffle+ - Random YouTube Video - - + + + @@ -19,7 +20,7 @@

Welcome! Sign in below to get started


-
- - +
+
+ + +
+ + +
+

Shuffle+ benefits

+

Subscribe to Shuffle+ to gain access to a wide range of new features to further improve your experience:

+
    + +
  • Shuffle from your subscriptions/from multiple channels at once (coming soon)
    • +
  • Ignore already watched videos (coming soon)
    • +
  • More filter options (coming soon)
    • +
  • Favourite channels for quick access in the popup (coming soon)
    • +
  • Immediate access to all future premium features
    • +
  • Support the development and maintenance of the extension
    • +
+
+ +
+
+

3-monthly plan

+

Stay flexible with this short-term plan, and get all benefits of the yearly plan!

+ +
+
+

Yearly Plan

+

Save over 15% when compared to the 3-monthly plan!

+ +
+
@@ -49,22 +80,6 @@

Welcome! Sign in below to get started

- -
-
-
-

Shuffle+ benefits

-

Subscribe to Shuffle+ to gain access to a wide range of new features to further improve your experience:

- -
-