mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-06-03 19:32:56 +00:00
fefef
This commit is contained in:
Tomáš Dvořák
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
@@ -1,296 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="no-js">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>TD - Drear</title>
|
|
||||||
<meta name="description" content="Website for horror movie - DREAR." />
|
|
||||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
|
||||||
<meta name="author" content="Tomas Dvorak" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
||||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
|
||||||
</head>
|
|
||||||
<body class="loading">
|
|
||||||
<main>
|
|
||||||
<div class="frame">
|
|
||||||
<div class="frame__title-wrap">
|
|
||||||
</div>
|
|
||||||
<div class="frame__indicator"></div>
|
|
||||||
</div>
|
|
||||||
<div class="strip-outer">
|
|
||||||
<div class="strip-inner">
|
|
||||||
<div class="draggable"></div>
|
|
||||||
<div class="strip">
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip-cover">
|
|
||||||
<h2 class="strip-cover__title">DREAR</h2>
|
|
||||||
<span class="strip-cover__subtitle">coming in 2028</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Assemblage</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Wherewithal</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Surreptitious</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Nemesis</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Penumbra</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Cathedral</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Propinquity</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Lissome</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Moiety</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Mondegreen</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Cathedral</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Gambol</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Forbearance</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Evanescent</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Embrocation</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Bucolic</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Eloquence</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Cathedral</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<div class="cursor">
|
|
||||||
<div class="cursor__inner cursor__inner--circle">
|
|
||||||
<div class="cursor__side cursor__side--left"></div>
|
|
||||||
<div class="cursor__side cursor__side--right"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
|
||||||
<script src="js/TweenMax.min.js"></script>
|
|
||||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
|
||||||
<script src="js/demo.js"></script>
|
|
||||||
<script>
|
|
||||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,296 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="no-js">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>TD - Chmur</title>
|
|
||||||
<meta name="description" content="Stránka pro horrorový film - CHMUR." />
|
|
||||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
|
||||||
<meta name="author" content="Tomas Dvorak" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
||||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
|
||||||
</head>
|
|
||||||
<body class="loading">
|
|
||||||
<main>
|
|
||||||
<div class="frame">
|
|
||||||
<div class="frame__title-wrap">
|
|
||||||
</div>
|
|
||||||
<div class="frame__indicator"></div>
|
|
||||||
</div>
|
|
||||||
<div class="strip-outer">
|
|
||||||
<div class="strip-inner">
|
|
||||||
<div class="draggable"></div>
|
|
||||||
<div class="strip">
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
<div class="strip__item">
|
|
||||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
|
||||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip-cover">
|
|
||||||
<h2 class="strip-cover__title">CHMUR</h2>
|
|
||||||
<span class="strip-cover__subtitle">v kinech 2028</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Assemblage</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Wherewithal</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Surreptitious</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Nemesis</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Penumbra</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Cathedral</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Propinquity</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Lissome</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Moiety</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Mondegreen</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Cathedral</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Gambol</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Forbearance</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Evanescent</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Embrocation</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Bucolic</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Eloquence</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="content__item">
|
|
||||||
<div class="img-outer img-outer--content">
|
|
||||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content__item-copy">
|
|
||||||
<h2 class="content__item-title">Cathedral</h2>
|
|
||||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<div class="cursor">
|
|
||||||
<div class="cursor__inner cursor__inner--circle">
|
|
||||||
<div class="cursor__side cursor__side--left"></div>
|
|
||||||
<div class="cursor__side cursor__side--right"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
|
||||||
<script src="js/TweenMax.min.js"></script>
|
|
||||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
|
||||||
<script src="js/demo.js"></script>
|
|
||||||
<script>
|
|
||||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Vendored
-17
File diff suppressed because one or more lines are too long
@@ -1,425 +0,0 @@
|
|||||||
/**
|
|
||||||
* demo.js
|
|
||||||
* http://www.codrops.com
|
|
||||||
*
|
|
||||||
* Licensed under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
*
|
|
||||||
* Copyright 2019, Codrops
|
|
||||||
* http://www.codrops.com
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
const body = document.body;
|
|
||||||
|
|
||||||
const MathUtils = {
|
|
||||||
lineEq: (y2, y1, x2, x1, currentVal) => {
|
|
||||||
// y = mx + b
|
|
||||||
var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
|
|
||||||
return m * currentVal + b;
|
|
||||||
},
|
|
||||||
lerp: (a, b, n) => (1 - n) * a + n * b,
|
|
||||||
getRandomFloat: (min, max) => (Math.random() * (max - min) + min).toFixed(2)
|
|
||||||
};
|
|
||||||
|
|
||||||
const getMousePos = (e) => {
|
|
||||||
let posx = 0;
|
|
||||||
let posy = 0;
|
|
||||||
if (!e) e = window.event;
|
|
||||||
if (e.pageX || e.pageY) {
|
|
||||||
posx = e.pageX;
|
|
||||||
posy = e.pageY;
|
|
||||||
}
|
|
||||||
else if (e.clientX || e.clientY) {
|
|
||||||
posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft;
|
|
||||||
posy = e.clientY + body.scrollTop + document.documentElement.scrollTop;
|
|
||||||
}
|
|
||||||
return { x : posx, y : posy }
|
|
||||||
};
|
|
||||||
|
|
||||||
let winsize;
|
|
||||||
const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};
|
|
||||||
calcWinsize();
|
|
||||||
window.addEventListener('resize', calcWinsize);
|
|
||||||
|
|
||||||
let mousepos = {x: winsize.width/2, y: winsize.height/2};
|
|
||||||
window.addEventListener('mousemove', ev => mousepos = getMousePos(ev));
|
|
||||||
|
|
||||||
// Custom cursor
|
|
||||||
class Cursor {
|
|
||||||
constructor(el) {
|
|
||||||
this.DOM = {el: el};
|
|
||||||
this.DOM.circle = this.DOM.el.querySelector('.cursor__inner--circle');
|
|
||||||
this.DOM.arrows = {
|
|
||||||
right: this.DOM.el.querySelector('.cursor__side--right'),
|
|
||||||
left: this.DOM.el.querySelector('.cursor__side--left')
|
|
||||||
};
|
|
||||||
this.bounds = this.DOM.circle.getBoundingClientRect();
|
|
||||||
this.lastMousePos = {x:0, y:0};
|
|
||||||
this.scale = 1;
|
|
||||||
this.lastScale = 1;
|
|
||||||
requestAnimationFrame(() => this.render());
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
this.lastMousePos.x = MathUtils.lerp(this.lastMousePos.x, mousepos.x - this.bounds.width/2, 0.2);
|
|
||||||
this.lastMousePos.y = MathUtils.lerp(this.lastMousePos.y, mousepos.y - this.bounds.height/2, 0.2);
|
|
||||||
this.lastScale = MathUtils.lerp(this.lastScale, this.scale, 0.15);
|
|
||||||
this.DOM.circle.style.transform = `translateX(${(this.lastMousePos.x)}px) translateY(${this.lastMousePos.y}px) scale(${this.lastScale})`;
|
|
||||||
requestAnimationFrame(() => this.render());
|
|
||||||
}
|
|
||||||
enter() {
|
|
||||||
this.scale = 1.9;
|
|
||||||
}
|
|
||||||
leave() {
|
|
||||||
this.scale = 1;
|
|
||||||
}
|
|
||||||
click() {
|
|
||||||
this.lastScale = .4;
|
|
||||||
}
|
|
||||||
showArrows() {
|
|
||||||
TweenMax.to(Object.values(this.DOM.arrows), 1, {
|
|
||||||
ease: Expo.easeOut,
|
|
||||||
startAt: {x: i => i ? 10 : -10 },
|
|
||||||
opacity: 1,
|
|
||||||
x: 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
hideArrows() {
|
|
||||||
TweenMax.to(Object.values(this.DOM.arrows), 1, {
|
|
||||||
ease: Expo.easeOut,
|
|
||||||
x: i => i ? 10 : -10,
|
|
||||||
opacity: 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Strip Item
|
|
||||||
class StripItem {
|
|
||||||
constructor(el) {
|
|
||||||
this.DOM = {el: el};
|
|
||||||
this.DOM.image = this.DOM.el.querySelector('.img-inner');
|
|
||||||
this.DOM.number = this.DOM.el.querySelector('.strip__item-link');
|
|
||||||
|
|
||||||
this.initEvents();
|
|
||||||
}
|
|
||||||
initEvents() {
|
|
||||||
// Hovering the number makes it slide out/in
|
|
||||||
this.DOM.number.addEventListener('mouseenter', () => {
|
|
||||||
const inner = this.DOM.number.querySelector('span');
|
|
||||||
new TimelineMax()
|
|
||||||
.to(inner, 0.2, {
|
|
||||||
ease: Quad.easeOut,
|
|
||||||
y: '-100%',
|
|
||||||
opacity: 0
|
|
||||||
}, 0)
|
|
||||||
.to(inner, 0.5, {
|
|
||||||
ease: Expo.easeOut,
|
|
||||||
startAt: {y: '100%', opacity: 0, scale: 1.3},
|
|
||||||
y: '0%',
|
|
||||||
opacity: 1
|
|
||||||
}, 0.2)
|
|
||||||
});
|
|
||||||
|
|
||||||
this.DOM.number.addEventListener('mouseleave', () => {
|
|
||||||
const inner = this.DOM.number.querySelector('span');
|
|
||||||
TweenMax.killTweensOf(inner);
|
|
||||||
TweenMax.set(inner, {
|
|
||||||
scale: 1,
|
|
||||||
y: '0%',
|
|
||||||
opacity: 1
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Content Item
|
|
||||||
class ContentItem {
|
|
||||||
constructor(el) {
|
|
||||||
this.DOM = {el: el};
|
|
||||||
this.DOM.image = this.DOM.el.querySelector('.img-outer');
|
|
||||||
this.DOM.title = this.DOM.el.querySelector('.content__item-title');
|
|
||||||
this.DOM.text = this.DOM.el.querySelector('.content__item-text');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Images strip
|
|
||||||
class Strip {
|
|
||||||
constructor(el) {
|
|
||||||
this.DOM = {el: el};
|
|
||||||
this.DOM.strip = this.DOM.el.querySelector('.strip');
|
|
||||||
this.items = [];
|
|
||||||
[...this.DOM.strip.querySelectorAll('.strip__item')].forEach(item => this.items.push(new StripItem(item)));
|
|
||||||
// The draggable container
|
|
||||||
this.DOM.draggable = this.DOM.el.querySelector('.draggable');
|
|
||||||
// the extra indicator element (scales down when we start dragging)
|
|
||||||
this.DOM.indicator = document.querySelector('.frame__indicator');
|
|
||||||
// the cover (name + year elements) that appear when we start to drag
|
|
||||||
this.DOM.cover = this.DOM.el.querySelector('.strip-cover');
|
|
||||||
// The width of the draggable container (also the strip container)
|
|
||||||
this.draggableWidth = this.DOM.draggable.offsetWidth;
|
|
||||||
// The total amount that we can drag the draggable container, so that both the first and last image stay next to the viewport boundary (left and right respectively)
|
|
||||||
this.maxDrag = this.draggableWidth < winsize.width ? 0 : this.draggableWidth - winsize.width;
|
|
||||||
// The current amount (in pixels) that was dragged
|
|
||||||
this.dragPosition = 0;
|
|
||||||
// Initialize the Draggabilly
|
|
||||||
this.draggie = new Draggabilly(this.DOM.draggable, { axis: 'x' });
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
this.initEvents();
|
|
||||||
}
|
|
||||||
init() {
|
|
||||||
this.renderedStyles = {
|
|
||||||
position: {previous: 0, current: this.dragPosition},
|
|
||||||
scale: {previous: 1, current: 1},
|
|
||||||
imgScale: {previous: 1, current: 1},
|
|
||||||
opacity: {previous: 1, current: 1},
|
|
||||||
coverScale: {previous: 0.75, current: 0.75},
|
|
||||||
coverOpacity: {previous: 0, current: 0},
|
|
||||||
indicatorScale: {previous: 1, current: 1},
|
|
||||||
};
|
|
||||||
|
|
||||||
this.render = () => {
|
|
||||||
this.renderId = undefined;
|
|
||||||
|
|
||||||
for (const key in this.renderedStyles ) {
|
|
||||||
this.renderedStyles[key].previous = MathUtils.lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
TweenMax.set(this.DOM.strip, {x: this.renderedStyles.position.previous});
|
|
||||||
for (const item of this.items) {
|
|
||||||
TweenMax.set(item.DOM.el, {scale: this.renderedStyles.scale.previous, opacity: this.renderedStyles.opacity.previous});
|
|
||||||
TweenMax.set(item.DOM.image, {scale: this.renderedStyles.imgScale.previous});
|
|
||||||
}
|
|
||||||
TweenMax.set(this.DOM.cover, {scale: this.renderedStyles.coverScale.previous, opacity: this.renderedStyles.coverOpacity.previous});
|
|
||||||
TweenMax.set(this.DOM.indicator, {scaleX: this.renderedStyles.indicatorScale.previous});
|
|
||||||
|
|
||||||
if ( !this.renderId ) {
|
|
||||||
this.renderId = requestAnimationFrame(() => this.render());
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.renderId = requestAnimationFrame(() => this.render());
|
|
||||||
}
|
|
||||||
initEvents() {
|
|
||||||
this.onDragStart = () => {
|
|
||||||
this.renderedStyles.scale.current = 0.8;
|
|
||||||
this.renderedStyles.imgScale.current = 1.6;
|
|
||||||
this.renderedStyles.opacity.current = 0.3;
|
|
||||||
this.renderedStyles.coverScale.current = 1;
|
|
||||||
this.renderedStyles.coverOpacity.current = 1;
|
|
||||||
this.renderedStyles.indicatorScale.current = 0;
|
|
||||||
|
|
||||||
cursor.scale = 1.5;
|
|
||||||
cursor.showArrows();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onDragMove = (event, pointer, moveVector) => {
|
|
||||||
// The possible range for the drag is draggie.position.x = [-maxDrag,0 ]
|
|
||||||
if ( this.draggie.position.x >= 0 ) {
|
|
||||||
// the max we will be able to drag is winsize.width/2
|
|
||||||
this.dragPosition = MathUtils.lineEq(0.5*winsize.width,0, winsize.width, 0, this.draggie.position.x);
|
|
||||||
}
|
|
||||||
else if ( this.draggie.position.x < -1*this.maxDrag ) {
|
|
||||||
// the max we will be able to drag is winsize.width/2
|
|
||||||
this.dragPosition = MathUtils.lineEq(0.5*winsize.width,0, this.maxDrag+winsize.width, this.maxDrag, this.draggie.position.x);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.dragPosition = this.draggie.position.x;
|
|
||||||
}
|
|
||||||
this.renderedStyles.position.current = this.dragPosition;
|
|
||||||
|
|
||||||
mousepos = getMousePos(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onDragEnd = () => {
|
|
||||||
// reset draggable if out of bounds.
|
|
||||||
if ( this.draggie.position.x > 0 ) {
|
|
||||||
this.dragPosition = 0;
|
|
||||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
|
||||||
}
|
|
||||||
else if ( this.draggie.position.x < -1*this.maxDrag ) {
|
|
||||||
this.dragPosition = -1*this.maxDrag;
|
|
||||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
|
||||||
}
|
|
||||||
this.renderedStyles.position.current = this.dragPosition;
|
|
||||||
this.renderedStyles.scale.current = 1;
|
|
||||||
this.renderedStyles.imgScale.current = 1;
|
|
||||||
this.renderedStyles.opacity.current = 1;
|
|
||||||
this.renderedStyles.coverScale.current = 0.75;
|
|
||||||
this.renderedStyles.coverOpacity.current = 0;
|
|
||||||
this.renderedStyles.indicatorScale.current = 1;
|
|
||||||
|
|
||||||
cursor.scale = 1;
|
|
||||||
cursor.hideArrows();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.draggie.on('pointerDown', this.onDragStart);
|
|
||||||
this.draggie.on('dragMove', this.onDragMove);
|
|
||||||
this.draggie.on('pointerUp', this.onDragEnd);
|
|
||||||
|
|
||||||
for (const item of this.items) {
|
|
||||||
item.DOM.number.addEventListener('click', (ev) => {
|
|
||||||
ev.preventDefault();
|
|
||||||
this.showItem(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.maxDrag = this.draggableWidth < winsize.width ? 0 : this.draggableWidth - winsize.width;
|
|
||||||
if ( Math.abs(this.dragPosition) + winsize.width > this.draggableWidth ) {
|
|
||||||
const diff = Math.abs(this.dragPosition) + winsize.width - this.draggableWidth;
|
|
||||||
// reset dragPosition
|
|
||||||
this.dragPosition = this.dragPosition+diff;
|
|
||||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
showItem(item) {
|
|
||||||
if ( this.isAnimating ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( this.renderId ) {
|
|
||||||
window.cancelAnimationFrame(this.renderId);
|
|
||||||
this.renderId = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isAnimating = true;
|
|
||||||
|
|
||||||
this.current = this.items.indexOf(item);
|
|
||||||
const contentItem = contentItems[this.current];
|
|
||||||
contentItem.DOM.el.classList.add('content__item--current');
|
|
||||||
|
|
||||||
// Fix for mobile (make sure the cover is not visible when clicking the numbers)
|
|
||||||
TweenMax.set(this.DOM.cover, {scale: 0, opacity: 0});
|
|
||||||
|
|
||||||
this.contentToggleTimeline = new TimelineMax({
|
|
||||||
onComplete: () => this.isAnimating = false
|
|
||||||
})
|
|
||||||
.set([contentItem.DOM.image, contentItem.DOM.title, contentItem.DOM.text, closeContentCtrl], {
|
|
||||||
opacity: 0
|
|
||||||
}, 0)
|
|
||||||
.to(this.items.map(item => item.DOM.el), 0.8, {
|
|
||||||
ease: Cubic.easeOut,
|
|
||||||
scale: 0.8,
|
|
||||||
opacity: 0.4
|
|
||||||
}, 0)
|
|
||||||
.to(this.items.map(item => item.DOM.image), 0.8, {
|
|
||||||
ease: Cubic.easeOut,
|
|
||||||
scale: 1.6
|
|
||||||
}, 0)
|
|
||||||
.to(this.DOM.indicator, 0.8, {
|
|
||||||
ease: Cubic.easeOut,
|
|
||||||
scaleX: 0
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
for (const item of this.items) {
|
|
||||||
this.contentToggleTimeline.to(item.DOM.el, 1, {
|
|
||||||
ease: Expo.easeInOut,
|
|
||||||
y: winsize.height*-1
|
|
||||||
}, MathUtils.getRandomFloat(0.2,0.4));
|
|
||||||
}
|
|
||||||
|
|
||||||
this.contentToggleTimeline
|
|
||||||
.to(contentItem.DOM.image, 1, {
|
|
||||||
ease: Expo.easeInOut,
|
|
||||||
startAt: {y: winsize.height*1.3, opacity: 1},
|
|
||||||
y: 0
|
|
||||||
}, 0.6)
|
|
||||||
.to(contentItem.DOM.title, 0.8, {
|
|
||||||
ease: Quint.easeOut,
|
|
||||||
startAt: {y: 100},
|
|
||||||
y: 0,
|
|
||||||
opacity: 1
|
|
||||||
}, 1)
|
|
||||||
.to(contentItem.DOM.text, 0.8, {
|
|
||||||
ease: Quint.easeOut,
|
|
||||||
startAt: {y: 200},
|
|
||||||
y: 0,
|
|
||||||
opacity: 1
|
|
||||||
}, 1)
|
|
||||||
.to(closeContentCtrl, 0.8, {
|
|
||||||
ease: Quint.easeOut,
|
|
||||||
startAt: {y: 50},
|
|
||||||
y: 0,
|
|
||||||
opacity: 1
|
|
||||||
}, 1);
|
|
||||||
}
|
|
||||||
closeContent() {
|
|
||||||
if ( this.isAnimating ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
this.isAnimating = true;
|
|
||||||
|
|
||||||
const contentItem = contentItems[this.current];
|
|
||||||
this.contentToggleTimeline = new TimelineMax({
|
|
||||||
onComplete: () => {
|
|
||||||
contentItem.DOM.el.classList.remove('content__item--current');
|
|
||||||
this.isAnimating = false
|
|
||||||
this.renderId = requestAnimationFrame(() => this.render());
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.set(this.items.map(item => item.DOM.el), {
|
|
||||||
scale: 1,
|
|
||||||
opacity: 1
|
|
||||||
}, 0)
|
|
||||||
.set(this.items.map(item => item.DOM.image), {
|
|
||||||
scale: 1
|
|
||||||
}, 0)
|
|
||||||
.to(contentItem.DOM.text, 0.8, {
|
|
||||||
ease: Quint.easeIn,
|
|
||||||
y: 200,
|
|
||||||
opacity: 0
|
|
||||||
}, 0)
|
|
||||||
.to(contentItem.DOM.title, 0.8, {
|
|
||||||
ease: Quint.easeIn,
|
|
||||||
y: 100,
|
|
||||||
opacity: 0
|
|
||||||
}, 0)
|
|
||||||
.to(closeContentCtrl, 0.8, {
|
|
||||||
ease: Quint.easeOut,
|
|
||||||
y: 50,
|
|
||||||
opacity: 0
|
|
||||||
}, 0.2)
|
|
||||||
.to(contentItem.DOM.image, 1, {
|
|
||||||
ease: Expo.easeInOut,
|
|
||||||
y: winsize.height*1.3,
|
|
||||||
opacity: 1
|
|
||||||
}, 0.2);
|
|
||||||
|
|
||||||
for (const item of this.items) {
|
|
||||||
this.contentToggleTimeline.to(item.DOM.el, MathUtils.getRandomFloat(0.6,0.9), {
|
|
||||||
ease: Expo.easeInOut,
|
|
||||||
y: 0
|
|
||||||
}, MathUtils.getRandomFloat(0.4,0.6));
|
|
||||||
}
|
|
||||||
|
|
||||||
this.contentToggleTimeline
|
|
||||||
.to(this.DOM.indicator, 1.2, {
|
|
||||||
ease: Expo.easeOut,
|
|
||||||
scaleX: 1
|
|
||||||
}, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// The images strip
|
|
||||||
const strip = new Strip(document.querySelector('.strip-outer'));
|
|
||||||
|
|
||||||
// Custom mouse cursor
|
|
||||||
const cursor = new Cursor(document.querySelector('.cursor'));
|
|
||||||
|
|
||||||
// The content elements
|
|
||||||
const contentItems = [];
|
|
||||||
[...document.querySelectorAll('.content__item')].forEach(item => contentItems.push(new ContentItem(item)));
|
|
||||||
|
|
||||||
// The close content ctrl
|
|
||||||
const closeContentCtrl = document.querySelector('.content__close');
|
|
||||||
// On click, close the content view
|
|
||||||
closeContentCtrl.addEventListener('click', () => {
|
|
||||||
strip.closeContent();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Activate the enter/leave/click methods of the custom cursor when hovering in/out on every <a> (and the close content ctrl)
|
|
||||||
[...document.querySelectorAll('a'), closeContentCtrl].forEach((link) => {
|
|
||||||
link.addEventListener('mouseenter', () => cursor.enter());
|
|
||||||
link.addEventListener('mouseleave', () => cursor.leave());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
Vendored
-8
File diff suppressed because one or more lines are too long
Vendored
-7
File diff suppressed because one or more lines are too long
-574
@@ -1,574 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::after,
|
|
||||||
*::before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
|
|
||||||
|
|
||||||
:root {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
--color-text: #e7e7e7;
|
|
||||||
--color-bg: #090909;
|
|
||||||
--color-link: #ff0000;
|
|
||||||
--color-link-hover: #fff;
|
|
||||||
--color-cover: #ff0000;
|
|
||||||
--color-copy: #e7e7e7;
|
|
||||||
--color-content-title: #ff0000;
|
|
||||||
--color-indicator: #1b1b1b;
|
|
||||||
color: var(--color-text);
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
font-family: ff-more-web-pro, serif;
|
|
||||||
margin: 0;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page Loader */
|
|
||||||
.js .loading::before {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
z-index: 100000;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.js .loading::after {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
z-index: 100000;
|
|
||||||
top: calc(50% - 30px);
|
|
||||||
left: calc(50% - 25px);
|
|
||||||
width: 50px;
|
|
||||||
height: 60px;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0.4;
|
|
||||||
background: var(--color-link);
|
|
||||||
animation: loaderAnim 0.7s linear infinite alternate forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loaderAnim {
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(0.5,0.5,1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--color-link);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
a:focus {
|
|
||||||
color: var(--color-link-hover);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
background: var(--color-text);
|
|
||||||
color: var(--color-bg);
|
|
||||||
padding: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame {
|
|
||||||
padding: 1.5rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame a {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__title {
|
|
||||||
font-size: 1rem;
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__links {
|
|
||||||
display: flex;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__links a {
|
|
||||||
margin: 0 0.35rem;
|
|
||||||
padding: 0 0.35rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__links a:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__links a:not(:last-child)::after {
|
|
||||||
content: '';
|
|
||||||
width: 1px;
|
|
||||||
height: 1rem;
|
|
||||||
background: var(--color-link);
|
|
||||||
position: absolute;
|
|
||||||
left: calc(100% + 0.35rem);
|
|
||||||
top: calc(50% - 0.5rem);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__indicator {
|
|
||||||
background: var(--color-indicator);
|
|
||||||
width: 3rem;
|
|
||||||
height: 0.5rem;
|
|
||||||
transform-origin: 0 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip-outer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
min-height: 750px;
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip-inner {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable {
|
|
||||||
height: 500px;
|
|
||||||
top: calc(50% - 250px);
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable:active {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip {
|
|
||||||
height: 100%;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
display: flex;
|
|
||||||
align-items: start;
|
|
||||||
position: relative;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip__item {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
justify-content: center;
|
|
||||||
font-family: "helpme";
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-outer {
|
|
||||||
--imgheight: 450px;
|
|
||||||
height: var(--imgheight);
|
|
||||||
width: calc(var(--imgheight) * 0.7);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-outer--size-s {
|
|
||||||
--imgheight: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-outer--size-m {
|
|
||||||
--imgheight: 360px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-outer--size-l {
|
|
||||||
--imgheight: 390px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-outer--size-xl {
|
|
||||||
--imgheight: 420px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-inner {
|
|
||||||
width: calc(100% + 40px);
|
|
||||||
height: calc(100% + 40px);
|
|
||||||
left: -20px;
|
|
||||||
top: -20px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50% 50%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip__item-number {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.5rem;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip__item-link {
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip__item-link::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 160%;
|
|
||||||
height: 120%;
|
|
||||||
left: -30%;
|
|
||||||
top: -10%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.strip__item-link span {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip__item-plus {
|
|
||||||
display: none;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 6h6v1H7v6H6V7H0V6h6V0h1v6z' fill='%23505050'/%3e%3c/svg%3e");
|
|
||||||
background-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip__item-link:hover + .strip__item-plus {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip-cover {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--color-cover);
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip-cover__title {
|
|
||||||
font-family: fleisch-wolf, sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 25vw;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1;
|
|
||||||
-webkit-text-stroke: 1px var(--color-cover);
|
|
||||||
text-stroke: 1px var(--color-cover);
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
filter: drop-shadow(0 0 100px #ff0000);
|
|
||||||
text-shadow: -18px -10px 0 #ff0000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strip-cover__subtitle {
|
|
||||||
font-size: 5vw;
|
|
||||||
margin: 0;
|
|
||||||
font-family: "helpme";
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
top: 0;
|
|
||||||
position: absolute;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js .content {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__item {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
grid-template-rows: 50% 40% 10%;
|
|
||||||
grid-column-gap: 0;
|
|
||||||
grid-template-areas: 'content-img' 'content-copy' '...';
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js .content__item {
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js .content__item--current {
|
|
||||||
pointer-events: auto;
|
|
||||||
opacity: 1;
|
|
||||||
top: 0;
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-outer--content {
|
|
||||||
height: 100%;
|
|
||||||
width: auto;
|
|
||||||
grid-area: content-img;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-inner--content {
|
|
||||||
background-position: 50% 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__item-title {
|
|
||||||
font-weight: normal;
|
|
||||||
color: var(--color-content-title);
|
|
||||||
font-family: "helpme";
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__item-copy {
|
|
||||||
grid-area: content-copy;
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
color: var(--color-copy);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__item-text {
|
|
||||||
margin: 0;
|
|
||||||
font-family: "freedoka";
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__close {
|
|
||||||
display: block;
|
|
||||||
background: none;
|
|
||||||
border: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: inherit;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1.5rem;
|
|
||||||
left: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__item--current ~ .content__close {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__close svg {
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__close:focus,
|
|
||||||
.content__close:hover {
|
|
||||||
outline: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Will-change */
|
|
||||||
.strip,
|
|
||||||
.strip__item,
|
|
||||||
.cursor__side,
|
|
||||||
.content__close,
|
|
||||||
.content__item-title,
|
|
||||||
.content__item-copy {
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 53em) {
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.frame {
|
|
||||||
position: fixed;
|
|
||||||
text-align: left;
|
|
||||||
z-index: 10000;
|
|
||||||
display: grid;
|
|
||||||
align-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
max-width: none;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 1.25rem 3rem;
|
|
||||||
pointer-events: none;
|
|
||||||
grid-template-columns: 80% 20%;
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-areas: 'page-title links'
|
|
||||||
'... ...'
|
|
||||||
'indicator sub-title';
|
|
||||||
}
|
|
||||||
.frame__title-wrap{
|
|
||||||
grid-area: page-title;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.frame__title {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.frame__subtitle {
|
|
||||||
grid-area: sub-title;
|
|
||||||
justify-self: end;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.frame__links {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 0 2rem;
|
|
||||||
}
|
|
||||||
.frame__indicator {
|
|
||||||
grid-area: indicator;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.content__item {
|
|
||||||
top: 0;
|
|
||||||
grid-template-columns: 40% 45% 15%;
|
|
||||||
grid-template-rows: 100%;
|
|
||||||
grid-template-areas: 'content-copy content-img ... ';
|
|
||||||
}
|
|
||||||
.content__item-copy {
|
|
||||||
max-width: 240px;
|
|
||||||
justify-self: end;
|
|
||||||
align-self: end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.strip-cover__title {
|
|
||||||
font-size: 15vw;
|
|
||||||
-webkit-text-stroke: 2px var(--color-cover);
|
|
||||||
text-stroke: 2px var(--color-cover);
|
|
||||||
}
|
|
||||||
.strip-cover__subtitle {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (any-pointer: fine) {
|
|
||||||
.cursor {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.cursor__inner {
|
|
||||||
z-index: 9999;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
mix-blend-mode: difference;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.cursor__side {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: 5px;
|
|
||||||
height: 1px;
|
|
||||||
background: #fff;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.cursor__side--left {
|
|
||||||
right: calc(100% + 5px);
|
|
||||||
}
|
|
||||||
.cursor__side--right {
|
|
||||||
left: calc(100% + 5px);
|
|
||||||
}
|
|
||||||
.cursor__inner--circle {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@import url("https://p.typekit.net/p.css?s=1&k=ugp0unb&ht=tk&f=10052.10053.35816&a=1494256&app=typekit&e=css");
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family:"ff-more-web-pro";
|
|
||||||
src:url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
|
|
||||||
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family:"ff-more-web-pro";
|
|
||||||
src:url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
|
||||||
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family:"fleisch-wolf";
|
|
||||||
src:url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
|
||||||
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tk-ff-more-web-pro { font-family: "ff-more-web-pro",serif; }
|
|
||||||
.tk-fleisch-wolf { font-family: "fleisch-wolf",sans-serif; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: helpme;
|
|
||||||
src: url(HelpMe.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: avang;
|
|
||||||
src: url(Nightcore\ Demo.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: freedoka;
|
|
||||||
src: url(Fredoka-VariableFont_wdth\,wght.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
|
||||||
|
|
||||||
.strip-cover__title {
|
|
||||||
filter: none;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
.strip-cover__subtitle {
|
|
||||||
font-size: 3vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
@@ -1,875 +0,0 @@
|
|||||||
|
|
||||||
:root {
|
|
||||||
--background: hsla(220, 17%, 7%, 1);
|
|
||||||
--banner-background: hsla(250, 6%, 20%, 1);
|
|
||||||
--white-alpha-20: hsla(0, 0%, 100%, 0.2);
|
|
||||||
--on-background: hsla(220, 100%, 95%, 1);
|
|
||||||
--on-surface: hsla(250, 100%, 95%, 1);
|
|
||||||
--on-surface-variant: hsla(250, 1%, 44%, 1);
|
|
||||||
--primary: rgb(4, 146, 211);
|
|
||||||
--primary-variant: hsla(349, 69%, 51%, 1);
|
|
||||||
--rating-color: hsla(44, 100%, 49%, 1);
|
|
||||||
--surface: hsla(250, 13%, 11%, 1);
|
|
||||||
--text-color: hsla(250, 2%, 59%, 1);
|
|
||||||
--white: hsla(0, 0%, 100%, 1);
|
|
||||||
--banner-overlay: 90deg, hsl(220, 17%, 7%) 0%, hsla(220, 17%, 7%, 0.5) 100%;
|
|
||||||
--bottom-overlay: 180deg, hsla(250, 13%, 11%, 0), hsla(250, 13%, 11%, 1);
|
|
||||||
--ff-dm-sans: 'DM Sans', sans-serif;
|
|
||||||
--fs-heading: 4rem;
|
|
||||||
--fs-title-lg: 2.6rem;
|
|
||||||
--fs-title: 2rem;
|
|
||||||
--fs-body: 1.8rem;
|
|
||||||
--fs-button: 1.5rem;
|
|
||||||
--fs-label: 1.4rem;
|
|
||||||
--weight-bold: 700;
|
|
||||||
--shadow-1: 0 1px 4px hsla(0, 0%, 0%, 0.75);
|
|
||||||
--shadow-2: 0 2px 4px hsla(202, 100%, 50%, 0.3);
|
|
||||||
--radius-4: 4px;
|
|
||||||
--radius-8: 8px;
|
|
||||||
--radius-16: 16px;
|
|
||||||
--radius-24: 24px;
|
|
||||||
--radius-36: 36px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--transition-short: 250ms ease;
|
|
||||||
--transition-long: 500ms ease;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
li { list-style: none; }
|
|
||||||
|
|
||||||
a,
|
|
||||||
img,
|
|
||||||
span,
|
|
||||||
iframe,
|
|
||||||
button { display: block; }
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
img { height: auto; }
|
|
||||||
|
|
||||||
input,
|
|
||||||
button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font: inherit;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
input { width: 100%; }
|
|
||||||
|
|
||||||
button {
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: var(--ff-dm-sans);
|
|
||||||
font-size: 10px;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--on-background);
|
|
||||||
font-size: var(--fs-body);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus-visible { outline-color: var(--primary-variant); }
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
border-radius: var(--radius-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.search-wrapper::before,
|
|
||||||
.load-more::before {
|
|
||||||
content: "";
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 3px solid var(--white);
|
|
||||||
border-radius: var(--radius-24);
|
|
||||||
border-inline-end-color: transparent;
|
|
||||||
animation: loading 500ms linear infinite;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-wrapper::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 14px;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-wrapper.searching::before { display: block; }
|
|
||||||
|
|
||||||
.load-more {
|
|
||||||
background-color: var(--primary-variant);
|
|
||||||
margin-inline: auto;
|
|
||||||
margin-block: 36px 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more:is(:hover, :focus-visible) {
|
|
||||||
--primary-variant: hsla(350, 67%, 39%, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more.loading::before { display: block; }
|
|
||||||
|
|
||||||
@keyframes loading {
|
|
||||||
0% { transform: rotate(0); }
|
|
||||||
100% { transform: rotate(1turn); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading,
|
|
||||||
.title-large,
|
|
||||||
.title {
|
|
||||||
font-weight: var(--weight-bold);
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title { font-size: var(--fs-title); }
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
color: var(--white);
|
|
||||||
font-size: var(--fs-heading);
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-large { font-size: var(--fs-title-lg); }
|
|
||||||
|
|
||||||
.img-cover {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
color: var(--white);
|
|
||||||
font-size: var(--fs-button);
|
|
||||||
font-weight: var(--weight-bold);
|
|
||||||
max-width: max-content;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding-block: 12px;
|
|
||||||
padding-inline: 20px 24px;
|
|
||||||
border-radius: var(--radius-8);
|
|
||||||
transition: var(--transition-short);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-badge {
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
color: var(--white);
|
|
||||||
font-size: var(--fs-label);
|
|
||||||
font-weight: var(--weight-bold);
|
|
||||||
padding-inline: 6px;
|
|
||||||
border-radius: var(--radius-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-box {
|
|
||||||
background-image: url('../images/poster-bg-icon.png');
|
|
||||||
aspect-ratio: 2 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-box,
|
|
||||||
.video-card {
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 50px;
|
|
||||||
background-position: center;
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
border-radius: var(--radius-16);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-wrapper { margin-block-end: 24px; }
|
|
||||||
|
|
||||||
.slider-list {
|
|
||||||
margin-inline: -20px;
|
|
||||||
overflow-x: overlay;
|
|
||||||
padding-block-end: 16px;
|
|
||||||
margin-block-end: -16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-list::-webkit-scrollbar-thumb { background-color: transparent; }
|
|
||||||
|
|
||||||
.slider-list:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-list::-webkit-scrollbar-button { width: 20px; }
|
|
||||||
|
|
||||||
.slider-list .slider-inner {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-list .slider-inner::before,
|
|
||||||
.slider-list .slider-inner::after {
|
|
||||||
content: "";
|
|
||||||
min-width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
background-color: var(--white-alpha-20);
|
|
||||||
border-radius: var(--radius-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-card {
|
|
||||||
background-image: url('../images/video-bg-icon.png');
|
|
||||||
aspect-ratio: 16 / 9;
|
|
||||||
flex-shrink: 0;
|
|
||||||
max-width: 500px;
|
|
||||||
width: calc(100% - 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .container::after, */
|
|
||||||
.search-modal::after {
|
|
||||||
content: "";
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 150px;
|
|
||||||
background-image: linear-gradient(var(--bottom-overlay));
|
|
||||||
z-index: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
padding-block: 24px;
|
|
||||||
padding-inline: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .logo { margin-inline-end: auto; }
|
|
||||||
|
|
||||||
.search-btn,
|
|
||||||
.menu-btn { padding: 12px; }
|
|
||||||
|
|
||||||
.search-btn {
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
border-radius: var(--radius-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn img {
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: var(--transition-short);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn:is(:hover, :focus-visible) img { opacity: 1; }
|
|
||||||
|
|
||||||
.menu-btn.active .menu,
|
|
||||||
.menu-btn .close { display: none; }
|
|
||||||
|
|
||||||
.menu-btn .menu,
|
|
||||||
.menu-btn.active .close { display: block; }
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--background);
|
|
||||||
padding: 24px 16px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
z-index: 1;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box.active { display: flex; }
|
|
||||||
|
|
||||||
.search-wrapper {
|
|
||||||
position: relative;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-field {
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
height: 48px;
|
|
||||||
line-height: 48px;
|
|
||||||
padding-inline: 44px 16px;
|
|
||||||
outline: none;
|
|
||||||
border-radius: var(--radius-8);
|
|
||||||
transition: var(--transition-short);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-field::placeholder { color: var(--on-surface-variant); }
|
|
||||||
|
|
||||||
.search-field:hover { box-shadow: 0 0 0 2px var(--on-surface-variant); }
|
|
||||||
|
|
||||||
.search-field:focus {
|
|
||||||
box-shadow: 0 0 0 2px var(--on-surface);
|
|
||||||
padding-inline-start: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-wrapper .leading-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
left: 12px;
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: var(--transition-short);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-wrapper:focus-within .leading-icon { opacity: 0; }
|
|
||||||
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: absolute;
|
|
||||||
background-color: var(--background);
|
|
||||||
top: 96px;
|
|
||||||
bottom: 0;
|
|
||||||
left: -340px;
|
|
||||||
max-width: 340px;
|
|
||||||
width: 100%;
|
|
||||||
border-block-start: 1px solid var(--banner-background);
|
|
||||||
overflow-y: overlay;
|
|
||||||
z-index: 4;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: var(--transition-long);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.active {
|
|
||||||
transform: translateX(340px);
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-inner {
|
|
||||||
display: grid;
|
|
||||||
gap: 20px;
|
|
||||||
padding-block: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar::-webkit-scrollbar-thumb { background-color: transparent; }
|
|
||||||
|
|
||||||
.sidebar:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar::-webkit-scrollbar-button { height: 16px; }
|
|
||||||
|
|
||||||
.sidebar-list,
|
|
||||||
.sidebar-footer { padding-inline: 36px; }
|
|
||||||
|
|
||||||
.sidebar-link {
|
|
||||||
color: var(--on-surface-variant);
|
|
||||||
transition: var(--transition-short);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-link:is(:hover, :focus-visible) { color: var(--on-background); }
|
|
||||||
|
|
||||||
.sidebar-list {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-list .title { margin-block-end: 8px; }
|
|
||||||
|
|
||||||
.sidebar-footer {
|
|
||||||
border-block-start: 1px solid var(--banner-background);
|
|
||||||
padding-block-start: 28px;
|
|
||||||
margin-block-start: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright {
|
|
||||||
color: white;
|
|
||||||
margin-block-end: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright a { display: inline-block; }
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 96px;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: var(--background);
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--transition-short);
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay.active {
|
|
||||||
opacity: 0.5;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-----------------------------------*\
|
|
||||||
#HOME PAGE
|
|
||||||
\*-----------------------------------*/
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
background-color: var(--surface);
|
|
||||||
color: var(--on-surface);
|
|
||||||
padding: 24px 20px 48px;
|
|
||||||
height: calc(100vh - 96px);
|
|
||||||
overflow-y: overlay;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* BANNER
|
|
||||||
*/
|
|
||||||
|
|
||||||
.banner {
|
|
||||||
position: relative;
|
|
||||||
height: 700px;
|
|
||||||
border-radius: var(--radius-24);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-slider .slider-item {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 120%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--banner-background);
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity var(--transition-long);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-slider .slider-item::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-image: linear-gradient(var(--banner-overlay));
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-slider .active {
|
|
||||||
left: 0;
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-content {
|
|
||||||
position: absolute;
|
|
||||||
left: 24px;
|
|
||||||
right: 24px;
|
|
||||||
bottom: 206px;
|
|
||||||
z-index: 1;
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner :is(.heading, .banner-text) {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner .heading {
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
margin-block-end: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner .genre { margin-block: 12px; }
|
|
||||||
|
|
||||||
.banner-text {
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
margin-block-end: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner .btn { background-color: var(--primary); }
|
|
||||||
|
|
||||||
.banner .btn:is(:hover, :focus-visible) { box-shadow: var(--shadow-2); }
|
|
||||||
|
|
||||||
.slider-control {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
left: 20px;
|
|
||||||
right: 0;
|
|
||||||
border-radius: var(--radius-16) 0 0 var(--radius-16);
|
|
||||||
user-select: none;
|
|
||||||
padding: 4px 0 4px 4px;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-control::-webkit-scrollbar { display: none; }
|
|
||||||
|
|
||||||
.control-inner {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-inner::after {
|
|
||||||
content: "";
|
|
||||||
min-width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-control .slider-item {
|
|
||||||
width: 100px;
|
|
||||||
border-radius: var(--radius-8);
|
|
||||||
flex-shrink: 0;
|
|
||||||
filter: brightness(0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-control .active {
|
|
||||||
filter: brightness(1);
|
|
||||||
box-shadow: var(--shadow-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* MOVIE LIST
|
|
||||||
*/
|
|
||||||
|
|
||||||
.movie-list { padding-block-start: 32px; }
|
|
||||||
|
|
||||||
.movie-card {
|
|
||||||
position: relative;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-card .card-banner { width: 200px; }
|
|
||||||
|
|
||||||
.movie-card .title {
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-block: 8px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-card .meta-list { justify-content: space-between; }
|
|
||||||
|
|
||||||
.movie-card .card-btn {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-----------------------------------*\
|
|
||||||
#DETAIL PAGE
|
|
||||||
\*-----------------------------------*/
|
|
||||||
|
|
||||||
.backdrop-image {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 600px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdrop-image::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-image: linear-gradient(0deg, hsla(250, 13%, 11%, 1), hsla(250, 13%, 11%, 0.9));
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-detail .movie-poster {
|
|
||||||
max-width: 300px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-detail .heading { margin-block: 24px 12px; }
|
|
||||||
|
|
||||||
.movie-detail :is(.meta-list, .genre) { color: var(--text-color); }
|
|
||||||
|
|
||||||
.movie-detail .genre { margin-block: 12px 16px; }
|
|
||||||
|
|
||||||
.detail-list { margin-block: 24px 32px; }
|
|
||||||
|
|
||||||
.movie-detail .list-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
margin-block-end: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-detail .list-name {
|
|
||||||
color: var(--text-color);
|
|
||||||
min-width: 112px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-----------------------------------*\
|
|
||||||
#MOVIE LIST PAGE
|
|
||||||
\*-----------------------------------*/
|
|
||||||
|
|
||||||
.genre-list .title-wrapper { margin-block-end: 56px; }
|
|
||||||
|
|
||||||
.grid-list {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
||||||
column-gap: 16px;
|
|
||||||
row-gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(.genre-list, .search-modal) :is(.movie-card, .card-banner) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-----------------------------------*\
|
|
||||||
#SEARCH MODAL
|
|
||||||
\*-----------------------------------*/
|
|
||||||
|
|
||||||
.search-modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 96px;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: var(--surface);
|
|
||||||
padding: 50px 24px;
|
|
||||||
overflow-y: overlay;
|
|
||||||
z-index: 4;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-modal.active { display: block; }
|
|
||||||
|
|
||||||
.search-modal .label {
|
|
||||||
color: var(--primary-variant);
|
|
||||||
font-weight: var(--weight-bold);
|
|
||||||
margin-block-end: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-----------------------------------*\
|
|
||||||
#MEDIA QUERIES
|
|
||||||
\*-----------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* responsive for larger than 575px screen
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media (min-width: 575px) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* HOME PAGE
|
|
||||||
*/
|
|
||||||
|
|
||||||
.banner-content {
|
|
||||||
right: auto;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-control { left: calc(100% - 400px); }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* DETAIL PAGE
|
|
||||||
*/
|
|
||||||
|
|
||||||
.detail-content { max-width: 750px; }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* responsive for larger than 768px screen
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* CUSTOM PROPERTY
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
|
||||||
|
|
||||||
/* gradient color */
|
|
||||||
--banner-overlay: 90deg, hsl(220, 17%, 7%) 0%, hsla(220, 17%, 7%, 0) 100%;
|
|
||||||
|
|
||||||
/* font size */
|
|
||||||
--fs-heading: 5.4rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* HOME PAGE
|
|
||||||
*/
|
|
||||||
|
|
||||||
.container { padding-inline: 24px; }
|
|
||||||
|
|
||||||
.slider-list { margin-inline: -24px; }
|
|
||||||
|
|
||||||
.search-btn { display: none; }
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
all: unset;
|
|
||||||
display: block;
|
|
||||||
width: 360px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner { height: 500px; }
|
|
||||||
|
|
||||||
.banner-content {
|
|
||||||
bottom: 50%;
|
|
||||||
transform: translateY(50%);
|
|
||||||
left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* MOVIE DETAIL PAGE
|
|
||||||
*/
|
|
||||||
|
|
||||||
.movie-detail {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-detail .detail-box { flex-grow: 1; }
|
|
||||||
|
|
||||||
.movie-detail .movie-poster {
|
|
||||||
flex-shrink: 0;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-detail .slider-list {
|
|
||||||
margin-inline-start: 0;
|
|
||||||
border-radius: var(--radius-16) 0 0 var(--radius-16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-detail .slider-inner::before { display: none; }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* responsive for larger than 1200px screen
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* HOME PAGE
|
|
||||||
*/
|
|
||||||
|
|
||||||
.header { padding: 28px 56px; }
|
|
||||||
|
|
||||||
.logo img { width: 160px; }
|
|
||||||
|
|
||||||
.menu-btn,
|
|
||||||
.overlay { display: none; }
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 250px 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: static;
|
|
||||||
visibility: visible;
|
|
||||||
border-block-start: 0;
|
|
||||||
height: calc(100vh - 104px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.active { transform: none; }
|
|
||||||
|
|
||||||
.sidebar-list,
|
|
||||||
.sidebar-footer { padding-inline: 56px; }
|
|
||||||
|
|
||||||
.container {
|
|
||||||
height: calc(100vh - 104px);
|
|
||||||
border-top-left-radius: var(--radius-36);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-content { left: 100px; }
|
|
||||||
|
|
||||||
.search-modal {
|
|
||||||
top: 104px;
|
|
||||||
padding: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* MOVIE DETAIL PAGE
|
|
||||||
*/
|
|
||||||
|
|
||||||
.backdrop-image { border-top-left-radius: var(--radius-36); }
|
|
||||||
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 366 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 397 B |
Binary file not shown.
|
Before Width: | Height: | Size: 355 B |
Binary file not shown.
|
Before Width: | Height: | Size: 823 B |
Binary file not shown.
|
Before Width: | Height: | Size: 825 B |
Binary file not shown.
|
Before Width: | Height: | Size: 569 B |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 925 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 605 B |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
@@ -1,15 +0,0 @@
|
|||||||
<svg width="130" height="17" viewBox="0 0 130 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g clip-path="url(#clip0_88_1285)">
|
|
||||||
<path d="M91.2168 16.817H121.599C122.702 16.817 123.794 16.5997 124.814 16.1775C125.833 15.7553 126.759 15.1364 127.539 14.3563C128.319 13.5761 128.938 12.65 129.36 11.6307C129.783 10.6114 130 9.51891 130 8.41562C130.002 7.31114 129.786 6.21713 129.365 5.19618C128.943 4.17524 128.325 3.24739 127.544 2.46574C126.764 1.68409 125.837 1.06398 124.817 0.640877C123.797 0.217778 122.703 -1.59183e-06 121.599 0L91.2168 0C90.1123 -1.59183e-06 89.0187 0.217778 87.9985 0.640877C86.9782 1.06398 86.0514 1.68409 85.2711 2.46574C84.4908 3.24739 83.8722 4.17524 83.4509 5.19618C83.0295 6.21713 82.8136 7.31114 82.8154 8.41562C82.8154 10.6438 83.7006 12.7807 85.2761 14.3563C86.8517 15.9318 88.9886 16.817 91.2168 16.817ZM4.80214 16.8408H8.51072V3.29018H13.3129V0H0V3.28067H4.80214V16.8408ZM18.1625 16.8408H21.8711V3.92254H21.9187L26.174 16.8312H29.0268L33.4248 3.92254H33.4723V16.8312H37.1809V0H31.5942L27.6955 10.9831H27.6479L23.7729 0H18.1625V16.8408ZM42.3824 0.0570551H47.9453C49.2404 0.0590456 50.5305 0.218707 51.787 0.532514C52.9313 0.803976 54.0096 1.30191 54.9583 1.99693C55.8759 2.68686 56.6145 3.5869 57.1121 4.62146C57.6747 5.85059 57.9464 7.19284 57.9062 8.544C57.9319 9.78876 57.6682 11.0225 57.1359 12.148C56.6402 13.1608 55.9295 14.0532 55.0534 14.763C54.1566 15.482 53.1323 16.0256 52.0342 16.3653C50.8735 16.7338 49.6623 16.9183 48.4445 16.9121H42.3824V0.0570551ZM46.091 13.465H47.9928C48.7927 13.4705 49.5905 13.3827 50.3701 13.2035C51.0657 13.0623 51.7236 12.7755 52.3005 12.3619C52.8511 11.9453 53.2891 11.3978 53.5747 10.7691C53.9086 10.0087 54.0709 9.18406 54.0502 8.35381C54.0643 7.60989 53.9013 6.87328 53.5747 6.20474C53.2782 5.61229 52.8505 5.09521 52.3243 4.69278C51.7773 4.28658 51.1599 3.98513 50.5033 3.80367C49.779 3.60116 49.0301 3.50035 48.2781 3.50413H46.091V13.465ZM63.2788 0.0570551H69.5549C70.2915 0.0574142 71.0271 0.109845 71.7563 0.213957C72.448 0.303562 73.1188 0.512707 73.7389 0.832053C74.3182 1.13261 74.8096 1.57818 75.1653 2.1253C75.5598 2.79294 75.7499 3.56161 75.7121 4.33619C75.7447 5.19872 75.4625 6.04366 74.9181 6.71348C74.3624 7.35704 73.63 7.82326 72.8118 8.05428V8.0828C73.3383 8.15797 73.849 8.31857 74.3238 8.55826C74.7622 8.77842 75.1569 9.07647 75.4886 9.43786C75.8172 9.79977 76.0709 10.2231 76.2351 10.6836C76.4122 11.1711 76.5007 11.6863 76.4966 12.205C76.5251 12.9863 76.327 13.7591 75.926 14.4302C75.553 15.0144 75.0482 15.5029 74.4521 15.8566C73.8255 16.2327 73.1387 16.4981 72.4219 16.6411C71.6828 16.7995 70.9289 16.8792 70.173 16.8788H63.2788V0.0570551ZM66.9874 6.7848H69.6738C69.9586 6.78635 70.2427 6.75444 70.5201 6.68971C70.7854 6.6321 71.0382 6.52743 71.2665 6.38066C71.4893 6.23697 71.6738 6.04114 71.8038 5.81011C71.9431 5.54684 72.0119 5.25201 72.0035 4.95428C72.0188 4.65169 71.9461 4.35114 71.7943 4.08895C71.6468 3.86428 71.4458 3.67968 71.2095 3.55168C70.9446 3.41865 70.6607 3.32724 70.3679 3.28067C70.0781 3.22462 69.7836 3.19596 69.4883 3.19508H66.9684L66.9874 6.7848ZM66.9874 13.7503H70.3156C70.6083 13.7511 70.9001 13.7192 71.1857 13.6552C71.4696 13.5971 71.7393 13.484 71.9797 13.3224C72.2196 13.164 72.4197 12.9525 72.5645 12.7043C72.7207 12.4208 72.7979 12.1006 72.788 11.7771C72.8007 11.4359 72.6967 11.1005 72.4932 10.8262C72.2936 10.5794 72.0353 10.3865 71.742 10.2652C71.4373 10.1382 71.1178 10.0504 70.7911 10.0037C70.4682 9.9578 70.1425 9.93397 69.8164 9.93234H67.0112L66.9874 13.7503Z" fill="url(#paint0_linear_88_1285)"/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="paint0_linear_88_1285" x1="0" y1="8.44415" x2="130" y2="8.44415" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#90CEA1"/>
|
|
||||||
<stop offset="0.56" stop-color="#3CBEC9"/>
|
|
||||||
<stop offset="1" stop-color="#00B3E5"/>
|
|
||||||
</linearGradient>
|
|
||||||
<clipPath id="clip0_88_1285">
|
|
||||||
<rect width="130" height="16.8883" fill="white"/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 718 B |
@@ -1,12 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const api_key = '054582e9ee66adcbe911e0008aa482a8';
|
|
||||||
const imageBaseURL = 'https://image.tmdb.org/t/p/';
|
|
||||||
|
|
||||||
const fetchDataFromServer = function (url, callback, optionalParam) {
|
|
||||||
fetch(url)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => callback(data, optionalParam));
|
|
||||||
}
|
|
||||||
|
|
||||||
export { imageBaseURL, api_key, fetchDataFromServer };
|
|
||||||
@@ -1,179 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import { api_key, imageBaseURL, fetchDataFromServer } from "./api.js";
|
|
||||||
import { sidebar } from "./sidebar.js";
|
|
||||||
import { createMovieCard } from "./movie-card.js";
|
|
||||||
import { search } from "./search.js";
|
|
||||||
|
|
||||||
|
|
||||||
const movieId = window.localStorage.getItem("movieId");
|
|
||||||
const pageContent = document.querySelector("[page-content]");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
sidebar();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getGenres = function (genreList) {
|
|
||||||
const newGenreList = [];
|
|
||||||
|
|
||||||
for (const { name } of genreList) newGenreList.push(name);
|
|
||||||
|
|
||||||
return newGenreList.join(", ");
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCasts = function (castList) {
|
|
||||||
const newCastList = [];
|
|
||||||
|
|
||||||
for (let i = 0, len = castList.length; i < len && i < 10; i++) {
|
|
||||||
const { name } = castList[i];
|
|
||||||
newCastList.push(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
return newCastList.join(", ");
|
|
||||||
}
|
|
||||||
|
|
||||||
const getDirectors = function (crewList) {
|
|
||||||
const directors = crewList.filter(({ job }) => job === "Director");
|
|
||||||
|
|
||||||
const directorList = [];
|
|
||||||
for (const { name } of directors) directorList.push(name);
|
|
||||||
|
|
||||||
return directorList.join(", ");
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterVideos = function (videoList) {
|
|
||||||
return videoList.filter(({ type, site }) => (type === "Trailer" || type === "Teaser") && site === "YouTube");
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${api_key}&append_to_response=casts,videos,images,releases`, function (movie) {
|
|
||||||
|
|
||||||
const {
|
|
||||||
backdrop_path,
|
|
||||||
poster_path,
|
|
||||||
title,
|
|
||||||
release_date,
|
|
||||||
runtime,
|
|
||||||
vote_average,
|
|
||||||
releases: { countries: [{ certification } = { certification: "N/A" }] },
|
|
||||||
genres,
|
|
||||||
overview,
|
|
||||||
casts: { cast, crew },
|
|
||||||
videos: { results: videos }
|
|
||||||
} = movie;
|
|
||||||
|
|
||||||
document.title = `${title} - TD`;
|
|
||||||
|
|
||||||
const movieDetail = document.createElement("div");
|
|
||||||
movieDetail.classList.add("movie-detail");
|
|
||||||
|
|
||||||
movieDetail.innerHTML = `
|
|
||||||
<div class="backdrop-image" style="background-image: url('${imageBaseURL}${"w1280" || "original"}${backdrop_path || poster_path}')"></div>
|
|
||||||
|
|
||||||
<figure class="poster-box movie-poster">
|
|
||||||
<img src="${imageBaseURL}w342${poster_path}" alt="${title} poster" class="img-cover">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<div class="detail-box">
|
|
||||||
|
|
||||||
<div class="detail-content">
|
|
||||||
<h1 class="heading">${title}</h1>
|
|
||||||
|
|
||||||
<div class="meta-list">
|
|
||||||
|
|
||||||
<div class="meta-item">
|
|
||||||
<img src="./assets/images/star.png" width="20" height="20" alt="rating">
|
|
||||||
|
|
||||||
<span class="span">${vote_average.toFixed(1)}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="separator"></div>
|
|
||||||
|
|
||||||
<div class="meta-item">${runtime}m</div>
|
|
||||||
|
|
||||||
<div class="separator"></div>
|
|
||||||
|
|
||||||
<div class="meta-item">${release_date?.split("-")[0] ?? "Not Released"}</div>
|
|
||||||
|
|
||||||
<div class="meta-item card-badge">${certification}</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="genre">${getGenres(genres)}</p>
|
|
||||||
|
|
||||||
<p class="overview">${overview}</p>
|
|
||||||
|
|
||||||
<ul class="detail-list">
|
|
||||||
|
|
||||||
<div class="list-item">
|
|
||||||
<p class="list-name">Starring</p>
|
|
||||||
|
|
||||||
<p>${getCasts(cast)}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="list-item">
|
|
||||||
<p class="list-name">Directed By</p>
|
|
||||||
|
|
||||||
<p>${getDirectors(crew)}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="title-wrapper">
|
|
||||||
<h3 class="title-large">Trailers and Clips</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="slider-list">
|
|
||||||
<div class="slider-inner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
for (const { key, name } of filterVideos(videos)) {
|
|
||||||
const videoCard = document.createElement("div");
|
|
||||||
videoCard.classList.add("video-card");
|
|
||||||
|
|
||||||
videoCard.innerHTML = `
|
|
||||||
<iframe width="500" height="294" src="https://www.youtube.com/embed/${key}?&theme=dark&color=white&rel=0"
|
|
||||||
frameborder="0" allowfullscreen="1" title="${name}" class="img-cover" loading="lazy"></iframe>
|
|
||||||
`;
|
|
||||||
|
|
||||||
movieDetail.querySelector(".slider-inner").appendChild(videoCard);
|
|
||||||
}
|
|
||||||
|
|
||||||
pageContent.appendChild(movieDetail);
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/${movieId}/recommendations?api_key=${api_key}&page=1`, addSuggestedMovies);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const addSuggestedMovies = function ({ results: movieList }, title) {
|
|
||||||
|
|
||||||
const movieListElem = document.createElement("section");
|
|
||||||
movieListElem.classList.add("movie-list");
|
|
||||||
movieListElem.ariaLabel = "You May Also Like";
|
|
||||||
|
|
||||||
movieListElem.innerHTML = `
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
for (const movie of movieList) {
|
|
||||||
const movieCard = createMovieCard(movie);
|
|
||||||
|
|
||||||
movieListElem.querySelector(".slider-inner").appendChild(movieCard);
|
|
||||||
}
|
|
||||||
|
|
||||||
pageContent.appendChild(movieListElem);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
search();
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const addEventOnElements = function (elements, eventType, callback) {
|
|
||||||
for (const elem of elements) elem.addEventListener(eventType, callback);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const searchBox = document.querySelector("[search-box]");
|
|
||||||
const searchTogglers = document.querySelectorAll("[search-toggler]");
|
|
||||||
|
|
||||||
addEventOnElements(searchTogglers, "click", function () {
|
|
||||||
searchBox.classList.toggle("active");
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getMovieDetail = function (movieId) {
|
|
||||||
window.localStorage.setItem("movieId", String(movieId));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getMovieList = function (urlParam, genreName) {
|
|
||||||
window.localStorage.setItem("urlParam", urlParam);
|
|
||||||
window.localStorage.setItem("genreName", genreName);
|
|
||||||
}
|
|
||||||
@@ -1,206 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
|
|
||||||
import { sidebar } from "./sidebar.js";
|
|
||||||
import { api_key, imageBaseURL, fetchDataFromServer } from "./api.js";
|
|
||||||
import { createMovieCard } from "./movie-card.js";
|
|
||||||
import { search } from "./search.js";
|
|
||||||
|
|
||||||
const pageContent = document.querySelector("[page-content]");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
sidebar();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const homePageSections = [
|
|
||||||
{
|
|
||||||
title: "Upcoming Movies",
|
|
||||||
path: "/movie/upcoming"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Weekly Trending Movies",
|
|
||||||
path: "/trending/movie/week"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Top Rated Movies",
|
|
||||||
path: "/movie/top_rated"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const genreList = {
|
|
||||||
|
|
||||||
|
|
||||||
asString(genreIdList) {
|
|
||||||
let newGenreList = [];
|
|
||||||
|
|
||||||
for (const genreId of genreIdList) {
|
|
||||||
this[genreId] && newGenreList.push(this[genreId]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return newGenreList.join(", ");
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/genre/movie/list?api_key=${api_key}`, function ({ genres }) {
|
|
||||||
for (const { id, name } of genres) {
|
|
||||||
genreList[id] = name;
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/popular?api_key=${api_key}&page=1`, heroBanner);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const heroBanner = function ({ results: movieList }) {
|
|
||||||
|
|
||||||
const banner = document.createElement("section");
|
|
||||||
banner.classList.add("banner");
|
|
||||||
banner.ariaLabel = "Popular Movies";
|
|
||||||
|
|
||||||
banner.innerHTML = `
|
|
||||||
<div class="banner-slider"></div>
|
|
||||||
|
|
||||||
<div class="slider-control">
|
|
||||||
<div class="control-inner"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
let controlItemIndex = 0;
|
|
||||||
|
|
||||||
for (const [index, movie] of movieList.entries()) {
|
|
||||||
|
|
||||||
const {
|
|
||||||
backdrop_path,
|
|
||||||
title,
|
|
||||||
release_date,
|
|
||||||
genre_ids,
|
|
||||||
overview,
|
|
||||||
poster_path,
|
|
||||||
vote_average,
|
|
||||||
id
|
|
||||||
} = movie;
|
|
||||||
|
|
||||||
const sliderItem = document.createElement("div");
|
|
||||||
sliderItem.classList.add("slider-item");
|
|
||||||
sliderItem.setAttribute("slider-item", "");
|
|
||||||
|
|
||||||
sliderItem.innerHTML = `
|
|
||||||
<img src="${imageBaseURL}w1280${backdrop_path}" alt="${title}" class="img-cover" loading=${index === 0 ? "eager" : "lazy"
|
|
||||||
}>
|
|
||||||
|
|
||||||
<div class="banner-content">
|
|
||||||
|
|
||||||
<h2 class="heading">${title}</h2>
|
|
||||||
|
|
||||||
<div class="meta-list">
|
|
||||||
<div class="meta-item">${release_date?.split("-")[0] ?? "Not Released"}</div>
|
|
||||||
|
|
||||||
<div class="meta-item card-badge">${vote_average.toFixed(1)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="genre">${genreList.asString(genre_ids)}</p>
|
|
||||||
|
|
||||||
<p class="banner-text">${overview}</p>
|
|
||||||
|
|
||||||
<a href="./detail.html" class="btn" onclick="getMovieDetail(${id})">
|
|
||||||
<img src="./assets/images/play_circle.png" width="24" height="24" aria-hidden="true" alt="play circle">
|
|
||||||
|
|
||||||
<span class="span">Watch Now</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
banner.querySelector(".banner-slider").appendChild(sliderItem);
|
|
||||||
|
|
||||||
|
|
||||||
const controlItem = document.createElement("button");
|
|
||||||
controlItem.classList.add("poster-box", "slider-item");
|
|
||||||
controlItem.setAttribute("slider-control", `${controlItemIndex}`);
|
|
||||||
|
|
||||||
controlItemIndex++;
|
|
||||||
|
|
||||||
controlItem.innerHTML = `
|
|
||||||
<img src="${imageBaseURL}w154${poster_path}" alt="Slide to ${title}" loading="lazy" draggable="false" class="img-cover">
|
|
||||||
`;
|
|
||||||
banner.querySelector(".control-inner").appendChild(controlItem);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
pageContent.appendChild(banner);
|
|
||||||
|
|
||||||
addHeroSlide();
|
|
||||||
|
|
||||||
|
|
||||||
for (const { title, path } of homePageSections) {
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3${path}?api_key=${api_key}&page=1`, createMovieList, title);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const addHeroSlide = function () {
|
|
||||||
|
|
||||||
const sliderItems = document.querySelectorAll("[slider-item]");
|
|
||||||
const sliderControls = document.querySelectorAll("[slider-control]");
|
|
||||||
|
|
||||||
let lastSliderItem = sliderItems[0];
|
|
||||||
let lastSliderControl = sliderControls[0];
|
|
||||||
|
|
||||||
lastSliderItem.classList.add("active");
|
|
||||||
lastSliderControl.classList.add("active");
|
|
||||||
|
|
||||||
const sliderStart = function () {
|
|
||||||
lastSliderItem.classList.remove("active");
|
|
||||||
lastSliderControl.classList.remove("active");
|
|
||||||
|
|
||||||
// `this` == slider-control
|
|
||||||
sliderItems[Number(this.getAttribute("slider-control"))].classList.add("active");
|
|
||||||
this.classList.add("active");
|
|
||||||
|
|
||||||
lastSliderItem = sliderItems[Number(this.getAttribute("slider-control"))];
|
|
||||||
lastSliderControl = this;
|
|
||||||
}
|
|
||||||
|
|
||||||
addEventOnElements(sliderControls, "click", sliderStart);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const createMovieList = function ({ results: movieList }, title) {
|
|
||||||
|
|
||||||
const movieListElem = document.createElement("section");
|
|
||||||
movieListElem.classList.add("movie-list");
|
|
||||||
movieListElem.ariaLabel = `${title}`;
|
|
||||||
|
|
||||||
movieListElem.innerHTML = `
|
|
||||||
<div class="title-wrapper">
|
|
||||||
<h3 class="title-large">${title}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="slider-list">
|
|
||||||
<div class="slider-inner"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
for (const movie of movieList) {
|
|
||||||
const movieCard = createMovieCard(movie); // called from movie_card.js
|
|
||||||
|
|
||||||
movieListElem.querySelector(".slider-inner").appendChild(movieCard);
|
|
||||||
}
|
|
||||||
|
|
||||||
pageContent.appendChild(movieListElem);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
search();
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import { imageBaseURL } from "./api.js";
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* movie card
|
|
||||||
*/
|
|
||||||
|
|
||||||
export function createMovieCard(movie) {
|
|
||||||
|
|
||||||
const {
|
|
||||||
poster_path,
|
|
||||||
title,
|
|
||||||
vote_average,
|
|
||||||
release_date,
|
|
||||||
id
|
|
||||||
} = movie;
|
|
||||||
|
|
||||||
const card = document.createElement("div");
|
|
||||||
card.classList.add("movie-card");
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<figure class="poster-box card-banner">
|
|
||||||
<img src="${imageBaseURL}w342${poster_path}" alt="${title}" class="img-cover" loading="lazy">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<h4 class="title">${title}</h4>
|
|
||||||
|
|
||||||
<div class="meta-list">
|
|
||||||
<div class="meta-item">
|
|
||||||
<img src="./assets/images/star.png" width="20" height="20" loading="lazy" alt="rating">
|
|
||||||
|
|
||||||
<span class="span">${vote_average.toFixed(1)}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-badge">${release_date.split("-")[0]}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="./detail.html" class="card-btn" title="${title}" onclick="getMovieDetail(${id})"></a>
|
|
||||||
`;
|
|
||||||
|
|
||||||
return card;
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import { api_key, fetchDataFromServer } from "./api.js";
|
|
||||||
import { sidebar } from "./sidebar.js";
|
|
||||||
import { createMovieCard } from "./movie-card.js";
|
|
||||||
import { search } from "./search.js";
|
|
||||||
|
|
||||||
// collectc genre name & url parameter from local storage
|
|
||||||
const genreName = window.localStorage.getItem("genreName");
|
|
||||||
const urlParam = window.localStorage.getItem("urlParam");
|
|
||||||
|
|
||||||
const pageContent = document.querySelector("[page-content]");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
sidebar();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let currentPage = 1;
|
|
||||||
let totalPages = 0;
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&include_adult=false&page=${currentPage}&${urlParam}`, function ({ results: movieList, total_pages }) {
|
|
||||||
|
|
||||||
totalPages = total_pages;
|
|
||||||
|
|
||||||
document.title = `${genreName} Movies - Tvflix`;
|
|
||||||
|
|
||||||
const movieListElem = document.createElement("section");
|
|
||||||
movieListElem.classList.add("movie-list", "genre-list");
|
|
||||||
movieListElem.ariaLabel = `${genreName} Movies`;
|
|
||||||
|
|
||||||
movieListElem.innerHTML = `
|
|
||||||
<div class="title-wrapper">
|
|
||||||
<h1 class="heading">All ${genreName} Movies</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-list"></div>
|
|
||||||
|
|
||||||
<button class="btn load-more" load-more>Load More</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* add movie card based on fetched item
|
|
||||||
*/
|
|
||||||
for (const movie of movieList) {
|
|
||||||
const movieCard = createMovieCard(movie);
|
|
||||||
|
|
||||||
movieListElem.querySelector(".grid-list").appendChild(movieCard);
|
|
||||||
}
|
|
||||||
|
|
||||||
pageContent.appendChild(movieListElem);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* load more button functionality
|
|
||||||
*/
|
|
||||||
document.querySelector("[load-more]").addEventListener("click", function () {
|
|
||||||
|
|
||||||
if (currentPage >= totalPages) {
|
|
||||||
this.style.display = "none"; // this == loading-btn
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentPage++;
|
|
||||||
this.classList.add("loading"); // this == loading-btn
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&include_adult=false&page=${currentPage}&${urlParam}`, ({ results: movieList }) => {
|
|
||||||
this.classList.remove("loading"); // this == loading-btn
|
|
||||||
|
|
||||||
for (const movie of movieList) {
|
|
||||||
const movieCard = createMovieCard(movie);
|
|
||||||
|
|
||||||
movieListElem.querySelector(".grid-list").appendChild(movieCard);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
search();
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import { api_key, fetchDataFromServer } from "./api.js";
|
|
||||||
import { createMovieCard } from "./movie-card.js";
|
|
||||||
|
|
||||||
|
|
||||||
export function search() {
|
|
||||||
|
|
||||||
const searchWrapper = document.querySelector("[search-wrapper]");
|
|
||||||
const searchField = document.querySelector("[search-field]");
|
|
||||||
|
|
||||||
const searchResultModal = document.createElement("div");
|
|
||||||
searchResultModal.classList.add("search-modal");
|
|
||||||
document.querySelector("main").appendChild(searchResultModal);
|
|
||||||
|
|
||||||
let searchTimeout;
|
|
||||||
|
|
||||||
searchField.addEventListener("input", function () {
|
|
||||||
|
|
||||||
if (!searchField.value.trim()) {
|
|
||||||
searchResultModal.classList.remove("active");
|
|
||||||
searchWrapper.classList.remove("searching");
|
|
||||||
clearTimeout(searchTimeout);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
searchWrapper.classList.add("searching");
|
|
||||||
clearTimeout(searchTimeout);
|
|
||||||
|
|
||||||
searchTimeout = setTimeout(function () {
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/search/movie?api_key=${api_key}&query=${searchField.value}&page=1&include_adult=false`, function ({ results: movieList }) {
|
|
||||||
|
|
||||||
searchWrapper.classList.remove("searching");
|
|
||||||
searchResultModal.classList.add("active");
|
|
||||||
searchResultModal.innerHTML = ""; // remove old results
|
|
||||||
|
|
||||||
searchResultModal.innerHTML = `
|
|
||||||
<p class="label">Results for</p>
|
|
||||||
|
|
||||||
<h1 class="heading">${searchField.value}</h1>
|
|
||||||
|
|
||||||
<div class="movie-list">
|
|
||||||
<div class="grid-list"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
for (const movie of movieList) {
|
|
||||||
const movieCard = createMovieCard(movie);
|
|
||||||
|
|
||||||
searchResultModal.querySelector(".grid-list").appendChild(movieCard);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import { api_key, fetchDataFromServer } from "./api.js";
|
|
||||||
|
|
||||||
|
|
||||||
export function sidebar() {
|
|
||||||
|
|
||||||
const excludedGenres = ["Drama", "Romance"];
|
|
||||||
const genreList = {};
|
|
||||||
|
|
||||||
fetchDataFromServer(`https://api.themoviedb.org/3/genre/movie/list?api_key=${api_key}`, function ({ genres }) {
|
|
||||||
const filteredGenres = genres.filter(genre => !excludedGenres.includes(genre.name));
|
|
||||||
|
|
||||||
for (const { id, name } of filteredGenres) {
|
|
||||||
genreList[id] = name;
|
|
||||||
}
|
|
||||||
|
|
||||||
genreLink();
|
|
||||||
});
|
|
||||||
|
|
||||||
const sidebarInner = document.createElement("div");
|
|
||||||
sidebarInner.classList.add("sidebar-inner");
|
|
||||||
|
|
||||||
sidebarInner.innerHTML = `
|
|
||||||
<div class="sidebar-list">
|
|
||||||
<p class="title">Genre</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="sidebar-footer">
|
|
||||||
<p class="copyright">
|
|
||||||
<h6>All Rights Reserved.</h6>
|
|
||||||
Copyright 2024 <a href="https://tdvorak.site" target="_blank">Tomas Dvorak </a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>Powered by
|
|
||||||
<img src="./assets/images/tmdb-logo.svg" width="130" height="17" alt="the movie database logo">
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const genreLink = function () {
|
|
||||||
|
|
||||||
for (const [genreId, genreName] of Object.entries(genreList)) {
|
|
||||||
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.classList.add("sidebar-link");
|
|
||||||
link.setAttribute("href", "./movie-list.html");
|
|
||||||
link.setAttribute("menu-close", "");
|
|
||||||
link.setAttribute("onclick", `getMovieList("with_genres=${genreId}", "${genreName}")`);
|
|
||||||
link.textContent = genreName;
|
|
||||||
|
|
||||||
sidebarInner.querySelectorAll(".sidebar-list")[0].appendChild(link);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const sidebar = document.querySelector("[sidebar]");
|
|
||||||
sidebar.appendChild(sidebarInner);
|
|
||||||
toggleSidebar(sidebar);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const toggleSidebar = function (sidebar) {
|
|
||||||
|
|
||||||
|
|
||||||
const sidebarBtn = document.querySelector("[menu-btn]");
|
|
||||||
const sidebarTogglers = document.querySelectorAll("[menu-toggler]");
|
|
||||||
const sidebarClose = document.querySelectorAll("[menu-close]");
|
|
||||||
const overlay = document.querySelector("[overlay]");
|
|
||||||
|
|
||||||
addEventOnElements(sidebarTogglers, "click", function () {
|
|
||||||
sidebar.classList.toggle("active");
|
|
||||||
sidebarBtn.classList.toggle("active");
|
|
||||||
overlay.classList.toggle("active");
|
|
||||||
});
|
|
||||||
|
|
||||||
addEventOnElements(sidebarClose, "click", function () {
|
|
||||||
sidebar.classList.remove("active");
|
|
||||||
sidebarBtn.classList.remove("active");
|
|
||||||
overlay.classList.remove("active");
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<!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="https://tdvorak.site/icon.png" sizes="any" type="image/svg+xml">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="./assets/css/style.css">
|
|
||||||
<script src="./assets/js/global.js" defer></script>
|
|
||||||
<script src="./assets/js/detail.js" type="module"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<a href="./index.html" class="logo">
|
|
||||||
Back to Homepage
|
|
||||||
</a>
|
|
||||||
<div class="search-box" search-box>
|
|
||||||
<div class="search-wrapper" search-wrapper>
|
|
||||||
<input type="text" name="search" aria-label="search movies" placeholder="Search any movies..."
|
|
||||||
class="search-field" autocomplete="off" search-field>
|
|
||||||
<img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon">
|
|
||||||
</div>
|
|
||||||
<button class="search-btn" search-toggler>
|
|
||||||
<img src="./assets/images/close.png" width="24" height="24" alt="close search box">
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button class="search-btn" search-toggler menu-close>
|
|
||||||
<img src="./assets/images/search.png" width="24" height="24" alt="open search box">
|
|
||||||
</button>
|
|
||||||
<button class="menu-btn" menu-btn menu-toggler>
|
|
||||||
<img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu">
|
|
||||||
<img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close">
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<nav class="sidebar" sidebar></nav>
|
|
||||||
<div class="overlay" overlay menu-toggler></div>
|
|
||||||
<article class="container" page-content></article>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect width="50" height="50" rx="8" fill="#0F1115"/>
|
|
||||||
<path d="M19.2067 16.8071C19.2067 19.3639 17.1341 21.4365 14.5774 21.4365C12.0207 21.4365 9.94803 19.3639 9.94803 16.8071C9.94803 14.2504 12.0207 12.1778 14.5774 12.1778C17.1341 12.1778 19.2067 14.2504 19.2067 16.8071Z" stroke="url(#paint0_linear_86_64)" stroke-width="3.89607"/>
|
|
||||||
<path d="M32.3724 16.8147C32.3724 19.3744 30.2974 21.4495 27.7376 21.4495C25.1779 21.4495 23.1028 19.3744 23.1028 16.8147C23.1028 14.255 25.1779 12.1799 27.7376 12.1799C30.2974 12.1799 32.3724 14.255 32.3724 16.8147Z" stroke="url(#paint1_linear_86_64)" stroke-width="3.89607"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8256 23.3458C17.6035 24.1415 16.1444 24.6038 14.5774 24.6038C13.3718 24.6038 12.2301 24.3301 11.2111 23.8416C10.1731 24.4591 9.47754 25.5922 9.47754 26.8877V36.2284C9.47754 38.1845 11.0633 39.7702 13.0194 39.7702H29.3412C31.2974 39.7702 32.8831 38.1845 32.8831 36.2284V26.8877C32.8831 25.5833 32.1781 24.4437 31.1283 23.829C30.1032 24.3254 28.9529 24.6038 27.7376 24.6038C26.1713 24.6038 24.713 24.1414 23.4916 23.3458L18.8256 23.3458ZM24.3425 30.9983C24.8147 31.271 24.8147 31.9526 24.3425 32.2253L20.0922 34.6792C19.6199 34.9518 19.0296 34.611 19.0296 34.0657V29.1579C19.0296 28.6126 19.6199 28.2718 20.0922 28.5445L24.3425 30.9983Z" fill="url(#paint2_linear_86_64)"/>
|
|
||||||
<path d="M34.0456 31.3341L34.0456 28.3758L39.8719 24.9928C40.8164 24.4444 42 25.1258 42 26.218L42 37.0029C42 38.0957 40.8152 38.777 39.8707 38.2274L34.0456 34.8377L34.0456 31.3341Z" fill="url(#paint3_linear_86_64)"/>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="paint0_linear_86_64" x1="8" y1="16.8072" x2="21.1548" y2="16.8072" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#92131A"/>
|
|
||||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
|
||||||
<stop offset="1" stop-color="#E32832"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="paint1_linear_86_64" x1="21.1548" y1="16.8147" x2="34.3205" y2="16.8147" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#92131A"/>
|
|
||||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
|
||||||
<stop offset="1" stop-color="#E32832"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="paint2_linear_86_64" x1="9.47754" y1="31.558" x2="32.8831" y2="31.558" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#92131A"/>
|
|
||||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
|
||||||
<stop offset="1" stop-color="#E32832"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="paint3_linear_86_64" x1="34.0456" y1="31.6118" x2="42" y2="31.6118" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#92131A"/>
|
|
||||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
|
||||||
<stop offset="1" stop-color="#E32832"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1,42 +0,0 @@
|
|||||||
<!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">
|
|
||||||
<title>TD - Movie Website</title>
|
|
||||||
<link rel="shortcut icon" href="https://tdvorak.site/icon.png" sizes="any" type="image/svg+xml">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="./assets/css/style.css">
|
|
||||||
<script src="./assets/js/global.js" defer></script>
|
|
||||||
<script src="./assets/js/index.js" type="module"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<div class="search-box" search-box>
|
|
||||||
<div class="search-wrapper" search-wrapper>
|
|
||||||
<input type="text" name="search" aria-label="search movies" placeholder="Search any movies..."
|
|
||||||
class="search-field" autocomplete="off" search-field>
|
|
||||||
<img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon">
|
|
||||||
</div>
|
|
||||||
<button class="search-btn" search-toggler>
|
|
||||||
<img src="./assets/images/close.png" width="24" height="24" alt="close search box">
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button class="search-btn" search-toggler menu-close>
|
|
||||||
<img src="./assets/images/search.png" width="24" height="24" alt="open search box">
|
|
||||||
</button>
|
|
||||||
<button class="menu-btn" menu-btn menu-toggler>
|
|
||||||
<img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu">
|
|
||||||
<img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close">
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<nav class="sidebar" sidebar></nav>
|
|
||||||
<div class="overlay" overlay menu-toggler></div>
|
|
||||||
<article class="container" page-content></article>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<!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="https://tdvorak.site/icon.png" sizes="any" type="image/svg+xml">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="./assets/css/style.css">
|
|
||||||
<script src="./assets/js/global.js" defer></script>
|
|
||||||
<script src="./assets/js/movie-list.js" type="module"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<a href="./index.html" class="logo">
|
|
||||||
Back to Homepage
|
|
||||||
</a>
|
|
||||||
<div class="search-box" search-box>
|
|
||||||
<div class="search-wrapper" search-wrapper>
|
|
||||||
<input type="text" name="search" aria-label="search movies" placeholder="Search any movies..."
|
|
||||||
class="search-field" autocomplete="off" search-field>
|
|
||||||
<img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon">
|
|
||||||
</div>
|
|
||||||
<button class="search-btn" search-toggler>
|
|
||||||
<img src="./assets/images/close.png" width="24" height="24" alt="close search box">
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button class="search-btn" search-toggler menu-close>
|
|
||||||
<img src="./assets/images/search.png" width="24" height="24" alt="open search box">
|
|
||||||
</button>
|
|
||||||
<button class="menu-btn" menu-btn menu-toggler>
|
|
||||||
<img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu">
|
|
||||||
<img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close">
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<nav class="sidebar" sidebar></nav>
|
|
||||||
<div class="overlay" overlay menu-toggler></div>
|
|
||||||
<article class="container" page-content></article>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 754 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user