diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..85e7c1d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/.idea/ diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..7dd1ed3 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/../../../../:\github\getflixProject\.idea/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml new file mode 100644 index 0000000..e604516 --- /dev/null +++ b/.idea/dataSources.xml @@ -0,0 +1,12 @@ + + + + + mariadb + true + org.mariadb.jdbc.Driver + jdbc:mariadb://localhost:3306 + $ProjectFileDir$ + + + \ No newline at end of file diff --git a/.idea/getflixProject.iml b/.idea/getflixProject.iml new file mode 100644 index 0000000..615944c --- /dev/null +++ b/.idea/getflixProject.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..b843835 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..f58331f --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..fb057b0 --- /dev/null +++ b/README.md @@ -0,0 +1,198 @@ +### Welcome to the webpage of The Theatre ! + +![Logo](pictures_README/Logo.png) + +![img.png](pictures_README/img.png) + +# Who + +Our Project Team consists of + +- [@Lord-of-Chicken](https://github.com/Lord-of-Chicken) +- [@gonzalovsilva](https://github.com/gonzalovsilva) +- [@robbertklockaerts](https://github.com/robbertklockaerts) +- [@Yuliya-beCode](https://github.com/Yuliya-beCode) + +### Tasks allocation + +| Gonçalo Silva| Gael Layeux | Robbert Klockaerts | Yuliya Bochkovskaya| +|:-----------:|:-----------:|:-----------:| :-----------:| +| Creation of the video catalog / debag comments part | A session system: registration, connection / disconnection / comments rights | Right to comment on the content | General administration of the project/Figma style | +| Include a search bar and sort by filters| php footer/header include | Admin dashboard | php insert video and info into info.php / draft info.php | +| Page or section that displays the top movies with the movie db API| Back office for user and comment management (CRUD) | Login form css / 404-Page | Footer/header templates, merging css in one file| +| General administration of the project drafting search flow chart| General administration of the project | General administration of the project| Register form css / README| + +If you have any questions in regards to our project, please do not hesitate to contact us directly on GitHub. Our +contact details are mentioned above. + + + +# What + +The Theatre is a streaming website created in html / css, javascript and php. + +* We got inspired by Netflix, Amazon Prime Video and other Popcorn Time ... Our goal was to display a catalog of movies. + +* We well spotted the similarities between these platforms (navbar, header, search tool, different categories of + videos…) + +Please find here below our very first sketches and UX prototype of our website which has been created at the planning stage the +Theatre :-) + +![Sketch one](pictures_README/img_1.png) + +![Sketch two](pictures_README/img_2.png) + +[First UX-Prototype of our website](https://www.figma.com/proto/LZLTLgveLvyu8aBJbc3u1G/The-Theater?node-id=66%3A0&scaling=scale-down&page-id=0%3A1) + +# How + +- To setup this development environment you will need to have **docker** and + **docker-compose** installed on you system. + +- The Theatre Website includes a search bar and sort by filters, which have been developed in accordance with the + flowchart attached below. + +![search_flowchart_dark](pictures_README/search_flowchart_dark.jpg) + +- The filter function of the Theatre displays the top movies. This function is enabled with the movie db API. This + product uses the TMDb API. + +- Our movie streaming website has the session system: registration, connection / disconnection. It also includes an + Admin Dashboard which allows to keep under control upocoming visitors of the website. + +- Registrants of the Theatre have the right to comment on the movies. + +- Back office of the Theatre for user and comment management (CRUD) is also available. + +# Why + +Creating the video streaming website is an excellent task to bring together all the knowledge acquired so far. During +this task we used use php, js, css, Docker, bootstrap and tested our skills in group work. We also used the TMDb API, +which is an important part of the video streaming websites. + +Today is a time of movie streaming websites. Netflix, Amazon Prime Video, Disney HotStar are making much more money than +the theatres themselves. They stream not only movies but also web series, documentaries, etc. This means that the +streaming websites should guarantee a large working area for Wep Developers in the future. + +The first commercial streaming product appeared in late 1992 and was named StarWorks. StarWorks enabled on-demand MPEG-1 +full-motion videos to be randomly accessed on corporate Ethernet networks. Starworks was from Starlight Networks, who +also pioneered live video streaming on Ethernet and via Internet Protocol over satellites with Hughes Network Systems. +The first commercial streaming product appeared in late 1992 and was named StarWorks. StarWorks enabled on-demand MPEG-1 +full-motion videos to be randomly accessed on corporate Ethernet networks. Starworks was from Starlight Networks, who +also pioneered live video streaming on Ethernet and via Internet Protocol over satellites with Hughes Network Systems. (source: Wikipedia) + + + +# When + +**29/03/21** + +- Meet +- Reading & discussing deliverables +- Distribution of roles +- Manufacturing of the first prototype in Figma +- A session system: connection / disconnection +- Search filter categories + +**30/03/21** + +- Meet +- Installation of Docker +- Drafting search flow chart +- Preparation of design basis html files +- A session system: connection / disconnection +- Search filter categories + +**31/03/21** + +- Meet +- Work on allowing categorization of TOP 10, genres, etc. +- A session system: connection / disconnection +- Creation of Admin Dashboard +- Design welcome & registration form + +**01/04/21** + +- Meet +- Work on allowing categorization of TOP 10, genres, etc. +- Registrants have the right to enter the admin/users dashboard +- Work on the Figma UX +- Check responsive style + +**02/04/21** + +- Meet +- Work on allowing categorization of TOP 10, genres, etc. +- Registrants have the right to enter the admin/users dashboard +- Preparation of html page info.html for sorting the upcoming videos and video details +- Work on database +- Work on css styles + +**06/04/21** + +- Meet +- Research to the "methode GET" +- A session system: registration +- Work on database +- Work on css styles + +**07/04/21** + +- Meet +- Connecting sort system with the html form info.php and search bar +- A session system: registration / work on database +- Work on comments on the content of movies +- Work on css styles + +**08/04/21** + +- Meet +- A session system: registration / work on database +- Work on comments on the content of movies +- Creating header / footer +- Work on css styles + +**09/04/21** + +- Meet +- A session system: registration / work on database +- Work on README file +- Work on comments on the content of movies +- First trial to combine the files +- Creation of 404 page +- php include header & footer + +**10/04/21** + +- Combine all css styles in one file + +**11/04/21** + +- Work on README file +- A session system: registration / work on database + +**12/04/21** + +- Meet +- Merging the files +- Debag comments part +- Work on 404-Page +- Work on merging css + +**13/04/21** + +- Deadline + +# Evaluation criterias -> self check + +- [x] We have realized all must-have features. +- [] There is a published GitHub page available. +- [] The code is well indented and commented. +- [x] The readme is clean and complete. +- [x] At least one Nice-to-have features is ok. +- [] The HTML and CSS pass the W3C Validation tool. +- [] The lighthouse test scores 90 at least on Performance, Best Practices, Accessibility and SEO. +- [] The code is well indented and commented. + + diff --git a/application/source/404.php b/application/source/404.php new file mode 100644 index 0000000..0e76a50 --- /dev/null +++ b/application/source/404.php @@ -0,0 +1,12 @@ + + +
; +
+

Hey you!

+

This page doesn't exist!

+

Sorry 404-page!

Return +
+
; + + + \ No newline at end of file diff --git a/application/source/account.php b/application/source/account.php index f51d974..219bc10 100644 --- a/application/source/account.php +++ b/application/source/account.php @@ -21,23 +21,24 @@ include('header.php'); ?> +
+

Bonjour username; ?>

- -

Bonjour username; ?>

- -
- + +
+
-
- +
+
- +
- +
+
- +
\ No newline at end of file diff --git a/application/source/admin.php b/application/source/admin.php index b6b1afd..697a396 100644 --- a/application/source/admin.php +++ b/application/source/admin.php @@ -31,7 +31,6 @@ .search_input { + caret-color: red; +} + +.searchbar:hover > .search_icon { + background: #fff; + color: #e74c3c +} + +.search_icon { + height: 40px; + width: 40px; + float: right; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + color: #fff; + text-decoration: none +} + +.errors { + text-align: center +} + +.video-responsive { + overflow: hidden; + padding-bottom: 56.25%; + position: relative; + height: 0 +} + +.video-responsive iframe { + left: 0; + top: 0; + height: 100%; + width: 100%; + position: absolute +} + +.navbar { + padding-left: 15px; + padding-right: 15px +} + +.active { + background-color: crimson; + color: white +} + +.navbar { + margin: 0; + padding: 0 +} + +ul, p { + margin: 0 +} + +.card { + cursor: pointer; + overflow: hidden; + -webkit-transition: 600ms -webkit-filter linear, transform 300ms; + -moz-transition: 600ms filter linear, transform 300ms; + -ms-transition: 600ms -ms-filter linear, transform 300ms; + -o-transition: 600ms -o-filter linear, transform 300ms; + transition: 600ms filter linear, 300ms -webkit-filter linear, transform 300ms; + +} + +.card:hover { + filter: grayscale(70%) brightness(150%); + -webkit-filter: grayscale(70%) brightness(150%); + transform: scale(1.03) +} + +.row-cols-5 > * { + max-width: 19% +} + +.card { + min-height: 100%; + max-height: 100%; + +} + +#filters ul { + padding: 0 +} + +#filters li { + display: inline; + list-style: none; + margin-bottom: 15px +} + +#filters button { + color: #fff; + background-color: #353b48; + border-radius: 10px; + padding: 5px 10px; + margin: 0 2.5px; + border: 0 +} + +#filters button:hover { + background-color: #555c6b +} + +#filters button.active { + background-color: #973535 +} + +#filters button.active:hover { + color: #fff; + background-color: #c24e4e +} + +#switch { + margin-top: 20px; + margin-bottom: 20px; + padding: 5px +} + +#switch_ctrl { + margin-right: 20px; + background-color: #303030; + border-radius: 10px; + overflow: hidden +} + +#switch_ctrl:first-child { + padding-left: 10px +} + +#switch_ctrl button { + color: #000; + background-color: #777; + border-radius: 0; + border-left: solid #303030 3px; + margin: 0 +} + +#switch_ctrl button.active { + color: #fff; + background-color: #973535 +} + +#switch_ctrl button.active:hover { + color: #fff; + background-color: #c24e4e +} + +#result { + margin-bottom: 20px +} + +h1 { + font-family: Arial, Helvetica, sans-serif; + text-align: center; + color: white; + position: relative; +} + +h2 { + font-family: Arial, Helvetica, sans-serif; + text-align: center; + color: white; +} + +#films { + color: wheat; + text-align: center; + list-style: none; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif +} + +.active { + background-color: crimson; + color: white +} + +.navbar { + padding-left: 15px; + padding-right: 15px +} + +.errors { + text-align: center +} + +.card { + opacity: .8; + display: flex +} + +.video { + display: flex; + flex-direction: column; + align-items: center +} + +.vid { + display: flex; + align-items: center; + flex-direction: column +} + +ul, p { + margin: 0 +} + +.card { + cursor: pointer; + overflow: hidden; + -webkit-transition: 600ms -webkit-filter linear, transform 300ms; + -moz-transition: 600ms filter linear, transform 300ms; + -ms-transition: 600ms -ms-filter linear, transform 300ms; + -o-transition: 600ms -o-filter linear, transform 300ms; + transition: 600ms filter linear, 300ms -webkit-filter linear, transform 300ms +} + +.card:hover { + filter: grayscale(70%) brightness(150%); + -webkit-filter: grayscale(70%) brightness(150%); + transform: scale(1.03) +} + +.searchbar button { + background: 0; + border: 0; + padding: 0; + outline: inherit +} + +.searchbar { + border-radius: 30px; + height: 50px; + background-color: #353b48; + padding: 5px +} + +.search_label { + color: #fff; + padding: 0 10px; + line-height: 40px +} + +.search_input { + color: #fff; + border: 0; + outline: 0; + background: 0; + width: 0; + caret-color: transparent; + line-height: 40px; + transition: width .4s linear + +} + +.searchbar:hover > .search_input { + padding: 0 10px; + width: 300px; + caret-color: red; + transition: width .4s cubic-bezier(0.645, 0.045, 0.355, 1) +} + +.searchbar:hover > .search_icon { + background: #fff; + color: #e74c3c +} + +.search_icon { + height: 40px; + width: 40px; + float: right; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + color: #fff; + text-decoration: none +} + +.row-cols-5 > * { + max-width: 19% +} + +.card { + min-height: 100%; + max-height: 100% +} + +#filters ul { + padding: 0 +} + +#filters li { + display: inline; + list-style: none; + margin-bottom: 15px +} + +#filters button { + color: #fff; + background-color: #353b48; + border-radius: 10px; + padding: 5px 10px; + margin: 0 2.5px; + border: 0 +} + +#filters button:hover { + background-color: #555c6b +} + +#filters button.active { + background-color: #973535 +} + +#filters button.active:hover { + color: #fff; + background-color: #c24e4e +} + +#switch { + margin-top: 20px; + margin-bottom: 20px; + padding: 5px +} + +#switch_ctrl { + margin-right: 20px; + background-color: #303030; + border-radius: 10px; + overflow: hidden +} + +#switch_ctrl:first-child { + padding-left: 10px +} + +#switch_ctrl button { + color: #000; + background-color: #777; + border-radius: 0; + border-left: solid #303030 3px; + margin: 0 +} + +#switch_ctrl button.active { + color: #fff; + background-color: #973535 +} + +#switch_ctrl button.active:hover { + color: #fff; + background-color: #c24e4e +} + +#result { + margin-bottom: 20px +} + +.active { + background-color: crimson; + color: white +} + +.navbar { + padding-left: 15px; + padding-right: 15px +} + +ul, p { + margin: 0 +} + +h1 { + margin-left: 20px +} + +h2 { + margin-left: 20px +} + +table, th { + border: 2px solid slategrey; + text-align: center; + margin-left: auto; + margin-right: auto; + font-size: large; + margin-top: 35px; + border-radius: 5px; + padding: 10px; + box-shadow: 1px 1px #707079 +} + +footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + +} + + +#theater { + border-radius: 3px +} + +.active { + background-color: crimson; + color: white +} + +.errors { + text-align: center +} + +#logo { + padding: 10px 0; + width: 60px; + display: flex +} + +.ibox { + clear: both; + margin-bottom: 25px; + margin-top: 0; + padding: 0 +} + +.ibox.collapsed .ibox-content { + display: none +} + +.ibox:after, .ibox:before { + display: table +} + +.ibox-title { + -moz-border-bottom-colors: none; + -moz-border-left-colors: none; + -moz-border-right-colors: none; + -moz-border-top-colors: none; + background-color: #fff; + border-color: #e7eaec; + border-image: none; + border-style: solid solid none; + border-width: 3px 0 0; + color: inherit; + margin-bottom: 0; + padding: 14px 15px 7px; + min-height: 48px +} + +.ibox-title h5 { + display: inline-block; + font-size: 14px; + margin: 0 0 7px; + padding: 0; + text-overflow: ellipsis +} + +.ibox-tools a { + cursor: pointer; + margin-left: 5px; + color: #c4c4c4 +} + +.ibox-tools { + display: block; + float: none; + margin-top: 0; + position: relative; + padding: 0; + text-align: right +} + +.ibox-content { + background-color: #fff; + color: inherit; + padding: 15px 20px 20px; + border-color: #e7eaec; + border-image: none; + border-style: solid solid none; + border-width: 1px 0 +} + +.ibox-footer { + color: inherit; + border-top: 1px solid #e7eaec; + font-size: 90%; + background: #fff; + padding: 10px 15px +} + +video { + width: 100% !important; + height: auto !important +} + +textarea { + width: 600px; + background-color: #fff; + resize: none +} + +.comment-box { + width: 500px; + margin-bottom: 4px; + position: relative +} + +.comment-box p { + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + line-height: 14px; + color: #282828; + font-weight: 100 +} + +.edit-form { + position: absolute; + top: 0; + right: 0 +} + +.edit-form button { + width: 55px; + height: 25px; + color: #282828; + background-color: #fff; + opacity: .5; + border: 0 +} + +.edit-form button:hover { + opacity: 1 +} + +ul, p { + margin: 0 +} diff --git a/application/source/footer.css b/application/source/footer.css deleted file mode 100644 index 8445fb6..0000000 --- a/application/source/footer.css +++ /dev/null @@ -1,6 +0,0 @@ -.navbar-brand -{ - position: relative; - width: 50px; - left: 15px; -} \ No newline at end of file diff --git a/application/source/footer.php b/application/source/footer.php index a1731bf..bcc0c85 100644 --- a/application/source/footer.php +++ b/application/source/footer.php @@ -1,5 +1,4 @@ -
- + @@ -15,10 +14,10 @@