-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
067d3b4
commit b297eeb
Showing
13 changed files
with
321 additions
and
14 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<!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>SimpleLightbox library</title> | ||
<link rel="stylesheet" href="css/common.css" /> | ||
<link rel="stylesheet" href="css/01-gallery.css" /> | ||
</head> | ||
<body> | ||
<p><a href="index.html">Go back</a></p> | ||
|
||
<!-- Add gallery items to this list --> | ||
<ul class="gallery"></ul> | ||
|
||
<script src="js/01-gallery.js" type="module"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!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>Video playback</title> | ||
<link rel="stylesheet" href="css/common.css" /> | ||
</head> | ||
<body> | ||
<p><a href="index.html">Go back</a></p> | ||
|
||
<iframe | ||
id="vimeo-player" | ||
src="https://player.vimeo.com/video/236203659" | ||
width="640" | ||
height="360" | ||
frameborder="0" | ||
allowfullscreen | ||
allow="autoplay; encrypted-media" | ||
></iframe> | ||
|
||
<script src="js/02-video.js" type="module"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<!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>Feedback form</title> | ||
<link rel="stylesheet" href="css/common.css" /> | ||
<link rel="stylesheet" href="css/03-feedback.css" /> | ||
</head> | ||
<body> | ||
<p><a href="index.html">Go back</a></p> | ||
|
||
<form class="feedback-form" autocomplete="off"> | ||
<label> | ||
<input type="email" name="email" autofocus /> | ||
</label> | ||
<label> | ||
Message | ||
<textarea name="message" rows="8"></textarea> | ||
</label> | ||
<button type="submit">Submit</button> | ||
</form> | ||
|
||
<script src="js/03-feedback.js" type="module"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
:root { | ||
--timing-function: cubic-bezier(0.4, 0, 0.2, 1); | ||
--animation-duration: 250ms; | ||
} | ||
|
||
.gallery { | ||
display: grid; | ||
max-width: 1140px; | ||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | ||
grid-auto-rows: 240px; | ||
grid-gap: 12px; | ||
justify-content: center; | ||
margin-left: auto; | ||
margin-right: auto; | ||
} | ||
|
||
.gallery__item { | ||
position: relative; | ||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), | ||
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); | ||
} | ||
|
||
.gallery__image:hover { | ||
transform: scale(1.03); | ||
} | ||
|
||
.gallery__image { | ||
height: 100%; | ||
width: 100%; | ||
object-fit: cover; | ||
transition: transform var(--animation-duration) var(--timing-function); | ||
} | ||
|
||
.gallery__link { | ||
display: block; | ||
text-decoration: none; | ||
height: 100%; | ||
} | ||
|
||
.gallery__link:hover { | ||
cursor: zoom-in; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
.feedback-form { | ||
display: flex; | ||
flex-direction: column; | ||
max-width: 480px; | ||
padding: 12px; | ||
background-color: #fff; | ||
border: 1px solid rgba(0, 0, 0, 0.12); | ||
border-radius: 4px; | ||
} | ||
|
||
.feedback-form label { | ||
display: flex; | ||
flex-direction: column; | ||
margin-bottom: 16px; | ||
} | ||
|
||
.feedback-form button { | ||
padding: 8px 12px; | ||
font: inherit; | ||
cursor: pointer; | ||
} | ||
|
||
input, | ||
textarea { | ||
padding: 8px; | ||
font: inherit; | ||
} | ||
|
||
textarea { | ||
resize: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, | ||
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
background-color: #fafafa; | ||
color: #212121; | ||
line-height: 1.5; | ||
} | ||
|
||
img { | ||
display: block; | ||
max-width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,17 @@ | ||
<!DOCTYPE html> | ||
<html lang="ru"> | ||
<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>Page title</title> | ||
<link rel="stylesheet" href="./sass/index.scss" /> | ||
<script type="module" src="./index.js"></script> | ||
<title>Homework 8</title> | ||
<link rel="stylesheet" href="css/common.css" /> | ||
</head> | ||
<body> | ||
<!-- ❗️❗️❗️ Add partials like so for every page --> | ||
<include src="./partials/example.html"></include> | ||
<ul> | ||
<li><a href="01-gallery.html">Image gallery</a></li> | ||
<li><a href="02-video.html">Video playback</a></li> | ||
<li><a href="03-feedback.html">Feedback form</a></li> | ||
</ul> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
// Add imports above this line | ||
import { galleryItems } from './gallery-items'; | ||
|
||
import SimpleLightbox from "simplelightbox"; | ||
import "simplelightbox/dist/simple-lightbox.min.css"; | ||
|
||
|
||
const galleryContainer = document.querySelector('.gallery'); | ||
const imagesMarkup = makeGalleryMarkup(galleryItems); | ||
|
||
galleryContainer.insertAdjacentHTML('beforeend', imagesMarkup); | ||
|
||
galleryContainer.addEventListener('click', onImageClick); | ||
|
||
function makeGalleryMarkup(images) { | ||
return images.map(({preview, original, description}) => { | ||
return ` | ||
<li class="gallery__item"> | ||
<a class="gallery__link" href="${original}"> | ||
<img | ||
class="gallery__image" | ||
src="${preview}" | ||
data-source="${original}" | ||
alt="${description}" | ||
/> | ||
</a> | ||
</li> | ||
` ; | ||
}).join(''); | ||
}; | ||
|
||
let instance; | ||
|
||
function onImageClick(event) { | ||
event.preventDefault(); | ||
|
||
|
||
if (event.target.nodeName !== 'IMG') { | ||
return; | ||
} | ||
|
||
const imgEl = event.target; | ||
const imgSource = imgEl.dataset.source; | ||
|
||
instance = basicLightbox.create(` | ||
<img src="${imgSource}" alt="${imgEl.alt}" width="800" height="600"> | ||
`, | ||
{ | ||
onShow: (instance) => | ||
window.addEventListener('keydown', onEscKeyPress), | ||
onClose: (instance) => | ||
window.removeEventListener('keydown', onEscKeyPress), | ||
}, | ||
) | ||
instance.show() | ||
} | ||
|
||
function onEscKeyPress(event) { | ||
if (event.key === 'Escape') { | ||
instance.close(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
export const galleryItems = [ | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820__480.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820_1280.jpg', | ||
description: 'Hokkaido Flower', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677_1280.jpg', | ||
description: 'Container Haulage Freight', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785_1280.jpg', | ||
description: 'Aerial Beach View', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619_1280.jpg', | ||
description: 'Flower Blooms', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334_1280.jpg', | ||
description: 'Alpine Mountains', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571_1280.jpg', | ||
description: 'Mountain Lake Sailing', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg', | ||
description: 'Alpine Spring Meadows', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg', | ||
description: 'Nature Landscape', | ||
}, | ||
{ | ||
preview: | ||
'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843__340.jpg', | ||
original: | ||
'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg', | ||
description: 'Lighthouse Coast Sea', | ||
}, | ||
]; |