diff --git a/package-lock.json b/package-lock.json index 141fb0c..e1958d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { - "parcel": "^2.16.0" + "parcel": "^2.16.0", + "posthtml-expressions": "^1.11.4" } }, "node_modules/@lezer/common": { @@ -2305,6 +2306,75 @@ "node": ">=0.10" } }, + "node_modules/dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "dev": true, + "license": "MIT", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/dom-serializer/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "dev": true, + "license": "BSD-2-Clause", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/dotenv": { "version": "16.6.1", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz", @@ -2341,6 +2411,19 @@ "dev": true, "license": "ISC" }, + "node_modules/entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/escalade": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", @@ -2351,6 +2434,13 @@ "node": ">=6" } }, + "node_modules/fclone": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/fclone/-/fclone-1.0.11.tgz", + "integrity": "sha512-GDqVQezKzRABdeqflsgMr7ktzgF9CyS+p2oe0jJqUY6izSSbhPIQJDpoU4PtGcD7VPM9xh/dVrTu6z1nwgmEGw==", + "dev": true, + "license": "MIT" + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -2400,6 +2490,26 @@ "node": ">=8" } }, + "node_modules/htmlparser2": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", + "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==", + "dev": true, + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "MIT", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.2", + "domutils": "^2.8.0", + "entities": "^3.0.1" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -2423,6 +2533,13 @@ "node": ">=0.10.0" } }, + "node_modules/is-json": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz", + "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==", + "dev": true, + "license": "ISC" + }, "node_modules/is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -2938,6 +3055,86 @@ "dev": true, "license": "MIT" }, + "node_modules/posthtml": { + "version": "0.16.6", + "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz", + "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "posthtml-parser": "^0.11.0", + "posthtml-render": "^3.0.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/posthtml-expressions": { + "version": "1.11.4", + "resolved": "https://registry.npmjs.org/posthtml-expressions/-/posthtml-expressions-1.11.4.tgz", + "integrity": "sha512-tJI6KhKLcePRO0/i4d01MNXfcaBa2jIu4MuVLixvGwCRzxdY2D7LLm17ijNyQNQu3xOhCffBLtUMju0K64smmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "fclone": "^1.0.11", + "posthtml": "^0.16.5", + "posthtml-match-helper": "^1.0.1", + "posthtml-parser": "^0.10.0", + "posthtml-render": "^3.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/posthtml-match-helper": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-1.0.4.tgz", + "integrity": "sha512-Tj9orTIBxHdnraCxoEGjoizsFsTGvukzwcuhOjYQGmDG6gTlaRbMrGgi1J+FwKTN8hsCQENHYY0Deqs9a89BVg==", + "dev": true, + "license": "ISC", + "peerDependencies": { + "posthtml": ">=0.5.0" + } + }, + "node_modules/posthtml-parser": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.10.2.tgz", + "integrity": "sha512-PId6zZ/2lyJi9LiKfe+i2xv57oEjJgWbsHGGANwos5AvdQp98i6AtamAl8gzSVFGfQ43Glb5D614cvZf012VKg==", + "dev": true, + "license": "MIT", + "dependencies": { + "htmlparser2": "^7.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/posthtml-render": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz", + "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-json": "^2.0.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/posthtml/node_modules/posthtml-parser": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz", + "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==", + "dev": true, + "license": "MIT", + "dependencies": { + "htmlparser2": "^7.1.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/react-refresh": { "version": "0.16.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.16.0.tgz", diff --git a/package.json b/package.json index 9a625f2..1758671 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "author": "", "license": "ISC", "devDependencies": { - "parcel": "^2.16.0" + "parcel": "^2.16.0", + "posthtml-expressions": "^1.11.4" } } diff --git a/posthtml.config.js b/posthtml.config.js new file mode 100644 index 0000000..ad90161 --- /dev/null +++ b/posthtml.config.js @@ -0,0 +1,9 @@ +module.exports = { + plugins: { + 'posthtml-expressions': { + locals: { + movies: require('./src/data/movies.json') + } + } + } +}; \ No newline at end of file diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico new file mode 100644 index 0000000..edda250 Binary files /dev/null and b/src/assets/favicon.ico differ diff --git a/src/data/movies.json b/src/data/movies.json new file mode 100644 index 0000000..4f1f5f2 --- /dev/null +++ b/src/data/movies.json @@ -0,0 +1,142 @@ +[ + { + "title": "Аватар", + "subtitle": "Avatar, 2009", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1599028/4adf61aa-3cb7-4381-9245-523971e5b4c8/136x204", + "link": "#" + }, + { + "title": "Интерстеллар", + "subtitle": "Interstellar, 2014", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1600647/430042eb-ee69-4818-aed0-a312400a26bf/136x204", + "link": "#" + }, + { + "title": "Начало", + "subtitle": "Inception, 2010", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1629390/8ab9a119-dd74-44f0-baec-0629797483d7/136x204", + "link": "#" + }, + { + "title": "Мстители: Война бесконечности", + "subtitle": "Avengers: Infinity War, 2018", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1773646/af92d310-4ae5-4daa-b42c-5bcc380c2e6e/136x204", + "link": "#" + }, + { + "title": "Матрица", + "subtitle": "The Matrix, 1999", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/4774061/cf1970bc-3f08-4e0e-a095-2fb57c3aa7c6/136x204", + "link": "#" + }, + { + "title": "Мстители: Финал", + "subtitle": "Avengers: Endgame, 2019", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1600647/ae22f153-9715-41bb-adb4-f648b3e16092/136x204", + "link": "#" + }, + { + "title": "Дюна", + "subtitle": "Dune: Part One, 2021", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/9eb762d6-4cdd-464f-9937-aebf30067acc/136x204", + "link": "#" + }, + { + "title": "Пятый элемент", + "subtitle": "The Fifth Element, 1997", + "details": "Франция • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1629390/9e9e2b2c-a3c1-462e-8d84-e6a19fbe5b9c/136x204", + "link": "#" + }, + { + "title": "Стражи Галактики", + "subtitle": "Guardians of the Galaxy, 2014", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1773646/2e6ab20b-7cf1-49e7-b465-bd5a71c13fa3/136x204", + "link": "#" + }, + { + "title": "Кракен", + "subtitle": "2025", + "details": "Россия • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/10809116/b722ab4d-497b-4a62-b243-95ca989401ff/136x204", + "link": "#" + }, + { + "title": "Темный рыцарь", + "subtitle": "The Dark Knight, 2008", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1599028/0fa5bf50-d5ad-446f-a599-b26d070c8b99/136x204", + "link": "#" + }, + { + "title": "Доктор Стрэндж", + "subtitle": "Doctor Strange, 2016", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/bb966b79-5b10-485d-88d7-fb6aeb79b185/136x204", + "link": "#" + }, + { + "title": "Мстители", + "subtitle": "The Avengers, 2012", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1898899/972b7f43-9677-40ce-a9bc-02a88ad3919d/136x204", + "link": "#" + }, + { + "title": "Терминатор 2: Судный день", + "subtitle": "Terminator 2: Judgment Day, 1991", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/10893610/2dd14742-f241-42ca-9db4-331e3a483c50/136x204", + "link": "#" + }, + { + "title": "Железный человек", + "subtitle": "Iron Man, 2008", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/4774061/c8e2f069-15f1-4803-95c0-aba858fec360/136x204", + "link": "#" + }, + { + "title": "Назад в будущее", + "subtitle": "Back to the Future, 1985", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1599028/73cf2ed0-fd52-47a2-9e26-74104360786a/136x204", + "link": "#" + }, + { + "title": "Марсианин", + "subtitle": "The Martian, 2015", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1900788/6f631486-e947-487d-94d6-41c2b5a8f5a0/136x204", + "link": "#" + }, + { + "title": "Кибердеревня", + "subtitle": "2023", + "details": "Россия • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/9784475/70c75cf3-f456-4474-a900-9a38c1bb2987/136x204", + "link": "#" + }, + { + "title": "Главный герой", + "subtitle": "Free Guy, 2021", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/6201401/db4fbef1-466a-4dec-9b7a-d4f13eb45738/136x204", + "link": "#" + }, + { + "title": "Первому игроку приготовиться", + "subtitle": "Ready Player One, 2018", + "details": "США • фантастика", + "img": "https://avatars.mds.yandex.net/get-kinopoisk-image/1946459/5ae82f4b-fd6a-46b5-b5ba-897106eb1eae/136x204", + "link": "#" + } +] \ No newline at end of file diff --git a/src/index.html b/src/index.html index 3313d57..d70da3d 100644 --- a/src/index.html +++ b/src/index.html @@ -4,8 +4,36 @@ Flickmate + + + + + - Flickmate is coming soon... +
+
+

Каталог фильмов

+
+
+
+ + + + +
+
+
\ No newline at end of file diff --git a/src/styles/common.css b/src/styles/common.css new file mode 100644 index 0000000..27361d8 --- /dev/null +++ b/src/styles/common.css @@ -0,0 +1,47 @@ +:root { + --color-bg: #121212; + --color-border: #4E4E50; + --color-h1: #FFFFFF; + --color-base: #E0E0E0; + --color-base2: #A0A0A0; + + --spacing: .25rem; + + --font-weight-bold: 700; + --font-weight-semibold: 600; + + --text-h1: clamp(20px, 4vw, 27px); + --text-h2: clamp(16px, 3vw, 21px); + --text-h3: clamp(14px, 2.5vw, 17px); + --text-base: clamp(12px, 2vw, 14px); +} + +*, +:after, +:before { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Inter, sans-serif; +} + +body { + font-family: Inter, sans-serif; + line-height: 1.5; + background-color: var(--color-bg); +} + +/* header */ +.main-header { + position: sticky; + top: calc(var(--spacing) * -3); + background-color: var(--color-bg); + padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 2); + padding-inline: calc(var(--spacing) * 6); + box-shadow: 6px 10px 10px 0 color-mix(in srgb, var(--color-bg) 50%, transparent); +} + +.main-header h1 { + font-size: var(--text-h1); + color: var(--color-h1); +} \ No newline at end of file diff --git a/src/styles/movie-list.css b/src/styles/movie-list.css new file mode 100644 index 0000000..e7ad8f9 --- /dev/null +++ b/src/styles/movie-list.css @@ -0,0 +1,82 @@ +.movie-list { + max-width: 1440px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: calc(var(--spacing) * 6); + padding-block: calc(var(--spacing) * 5); + padding-inline: calc(var(--spacing) * 4 + 1rem); + margin: 0 auto; +} + +.movie-item a { + text-decoration: none; + display: flex; + gap: calc(var(--spacing) * 3); + text-align: left; + background-color: transparent; + width: 100%; + padding-block: calc(var(--spacing) * 2); + padding-inline: calc(var(--spacing) * 3); + transition: all 0.3s ease-out; +} + +.movie-item a:hover { + padding-inline: calc(var(--spacing) / 2); +} + +.movie-item-poster { + flex-shrink: 0; +} + +.movie-item-poster img { + width: 102px; + height: 153px; + object-fit: cover; +} + +.movie-item-desc { + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.45rem; +} + +.movie-item-title { + font-weight: var(--font-weight-bold); + font-size: var(--text-h2); + color: var(--color-base); +} + +.movie-item-subtitle { + font-weight: var(--font-weight-semibold); + font-size: var(--text-h3); + color: var(--color-base2); +} + +.movie-item-details { + font-size: var(--text-base); + color: var(--color-base); +} + +@media (max-width: 1024px) { + .movie-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .movie-item a { + gap: calc(var(--spacing) * 4); + } +} + +@media (max-width: 600px) { + .movie-list { + grid-template-columns: minmax(0, 1fr); + padding-block: calc(var(--spacing)); + padding-inline: calc(var(--spacing) + 1rem); + gap: 0; + } + + .movie-item a { + gap: calc(var(--spacing) * 4); + } +} \ No newline at end of file diff --git a/src/styles/utils.css b/src/styles/utils.css new file mode 100644 index 0000000..3dd96bd --- /dev/null +++ b/src/styles/utils.css @@ -0,0 +1,5 @@ +.truncate { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} \ No newline at end of file