Save
This commit is contained in:
Nick
parent
8a8431f329
commit
1f429c7e83
@ -43,6 +43,9 @@
|
||||
<Content Update="web.config">
|
||||
<CopyToPublishDirectory>Never</CopyToPublishDirectory>
|
||||
</Content>
|
||||
<Content Update="wwwroot\js\plyr.js">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@ -17,14 +17,18 @@
|
||||
<div class="col-md-5 text-center">
|
||||
<a asp-controller="TheAlphaFlame" asp-action="Discovery">
|
||||
<div class="hero-video-container">
|
||||
<video autoplay muted loop playsinline poster="/images/the-alpha-flame-discovery-blank.png">
|
||||
<source src="/videos/background-5.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
<video id="heroVideo" autoplay muted loop playsinline preload="none" poster="/images/webp/the-alpha-flame-discovery-blank-400.webp">
|
||||
<!-- Source will be injected later -->
|
||||
</video>
|
||||
|
||||
<!-- New overlay image -->
|
||||
<responsive-image src="the-alpha-flame-discovery-overlay.png" class="hero-overlay-image" alt="The Alpha Flame: Discovery by Catherine Lynwood" display-width-percentage="50"></responsive-image>
|
||||
<!-- Overlay image remains untouched -->
|
||||
<responsive-image src="the-alpha-flame-discovery-overlay.png"
|
||||
class="hero-overlay-image"
|
||||
alt="The Alpha Flame: Discovery by Catherine Lynwood"
|
||||
display-width-percentage="50">
|
||||
</responsive-image>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -129,4 +133,21 @@
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
setTimeout(() => {
|
||||
const video = document.getElementById("heroVideo");
|
||||
const source = document.createElement("source");
|
||||
source.src = "/videos/background-5.mp4";
|
||||
source.type = "video/mp4";
|
||||
video.appendChild(source);
|
||||
video.load(); // Triggers actual file load
|
||||
video.play().catch(err => {
|
||||
console.warn("Autoplay failed:", err);
|
||||
});
|
||||
}, 2000); // Adjust delay (e.g., 1000–3000ms) based on your needs
|
||||
});
|
||||
</script>
|
||||
|
||||
}
|
||||
@ -54,14 +54,20 @@
|
||||
<body class="bg-primary text-white">
|
||||
<div id="background-wrapper">
|
||||
<div class="video-background">
|
||||
<video autoplay muted loop playsinline poster="/images/webp/maggie-5-1920.webp">
|
||||
<source src="/videos/background-3.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
<video id="siteBackgroundVideo"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
preload="none"
|
||||
poster="/images/webp/the-alpha-flame-discovery-blank-400.webp">
|
||||
<!-- Source will be injected by JS -->
|
||||
</video>
|
||||
<div class="video-overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<!-- Content wrapper to keep everything on top of the background -->
|
||||
<header>
|
||||
@ -146,15 +152,30 @@
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
|
||||
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
|
||||
<script src="~/js/plyr.js"></script>
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.plyr.io/3.7.2/plyr.polyfilled.js"></script>
|
||||
<script>
|
||||
const player = new Plyr('audio');
|
||||
</script>
|
||||
@RenderSection("Scripts", required: false)
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
setTimeout(() => {
|
||||
const video = document.getElementById("siteBackgroundVideo");
|
||||
const source = document.createElement("source");
|
||||
source.src = "/videos/background-3.mp4";
|
||||
source.type = "video/mp4";
|
||||
video.appendChild(source);
|
||||
video.load(); // Initiates download
|
||||
video.play().catch(err => {
|
||||
console.warn("Background video autoplay failed:", err);
|
||||
});
|
||||
}, 1500); // Adjust delay as needed (e.g. 1000–3000ms)
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function () {
|
||||
|
||||
@ -34,5 +34,23 @@
|
||||
"inputFiles": [
|
||||
"wwwroot/css/bootstrap.css"
|
||||
]
|
||||
},
|
||||
{
|
||||
"outputFileName": "wwwroot/js/plyr.polyfilled.min.js",
|
||||
"inputFiles": [
|
||||
"wwwroot/js/plyr.polyfilled.js"
|
||||
]
|
||||
},
|
||||
{
|
||||
"outputFileName": "wwwroot/js/site.min.js",
|
||||
"inputFiles": [
|
||||
"wwwroot/js/site.js"
|
||||
]
|
||||
},
|
||||
{
|
||||
"outputFileName": "wwwroot/js/plyr.min.js",
|
||||
"inputFiles": [
|
||||
"wwwroot/js/plyr.js"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -17,70 +17,6 @@ html {
|
||||
min-height: 93vh;
|
||||
}
|
||||
|
||||
/* Default background for larger screens (Extra large and up) */
|
||||
.fixed-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(rgba(23, 200, 235, 0.5), rgba(23, 200, 235, 0.5)), url('/images/webp/the-alpha-flame-discovery-blank-1920.webp'); /* Path to the largest image */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
@media (max-width: 575.98px) {
|
||||
.fixed-background {
|
||||
background: linear-gradient(rgba(23, 200, 235, 0.5), rgba(23, 200, 235, 0.5)), url('/images/webp/the-alpha-flame-discovery-blank-400.webp'); /* Path to smallest image */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) and (max-width: 767.98px) {
|
||||
.fixed-background {
|
||||
background: linear-gradient(rgba(23, 200, 235, 0.5), rgba(23, 200, 235, 0.5)), url('/images/webp/the-alpha-flame-discovery-blank-768.webp'); /* Path to small image */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.fixed-background {
|
||||
background: linear-gradient(rgba(23, 200, 235, 0.5), rgba(23, 200, 235, 0.5)), url('/images/webp/the-alpha-flame-discovery-blank-992.webp'); /* Path to medium image */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.fixed-background {
|
||||
background: linear-gradient(rgba(23, 200, 235, 0.5), rgba(23, 200, 235, 0.5)), url('/images/webp/the-alpha-flame-discovery-blank-1200.webp'); /* Path to large image */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (larger desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.fixed-background {
|
||||
background: linear-gradient(rgba(23, 200, 235, 0.5), rgba(23, 200, 235, 0.5)), url('/images/webp/the-alpha-flame-discovery-blank-1920.webp'); /* Path to extra-large image */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1; /* Brings content above the background */
|
||||
|
||||
2
CatherineLynwood/wwwroot/css/site.min.css
vendored
2
CatherineLynwood/wwwroot/css/site.min.css
vendored
@ -1 +1 @@
|
||||
html{font-size:14px}@media(min-width:768px){html{font-size:16px}}html{position:relative}.content{min-height:93vh}.fixed-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(rgba(23,200,235,.5),rgba(23,200,235,.5)),url('/images/webp/the-alpha-flame-discovery-blank-1920.webp');background-size:cover;background-repeat:no-repeat;background-position:top;z-index:-1}@media(max-width:575.98px){.fixed-background{background:linear-gradient(rgba(23,200,235,.5),rgba(23,200,235,.5)),url('/images/webp/the-alpha-flame-discovery-blank-400.webp');background-size:cover;background-repeat:no-repeat;background-position:top}}@media(min-width:576px) and (max-width:767.98px){.fixed-background{background:linear-gradient(rgba(23,200,235,.5),rgba(23,200,235,.5)),url('/images/webp/the-alpha-flame-discovery-blank-768.webp');background-size:cover;background-repeat:no-repeat;background-position:top}}@media(min-width:768px) and (max-width:991.98px){.fixed-background{background:linear-gradient(rgba(23,200,235,.5),rgba(23,200,235,.5)),url('/images/webp/the-alpha-flame-discovery-blank-992.webp');background-size:cover;background-repeat:no-repeat;background-position:top}}@media(min-width:992px) and (max-width:1199.98px){.fixed-background{background:linear-gradient(rgba(23,200,235,.5),rgba(23,200,235,.5)),url('/images/webp/the-alpha-flame-discovery-blank-1200.webp');background-size:cover;background-repeat:no-repeat;background-position:top}}@media(min-width:1200px){.fixed-background{background:linear-gradient(rgba(23,200,235,.5),rgba(23,200,235,.5)),url('/images/webp/the-alpha-flame-discovery-blank-1920.webp');background-size:cover;background-repeat:no-repeat;background-position:top}}.content{position:relative;z-index:1}section{padding-bottom:10px}.w-sm-50{width:100%}@media(min-width:576px){.w-sm-50{width:50%}}.w-md-50{width:100%}@media(min-width:768px){.w-md-50{width:50%}}.excerpt-section{background-color:#f8f9fa}.scene-image{max-width:100%;height:auto;border-radius:10px}.audio-player{margin:1rem 0}.chapter-text{font-family:'Georgia',serif;font-size:1.1rem;line-height:1.6;color:#333}.chapter-title{font-size:1.5rem;font-weight:bold;color:#555;margin-bottom:1rem}.responsive-border{border-right:3px solid #000}@media(max-width:575.98px){.responsive-border{border-right:0;border-bottom:3px solid #000}}.fit-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.share-button{padding:8px 12px;margin-left:10px;margin-right:10px;color:#fff;text-decoration:none;border-radius:4px;font-size:14px}.share-button.facebook{background-color:#3b5998}.share-button.twitter{background-color:#1da1f2}.share-button.linkedin{background-color:#0077b5}.share-button.pinterest{background-color:#bd081c}.share-button.instagram{background-color:#e4405f}.share-button.tiktok{background-color:#010101}#synopsis-body{overflow-y:auto}.tagline-shadow{text-shadow:2px 2px 4px rgba(0,0,0,.8)}
|
||||
html{font-size:14px}@media(min-width:768px){html{font-size:16px}}html{position:relative}.content{min-height:93vh}.content{position:relative;z-index:1}section{padding-bottom:10px}.w-sm-50{width:100%}@media(min-width:576px){.w-sm-50{width:50%}}.w-md-50{width:100%}@media(min-width:768px){.w-md-50{width:50%}}.excerpt-section{background-color:#f8f9fa}.scene-image{max-width:100%;height:auto;border-radius:10px}.audio-player{margin:1rem 0}.chapter-text{font-family:'Georgia',serif;font-size:1.1rem;line-height:1.6;color:#333}.chapter-title{font-size:1.5rem;font-weight:bold;color:#555;margin-bottom:1rem}.responsive-border{border-right:3px solid #000}@media(max-width:575.98px){.responsive-border{border-right:0;border-bottom:3px solid #000}}.fit-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.share-button{padding:8px 12px;margin-left:10px;margin-right:10px;color:#fff;text-decoration:none;border-radius:4px;font-size:14px}.share-button.facebook{background-color:#3b5998}.share-button.twitter{background-color:#1da1f2}.share-button.linkedin{background-color:#0077b5}.share-button.pinterest{background-color:#bd081c}.share-button.instagram{background-color:#e4405f}.share-button.tiktok{background-color:#010101}#synopsis-body{overflow-y:auto}.tagline-shadow{text-shadow:2px 2px 4px rgba(0,0,0,.8)}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 898 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
1
CatherineLynwood/wwwroot/js/plyr.js
Normal file
1
CatherineLynwood/wwwroot/js/plyr.js
Normal file
File diff suppressed because one or more lines are too long
0
CatherineLynwood/wwwroot/js/site.min.js
vendored
Normal file
0
CatherineLynwood/wwwroot/js/site.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user