Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft: Rough prototype of auto-carousel #200

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Draft: Rough prototype of auto-carousel #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d7f9e97
Rough prototype of auto-carousel
meyerweb Nov 21, 2023
7ef2cf0
Modified SpicySections.js to not force-scroll focus
meyerweb Nov 21, 2023
70cd58d
Added intersection observers and fixed SpicySections.js scroll preven…
meyerweb Nov 21, 2023
ae28049
add draft for use cases carousel
bkardell Nov 7, 2024
b23731b
Style slideshow buttons commit on behalf of eric
bkardell Nov 13, 2024
a55fedf
Merge branch 'master' into success-carousel
meyerweb Nov 15, 2024
c297ed4
add styling stuff
bkardell Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 161 additions & 46 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,30 @@
sitemapPriority: 1.0
sitemapChangeFrequency: yearly
---
<script type="module" src="./js/slide-show.js"></script>
<style>

/* specific to home page */
body {
overflow-x: hidden;
--transTime: 500ms;
}
main, main > .full-width {
display: grid;
grid-template-columns: 1fr [dash] 1px [main] auto 1px 1fr;
grid-template-rows: repeat(10,auto);
}

::part(prev-button),::part(next-button){
top:0%;
height:100%;
background-image:linear-gradient(42deg,hsl(0 80 0 / 0),40%,hsl(0 100 0 / 0.1),60%,hsl(0 80 0 / 0));
}

:is(::part(prev-button),::part(next-button):hover{
background-image:none;
}

@media (min-width: 45rem) {
main, main > .full-width {
grid-template-columns: 1fr [dash] 1px [main] minmax(30rem,var(--mainColMax)) 1px 1fr;
Expand Down Expand Up @@ -152,33 +165,65 @@
padding: 2em 0 1em;
}


/* SPICY! */

.success-stories slide-show {
overflow: auto;
display: block;
padding: 1em;
height: 10rem;
grid-column: 2 / -2;
}

.success-stories {
padding: 0;
align-items: center;
overflow-x: clip;
background: radial-gradient(13rem at 45% 55%, #FFF, transparent),
#F1F1F1;
}
.success-stories > div {
.success-stories section > div {
padding-block: 2em;
}
.success-stories > * + ::before {
.success-stories section > * + ::before {
content: none;
}
.success-stories h2 {
.success-stories section h2 {
margin: 0;
padding: 0.75em 0;
font-size: 1.4em;
border-block-end: 1em solid #DDD;
padding-block: 0.2em 0.25em;
padding-inline: 0;
font-family: Arvo, serif;
font-size: 1.1em;
cursor: pointer;
opacity: 0.5;
transition-duration: var(--transTime);
}

.success-stories h2::before {
content: '';
display: block;
font-family: Helvetica, sans-serif;
font-size: 67%;
font-style: italic;
font-weight: 400;
}
.success-stories h2.successstory::before {
content: "Success Story";
}
.success-stories h2.usecase::before {
content: "Use Case";
}
.success-stories h3 {
font-size: 1.33em;
margin-block-start: 0;
}
.success-stories h3 a {
font-size: 3em;
color: inherit;
text-decoration: none;
line-height: 1.1;
font-size: 3em;
color: inherit;
text-decoration: none;
line-height: 1.1;
}
.success-stories img.hero {
justify-self: start;
Expand All @@ -192,40 +237,41 @@
}

@media (min-width: 45rem) {
.success-stories > div {
.use-cases section > div {
grid-column: main / -2;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: min-content;
align-items: center;
gap: 4rem;
transition-duration: var(--transTime);
}
.success-stories > div:nth-of-type(even) {
.use-cases section > div:nth-of-type(even) {
grid-template-columns: 2fr 1fr;
}
.success-stories > div:nth-of-type(even) .spotlight {
.use-cases section > div:nth-of-type(even) .spotlight {
padding-inline-end: 0;
}
.success-stories > * {
.use-cases section > * {
margin: 0;
padding: 0;
}
.success-stories div + img {
.use-cases section div + img {
max-height: 100%;
margin-inline: 0;
}
.success-stories img.hero {
.use-cases section img.hero {
max-width: 100%;
height: auto;
max-height: 30rem;
margin-inline-start: -5rem;
box-shadow: -0.25em 0 0.5em #06C3, 1em 1.5em 2.5em #0066DD99;
justify-self: end;
margin-inline: 0 -4rem;
justify-self: end;
margin-inline: 0 -4rem;
}
.success-stories .spotlight {
padding-inline: 6rem;
padding-block: 2rem;
.use-cases section .spotlight {
padding-inline: 6rem;
padding-block: 2rem;
}
}

Expand Down Expand Up @@ -290,6 +336,7 @@
color: inherit;
}
}

</style>

<header class="page full-width">
Expand All @@ -316,10 +363,10 @@ <h2>Explore Embedded Browsers</h2>
<div><!-- placeholder for grid, whee -->
<p><big>The Web Platform is a frequently chosen foundational technology for many reasons, including:</big></p>
<ul class="arrows">
<li>Web Platform technologies are built on standards, they have great longevity</li>
<li>The standards are open, embedded systems can incorporate them without licensing fees or other worries.
<li>Web Platform technologies are built on standards, they have great longevity</li>
<li>The standards are open, embedded systems can incorporate them without licensing fees or other worries.
Open standards with great longevity allows lots more things to benefit from the same investments</li>
<li>The number of people with the basic skills to build things with web technologies is massive</li>
<li>The number of people with the basic skills to build things with web technologies is massive</li>
</ul>
<a class="cta btn" style="font-size: smaller;text-align: center;" href="/about/what-is-embedded.html">Learn more about embedded browsers</a>
</div>
Expand All @@ -343,10 +390,7 @@ <h3><a href="/about/a-good-choice.html">Why Choose WPE?</a></h3>
</div>

</section>


<section class="success-stories full-width dotsep">

<div>
<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
<div class="spotlight"><h2 id="success-stories">Success Story</h2>
Expand All @@ -367,28 +411,71 @@ <h3><a href="/blog/2023-use-case-digital-signage.html">Digital Signage</a></h3>
</div>

</section>
<h2>Use Cases</h2>
<slide-show controls="navigation" class="use-cases">
<section>
<div class="spotlight">
<h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
<p>Digital signage web rendering players have many advantages and are a trend nowadays. They feature use of HTML for composing the user interface, simple and effortless provisioning and scheduling new contents to the screen from the cloud, a robust environment with an automatic crash recovery system, and more.</p>
<p><a href="/blog/2023-success-digital-signage.html" class="cta btn large">Learn More</a></p>
<img height="250" src="/assets/img/use_case-digital_signage.png" alt="">
</div>
</section>
<section>
<div class="spotlight">
<h3>Point of Sale</h3>
<p>Just as the web helps billions of online users make purchases every day, embedded browsers can serve as the basis for building the point of sale systems used by brick and mortar merchants.</p>
<img height="250" src="https://images.unsplash.com/photo-1556742517-fde6c2abbe11?q=80&w=2187&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
</div>
</section>
<section>
<div class="spotlight">
<h3>Infotainment Systems</h3>
<p>The web’s ability to create interactive interfaces and stream media make embedded browsers an excellent choice for building the infotainment systems in automobiles, airplanes and trains.</p>
<img height="400" src="https://images.unsplash.com/photo-1700934509422-075b6e2830bb?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
</section>
<section>
<div class="spotlight">
<h3>Smart TVs and set-top-boxes</h3>
<p>Television has long used embedded browsers in many ways, from video playback to creating the guides and interactive menus. The Web, with its natural multimedia-related capabilities, is a natural fit for consuming both traditional TV-based content as well as on demand content from industry-leading streaming services.</p>
<img height="250" src="https://www.igalia.com/assets/i/pe-industries/mini-tv.jpg" alt="">
</div>
</section>
<section>
<div class="spotlight">
<h3 class="usecase">Home appliances</h3>
<p>Embedded browsers are increasingly used in home appliances of all kinds: From providing temperature information and settings for climate control systems, to browsing recipes and engaging programs on your favorite cooking machine, to controlling the distribution of sound across smart speakers around your home.</p>
<img height="250" src="https://plus.unsplash.com/premium_photo-1729431432431-fabe5caa7078?q=80&w=2168&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>


</section>
<section>
<div class="spotlight">
<h3 class="usecase">Professional video and broadcasting</h3>
<p>Graphics overlays are everywhere nowadays in the live video broadcasting industry. Embedded browsers can be used to deliver low-latency, web-augmented video broadcasts which provides with expands the capabilities of traditional systems with and added value.</p>
<img height="250" src="https://plus.unsplash.com/premium_photo-1688700437975-0ea63cfa59e1?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>

</section>
</slide-show>
<section class="developers embedded dotsep">
<div>

<header class="full-bleed">
<h2><a href="/developers">Developers</a></h2>
<img src="/assets/img/illustration-resources.svg" alt="" class="decoration">
</header>

<div class="c2 dotsep">
<h3><a href="/about/architecture.html">WPE Design</a></h3>
<p>WPE is the official WebKit port for embedded platforms. WPE is uniquely designed for embedded systems in that it doesn’t depend on any user-interface toolkits such as the traditional Cocoa, GTK, etc toolkits.</p>
<img src="/assets/img/diagram-WPE-design.svg" alt="" class="decoration">
</div>

<div class="c2 dotsep text">
<h3><a href="/about/faq.html">WPE’s Frequently Asked Questions</a></h3>
<p>We’ve been collecting answers to lots of common questions we’ve been asked. If you have questions, you might find a ready answer in the FAQ.</p>
</div>

</div>
<div>
<header class="full-bleed">
<h2><a href="/developers">Developers</a></h2>
<img src="/assets/img/illustration-resources.svg" alt="" class="decoration">
</header>
<div class="c2 dotsep">
<h3><a href="/about/architecture.html">WPE Design</a></h3>
<p>WPE is the official WebKit port for embedded platforms. WPE is uniquely designed for embedded systems in that it doesn’t depend on any user-interface toolkits such as the traditional Cocoa, GTK, etc toolkits.</p>
<img src="/assets/img/diagram-WPE-design.svg" alt="" class="decoration">
</div>
<div class="c2 dotsep text">
<h3><a href="/about/faq.html">WPE’s Frequently Asked Questions</a></h3>
<p>We’ve been collecting answers to lots of common questions we’ve been asked. If you have questions, you might find a ready answer in the FAQ.</p>
</div>
</div>
</section>

<section class="igalia full-width">
Expand Down Expand Up @@ -461,3 +548,31 @@ <h3>Brought to you by</h3>
}
}
</script>
<style>
/* emeyer edits 2024.11.12 */
::part(prev-button),::part(next-button){
top:0%;
height:100%;
background-image:linear-gradient(42deg,hsl(0 80 0 / 0),40%,hsl(0 100 0 / 0.1),60%,hsl(0 80 0 / 0));
}
:is(::part(prev-button),::part(next-button):hover{
background-image:none;
}

</style>
<style>

@media (min-width: 45rem) {

.use-cases section img:last-child {
grid-column: 2;
grid-row: 1 / 4;
justify-self: center;
}

.use-cases p:has(a[href]) {
grid-row: 4;
}

}
</style>
Loading
Loading