@ -1,5 +1,49 @@
<?php
$inline_slideshow_texts = explode(" / ", "without our tracking tech / with an adblocker / with accessibility tools / with untrusted extensions / using a different browser");
function quote(string $quote, string $author, string $href) {
ob_start();
?>
< a class = "quote" target = "_blank" href = " <? = $href ?> " >
< q class = "quote-text" >
<? = $quote ?>
< / q >
< div class = "quote-author" > — <? = $author ?> </ div >
< / a >
<?php
return ob_get_clean();
}
class CarouselItems {
private function __construct() {}
private static int $carousel_id = 0;
/**
* @param string[] $items
*/
static function fromItems(array $items): string {
$count = 0;
$carousel_id = CarouselItems::$carousel_id++;
return implode(PHP_EOL, array_map(function ($item) use (& $count, $items, $carousel_id) {
ob_start();
?>
< div id = "carousel- <? = $carousel_id ?> -item- <? = $count ?> " class = "carousel-item" style = "left: <? = $count * 100 ?> %" >
< div class = "carousel-item-inner" >
<? = $item ?>
< div class = "carousel-nav-container" >
< a href = "#carousel- <? = $carousel_id ?> -item- <? = $count - 1 ?> " class = "carousel-nav carousel-nav-previous" title = "Previous" ></ a >
< div class = "carousel-item-count" >
<? = $count + 1 ?> /<? = count ( $items ) ?>
< / div >
< a href = "#carousel- <? = $carousel_id ?> -item- <? = $count + 1 ?> " class = "carousel-nav carousel-nav-next" title = "Next" ></ a >
< / div >
< / div >
< / div >
<?php
$count++;
return ob_get_clean();
}, $items));
}
}
?>
< style >
.banner {
@ -17,61 +61,67 @@
font-size: 1.5rem;
}
.banner-title, .banner-subtitle {
margin-block: 0.5em;
}
.banner-subtitle a {
text-underline-offset: 0.25rem;
}
.horizontal-slideshow.slideshow-window {
width: 100%;
overflow-x: hidden;
.carousel-window {
overscroll-behavior: contain;
}
.inline-slideshow.slideshow-window {
overflow-y: hidden;
.horizontal-carousel.carousel-window {
width: 100%;
overflow-x: hidden;
}
.slideshow-slider {
.carousel-tape {
position: relative;
}
.horizontal-slideshow .slideshow-slider {
.horizontal-carousel .carousel-tape {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
height: 100%;
overflow-y: hidden;
}
.inline-slideshow .slideshow-slider {
overflow-y: auto;
}
.slideshow-item {
.carousel-item {
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
justify-content: flex-end;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
/*
Hack. Makes carousel jump links jump to the top of the page instead of aligning to the carousel to top.
*/
height: 100vh;
scroll-snap-align: start;
}
.slideshow-item-count {
.carousel-item-inner {
display: flex;
width: 100%;
text-align: center ;
color: grey ;
font-family: sans-serif ;
flex-direction: column ;
justify-content: space-between ;
position: absolute ;
}
.slideshow-item-count::after {
content: "/5";
.carousel-item-inner > * {
flex-grow: 1;
}
.quote {
display: flex;
flex-direction: column;
justify-content: space-around;
text-decoration: none;
color: inherit;
font-family: sans-serif;
@ -102,6 +152,7 @@ q.quote-text::before, q.quote-text::after {
align-items: center;
justify-content: center;
font-family: sans-serif;
flex-wrap: wrap;
}
.banner-link-listing a {
@ -109,8 +160,50 @@ q.quote-text::before, q.quote-text::after {
padding: 0.25rem 0.5rem;
}
@keyframes slide {
.carousel-nav-container {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
user-select: none;
}
.carousel-item-count {
text-align: center;
color: grey;
font-family: sans-serif;
}
.carousel-nav {
color: var(--primary-color);
text-decoration: none;
font-weight: bold;
opacity: 0.6;
transition: opacity 0.1s;
padding: 1rem;
flex-grow: 1;
}
.carousel-nav:hover {
opacity: 0.8;
}
.carousel-item .carousel-nav-previous::after {
content: "Prev";
}
.carousel-item .carousel-nav-next::after {
content: "Next";
}
.carousel-item:first-child .carousel-nav-previous::after {
visibility: hidden;
}
.carousel-item:last-child .carousel-nav-next::after {
visibility: hidden;
}
< / style >
< div class = "banner" >
@ -118,27 +211,11 @@ q.quote-text::before, q.quote-text::after {
< p class = "banner-subtitle" > Well, someone at Google is < a target = "_blank" href = "https://www.eff.org/deeplinks/2023/08/your-computer-should-say-what-you-tell-it-say-1" > planning to do < em > that< / em > ... to the Web< / a > .< / p >
< div class = "slideshow-window horizontal-slideshow" style = "height: calc(11rem - 4vw)" >
< div class = "slideshow-slider" >
< a class = "slideshow-item quote" target = "_blank" href = "https://github.com/mozilla/standards-positions/issues/852#issuecomment-1648820747" >
< q class = "quote-text" >
Mozilla opposes this proposal because it < b > contradicts our principles< / b > and vision for the Web.
< / q >
< div class = "quote-author" > — Brian Grinstead (Mozilla)< / div >
< div class = "slideshow-item-count" > 1< / div >
< / a >
< a class = "slideshow-item quote" style = "left: 100%" target = "_blank" href = "https://vivaldi.com/blog/googles-new-dangerous-web-environment-integrity-spec/" >
< q class = "quote-text" > The idea of it is as simple as it is < b > dangerous< / b > .< / q >
< div class = "quote-author" > — Julien Picalausa (Vivaldi)< / div >
< div class = "slideshow-item-count" > 2< / div >
< / a >
< a class = "slideshow-item quote" style = "left: 200%" target = "_blank" href = "https://twitter.com/BrendanEich/status/1684561924191842304" >
< q class = "quote-text" > We < b > won’ < / b > , just as we disable [...] other junk that Google puts into Chromium.< / q >
< div class = "quote-author" > — Brendan Eich (Brave)< / div >
< div class = "slideshow-item-count" > 3< / div >
< / a >
< div class = "slideshow-item banner-link-listing" style = "left: 300%" >
< p >
< div class = "carousel-window horizontal-carousel" style = "height: calc(11rem - 4vw)" >
< div class = "carousel-tape" >
<?php
ob_start();?>
< p class = "banner-link-listing" >
Take action now:
< a target = "_blank" href = "https://ftc.gov/enforcement/report-antitrust-violation" > FTC< / a >
< a target = "_blank" href = "https://competition-policy.ec.europa.eu/antitrust/contact_en" > European Comission< / a >
@ -147,10 +224,9 @@ q.quote-text::before, q.quote-text::after {
< a target = "_blank" href = "https://competitionbureau.gc.ca/eic/site/cb-bc.nsf/frm-eng/GHÉT-7TDNA5" > Canadian Competion Bureau< / a >
< a target = "_blank" href = "https://accc.gov.au/business/competition-and-exemptions/competition-and-anti-competitive-behaviour" > ACCC< / a >
< / p >
< div class = "slideshow-item-count" > 4< / div >
< / div >
< div class = "slideshow-item banner-link-listing" style = "left: 400%" >
< p >
<?php $take_action = ob_get_clean ();
ob_start();?>
< p class = "banner-link-listing" >
Try these browsers instead of Chrome:
< a target = "_blank" href = "https://brave.com" > Brave< / a >
< a target = "_blank" href = "https://www.mozilla.org/en-US/firefox/new/" > Mozilla Firefox< / a >
@ -158,8 +234,27 @@ q.quote-text::before, q.quote-text::after {
< a target = "_blank" href = "https://mullvad.net/en/browser" > Mullvad Browser< / a >
< a target = "_blank" href = "https://librewolf.net/" > LibreWolf< / a >
< / p >
< div class = "slideshow-item-count" > 5< / div >
< / div >
<?php $other_browsers = ob_get_clean ();
echo CarouselItems::fromItems([
quote(
"Mozilla opposes this proposal because it < b > contradicts our principles< / b > and vision for the Web.",
"Brian Grinstead (Mozilla)",
"https://github.com/mozilla/standards-positions/issues/852#issuecomment-1648820747"
),
quote(
"The idea of it is as simple as it is < b > dangerous< / b > .",
"Julien Picalausa (Vivaldi)",
"https://vivaldi.com/blog/googles-new-dangerous-web-environment-integrity-spec/"
),
quote(
"We < b > won’ < / b > , just as we disable [...] other junk that Google puts into Chromium.",
"Brendan Eich (Brave)",
"https://twitter.com/BrendanEich/status/1684561924191842304"
),
$take_action,
$other_browsers
])
?>
< / div >
< / div >
< / div >
gravel
2 years ago
