hyprland-website/views/home.ejs

290 lines
10 KiB
Text
Raw Normal View History

2022-08-13 16:15:08 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/home.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<title>Hyprland</title>
</head>
<body>
<div id="content-center" class="content-center">
<header id="header" class="header">
<div id="header-logo-div" class="header">
<a href="/">
<img
id="header-logo"
class="header"
src="svg/hyprland.svg"
alt="Hyprland Logo"
/>
</a>
</div>
<div id="header-links-div" class="header">
<div id="header-links" class="header">
<a id="header-link-home" class="header-link" href="/">Hyprland</a>
<a id="header-link-install" class="header-link" href="https://wiki.hyprland.org/"
>Install</a
>
<a id="header-link-configure" class="header-link" href="https://github.com/hyprwm/hyprland"
>Github</a
>
</div>
</div>
<div id="links-out" class="header-out">
<div id="github" class="header-out">
<a
id="link-github"
href="https://github.com/hyprwm/hyprland"
target="_blank"
rel="noopener"
>Github</a
>
</div>
</div>
</header>
<div id="top" class="top">
<div id="text" class="top">
<h1 id="text-h1">Welcome to Hyprland!</h1>
<p class="text-para">
A dynamic tiling
<a
href="https://wayland.app/protocols/"
class="text-para-link"
id="link-1"
target="_blank"
rel="noopener"
>Wayland</a
>
compositor based on
<a
href="https://way-cooler.org/book/wlroots_introduction.html"
class="text-para-link"
id="link-2"
target="_blank"
rel="noopener"
>wlroots</a
>
that doesn't sacrifice on its looks.
</p>
<a href="https://wiki.hyprland.org/Getting-Started/Installation">
<button
id="install-link"
>
Install Hyprland
</button></a>
</div>
<div id="slide" class="top">
<div id="slide-content">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="imgs/img1.png" id="slide-img" />
</div>
<div class="swiper-slide">
<img src="imgs/img2.png" id="slide-img" />
</div>
<div class="swiper-slide">
<img src="imgs/img3.png" id="slide-img" />
</div>
<div class="swiper-slide">
<img src="imgs/img4.png" id="slide-img" />
</div>
<div class="swiper-slide">
<img src="imgs/img5.png" id="slide-img" />
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<!-- <div id="animations">
<video src="videos/animation.mp4" autoplay="autoplay" loop="loop" controls=""></video> -->
<!-- </div> -->
</div>
<div id="features">
<h1 id="title-features">Features</h1>
<div id="animation">
<div id="animation-left">
<div id="animation-vid">
<video src="videos/animation.mp4" muted autoplay loop></video>
</div>
</div>
<div id="animation-right">
<h1 id="animation-h1">Smooth Animations</h1>
<p id="animation-p">
Hyprland offers super smooth and responsive animations, be it when
switching between windows or workspaces, resizing windows or
simply moving them around, plus you can easily customize it!
</p>
</div>
</div>
<div id="tiling">
<div id="tiling-left">
<h1 id="tiling-h1">Dynamic Tiling</h1>
<p id="tiling-p">
Tiling in Hyprland is "dynamic" meaning it handles the placement
of windows automatically acquiring the position of your cursor.
Hyprland also supports a variety of other layouts including
floating, pseudotiling and even fullscreen!
</p>
</div>
<div id="tiling-right">
<div id="tiling-vid">
<video src="videos/tiling.mp4" muted autoplay loop></video>
</div>
</div>
</div>
<div id="configure">
<div id="configure-left">
<div id="configure-vid">
<video src="videos/configure.mp4" muted autoplay loop></video>
</div>
</div>
<div id="configure-right">
<h1 id="configure-h1">Easy Configuration</h1>
<p id="configure-p">
Editing the config file for Hyprland is as easy as editing a word
document, if you need any assist in configuring it, be sure to
check the
<a href="/configure" id="link-config">Configure Page</a> or feel
free to ask us
<a
id="link-config-discord"
href="https://discord.com/invite/hQ9XvMUjjr"
target="_blank"
rel="noopener"
>@Discord</a
>.
</p>
</div>
</div>
<div id="and-many-more" class="amm">
<h1 id="h1-amm" class="amm">And many more!</h1>
<div id="ul-amm-div" class="amm">
<ul id="ul-amm" class="amm">
<li id="li-amm" class="amm">Dual Kawase blur</li>
<li id="li-amm" class="amm">Pseudo Tiling</li>
<li id="li-amm" class="amm">Rounded corners</li>
<li id="li-amm" class="amm">Docks support</li>
<li id="li-amm" class="amm">
wlr_ext workspaces protocol support
</li>
</ul>
<ul id="ul-amm" class="amm">
<li id="li-amm" class="amm">
Custom bezier curve based animations
</li>
<li id="li-amm" class="amm">Drop shadows</li>
<li id="li-amm" class="amm">Fully dynamic workspaces</li>
<li id="li-amm" class="amm">Socket-based IPC</li>
<li id="li-amm" class="amm">Closely follows wlroots-git</li>
</ul>
</div>
</div>
<div id="quickinstall">
<h1>Quick Install (Arch Linux only)*</h1>
<div id="qi-content">
<p>
<span id="yay">yay </span><span id="syyu">-S </span
><span id="h-git">hyprland-git</span>
</p>
</div>
<p id="info-install">
*For a more detailed Installation process, please visit the
<a href="https://wiki.hyprland.org/Getting-Started/Installation" id="info-install-link">Install wiki page</a>.
</p>
<!--<div id="warning">
<img src="svg/warning.svg" alt="" />
<p>
Hyprland is still in its early development stages, although it is
pretty stable now, bugs <i>may</i> to be expected.
</p>
</div>-->
</div>
<hr />
<footer>
<div>
<p>&#169; Hyprland Development 2022</p>
<div id="devs">
<p>
Developers -
<a
href="https://github.com/vaxry"
target="_blank"
rel="noopener"
>Vaxry (Lead Developer)</a
><span>,</span>
<a
href="https://github.com/fufezan"
target="_blank"
rel="noopener"
>Fufezan (Supporting Developer)</a
><span>,</span>
<a
href="https://github.com/ThatOneCalculator"
target="_blank"
rel="noopener"
>ThatOneCalculator (Package Maintainer)</a
><span> and </span
><a
href="https://github.com/hyprwm/Hyprland/graphs/contributors"
target="_blank"
rel="noopener"
>our fellow contributors</a
>.
</p>
</div>
<p class="p2">
Website created by -
<a
class="site"
href="https://github.com/System-x64"
target="_blank"
rel="noopener"
>System-x64 (Dikshant Namdeo)</a
>.
</p>
<br />
<p class="p2" style="margin-bottom: 10px;">
Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
License.
</p>
</div>
<div id="foot-icons">
<a
href="https://github.com/hyprwm/Hyprland"
target="_blank"
rel="noopener"
><img src="svg/github.svg" alt=""
/></a>
<a
href="https://discord.com/invite/hQ9XvMUjjr"
target="_blank"
rel="noopener"
><img src="svg/discord.svg" alt=""
/></a>
</div>
</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/swiper.js"></script>
</body>
</html>