From a6d94e6753909ec88376227e518b44100c44807b Mon Sep 17 00:00:00 2001 From: Yevgeny Yakushev Date: Thu, 9 Oct 2025 01:05:57 +0300 Subject: [PATCH 1/3] implemented landing html --- src/assets/favicon.ico | Bin 0 -> 15406 bytes src/index.html | 279 +++++++++++++++++++++++++++++++++++++- src/styles/common.css | 47 +++++++ src/styles/movie-list.css | 82 +++++++++++ src/styles/utils.css | 5 + 5 files changed, 412 insertions(+), 1 deletion(-) create mode 100644 src/assets/favicon.ico create mode 100644 src/styles/common.css create mode 100644 src/styles/movie-list.css create mode 100644 src/styles/utils.css diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..edda250c9cbe2fe0966f8cda6c29074a17bb878d GIT binary patch literal 15406 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 S- 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..71caef7 --- /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.75rem; +} + +.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 From d4b8f49da6ffb147e8e11c534f7dc5699047cd2f Mon Sep 17 00:00:00 2001 From: Yevgeny Yakushev Date: Thu, 9 Oct 2025 02:38:09 +0300 Subject: [PATCH 2/3] fix gap --- src/styles/movie-list.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/movie-list.css b/src/styles/movie-list.css index 71caef7..e7ad8f9 100644 --- a/src/styles/movie-list.css +++ b/src/styles/movie-list.css @@ -38,7 +38,7 @@ min-width: 0; display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0.45rem; } .movie-item-title { From 64efe9289f432ecf658dcb1cede9c6010ba70fec Mon Sep 17 00:00:00 2001 From: Yevgeny Yakushev Date: Thu, 9 Oct 2025 02:38:39 +0300 Subject: [PATCH 3/3] use template engine --- package-lock.json | 199 ++++++++++++++++++++++++++++++- package.json | 3 +- posthtml.config.js | 9 ++ src/data/movies.json | 142 ++++++++++++++++++++++ src/index.html | 275 ++----------------------------------------- 5 files changed, 364 insertions(+), 264 deletions(-) create mode 100644 posthtml.config.js create mode 100644 src/data/movies.json 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/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 3f3df1a..d70da3d 100644 --- a/src/index.html +++ b/src/index.html @@ -17,270 +17,21 @@

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

- - - - - - - - - - - - - - - - - - - - + + +