diff --git a/package-lock.json b/package-lock.json index 371bfe4..f10cc4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,16 @@ "name": "bookmyshow", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.1.18", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "babel-plugin-macros": "^3.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-icons": "^4.3.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" } @@ -2030,6 +2035,51 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz", + "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.x" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -13233,6 +13283,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17445,6 +17503,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz", + "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -25449,6 +25536,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index f3ce333..3548353 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,16 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.1.18", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "babel-plugin-macros": "^3.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-icons": "^4.3.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 3784575..0000000 --- a/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/BookShow.css b/src/BookShow.css new file mode 100644 index 0000000..4c303a2 --- /dev/null +++ b/src/BookShow.css @@ -0,0 +1,338 @@ +.App { + text-align: center; + font-family: Roboto,sans-serif; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.movie-details{ + position: relative; + width: 100%; + overflow: hidden; + padding-bottom: 15px; + padding-top: 30px; + background: #333545; + box-sizing: border-box; +} +.movie-details-container{ + position: relative; + text-align: left; + display: inline-block; + width: 85%; + box-sizing: border-box; + background: #333545; + color: #999; + z-index: 3; +} +.movie-name{ + color: #f4f4f4; + float: left; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: 400; + vertical-align: baseline; + background: 0 0; +} +a{ + text-decoration: none; + text-decoration-line: none; + text-decoration-thickness: initial; + text-decoration-style: initial; + text-decoration-color: initial; + -webkit-tap-highlight-color: transparent; + margin: 0; + padding: 0; + font-size: 100%; + text-decoration: none; + vertical-align: baseline; + background: 0 0; + cursor: pointer; + font-weight: 400; +} +.movie-name>h1>a:hover{ + text-decoration: underline; +} +.ua-icon{ + margin-top: 0px; +} +.ua-icon>img{ + display: inline-block; + vertical-align: top; + width: 25px; + border-radius: 50%; +} +.heart-rating{ + margin-right: 15px; + margin-left: 15px; + vertical-align: baseline; + text-align: left; + display: inline-block; +} +.heart-icon{ + display: inline-block; +} +.heart-icon>img{ + width:20px; +} +.percentage{ + color: #fff; + display: inline-block; + margin: 0PX; + margin-left: 5px; + font-size: 18px; + font-weight: 700; + vertical-align: top; +} +.votes{ + font-size: 10px; + color: #fff; + display: inline-block; +} +.tags{ + margin-right: 15px; + display: inline-block; + vertical-align: top; +} +.genre-tag{ + font-size: 10px; + color: rgba(255,255,255,.5); + background: 0 0; + padding: 2px 8px; + border-radius: 11px; + border: 1px solid rgba(255,255,255,.5); + margin-left: 5px; + text-transform: uppercase; + display: inline-block; +} +.release-date ,.duration{ + margin-top: 5px; + font-size: 12px; + color: #fff; + display:inline-block; + vertical-align: top; + font-weight: 400; + +} +.clock-icon{ + padding-top: 5px; + display: inline-block; + vertical-align: top; + margin-left: 10px; + margin-right: 5px; +} +.clock-icon>img{ + width: 15px; +} +.movie-cast{ + float: right; + align-items: baseline; + margin-top: 30px; +} +.director-info{ + display: inline-block; + margin-right: 10px; +} +.movie-cast-title{ + font-size: 10px; + color: #f4f4f4; + margin-bottom:10px; +} +.movie-cast-image{ + width:40px; + border-radius: 50%; +} +.movie-cast-name{ + margin-top: 4px; + font-size: 10px; + font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; +} + +.cast-info,.individual-cast-info{ + display: inline-block; + margin-left: 10px; + text-overflow: ellipsis; + padding-left:10px; + padding-right: 20px; + +} + +/* filter-container */ + +.filter-container{ + background: #fff; + width:100%; + box-sizing: border-box; + border: 1px solid rgb(192, 192, 192); + display: flex; + justify-content: left; + align-items: center; +} +.slider-container{ + display: flex; + justify-content: center; + margin-left: 7%; +} +.slider{ + width: 350px; + overflow: scroll; +} +.slider::-webkit-scrollbar{ + display: none; +} +.slider-ul{ + list-style: none; + display: flex; + flex-wrap: wrap; + margin:0px; + padding: 0px; +} +.slider ul li{ + color: #666; + text-transform: uppercase; + padding:12px; + +} + + +li>.date{ + font-size: 16px; + font-weight: 600; + line-height: 18px; + color: #333; +} +li>.day{ + color: #666; + text-transform: uppercase; + font-size: 12px; + line-height: 14px; +} +.days-container:hover{ + color: red; +} + + +.link { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding: 8px 4px; + margin: 0 4px; + width:150px; + +} +.link a { + text-decoration: none; + color: #191919; + /* margin-right: 4px; */ + font-size: 14px; + font-weight: 600; + padding-top: 10px; + padding-bottom: 10px; + +} +.links-box{ + margin-left: 12%; +} + +.links-box ul { + list-style: none; + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 0px; + margin-bottom: 0; +} + +.links-box ul li { + display: inline-block; + /* margin-left: 8px; */ + position: relative; + border-right: 1px solid rgb(192, 192, 192); + border-left: 1px solid rgb(192, 192, 192); +} + +.fa{ + width:20px; +} +.dropdown-content { + position: absolute; + height: fit-content; + min-width: 120px; + background-color: #fff; + top: 54px; + left: 0px; + display: none; + border: 1px solid #cecece; + border-top: none; + z-index: 10; +} + +.dropdown-content a { + color: rgb(75, 75, 75); + padding: 15px 20px; + padding-right: 60px; + text-decoration: none; + display: block; + text-align: left; + font-size: 12px; + font-weight: 500; +} +.dropdown-content a:hover { + background-color: #d3d3d37a; +} + +.link:hover .dropdown-content { + display: block; +} +.down-icons{ + color:#999; + width: 30px; + size: 10px; + padding-left: 35px; + +} +.right-icon,.left-icon{ + color:#999; + margin-top: 15px; +} +.right-icon:hover,.left-icon:hover{ + color:#282c34; +} \ No newline at end of file diff --git a/src/BookShow.js b/src/BookShow.js new file mode 100644 index 0000000..fa1b3ca --- /dev/null +++ b/src/BookShow.js @@ -0,0 +1,120 @@ +import './BookShow.css'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { FaAngleDown } from 'react-icons/fa'; +import { FaChevronLeft } from 'react-icons/fa'; +import { FaChevronRight } from 'react-icons/fa'; + + +function App() { + return ( +
+
+
+
+
+
+

RRR

+
+ + + + + + 90 % +
+ 622134 VOTES + + + Action + Drama + Historical + Period + + March 25,2022 + + + + 3 hrs 02 mins +
+
+
+
+
DIRECTOR
+ +
S. S. Rajamouli
+
+
+
CAST & CREW
+
+ + +
Jr. NTR
+
+
+ +
Ram Cha
+
+
+ +
Alia Bhat
+
+
+ +
Ajay Devgn
+
+
+
+
+
+
+ +
+
+
+ +
+
    +
  • +
    07
    +
    TOM
    +
    • +
  • +
    07
    +
    TOM
    +
    • +
  • +
    07
    +
    TOM
    +
    • +
  • +
    07
    +
    TOM
    +
    • +
+
+ + + + +
+
+ +
+
+
+ ); +} + +export default App; diff --git a/src/image/clock_icon.png b/src/image/clock_icon.png new file mode 100644 index 0000000..6f0a1df Binary files /dev/null and b/src/image/clock_icon.png differ diff --git a/src/image/down_arrow.png b/src/image/down_arrow.png new file mode 100644 index 0000000..bb5b805 Binary files /dev/null and b/src/image/down_arrow.png differ diff --git a/src/image/heart.png b/src/image/heart.png new file mode 100644 index 0000000..e5ecd04 Binary files /dev/null and b/src/image/heart.png differ diff --git a/src/image/ua_icon.png b/src/image/ua_icon.png new file mode 100644 index 0000000..1f3968b Binary files /dev/null and b/src/image/ua_icon.png differ diff --git a/src/index.js b/src/index.js index ef2edf8..8d78528 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import App from './BookShow'; import reportWebVitals from './reportWebVitals'; ReactDOM.render(