mirror of
https://github.com/HDInnovations/HDInnovations.git
synced 2026-01-31 01:35:31 +01:00
522 lines
32 KiB
HTML
522 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>HDInnovations</title>
|
||
<meta name="description" content="Professional services, products, and support passes. Installations, updates, migrations, tuning, and more with HDInnovations.">
|
||
|
||
<meta property="og:url" content="https://hdinnovations.github.io/HDInnovations">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="HDInnovations — Services & Products">
|
||
<meta property="og:description" content="Professional services, products, and support passes. Installations, updates, migrations, tuning, and more with HDInnovations.">
|
||
<meta property="og:image" content="https://hdinnovations.github.io/HDInnovations/media/logo.png">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:domain" content="hdinnovations.github.io">
|
||
<meta property="twitter:url" content="https://hdinnovations.github.io/HDInnovations">
|
||
<meta name="twitter:title" content="HDInnovations — Services & Products">
|
||
<meta name="twitter:description" content="Professional services, products, and support passes. Installations, updates, migrations, tuning, and more with HDInnovations.">
|
||
<meta name="twitter:image" content="https://hdinnovations.github.io/HDInnovations/media/logo.png">
|
||
|
||
<link rel="icon" type="image/x-icon" href="https://hdinnovations.github.io/HDInnovations/media/favicon.ico" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link rel="stylesheet" href="./app.css" />
|
||
<script
|
||
defer
|
||
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
||
></script>
|
||
</head>
|
||
<body>
|
||
<!-- Discount Code Popup -->
|
||
<div x-data="{ show: false, triggered: false }"
|
||
x-show="show"
|
||
x-cloak
|
||
class="promo-overlay"
|
||
@click.self="show = false"
|
||
@scroll.window="if (!triggered && window.scrollY > 50) { show = true; triggered = true; }">
|
||
<div class="promo-modal" @click.away="show = false">
|
||
<button class="promo-close" @click="show = false" aria-label="Close">
|
||
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||
</button>
|
||
<div class="promo-content">
|
||
<div class="promo-badge">
|
||
<i class="fa-solid fa-tags" aria-hidden="true"></i>
|
||
<span>Limited Time Offer</span>
|
||
</div>
|
||
<h2 class="promo-title">UNIIT3D-2026</h2>
|
||
<div class="promo-code-wrapper">
|
||
<span class="promo-code-label">Discount Code:</span>
|
||
<div class="promo-code">PUBXVFJE</div>
|
||
</div>
|
||
<div class="promo-discount">15% OFF</div>
|
||
<p class="promo-description">your entire order</p>
|
||
<div class="promo-validity">
|
||
<i class="fa-solid fa-clock" aria-hidden="true"></i>
|
||
<span>Valid December 31st 2025 - January 5th 2026</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<header class="header" x-data="{ open:false }">
|
||
<div class="u-container header__bar">
|
||
<a href="index.html" class="header__brand"><img src="./media/logo.png" alt="HDInnovations logo" class="brand__logo"/>HDInnovations</a>
|
||
<button
|
||
class="btn btn--ghost header__toggle"
|
||
@click="open=!open"
|
||
:aria-expanded="open.toString()"
|
||
aria-controls="site-nav"
|
||
aria-label="Toggle navigation"
|
||
>
|
||
<i class="fa-solid fa-bars" aria-hidden="true"></i>
|
||
</button>
|
||
<nav id="site-nav" class="header__nav" :aria-expanded="open.toString()">
|
||
<ul class="header__list">
|
||
<li><a class="header__link" href="#services">Services</a></li>
|
||
<li><a class="header__link" href="#products">Products</a></li>
|
||
<li><a class="header__link" href="#passes">Discord Passes</a></li>
|
||
<li><a class="header__link" href="#faq">FAQ</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="header__icons">
|
||
<a class="btn btn--icon-circle" href="https://github.com/HDInnovations" target="_blank" rel="noopener" aria-label="GitHub" title="GitHub">
|
||
<i class="fa-brands fa-github" aria-hidden="true"></i>
|
||
</a>
|
||
<a class="btn btn--icon-circle" href="mailto:hdinnovations@protonmail.com" aria-label="Email" title="Email">
|
||
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
|
||
</a>
|
||
<a class="btn btn--icon-circle" href="#faq" aria-label="Discord" title="Discord (see username in FAQ)">
|
||
<i class="fa-brands fa-discord" aria-hidden="true"></i>
|
||
</a>
|
||
<a class="btn btn--icon-circle" href="donate.html" aria-label="Donate" title="Donate">
|
||
<i class="fa-solid fa-heart" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<section class="hero">
|
||
<div class="u-container">
|
||
<!--<img src="./media/unit3d.png" class="hero__image" alt="UNIT3D">-->
|
||
<h1 class="hero__title">Services, Products, and Support</h1>
|
||
<p class="hero__subtitle">
|
||
Installations, updates, migrations, performance tuning, themes and more.
|
||
</p>
|
||
<div class="notice notice--warning">
|
||
<div class="notice__icon">
|
||
<i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="notice__content">
|
||
<strong class="notice__title">Important Purchase Terms</strong>
|
||
<p class="notice__text">All sales are final. No refunds. Please contact me with any questions before purchasing. All purchases are processed via <a href="https://polar.sh" target="_blank" rel="noopener" class="notice__link">Polar.sh</a>. All purchases are for personal use only. Do not resell, share or redistribute any products or services purchased from HDInnovations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section id="services" class="section section--darker">
|
||
<div class="u-container">
|
||
<div class="section__head">
|
||
<h2 class="section__title">Services</h2>
|
||
<p class="section__desc">
|
||
Everything you need to set up, upgrade, and scale UNIT3D with confidence.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--cards">
|
||
<!-- UNIT3D Install -->
|
||
<article class="card" x-data="videoPlayer('./media/installer.mp4')">
|
||
<div class="card__media" aria-label="Install video">
|
||
<!-- Placeholder icon shown until play -->
|
||
<i x-show="!isPlaying" class="card__media-icon fa-solid fa-download" aria-hidden="true"></i>
|
||
<video x-show="isPlaying" class="embed__item" x-ref="vid" muted playsinline preload="metadata"></video>
|
||
<!-- Hover controls (bottom-right): pause/play + fullscreen -->
|
||
<div class="video-controls">
|
||
<button class="video-btn" @click="toggle()" :aria-label="isPlaying ? 'Pause video' : 'Play video'">
|
||
<template x-if="isPlaying">
|
||
<i class="fa-solid fa-pause" aria-hidden="true"></i>
|
||
</template>
|
||
<template x-if="!isPlaying">
|
||
<i class="fa-solid fa-play" aria-hidden="true"></i>
|
||
</template>
|
||
</button>
|
||
<button class="video-btn" @click="fullscreen()" aria-label="Toggle fullscreen">
|
||
<i class="fa-solid fa-expand" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Installer</h3>
|
||
<p class="card__text">Full installation on a clean dedicated server or VPS running Ubuntu 22.04/24.04 LTS. Upon purchase you will receive a zip file containing a guide and binary installer file. Polar will provide you with license key for installer.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$100</div>
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_8sOwJuTWkAue5HA80Ns5B4INEuZ2Ia9GvgRxu1m9gXZ" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- UNIT3D Update -->
|
||
<article class="card">
|
||
<div class="card__media" aria-label="Update placeholder">
|
||
<i class="card__media-icon fa-solid fa-arrows-rotate" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Update</h3>
|
||
<p class="card__text">Update to latest version with all new features and improvements. This does not include major version jumps or perserving custom changes. Email or Discord with any questions.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$50</div>
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_jDrqntCvpl0NepbJxECJyeFEOk4Dy3WcTJZMI4NDst5" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Major Update -->
|
||
<article class="card">
|
||
<span class="ribbon ribbon--variable">Variable Pricing</span>
|
||
<div class="card__media" aria-label="Major update placeholder">
|
||
<i class="card__media-icon fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Major Update</h3>
|
||
<p class="card__text">Complex jumps between major versions with compatibility and data checks.</p>
|
||
<div class="card__bottom">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Rust Announce Install -->
|
||
<article class="card">
|
||
<div class="card__media" aria-label="Rust announce placeholder">
|
||
<i class="card__media-icon fa-solid fa-bolt" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Rust Announce Install</h3>
|
||
<p class="card__text">Install and configure Rust announce for max performance and scalability.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$75</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Server and Dependency Tuning -->
|
||
<article class="card">
|
||
<!--<span class="ribbon ribbon--sale">On Sale</span>-->
|
||
<div class="card__media" aria-label="Tuning placeholder">
|
||
<i class="card__media-icon fa-solid fa-tachometer-alt" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">Server & Dependency Tuning</h3>
|
||
<p class="card__text">Full server and dependency tuning for maximum performance and scalability.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$175 <!--<span class="price__was">$175</span>--></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Domain migration -->
|
||
<article class="card">
|
||
<div class="card__media" aria-label="Domain migration placeholder">
|
||
<i class="card__media-icon fa-solid fa-globe" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Domain Migration</h3>
|
||
<p class="card__text">Seamless domain cutover with redirects, certificates, and more.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$50</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Server migration -->
|
||
<article class="card">
|
||
<span class="ribbon ribbon--variable">Variable Pricing</span>
|
||
<div class="card__media" aria-label="Server migration placeholder">
|
||
<i class="card__media-icon fa-solid fa-server" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Server Migration</h3>
|
||
<p class="card__text">Move to new infrastructure with minimal downtime.</p>
|
||
<div class="card__bottom">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Auth Theme -->
|
||
<article class="card">
|
||
<div class="card__media" aria-label="Auth theme placeholder">
|
||
<i class="card__media-icon fa-solid fa-lock" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Auth Theme</h3>
|
||
<p class="card__text">Custom login/register theme styling consistent with your wants.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$75</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Products -->
|
||
<section id="products" class="section section--darker">
|
||
<div class="u-container">
|
||
<div class="section__head">
|
||
<h2 class="section__title">Products</h2>
|
||
<p class="section__desc">Premium tools for UNIT3D operators to bring your instance to the next level. Upon purchase you will receive a download link for a zip containing said plugin. All plugins come with a bash script installer you can run to install the plugin on your server.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--cards">
|
||
<!-- Theme Utility -->
|
||
<article class="card">
|
||
<div class="card__media" aria-label="Theme utility placeholder">
|
||
<i class="card__media-icon fa-solid fa-palette" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Theme Utility</h3>
|
||
<p class="card__text">10 themes included. Lifetime access and updates. 1–2 new themes added yearly.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$199</div>
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_lXW2qKuRFQwtuuOZQAcCkLqJ7FlJ9IFBIh8bJ2S9MBu" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Easy Upload3r -->
|
||
<article class="card">
|
||
<span class="ribbon ribbon--limited">Limited Sales</span>
|
||
<div class="card__media" aria-label="Uploader placeholder">
|
||
<i class="card__media-icon fa-solid fa-cloud-arrow-up" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card__body">
|
||
<h3 class="card__title">UNIT3D Easy Uploader</h3>
|
||
<p class="card__text">A fully operational drag and drop uploader for UNIT3D. Simply drag and drp your media file and EASY UPLOAD3R will do the rest. Generate mediainfo, torrent file, description and screenshots.</p>
|
||
<div class="card__bottom">
|
||
<div class="card__price">$499</div>
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_gJk2y1SVC1RfISkznkr9Udhjb00Tv4HMsqf9e1kqMM3" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Discord Support Passes -->
|
||
<section id="passes" class="section section--darker">
|
||
<div class="u-container">
|
||
<div class="section__head">
|
||
<h2 class="section__title">Discord Support Pass</h2>
|
||
<p class="section__desc">Choose a pass length and get priority help in our private Discord server. Upon purchase, you will receive an invite link. If you have any issues, please contact me via hdinnovations@protonmail.com or HDVinnie on Discord.</p>
|
||
</div>
|
||
|
||
<div class="passes">
|
||
<article class="pass">
|
||
<div class="pass__header">
|
||
<h3 class="pass__title">3 Months</h3>
|
||
</div>
|
||
<div class="pass__price">$60</div>
|
||
<div class="card__bottom">
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_d5boyKNXsT01ttnqoqtANceAFJLweGoDVLKsO1vrKRe" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="pass">
|
||
<div class="pass__header">
|
||
<h3 class="pass__title">6 Months</h3>
|
||
</div>
|
||
<div class="pass__price">$120</div>
|
||
<div class="card__bottom">
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_gq8KQhKCgn2Qcx1ErcswhWHBfQKMiCwFeBzSP3mKAzQ" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="pass">
|
||
<div class="pass__header">
|
||
<!--<span class="ribbon ribbon--sale">On Sale</span>-->
|
||
<h3 class="pass__title">1 Year</h3>
|
||
</div>
|
||
<div class="pass__price">$200 <!--<span class="price__was">$200</span>--></div>
|
||
<div class="card__bottom">
|
||
<div class="card__actions">
|
||
<a href="https://buy.polar.sh/polar_cl_rUKnvIq9qHc3ZMpnQ4nyNHoI5XnggLwpxK1GV2IpGI6" data-polar-checkout data-polar-checkout-theme="dark">
|
||
<button class="btn btn--small">Purchase</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section id="faq" class="section section--darker">
|
||
<div class="u-container">
|
||
<div class="section__head">
|
||
<h2 class="section__title">Frequently Asked Questions</h2>
|
||
<p class="section__desc">Answers to common questions about our services and products.</p>
|
||
</div>
|
||
|
||
<div class="faq" x-data="{ open: null }">
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === -1 ? open = null : open = -1" :aria-expanded="(open===-1).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===-1 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>How can I contact you?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===-1">
|
||
Email: <a href="mailto:hdinnovations@protonmail.com">hdinnovations@protonmail.com</a><br/>
|
||
Discord: Send a friend request to <strong>HDVinnie</strong>
|
||
</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === -1 ? open = null : open = -1" :aria-expanded="(open===-1).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===-1 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>How do I purchase?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===-1">
|
||
Email: <a href="mailto:hdinnovations@protonmail.com">hdinnovations@protonmail.com</a><br/>
|
||
Discord: Send a friend request to <strong>HDVinnie</strong>
|
||
</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === 0 ? open = null : open = 0" :aria-expanded="(open===0).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===0 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>What's included with installation?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===0">Complete installation of UNIT3D start to finish providing a live fully functional site.</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === 1 ? open = null : open = 1" :aria-expanded="(open===1).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===1 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>What is the wait time after purchasing a product or service?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===1">Typically 1–2 business days after payment is confirmed.</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === 2 ? open = null : open = 2" :aria-expanded="(open===2).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===2 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>Do you offer custom coding for UNIT3D?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===2">Yes, we offer custom coding services for UNIT3D to meet your specific needs. Depending on the size of the project, timelines and costs may vary.</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === 3 ? open = null : open = 3" :aria-expanded="(open===3).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===3 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>Payment methods accepted?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===3">We currently work with Polar.sh for payment processing.</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === 4 ? open = null : open = 4" :aria-expanded="(open===4).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===4 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>Do you offer technical support?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===4">Yes. We have a private Discord server for support and general discussion.</div>
|
||
</div>
|
||
<div class="faq__item">
|
||
<button class="faq__q btn--ghost" @click="open === 5 ? open = null : open = 5" :aria-expanded="(open===5).toString()">
|
||
<i class="faq__icon fa-solid" :class="open===5 ? 'fa-angle-down' : 'fa-angle-right'" aria-hidden="true"></i>
|
||
<span>Can you migrate my current site to UNIT3D?</span>
|
||
</button>
|
||
<div class="faq__a" x-show="open===5">We can migrate from Gazelle, U‑232, XBTIT, and more — users, content, stats and more are ported over.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="u-container">
|
||
<div class="footer__main">
|
||
<div class="footer__brand">
|
||
<img src="./media/logo.png" alt="HDInnovations logo" class="brand__logo"/>
|
||
<span class="footer__brand-text">HDInnovations</span>
|
||
</div>
|
||
<div class="footer__rights">© <span id="year"></span> HDInnovations. All rights reserved.</div>
|
||
<div class="footer__social">
|
||
<a class="btn btn--icon-circle" href="https://github.com/HDInnovations" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<i class="fa-brands fa-github" aria-hidden="true"></i>
|
||
</a>
|
||
<a class="btn btn--icon-circle" href="mailto:hdinnovations@protonmail.com" aria-label="Email">
|
||
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const y = new Date().getFullYear();
|
||
const el = document.getElementById('year');
|
||
if (el) el.textContent = y;
|
||
</script>
|
||
</footer>
|
||
<script>
|
||
function videoPlayer(src) {
|
||
return {
|
||
isPlaying: false,
|
||
init() {
|
||
const v = this.$refs.vid;
|
||
if (!v.querySelector('source')) {
|
||
const s = document.createElement('source');
|
||
s.src = src || '';
|
||
s.type = 'video/mp4';
|
||
v.appendChild(s);
|
||
}
|
||
v.addEventListener('ended', () => { this.isPlaying = false; });
|
||
v.addEventListener('pause', () => { this.isPlaying = false; });
|
||
v.addEventListener('play', () => { this.isPlaying = true; });
|
||
},
|
||
toggle() {
|
||
const v = this.$refs.vid;
|
||
if (v.paused) {
|
||
v.play().catch(() => {});
|
||
} else {
|
||
v.pause();
|
||
}
|
||
},
|
||
fullscreen() {
|
||
const el = this.$refs.vid;
|
||
if (document.fullscreenElement) {
|
||
document.exitFullscreen().catch(() => {});
|
||
} else {
|
||
(el.requestFullscreen && el.requestFullscreen())
|
||
|| (el.webkitRequestFullscreen && el.webkitRequestFullscreen())
|
||
|| (el.msRequestFullscreen && el.msRequestFullscreen());
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|