diff --git a/src/components/enhanced-youtube/Layout.astro b/src/components/enhanced-youtube/Layout.astro index 216bded8..4aa4f340 100644 --- a/src/components/enhanced-youtube/Layout.astro +++ b/src/components/enhanced-youtube/Layout.astro @@ -40,34 +40,193 @@ const { title, description = '', image, twitterCardType } = Astro.props; /> - +
+
+ +
+
+ +
+
+ + + + +
+
+ Simulated screen capture of Safari on visionOS with youtube.com open. Video controls are similar to native visionOS user interface elements. +
+
+ + diff --git a/src/pages/enhanced-youtube/help.astro b/src/pages/enhanced-youtube/help.astro index f53fc133..8545f950 100644 --- a/src/pages/enhanced-youtube/help.astro +++ b/src/pages/enhanced-youtube/help.astro @@ -3,7 +3,7 @@ import Layout from '../../components/enhanced-youtube/Layout.astro'; --- -

Enhanced YouTube Safari Extension Help

+

Help

How does it work?

A Safari Extension can be used to modify a website's behavior, enhancing the @@ -32,20 +32,34 @@ import Layout from '../../components/enhanced-youtube/Layout.astro';

  1. Open Safari and navigate to youtube.com.
  2. - Tap \(Image(systemName: "textformat.size")) on the right side of the - search field. + Tap + on the right side of the search field.
  3. - Tap Request Desktop Website \(Image(systemName: "desktopcomputer")). + Tap Request Desktop Website + .

To enable the extension on Settings:

  1. Open Settings and tap Apps on the sidebar.
    2. -
  2. Tap \(Image(systemName: "safari")) Safari on the list.
    3. -
  3. Scroll to the General section and tap Extensions.
    4. -
  4. Tap \(Image(.sparklesPlayCircle)) Enhanced YouTube.
    5. +
  5. + Tap + Safari on the list. +
    6. +
  6. + Scroll to the General section and tap Extensions. +
    7. +
  7. + Tap + Enhanced YouTube. +
  8. Make sure the toggle at the top right is on.
  9. Under Permissions, tap youtube.com and then tap Allowenhanced-youtube@wes.dev

    + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/enhanced-youtube/index.astro b/src/pages/enhanced-youtube/index.astro index d9d961b5..3836c072 100644 --- a/src/pages/enhanced-youtube/index.astro +++ b/src/pages/enhanced-youtube/index.astro @@ -31,81 +31,10 @@ import BaseHeadMeta from '../../components/BaseHeadMeta.astro'; /> - +
    -

    Enhanced YouTube Safari Extension Privacy Policy

    -

    - This extension does not collect any personal information about you or your - browsing on YouTube. -

    -

    The extension modifies YouTube utilizing heuristics on your device.

    +

    Privacy Policy

    + +

    Our Commitment to Your Privacy

    +

    - We collect statistical information – the application version and your device - visionOS version – when you install the extension, and when you use the - extension. + The Enhanced YouTube Safari Extension respects your privacy. We designed the + extension to make your YouTube experience better, and we are transparent + about how we collect and use data to achieve that goal.

    + +

    What Information We Collect and Why

    + +
      +
    • + No Personal Information: We do not collect personally identifiable + information like your name, address, email, or YouTube account details. +
      • + +
    • + Device and Extension Information: To ensure compatibility + and track updates, we collect your device's operating system version (visionOS) + and the extension's version number. +
      • +
    • + Anonymous Usage Statistics: We may collect anonymous data + (never linked to you or your account) about how you use the extension. This + helps us understand how people are using the features and guide future improvements. +
      • +
    + +

    How We Use the Data

    + +
      +
    • + Extension Improvements: We analyze anonymous usage statistics + to determine which features to enhance or create in the future. +
      • +
    • + Compatibility and Update Tracking: We use the device and extension + version information to ensure everything is working smoothly and to alert you + to important updates. +
      • +
    + +

    Third-Party Services

    + +
      +
    • + Plausible Analytics: We use Plausible, a privacy-respecting + analytics service, to collect usage data. You can learn more about Plausible's + data and privacy practices on their website. +
      • +
    + +

    Changes to this Policy

    +

    - We might collect additional usage information to improve the extension in - the future. That information will never be associated with you, your device - or account. + We may update this Privacy Policy in the future. If we do, we will post the + revised version on our website or within the extension settings.

    + +

    Contact Us

    +

    - We utilize Plausible for analytics aggregation. You can learn more about - their privacy-focused data storage practices on their websiteenhanced-youtube@wes.dev.

    -

    This document might change in the future without notice.

    diff --git a/src/styles/enhanced-youtube.css b/src/styles/enhanced-youtube.css new file mode 100644 index 00000000..aa8a539c --- /dev/null +++ b/src/styles/enhanced-youtube.css @@ -0,0 +1,131 @@ +:global(html) { + font-family: system-ui; + background: #0f1112; + color: #fff; + min-height: 100vh; +} + +:global(*), +:global(*::after), +:global(*::before) { + box-sizing: border-box; +} + +:global(a) { + color: inherit; +} + +:global(body) { + display: grid; + align-items: center; + justify-items: stretch; + margin: 0; + min-height: 100vh; +} + +:global(.SvgInline) { + width: 1.5lh; + margin: -0.3lh; + vertical-align: -0.3rem; +} + +:global(.Sprite) { + display: none; +} + +.Main, +.Wrapper { + grid-area: 1 / 1 / 1 / 1; +} + +.Main { + --colum-width: 50%; + align-items: center; + display: flex; + margin: 0; + padding: 2rem 0; + height: fit-content; + min-height: 100vh; +} + +.Background { + opacity: 0.5; + z-index: 1; +} + +.Wrapper { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + z-index: 2; + color: rgba(255, 255, 255, 0.7); + + h1, + h2 { + color: rgba(255, 255, 255, 1); + } + + h1:first-child { + margin-block-start: 0; + } +} + +.Page { + -webkit-backdrop-filter: blur(50px); + backdrop-filter: blur(50px); + background-blend-mode: luminosity; + background: rgba(128, 128, 128, 0.3); + border-radius: 2.125rem; + border: 1.4px solid rgba(255, 255, 255, 0.2); + padding: 2rem; + max-width: min(40rem, calc(100vw - 2rem)); + line-height: 1.6; +} + +.Leading { + display: flex; + flex-direction: column; + align-items: center; + padding: 4.375rem; + gap: 4.375rem; +} + +.Leading, +.Trailing { + width: var(--colum-width); +} + +.Logo { +} + +.Download { +} + +.Footer { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.5); +} + +.Trailing { + display: flex; + align-items: center; + overflow: hidden; +} + +@media screen and (max-width: 760px) { + .Main { + --colum-width: auto; + flex-direction: column; + } + + .Trailing { + padding: 0 2rem 2rem 2rem; + align-self: flex-start; + width: 100%; + } + + .Trailing img { + width: 100%; + } +}