Skip to content

Commit

Permalink
homepage wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariotaku
mariotaku committed Jun 10, 2024
1 parent eb2237c commit 70cc209
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 107 deletions.
215 changes: 110 additions & 105 deletions src/views/index/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,116 +65,121 @@

<section id="apps" class="my-5 container-lg">
<h2 class="text-center">Apps &amp; Games</h2>
<div class="row mx-1 mx-lg-0">
<div class="apps-showcase col-12 mt-4 py-4 px-0 rounded-4 bg-dark-subtle position-relative">
<div class="marquee w-auto mt-3" data-mc-duration="60" role="marquee">
<div class="d-flex flex-row">
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #cf0652">
<img src="../../img/app-icons/org.webosbrew.hbchannel.png" class="app-icon" alt="Homebrew Channel">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://github.com/webosbrew/webos-homebrew-channel" target="_blank">
<h5 class="card-title my-0">Homebrew Channel</h5></a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #ffffff">
<img src="../../img/app-icons/org.xbmc.kodi.png" class="app-icon" alt="Kodi">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-black"
href="https://kodi.tv/" target="_blank">
<h5 class="card-title my-0">Kodi</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #000000">
<img src="../../img/app-icons/org.webosbrew.hyperion.ng.loader.png" class="app-icon" alt="Hyperion.NG">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://hyperion-project.org/" target="_blank">
<h5 class="card-title my-0">Hyperion.NG</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #ffb80d">
<img src="../../img/app-icons/org.webosbrew.vncserver.png" class="app-icon" alt="VNC Server">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-black"
href="https://github.com/Informatic/webos-vncserver" target="_blank">
<h5 class="card-title my-0">VNC Server</h5>
</a>
<div class="row g-3 mt-5">
<div class="apps-showcase col-12">
<div class="py-4 px-0 rounded-4 bg-dark-subtle position-relative">
<div class="marquee w-auto mt-3" data-mc-duration="60" role="marquee">
<div class="d-flex flex-row">
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #cf0652">
<img src="../../img/app-icons/org.webosbrew.hbchannel.png" class="app-icon" alt="Homebrew Channel">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://github.com/webosbrew/webos-homebrew-channel" target="_blank">
<h5 class="card-title my-0">Homebrew Channel</h5></a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #ffffff">
<img src="../../img/app-icons/org.xbmc.kodi.png" class="app-icon" alt="Kodi">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-black"
href="https://kodi.tv/" target="_blank">
<h5 class="card-title my-0">Kodi</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #000000">
<img src="../../img/app-icons/org.webosbrew.hyperion.ng.loader.png" class="app-icon" alt="Hyperion.NG">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://hyperion-project.org/" target="_blank">
<h5 class="card-title my-0">Hyperion.NG</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #ffb80d">
<img src="../../img/app-icons/org.webosbrew.vncserver.png" class="app-icon" alt="VNC Server">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-black"
href="https://github.com/Informatic/webos-vncserver" target="_blank">
<h5 class="card-title my-0">VNC Server</h5>
</a>
</div>
</div>
</div>
</div>
<div class="marquee w-auto mt-3" data-mc-duration="60" data-mc-direction="ltr" role="marquee">
<div class="d-flex flex-row">
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #ffffff">
<img src="../../img/app-icons/com.limelight.webos.png" class="app-icon" alt="Moonlight">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-black"
href="https://moonlight-stream.org/" target="_blank">
<h5 class="card-title my-0">Moonlight</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #58598a">
<img src="../../img/app-icons/com.retroarch.png" class="app-icon" alt="RetroArch">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://retroarch.com/" target="_blank">
<h5 class="card-title my-0">RetroArch</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #8b0000">
<img src="../../img/app-icons/org.chocolate-doom.demo.png" class="app-icon" alt="Chocolate Doom">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://www.chocolate-doom.org/" target="_blank">
<h5 class="card-title my-0">Chocolate Doom</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #000000">
<img src="../../img/app-icons/com.github.k4zmu2a.space-cadet-pinball.png" class="app-icon"
alt="3D Pinball: Space Cadet">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://github.com/webosbrew/SpaceCadetPinball" target="_blank">
<h5 class="card-title my-0">3D Pinball: Space Cadet</h5>
</a>
<div class="marquee w-auto mt-3" data-mc-duration="60" data-mc-direction="ltr" role="marquee">
<div class="d-flex flex-row">
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #ffffff">
<img src="../../img/app-icons/com.limelight.webos.png" class="app-icon" alt="Moonlight">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-black"
href="https://moonlight-stream.org/" target="_blank">
<h5 class="card-title my-0">Moonlight</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #58598a">
<img src="../../img/app-icons/com.retroarch.png" class="app-icon" alt="RetroArch">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://retroarch.com/" target="_blank">
<h5 class="card-title my-0">RetroArch</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #8b0000">
<img src="../../img/app-icons/org.chocolate-doom.demo.png" class="app-icon" alt="Chocolate Doom">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://www.chocolate-doom.org/" target="_blank">
<h5 class="card-title my-0">Chocolate Doom</h5>
</a>
</div>
<div class="card app-item d-flex flex-row mx-2 p-3 border-0 align-items-center"
style="background-color: #000000">
<img src="../../img/app-icons/com.github.k4zmu2a.space-cadet-pinball.png" class="app-icon"
alt="3D Pinball: Space Cadet">
<a class="stretched-link text-decoration-none flex-fill ms-3 text-white"
href="https://github.com/webosbrew/SpaceCadetPinball" target="_blank">
<h5 class="card-title my-0">3D Pinball: Space Cadet</h5>
</a>
</div>
</div>
</div>
</div>

<h3 class="ps-4 position-absolute top-0 bottom-0 align-content-center pointer-events-none">
<img src="../../img/app-icons/org.xbmc.kodi.png" class="app-icon me-2"/>Kodi.
<br>
<img src="../../img/app-icons/com.limelight.webos.png" class="app-icon me-2"/>Moonlight.
<br>
<img src="../../img/app-icons/com.retroarch.png" class="app-icon me-2"/>RetroArch.
<br>
And ✨more✨.
<br>
We make them happen.
</h3>
</div>
<div class="col-md-6 mt-4 p-0">
<div class="rounded-4 p-4 me-md-2 bg-dark-subtle">
<h3>Open Source</h3>
<h3 class="ps-4 position-absolute top-0 bottom-0 align-content-center pointer-events-none">
<img src="../../img/app-icons/org.xbmc.kodi.png" class="app-icon me-2"/>Kodi.
<br>
<img src="../../img/app-icons/com.limelight.webos.png" class="app-icon me-2"/>Moonlight.
<br>
<img src="../../img/app-icons/com.retroarch.png" class="app-icon me-2"/>RetroArch.
<br>
And ✨more✨.
<br>
We make them happen.
</h3>
</div>
</div>
<div class="col-md-6 mt-4 p-0">
<div class="rounded-4 p-4 ms-md-2 bg-dark-subtle">
<div class="col-md-6">
<div class="p-4 rounded-4 bg-dark-subtle">
<h3>Can't root?<br>
Outdated model?<br>
Gotta support'em all*.
</h3>
<small>*Some apps require root or newer system version.</small>
</div>
</div>
<div class="col-md-6">
<div class="p-4 rounded-4 bg-dark-subtle">
<h3>Open Source</h3>
</div>
</div>
</div>
</section>

<div class="py-3 bg-dark-subtle"></div>

<section id="mods" class="container-lg my-5">
<h2 class="text-center">Gain More Control*</h2>
<div class="row mx-1 mx-lg-0">
<div class="row g-3 mt-5">
</div>
<p>
TODO: Screensavers, privacy protection scripts, AltHome
</p>
<small>*Mods are available for rooted TVs only.</small>
</section>

Expand All @@ -188,9 +193,9 @@

<section id="get-started" class="my-5 container-lg">
<h2 class="text-center">Get Started</h2>
<div class="row mx-1 mx-lg-0">
<div class="col-md-6 mt-4 p-0">
<div class="position-relative rounded-4 p-4 me-md-2 bg-hbchannel">
<div class="row g-3 mt-5">
<div class="col-md-6">
<div class="position-relative rounded-4 p-4 bg-hbchannel">
<img src="../../img/icon32.svg" width="48" height="48"
class="position-absolute bottom-0 end-0 me-2 mb-2 opacity-75" alt="webOS Homebrew"/>
<h5 class="card-title text-white">Root your TV</h5>
Expand All @@ -199,13 +204,13 @@
<br>
Gain more control over your TV.
</p>
<a class="stretched-link card-link link-secondary" href="https://www.webosbrew.org/rooting">
<a class="stretched-link card-link text-white-50" href="https://www.webosbrew.org/rooting">
Read tutorial
</a>
</div>
</div>
<div class="col-md-6 mt-4 p-0">
<div class="position-relative rounded-4 p-4 ms-md-2 bg-devmode">
<div class="col-md-6">
<div class="position-relative rounded-4 p-4 bg-devmode">
<img src="../../img/devmode32.svg" width="48" height="48"
class="position-absolute bottom-0 end-0 me-2 mb-2 opacity-75" alt="Dev Mode"/>
<h5 class="card-title text-white">Install via Dev Mode</h5>
Expand All @@ -214,7 +219,7 @@
<br>
No root required.
</p>
<a class="stretched-link card-link link-secondary" href="https://www.webosbrew.org/rooting">
<a class="stretched-link card-link text-white-50" href="https://www.webosbrew.org/rooting">
Read tutorial
</a>
</div>
Expand All @@ -231,27 +236,27 @@
<div class="py-3 bg-dark-subtle"></div>

<section id="contribute" class="container-lg my-5">
<h2>Contribute</h2>
<h2 class="text-center">Contribute</h2>

<div class="row mx-1 mx-lg-0">
<div class="col-sm-6 col-lg-3 mt-3">
<div class="row g-3 mt-5">
<div class="col-sm-6 col-lg-3">
<div class="card card-body rounded-4 bg-dark-subtle">
<i class="bi bi-discord"></i>
<i class="bi bi-discord"></i>Join openlgtv Discord
</div>
</div>
<div class="col-sm-6 col-lg-3 mt-3">
<div class="col-sm-6 col-lg-3">
<div class="card card-body rounded-4 bg-dark-subtle">
<i class="bi bi-github"></i>
<i class="bi bi-github"></i>Check out our GitHub
</div>
</div>
<div class="col-sm-6 col-lg-3 mt-3">
<div class="col-sm-6 col-lg-3">
<div class="card card-body rounded-4 bg-dark-subtle">
<i class="bi bi-discord"></i>
<i class="bi bi-lightbulb-fill"></i>Suggest an idea
</div>
</div>
<div class="col-sm-6 col-lg-3 mt-3">
<div class="col-sm-6 col-lg-3">
<div class="card card-body rounded-4 bg-dark-subtle">
<i class="bi bi-discord"></i>
<i class="bi bi-heart-fill"></i>Donate
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/views/index/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,11 @@ html {
}

.bg-hbchannel {
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.0), rgba(206, 5, 81, 1));
background-image: linear-gradient(135deg, rgb(151, 2, 58), rgb(172, 7, 70), rgb(206, 5, 81));
}

.bg-devmode {
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.0), rgba(187, 62, 63, 1));
background-image: linear-gradient(135deg, rgb(129, 18, 19), rgb(145, 32, 33), rgb(187, 62, 63));
}

.marquee {
Expand Down

0 comments on commit 70cc209

Please sign in to comment.