185 lines
7.2 KiB
PHP
185 lines
7.2 KiB
PHP
<!doctype html>
|
|
<html amp lang="{{ app()->getLocale() }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{ $meta['title'] }}</title>
|
|
<link rel="canonical" href="{{ $meta['canonical'] }}">
|
|
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
|
|
<meta name="description" content="{{ $meta['description'] }}">
|
|
<meta name="robots" content="{{ $meta['robots'] }}">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:title" content="{{ $meta['og_title'] }}">
|
|
<meta property="og:description" content="{{ $meta['og_description'] }}">
|
|
<meta property="og:url" content="{{ $meta['og_url'] }}">
|
|
<meta property="og:image" content="{{ $meta['og_image'] }}">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="{{ $meta['twitter_title'] }}">
|
|
<meta name="twitter:description" content="{{ $meta['twitter_description'] }}">
|
|
<meta name="twitter:image" content="{{ $meta['twitter_image'] }}">
|
|
<script async src="https://cdn.ampproject.org/v0.js"></script>
|
|
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
|
|
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
|
|
<style amp-boilerplate>
|
|
body {
|
|
-webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
|
|
-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
|
|
-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
|
|
animation: -amp-start 8s steps(1,end) 0s 1 normal both;
|
|
}
|
|
@-webkit-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } }
|
|
@-moz-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } }
|
|
@-ms-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } }
|
|
@-o-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } }
|
|
@keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } }
|
|
</style>
|
|
<noscript>
|
|
<style amp-boilerplate>
|
|
body {
|
|
-webkit-animation: none;
|
|
-moz-animation: none;
|
|
-ms-animation: none;
|
|
animation: none;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
<style amp-custom>
|
|
body {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #020617;
|
|
}
|
|
.story-text {
|
|
color: #ffffff;
|
|
padding: 32px;
|
|
text-shadow: 0 2px 18px rgba(0,0,0,.65);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
min-height: 100%;
|
|
}
|
|
.story-text--top {
|
|
justify-content: flex-start;
|
|
}
|
|
.story-text--center {
|
|
justify-content: center;
|
|
}
|
|
.story-kicker {
|
|
font-size: 13px;
|
|
letter-spacing: .16em;
|
|
text-transform: uppercase;
|
|
opacity: .85;
|
|
}
|
|
.story-title {
|
|
font-size: 34px;
|
|
line-height: 1.05;
|
|
font-weight: 800;
|
|
margin-top: 8px;
|
|
}
|
|
.story-body {
|
|
font-size: 17px;
|
|
line-height: 1.35;
|
|
margin-top: 12px;
|
|
}
|
|
.story-cta {
|
|
display: inline-block;
|
|
margin-top: 18px;
|
|
padding: 11px 16px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,.92);
|
|
color: #111827;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
.overlay {
|
|
background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12), rgba(0,0,0,.12));
|
|
}
|
|
.gradient-fill {
|
|
background: linear-gradient(180deg, rgba(15,23,42,0.95) 0%, rgba(14,165,233,0.35) 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
body {
|
|
background: #ffffff;
|
|
}
|
|
.story-text {
|
|
color: #0f172a;
|
|
text-shadow: none;
|
|
}
|
|
.story-kicker {
|
|
color: rgba(15,23,42,0.65);
|
|
opacity: .95;
|
|
}
|
|
.story-title {
|
|
color: #0f172a;
|
|
}
|
|
.story-body {
|
|
color: #0f172a;
|
|
}
|
|
.story-cta {
|
|
background: rgba(17,24,39,0.92);
|
|
color: #ffffff;
|
|
}
|
|
.overlay {
|
|
background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(255,255,255,0.3));
|
|
}
|
|
.gradient-fill {
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(14,165,233,0.08) 100%);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<amp-story
|
|
standalone
|
|
title="{{ $story->title }}"
|
|
publisher="Skinbase"
|
|
publisher-logo-src="{{ $story->publisherLogoUrl() }}"
|
|
poster-portrait-src="{{ $story->posterPortraitUrl() }}"
|
|
@if($story->posterSquareUrl()) poster-square-src="{{ $story->posterSquareUrl() }}" @endif
|
|
>
|
|
@foreach($story->orderedPages->where('active', true) as $page)
|
|
<amp-story-page id="page-{{ $page->position }}">
|
|
<amp-story-grid-layer template="fill">
|
|
@if($page->background_type === \App\Models\WorldWebStoryPage::BACKGROUND_VIDEO && $page->backgroundUrl())
|
|
<amp-video autoplay loop muted layout="fill" poster="{{ $page->desktopBackgroundUrl() ?: $page->backgroundUrl() }}">
|
|
<source src="{{ $page->backgroundUrl() }}" type="video/mp4">
|
|
</amp-video>
|
|
@elseif($page->background_type === \App\Models\WorldWebStoryPage::BACKGROUND_GRADIENT || ! $page->backgroundUrl())
|
|
<div class="gradient-fill"></div>
|
|
@else
|
|
<amp-img
|
|
src="{{ $page->backgroundUrl() }}"
|
|
width="1080"
|
|
height="1920"
|
|
layout="responsive"
|
|
alt="{{ $page->alt_text ?: ($page->headline ?: $story->title) }}"
|
|
></amp-img>
|
|
@endif
|
|
</amp-story-grid-layer>
|
|
|
|
<amp-story-grid-layer template="fill">
|
|
<div class="overlay"></div>
|
|
</amp-story-grid-layer>
|
|
|
|
<amp-story-grid-layer template="vertical" class="story-text story-text--{{ $page->text_position ?: 'bottom' }}">
|
|
@if($page->caption)
|
|
<div class="story-kicker">{{ $page->caption }}</div>
|
|
@endif
|
|
|
|
@if($page->headline)
|
|
<h1 class="story-title">{{ $page->headline }}</h1>
|
|
@endif
|
|
|
|
@if($page->body)
|
|
<p class="story-body">{{ $page->body }}</p>
|
|
@endif
|
|
|
|
@if($page->cta_label && $page->cta_url)
|
|
<a class="story-cta" href="{{ $page->cta_url }}">{{ $page->cta_label }}</a>
|
|
@endif
|
|
</amp-story-grid-layer>
|
|
</amp-story-page>
|
|
@endforeach
|
|
</amp-story>
|
|
</body>
|
|
</html> |