Create a screenshots page

This commit is contained in:
TheFrenchGhosty 2023-06-18 16:01:29 +02:00
parent 11ec0847f7
commit ad72ecca67
No known key found for this signature in database
GPG key ID: 4E616F0FFE25B75B
11 changed files with 160 additions and 4 deletions

View file

@ -47,7 +47,11 @@
</li>
</ul>
<div class="collapse navbar-collapse order-4 order-md-1">
<ul class="navbar-nav main-nav me-auto order-5 order-md-2"><li class=nav-item>
<ul class="navbar-nav main-nav me-auto order-5 order-md-2">
<li class="nav-item">
<a class=nav-link href=https://invidious.io/screenshots/>Screenshots</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://docs.invidious.io/>Documentation</a>
</li>
<li class="nav-item">

View file

@ -47,7 +47,11 @@
</li>
</ul>
<div class="collapse navbar-collapse order-4 order-md-1">
<ul class="navbar-nav main-nav me-auto order-5 order-md-2"><li class=nav-item>
<ul class="navbar-nav main-nav me-auto order-5 order-md-2">
<li class="nav-item">
<a class=nav-link href=https://invidious.io/screenshots/>Screenshots</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://docs.invidious.io/>Documentation</a>
</li>
<li class="nav-item">

BIN
public/images/01_player.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 600 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

View file

@ -47,7 +47,11 @@
</li>
</ul>
<div class="collapse navbar-collapse order-4 order-md-1">
<ul class="navbar-nav main-nav me-auto order-5 order-md-2"><li class=nav-item>
<ul class="navbar-nav main-nav me-auto order-5 order-md-2">
<li class="nav-item">
<a class=nav-link href=https://invidious.io/screenshots/>Screenshots</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://docs.invidious.io/>Documentation</a>
</li>
<li class="nav-item">

View file

@ -0,0 +1,140 @@
<!doctype html><html lang=en-us>
<head>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="ie=edge">
<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel=stylesheet href=../css/main.css>
<style>img.lazyload{display:none}</style>
<meta name=robots content="index, follow">
<meta name=googlebot content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name=bingbot content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<title>Invidious - An open source alternative front-end to YouTube</title>
<meta name=description content="Invidious is an open source alternative front-end to YouTube.">
<link rel=canonical href=/>
<meta property="og:locale" content>
<meta property="og:type" content="website">
<meta property="og:title" content="Invidious">
<meta property="og:description" content="Invidious is an open source alternative front-end to YouTube.">
<meta property="og:url" content="/">
<meta property="og:site_name" content="Invidious">
<meta name=twitter:card content="summary_large_image">
<meta name=twitter:site content>
<meta name=twitter:creator content>
<meta name=twitter:title content="Invidious">
<meta name=twitter:description content="Invidious is an open source alternative front-end to YouTube.">
<meta name=twitter:card content="summary">
<meta name=twitter:image:alt content="Invidious">
<meta name=theme-color content="#fff">
<link rel=apple-touch-icon sizes=180x180 href=https://invidious.io/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=https://invidious.io/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=https://invidious.io/favicon-16x16.png>
</head>
<body class="home">
<div class="header-bar fixed-top"></div>
<header class="navbar fixed-top navbar-expand-md navbar-light">
<div class=container>
<input class="menu-btn order-0" type=checkbox id=menu-btn>
<label class="menu-icon d-md-none" for=menu-btn><span class=navicon></span></label>
<a class="navbar-brand order-1 order-md-0 me-auto" href=/>Invidious</a>
<button id=mode class="btn btn-link order-2 order-md-4" type=button aria-label="Toggle mode">
<span class=toggle-dark><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg></span>
<span class=toggle-light><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></span>
</button>
<ul class="navbar-nav social-nav order-3 order-md-5">
<li class=nav-item>
<a class=nav-link href=https://github.com/iv-org><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg><span class="ms-2 visually-hidden">GitHub</span></a>
</li>
</ul>
<div class="collapse navbar-collapse order-4 order-md-1">
<ul class="navbar-nav main-nav me-auto order-5 order-md-2">
<li class="nav-item active">
<a class=nav-link href=https://invidious.io/screenshots/>Screenshots</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://docs.invidious.io/>Documentation</a>
</li>
<li class="nav-item">
<a class=nav-link href=https://invidious.io/team/>Team</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://github.com/iv-org/invidious#contribute>Contribute</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://invidious.io/donate/>Donate</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://invidious.io/contact/>Contact</a>
</li>
</ul>
</div>
</header>
<section class="section section-sm">
<div class=container>
<div class="row justify-content-center text-center">
<div class=col-lg-5>
<h2 class=h4>Player</h2>
<a href="../images/01_player.png">
<img src=../images/01_player.png alt="Player" width=350/>
</a>
</div>
<div class=col-lg-5>
<h2 class=h4>Preferences</h2>
<a href="../images/02_preferences.png">
<img src=../images/02_preferences.png alt="Preferences" width=350/>
</a>
</div>
<div class=col-lg-5>
<h2 class=h4>Subscriptions</h2>
<a href="../images/03_subscriptions.png">
<img src=../images/03_subscriptions.png alt="Subscriptions" width=350/>
</a>
</div>
</div>
</div>
<br> <br>
<div class=container>
<div class="row justify-content-center text-center">
<div class=col-lg-5>
<a href="../images/04_description.png">
<img src=../images/04_description.png alt="Description" width=350/>
</a>
</div>
<div class=col-lg-5>
<a href="../images/05_preferences.png">
<img src=../images/05_preferences.png alt="Preferences" width=350/>
</a>
</div>
<div class=col-lg-5>
<a href="../images/06_subscriptions.png">
<img src=../images/06_subscriptions.png alt="Subscriptions" width=350/>
</a>
</div>
</div>
</div>
</section>
<section class="section section-sm container-fluid">
<div class="row justify-content-center text-center">
<div class=col-lg-9></div>
</div>
</section>
<footer class="footer text-muted">
<div class=container>
<div class=row>
<div class="col-lg-8 order-last order-lg-first">
<ul class=list-inline>
<li class=list-inline-item>Based on <a href=https://getdoks.org/>Doks</a>. Illustrations by <a href=https://undraw.co/>unDraw</a>.</li>
</ul>
</div>
<div class="col-lg-8 order-first order-lg-last text-lg-end">
<ul class=list-inline>
<li class=list-inline-item><a href=https://github.com/iv-org/invidious.io>Website Source Code</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src=../js/main.js></script>
</body>
</html>

View file

@ -47,7 +47,11 @@
</li>
</ul>
<div class="collapse navbar-collapse order-4 order-md-1">
<ul class="navbar-nav main-nav me-auto order-5 order-md-2"><li class=nav-item>
<ul class="navbar-nav main-nav me-auto order-5 order-md-2">
<li class="nav-item">
<a class=nav-link href=https://invidious.io/screenshots/>Screenshots</a>
</li>
<li class=nav-item>
<a class=nav-link href=https://docs.invidious.io/>Documentation</a>
</li>
<li class="nav-item active">