Showing preview only (920K chars total). Download the full file or copy to clipboard to get everything.
Repository: QAZIMAAZARSHAD/Movie-Streaming-Website
Branch: master
Commit: 34e60610f375
Files: 58
Total size: 889.3 KB
Directory structure:
gitextract_pzue29uj/
├── .github/
│ ├── FUNDING.yml
│ ├── Issue_Template/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── labels.json
│ ├── pull_request_template.md
│ └── workflows/
│ ├── abc.css
│ └── issue-label.yml
├── .vscode/
│ └── settings.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Images/
│ ├── animal-world.ZW1zLXByZC1hc3NldHMvbW92aWVzL2JjNTBhMTY4LTczZTItNGQxZi05ZmUxLWQwN2ZlNThiZGVkYi53ZWJw
│ ├── aotd.jpg.crdownload
│ ├── baagi.jpg.crdownload
│ ├── ci.avif
│ ├── ci2.avif
│ └── msd.avif
├── LICENSE
├── README.md
├── action.html
├── anime.html
├── cards.css
├── comedy.html
├── contactus.html
├── crime.html
├── documentary.html
├── drama.html
├── dummy.html
├── fantasy.html
├── faq.html
├── footer.css
├── home.html
├── horror.html
├── index.html
├── js/
│ ├── main-min.js
│ ├── questions.js
│ └── script.js
├── kids.html
├── landpage.css
├── login.html
├── movie-min.html
├── movies.html
├── news.html
├── popular.html
├── premium.html
├── quiz.html
├── quizstyle.css
├── romance.html
├── signup.html
├── static/
│ ├── faq.css
│ ├── premium.css
│ ├── script.js
│ ├── style-min.css
│ └── style.css
├── suspense.html
├── tv.html
├── war.html
├── web-series.html
└── webStyle.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
github: QAZIMAAZARSHAD
================================================
FILE: .github/Issue_Template/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: 'Type: Bug'
assignees: ''
---
## Describe the bug
A clear and concise description of what the bug is.
## To Reproduce
Steps to reproduce the behavior:
1.
2.
3.
4.
## Expected behavior
A clear and concise description of what you expected to happen.
## Logs
If applicable, add logs to help explain your problem (e.g. the error message and/or exception traceback).
## Environment (please complete the following information):
- OS:
- Browser:
## Additional context
Add any other context about the problem here.
================================================
FILE: .github/Issue_Template/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: 'Type: Enhancement'
assignees: ''
---
## Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
## Describe the solution you'd like
A clear and concise description of what you want to happen.
## Additional context
Add any other context about the feature request here.
================================================
FILE: .github/labels.json
================================================
[
{
"name": "good first issue",
"description": "This issue is good for first timers",
"color": "a9e3ff"
},
{
"name": "🆘 help wanted",
"description": "This issue needs help ! Please help if possible !",
"color": "ff00ff"
},
{
"name": "🟥 Level4 ",
"description": "This issue will be considered as level 4 issue for LGM-SOC 21.Points will be 45.",
"color": "b60205"
},
{
"name": "🟧 Level3 ",
"description": "This issue will be considered as level 3 issue for LGM-SOC 21.Points will be 30.",
"color": "ff9f1c"
},
{
"name": "🟨 Level2 ",
"description": "This issue will be considered as level 2 issue for LGM-SOC 21.Points will be 15",
"color": "ffcc00"
},
{
"name": "🟩 Level1 ",
"description": "This issue will be considered as level 1 issue for LGM-SOC 21.Points will be 10",
"color": "cfda2c"
},
{
"name": "🟪 Level0 ",
"description": "This issue will be considered as level 0 issue for LGM-SOC 21.Points will be 5",
"color": "aa00de"
},
{
"name": " LGMSOC21 ",
"description": "This issue will be considered for LGM-SOC 21",
"color": "d93f0b"
},
{
"name": " DCP21 ",
"description": "This issue will be considered for DCP 21",
"color": "d93f0b"
},
{
"name": " 🤩 Up for Grab ",
"description": "This issue will is not assigned ! Grab It !",
"color": "bf00ff"
}
]
================================================
FILE: .github/pull_request_template.md
================================================
#### Fixes #(issue number)
<!-- Please Mention the issue number as Fixes #(issue number) instead of ISSUE #(issue number)
Example:
Fixes #5
(so that the issue automatically gets closed on successful merging of PR)
-->
#### Describe the changes you've made
A clear and concise description of what you have done to successfully close your assigned issue. Any new files? or anything you feel to let us know!
#### Deploy your changes to github page or netlify and mention deployment link:
Add the deployment link here.
#### Describe if there is any unusual behaviour of your code(Write `NA` if there isn't)
A clear and concise description of it.
#### Additional context (OPTIONAL)
Add any other context or screenshots about the feature request here.
#### Test plan (OPTIONAL)
A good test plan should give instructions that someone else can easily follow.
How someone can test your code?
#### Checklist
<!--
Example how to mark a checkbox :-
- [x] My code follows the code style of this project.
-->
- [ ] I have mentioned related issue number in PR description.
- [ ] I have added screenshots and related demo links of my changes..
- [ ] The title of my pull request is a short description of the requested changes.
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] Open Source Program names(OPTIONAL: If you participated in any open-source program then please mention the program name here)
================================================
FILE: .github/workflows/abc.css
================================================
================================================
FILE: .github/workflows/issue-label.yml
================================================
name: Default
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Label Syncer
uses: micnncim/action-label-syncer@v1.3.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_REPOSITORY: ${{ github.repository }}
with:
manifest: .github/labels.json
prune: false
================================================
FILE: .vscode/settings.json
================================================
{
"liveServer.settings.port": 5501
}
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Project maintainers and event organizers are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Project maintainers and event organizers have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Enforcement Guidelines
Project maintainers and event organizers will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
================================================
FILE: CONTRIBUTING.md
================================================
## Contribution Guidelines 🏗
Are we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and improve it further
To start contributing, follow the below guidelines:
**🌟.** Star🌟 the project to bookmark and appreciate the work.
**0.** Take a look at the existing [issues](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/issues) or create your own issues. Wait for the Issue to be assigned to you after which you can start working on it.
**1.** Fork [this](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website) repository.
**2.** Clone your forked copy of the project.
```
git clone --depth 1 https://github.com/<your_user_name>/Movie-Streaming-Website.git
```
**3.** Navigate to the project directory :file_folder: .
```
cd Movie-Streaming-Website
```
**4.** Add a reference(remote) to the original repository.
```
git remote add upstream https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website.git
```
**5.** Check the remotes for this repository.
```
git remote -v
```
**6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).
```
git pull upstream master
```
**7.** Create a new branch.
```
git checkout -b <your_branch_name>
```
**8.** Perform your desired changes to the code base.
<p align="center"><img width=35% src="https://media2.giphy.com/media/L1R1tvI9svkIWwpVYr/giphy.gif?cid=ecf05e47pzi2rpig0vc8pjusra8hiai1b91zgiywvbubu9vu&rid=giphy.gif"></p>
**9.** Track your changes:heavy_check_mark: .
```
git add .
```
**10.** Commit your changes .
```
git commit -m "Relevant message"
```
**11.** Push the committed changes in your feature branch to your remote repo.
```
git push -u origin <your_branch_name>
```
**12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repo you are suppose to make a PR to.
**13.** Add appropriate title and description to your pull request explaining your changes and efforts done.
**14.** Click on `Create Pull Request`.
**15.** Voila :exclamation: You have made a PR to the Apna Theatre project :boom: . Sit back patiently and relax while the project maintainers review your PR. Please understand, at times the time taken to review a PR can vary from a few hours to a few days.
<p align="center"><img src="https://media.tenor.com/images/b562ddcfb131e962f9dfa01bd32a30d1/tenor.gif" width=30%></p>
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 Qazi Maaz Arshad
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Movie Streaming Website 🎬
Are you a movie maniac, who loves to binge-watch awesome movies & series? If Yes, then you have come to the right place.
<p align="center"><img src="https://noelalanaleon.files.wordpress.com/2015/06/tyrion-29.gif" width = 70%></p>
Everyone loves to watch their favorite shows with friends and some snacks. But there is something that you might be missing out on!
<p align="center"><img src="https://i.pinimg.com/originals/43/c8/7e/43c87e08d3858256c4493e64b2c4c501.gif"></p>
So, what else do you need?🤔.
<p align="center"><img src="https://media.tenor.com/images/1498a68342ec3e96a8773995f59dfc39/tenor.gif" width = 70%></p>
Here is the answer: An awesome movie streaming website of yours that has all your favorites in one place!
<p align="center"><img src="https://www.system-concepts.com/wp-content/uploads/2020/02/excited-minions-gif.gif" width = 70%></p>
We already have Netflix, Amazon Prime, and Hotstar but they might get expensive sometimes. So what should we do? You must be wondering that making our own movie website might take time or require some web development knowledge, and after all of that will you still get something really cool?
<p align="center"><img src="https://i.pinimg.com/originals/a1/55/93/a1559307185334cb66fb0ccf5e787bd0.gif" width = 70%></p>
Well, take a chill pill. Don't be intimidated by these thoughts. __Apna Theatre Website__ is here to the rescue!
<p align="center"><img src="https://i.pinimg.com/originals/eb/39/9a/eb399a729c812376ca23c06df2d1e380.gif" width = 70%></p>
## A sneak peek into what we have here🙈 :
## Home Page
<p align="center"><img src="Readme_assets/home_pd.gif" width = 85% ></p>
## Sign-Up Page
<p align="center"><img src="Readme_assets/Singup_p.gif" width = 85% ></p>
## Kids Page
<p align="center"><img src="Readme_assets/kids_p.gif" width = 85% ></p>
## Search Function
<p align="center"><img src="Readme_assets/search_p.gif" width = 85% ></p>
## Contact Us Page
<p align="center"><img src="Readme_assets/Contactus_p.gif" width = 85% ></p>
## About
<div>
<div>
<img src="Images\Logo/logo1.png" height = "120" align = "left"/>
<div>
ApnaTheatre.com is a place for all movieholics & cinephiles to enjoy. This movie streaming website allows users to watch their favorite movies, tv shows, and web series from multiple genres like Crime, Comedy, Drama, Documentaries, Horror, Anime, Romance, War, Action, Fantasy, Kids and many more! </div>
</div>
<br>
## Link to the website
https://qazimaazarshad.github.io/Movie-Streaming-Website/
## Tech Stack
<img src="https://www.freepnglogos.com/uploads/html5-logo-png/html5-logo-best-web-design-psd-html-cms-development-ecommerce-6.png" width="200" alt="" />
## How to get started❓
You can refer to the following articles on the basics of Git and Github and also contact the Project Mentors, in case you are stuck:
- If you don't have git on your machine, [install](https://help.github.com/articles/set-up-git/) it.
- [Watch this video to get started, if you have no clue about open source](https://youtu.be/SL5KKdmvJ1U)
- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)
- [Cloning a Repo](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository)
- [How to create an Issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-issues/creating-an-issue)
- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)
- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)
## Contribution Guidelines 🏗
Are we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and improve it further
To start contributing, follow the below guidelines:
**🌟.** Star🌟 the repo to appreciate the work.
**0.** Take a look at the existing [issues](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/issues) or create your own issues. Wait for the Issue to be assigned to you after which you can start working on it.
**1.** Fork [this](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website) repository.
**2.** Clone your forked copy of the project.
```
git clone --depth 1 https://github.com/<your_user_name>/Movie-Streaming-Website.git
```
**3.** Navigate to the project directory :file_folder: .
```
cd Movie-Streaming-Website
```
**4.** Add a reference(remote) to the original repository.
```
git remote add upstream https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website.git
```
**5.** Check the remotes for this repository.
```
git remote -v
```
**6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).
```
git pull upstream master
```
**7.** Create a new branch.
```
git checkout -b <your_branch_name>
```
**8.** Perform your desired changes to the code base.
<p align="center"><img width=50% src="https://media2.giphy.com/media/L1R1tvI9svkIWwpVYr/giphy.gif?cid=ecf05e47pzi2rpig0vc8pjusra8hiai1b91zgiywvbubu9vu&rid=giphy.gif"></p>
**9.** Track your changes:heavy_check_mark: .
```
git add .
```
**10.** Commit your changes .
```
git commit -m "Relevant message"
```
**11.** Push the committed changes in your feature branch to your remote repo.
```
git push -u origin <your_branch_name>
```
**12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repo you are supposed to make a PR to.
**13.** Add an appropriate title and description to your pull request explaining your changes and efforts done.
**14.** Click on `Create Pull Request`.
**15.** Voila :exclamation: You have made a PR to the Apna Theatre project :boom: . Sit back patiently and relax while the project maintainers review your PR. Please understand, at times the time taken to review a PR can vary from a few hours to a few days.
<p align="center"><img src="https://media.tenor.com/images/b562ddcfb131e962f9dfa01bd32a30d1/tenor.gif" width=50%></p>
## Project Admin👨
<p align="center">
<img width=50% src="https://i.postimg.cc/qBmW9QyM/profile.gif">
</p>
<a href="https://www.linkedin.com/in/qazi-maaz-arshad/">
<h5 align="center"><b>Qazi Maaz Arshad</b></a>
## Open Source Programs we have been associated with
<p align="center">
<a href="https://lgmsoc.co/">
<img height=30% src="https://i.postimg.cc/2jPGcsqW/logo.png">
<a href="https://devincept.codes/projects.html">
<img width=50% src="https://raw.githubusercontent.com/smv1999/CompetitiveProgrammingQuestionBank/master/images/devincept.gif">
</p>
<a href="https://hacktoberfest.digitalocean.com/">
<img width=30% src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-hacktoberfest-full.f42e3b1.svg">
</p>
## Code of Conduct
<p align="center">
<a href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/blob/master/CODE_OF_CONDUCT.md">
<img width=55% src="https://media.giphy.com/media/qHRwTyhWIj4UU/200w_d.gif"></p>
<h5 align="center"><b>Click to read</b></a>
## License
<p align="center">
<a href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/blob/master/LICENSE">
<img width=55% src="https://media0.giphy.com/media/3ornjXbo3cjqh2BIyY/200.gif"></p>
<h5 align="center"><b>MIT License</b></a>
## Contributors
<a href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/graphs/contributors">
<img src="https://contrib.rocks/image?repo=QAZIMAAZARSHAD/Movie-Streaming-Website" />
</a>
================================================
FILE: action.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ApnaTheatre.com</title>
<link rel="shortcut icon" href="./Images/Logo/Title.jpeg" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href="./static/style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/style-min.css">
<link rel="stylesheet" href="cards.css">
</head>
<!------------------------Scroll to top button------------------------------------------------>
<style>
#scrollToTopButton{
position:fixed;
bottom: 40px;
right: 25px;
font-size: 25px;
z-index: 99;
width: 50px;
height: 50px;
background-color:red;
color:black;
border: none;
cursor: pointer;
outline: none;
padding: 6px;
border-radius: 50%;
}
#scrollToTopButton:hover, i:hover {
background-color:white;
color:red;
}
#nav:hover
{
background-color:#e60e23!important;
}
.container {
text-align: center;
}
.navbar-nav{
display: flex;
align-items: center;
padding: 0px 7.5px;
}
.nav-item :hover{
margin-bottom: 10px;
}
#header-nav .navbar-nav .nav-item .nav-link:hover {
color: red;
text-decoration: none; /* Remove underline */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */
text-shadow: 0 0 10px red; /* Add glowing effect */
}
</style>
<body>
<div class="scroll-bar">
<!-- navbar starts -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark" id="header-nav">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"><img class="logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<button id="nav" class="navbar-toggler" id="nav" style="background-color:#8b0000" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-color:dark-grey;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="movies.html">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="web-series.html">Web Series</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kids.html">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv.html">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premium.html">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
<li>
<!-- Genre dropdown starts-->
<div>
<div class="dropdown" style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton" style="font-size:20px;">
Genres
</button>
<div class="dropdown-content" style="color: white;">
<a href="popular.html">Popular</a>
<a href="crime.html">Crime</a>
<a href="suspense.html">Suspense & Thriller</a>
<a href="action.html">Action</a>
<a href="fantasy.html">Sci-Fi & Fantasy</a>
<a href="documentary.html">Documentary</a>
<a href="horror.html">Horror</a>
<a href="drama.html">Drama</a>
<a href="war.html">War & Politics</a>
<a href="comedy.html">Comedy</a>
<a href="romance.html">Romance</a>
<a href="anime.html">Anime</a>
</div>
</div>
</div>
<!-- Genre dropdown ends-->
</li>
<div style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<li>
<button type="button" class="btn btn-light" onclick="logout()">Logout</button>
</li>
</div>
</ul>
<form id="searchForm" class="d-flex">
<input class="form-control me-2" type="text" id="searchText" placeholder="Search" aria-label="Search">
<button class="btn btn-danger" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- navbar ends -->
<div class="maincontainer">
<div class="container">
<div id="movies" class="row"></div>
</div>
<hr>
<h2>Action</h2>
<hr>
<div class="container" id="Movies">
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/got.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 35px;">Game of Thrones</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2011</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">8</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.2</button>
<br>
<br>
</p>
<p class="para_i">Nine noble families wage war against each other in order to gain control over the mythical land of Westeros.
Meanwhile, a force is rising after millenniums and threatens the existence of living men.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin()">▶Trailer</button>
<script type="text/javascript">
function openWin(){
window.open("https://youtu.be/gcTkNV5Vg1E","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Game of Thrones</b>
<br>
IMDb - 9.2
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/zinda.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Zindabaad</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2018</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">7.4</button>
<br />
<br />
</p>
<p class="para_i">Zindabaad is a political - action thriller, jointly produced by Vikram Bhatt's VB on the web and Jio cinema</p>
<button class="trailer_i" type="submit" value="" onclick="openWin1()">▶Trailer</button>
<script type="text/javascript">
function openWin1(){
window.open("https://youtu.be/xIKkJk3qvjU","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Zindabaad</b>
<br>
IMDb - 7.4
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/vikings.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Vikings</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2013</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">5</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.5</button>
<br />
<br />
</p>
<p class="para_i">Ragnar Lothbrok, a legendary Norse hero, is a mere farmer who rises up to become a fearless warrior and commander of the Viking tribes with the support of his equally ferocious family.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin2()">▶Trailer</button>
<script type="text/javascript">
function openWin2(){
window.open("https://youtu.be/9GgxinPwAGc","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Vikings</b>
<br>
IMDb - 8.5
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/gangs of wassepur.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Gangs of Wasseypur</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2012</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">2h40m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.2</button>
<br />
<br />
</p>
<p class="para_i">Gangs of Wasseypur is a 2012 Indian two-part crime film produced and directed by Anurag Kashyap, and written by Kashyap and Zeishan Quadri.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin3()">▶Trailer</button>
<script type="text/javascript">
function openWin3(){
window.open("https://youtu.be/j-AkWDkXcMY","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Gangs of Wasseypur</b>
<br>
IMDb - 8.2
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/arrow.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Arrow</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2012</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">8</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">7.5</button>
<br />
<br />
</p>
<p class="para_i">After mastering the skill of archery on a deserted island, multi-millionaire playboy Oliver Queen returns to his city to take on the vigilante persona of Arrow to fight crime and corruption.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin4()">▶Trailer</button>
<script type="text/javascript">
function openWin4(){
window.open("https://youtu.be/ofzPONG8hDU","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Arrow</b>
<br>
IMDb - 7.5
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/apharan.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Apharan</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2018</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.3</button>
<br />
<br />
</p>
<p class="para_i">Rudra, a senior inspector, is lured into kidnapping a young girl at the behest of her mother</p>
<button class="trailer_i" type="submit" value="" onclick="openWin5()">▶Trailer</button>
<script type="text/javascript">
function openWin5(){
window.open("https://youtu.be/CxNYucYVEkQ","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Apharan</b>
<br>
IMDb - 8.3
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/war.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>War</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">2h34m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">6.5</button>
<br />
<br />
</p>
<p class="para_i">Kabir, a secret agent, goes rogue after a mission to catch a terrorist goes awry. However, his boss sends Khalid, another agent and his student, to track him down.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin6()">▶Trailer</button>
<script type="text/javascript">
function openWin6(){
window.open("https://youtu.be/tQ0mzXRk-oM","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>War</b>
<br>
IMDb - 6.5
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/kgf.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>KGF</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2018</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">2h50m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.3</button>
<br />
<br />
</p>
<p class="para_i">Rocky, a young man, seeks power and wealth in order to fulfil a promise to his dying mother. His quest takes him to Mumbai, where he gets involved with the notorious gold mafia.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin7()">▶Trailer</button>
<script type="text/javascript">
function openWin7(){
window.open("https://youtu.be/-KfsY-qwBS0","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>KGF</b>
<br>
IMDb - 8.3
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/django.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Django Unchained</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2012</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">2h45m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.4</button>
<br />
<br />
</p>
<p class="para_i">When Django, a slave, is freed, he joins forces with a bounty hunter to rescue his wife, who has been enslaved by Calvin, a hard-hearted plantation owner.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin8()">▶Trailer</button>
<script type="text/javascript">
function openWin8(){
window.open("https://youtu.be/_iH0UBYDI4g","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Django Unchained</b>
<br>
IMDb -8.4
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/endgame.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Avengers : Endgame</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">3h2m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.4</button>
<br />
<br />
</p>
<p class="para_i">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin9()">▶Trailer</button>
<script type="text/javascript">
function openWin9(){
window.open("https://youtu.be/TcMBFSGVi1c","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Avengers : Endgame</b>
<br>
IMDb - 8.4
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/infinity.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Avengers : Infinity War</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2018</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">2h40m<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.4</button>
<br />
<br />
</p>
<p class="para_i">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin10()">▶Trailer</button>
<script type="text/javascript">
function openWin10(){
window.open("https://youtu.be/6ZfuNTqbHE8","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Avengers : Infinity War</b>
<br>
IMDb - 8.4
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/ter.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Terminator Series</h1>
<button class="btn_i b3_i" title="Year" style="color:white">1984</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">1h48m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.0</button>
<br />
<br />
</p>
<p class="para_i">A cyborg assassin is sent back in time to kill Sarah, a waitress, in a bid to stop her son who will wage a long war against his enemy in the future unless the course of history is altered.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin11()">▶Trailer</button>
<script type="text/javascript">
function openWin11(){
window.open("https://youtu.be/k64P4l2Wmeg","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Terminator Series</b>
<br>
IMDb - 8.0
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/star.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Star Wars Series</h1>
<button class="btn_i b3_i" title="Year" style="color:white">1977</button>
<button class="btn_i b2_i" title="Minutes" style="color:white">2h5m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.6</button>
<br />
<br />
</p>
<p class="para_i">After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin12()">▶Trailer</button>
<script type="text/javascript">
function openWin12(){
window.open("https://youtu.be/vZ734NWnAHA","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Star Wars Series</b>
<br>
IMDb - 8.6
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------Footer-------------------------------->
<div id="waterdrop"></div>
<footer class="footer">
<hr class="footer-hr">
<div class="footer-content">
<div class="footer-left">
<a href="home.html"><img class="footer-logo" src="Images/TheaterLogoFinal.png" alt="" width="30" height="24"></a>
<p class="footer-bottom-tagline">Watch! Chill! Repeat!</p>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Follow Us</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f facebook" style="color:red"></i></a>
<a class="footer-links" href="https://twitter.com/login?lang=en" target="_blank"><i class="fab fa-twitter twitter" style="color:red"></i></a>
<a class="footer-links" href="https://www.linkedin.com/login" target="_blank"><i class="fab fa-linkedin linkedin" style="color:red"></i></a>
<a class="footer-links" href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram instagram" style="color:red"></i></a>
<a class="footer-links" href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website" target="_blank"><i class="fab fa-github github" style="color:red"></i></a>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Services</h2>
<ul class="footer-middle-list">
<li class="footer-middle-list-item"><a href="home.html">Enjoy Latest Movies</a> </li>
<li class="footer-middle-list-item"><a href="web-series.html">Watch Web-Series</a> </li>
<li class="footer-middle-list-item"><a href="kids.html">Everything for Kids</a> </li>
<li class="footer-middle-list-item"><a href="news.html">Coming soon</a> </li>
<li class="footer-middle-list-item"><a href="premium.html">Get Premium Subscription</a> </li>
<li class="footer-middle-list-item"><a href="faq.html">FAQ</a> </li>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Try Our App</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="#"><i class="fab fa-google-play" style="color:red"></i></a>
<a class="footer-links" href="#"><i class="fab fa-app-store-ios" style="color:red"></i></a>
</ul>
</div>
<div class="footer-right">
<p class="footer-links">
<h2 class="footer-heading">Contact Us</h2>
<p class="footer-bottom-tagline">Feel free to contact us.</p>
<a class="footer-contact-button" href="contactus.html">Contact</a>
</p>
</div>
</div>
<hr class="footer-hr">
<div class="footer-copyright">
<p>Copyright © and ® Since
<script>
document.write(new Date().getFullYear())
</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>
</div>
</footer>
<!----------------------Scroll to top button--------------------------------------------->
<button id="scrollToTopButton" title="Go to top" class="ml-5" >
<i class="fa fa-angle-double-up" aria-hidden="true" ></i>
</button>
<script>
$(document).ready(function(){
var scrollTopButton = document.getElementById("scrollToTopButton");
// window.onscroll = function () { scrollFunction() };
// function scrollFunction() {
// if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
// scrollTopButton.style.display = "block";
// } else {
// scrollTopButton.style.display = "none";
// }
// }
$("#scrollToTopButton").click(function(){
$('html ,body').animate({scrollTop : 0},800)
});
});
</script>
<script>
function logout(){
window.location.replace("login.html");
}
</script>
<!-- offcanva JS and footer js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main-min.js"></script>
<script>
jQuery('#waterdrop').raindrops({
color: '#292c2f',
canvasHeight: 150,
density: 0.1,
frequency: 20
});
</script>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="./static/script.js"></script>
</body>
</html>
================================================
FILE: anime.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ApnaTheatre.com</title>
<link rel="shortcut icon" href="./Images/Logo/Title.jpeg" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href="./static/style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/style-min.css">
<link rel="stylesheet" href="cards.css">
<!------------------------Scroll to top button------------------------------------------------>
<style>
#scrollToTopButton{
position:fixed;
bottom: 40px;
right: 25px;
font-size: 25px;
z-index: 99;
width: 50px;
height: 50px;
background-color:red;
color:black;
border: none;
cursor: pointer;
outline: none;
padding: 6px;
border-radius: 50%;
}
#scrollToTopButton:hover, i:hover {
background-color:white;
color:red;
}
.scroll-bar {
height: auto;
width: auto;
margin: auto;
overflow-y: auto;
overflow-x: hidden;
max-width: 100%;
}
::-webkit-scrollbar-track {
border: 5px solid #2c2f30;
background-color: red;
}
::-webkit-scrollbar {
width: 15px;
background-color: #2c2f30;
}
::-webkit-scrollbar-thumb {
background-color: black;
border-radius: 10px;
}
* {
margin: 0;
padding: 0;
}
.menu li a:hover {
color: red !important;
opacity: 0.5;
}
#variety {
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.logo {
width: 81px;
height: 52px;
}
.nav-item :hover{
margin-bottom: 10px;
}
#header-nav .navbar-nav .nav-item .nav-link:hover {
color: red;
text-decoration: none; /* Remove underline */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */
text-shadow: 0 0 10px red; /* Add glowing effect */
}
.logo {
width: 110px;
height: 90px;
padding: 3px;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="scroll-bar">
<!-- navbar starts -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark" id="header-nav">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"><img class="logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<button id="nav" class="navbar-toggler" id="nav" style="background-color:#8b0000" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-color:dark-grey;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="movies.html">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="web-series.html">Web Series</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kids.html">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv.html">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premium.html">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
<li>
<!-- Genre dropdown starts-->
<div>
<div class="dropdown" style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton" style="font-size:20px;">
Genres
</button>
<div class="dropdown-content" style="color: white;">
<a href="popular.html">Popular</a>
<a href="crime.html">Crime</a>
<a href="suspense.html">Suspense & Thriller</a>
<a href="action.html">Action</a>
<a href="fantasy.html">Sci-Fi & Fantasy</a>
<a href="documentary.html">Documentary</a>
<a href="horror.html">Horror</a>
<a href="drama.html">Drama</a>
<a href="war.html">War & Politics</a>
<a href="comedy.html">Comedy</a>
<a href="romance.html">Romance</a>
<a href="anime.html">Anime</a>
</div>
</div>
</div>
<!-- Genre dropdown ends-->
</li>
<div style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<li>
<button type="button" class="btn btn-light" onclick="logout()">Logout</button>
</li>
</div>
</ul>
<form id="searchForm" class="d-flex">
<input class="form-control me-2" type="text" id="searchText" placeholder="Search" aria-label="Search">
<button class="btn btn-danger" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- navbar ends -->
<div class="maincontainer">
<h2>ANIME</h2>
<hr>
<div class="container">
<div id="movies" class="row"></div>
</div>
<hr>
<div class="container" id="TV shows">
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/deathnote.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Death Note</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2006</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">37<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.0</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">An intelligent high school student goes on a secret crusade to eliminate criminals from the world after discovering a notebook capable of killing anyone whose name is written into it.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin()">▶Trailer</button>
<script type="text/javascript">
function openWin(){
window.open("https://youtu.be/NlJZ-YgAt-c","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>DeathNote</b>
<br>
IMDb - 9.0
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/naruto.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Naruto</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2002</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">220<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.3</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">Naruto Uzumaki, a mischievous adolescent ninja, struggles as he searches for recognition and dreams of becoming the Hokage, the village's leader and strongest ninja.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin1()">▶Trailer</button>
<script type="text/javascript">
function openWin1(){
window.open("https://youtu.be/-G9BqkgZXRA","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Naruto</b>
<br>
IMDb - 8.3
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/Aot.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Attack on Titan</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2013</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">75<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.0</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">After his hometown is destroyed and his mother is killed, young Eren Jaeger vows to cleanse the earth of the giant humanoid Titans that have brought humanity to the brink of extinction.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin2()">▶Trailer</button>
<script type="text/javascript">
function openWin2(){
window.open("https://youtu.be/o_go-8TFBXs","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Attack on Titan</b>
<br>
IMDb - 9.0
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/demonSlayer.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Demon Slayer</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">26<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.7</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">A family is attacked by demons and only two members survive - Tanjiro and his sister Nezuko, who is turning into a demon slowly. Tanjiro sets out to become a demon slayer to avenge his family and cure his sister.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin3()">▶Trailer</button>
<script type="text/javascript">
function openWin3(){
window.open("https://youtu.be/VQGCKyvzIM4","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Demon Slayer</b>
<br>
IMDb - 8.7
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/one-punch-man.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">One Punch Man</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2015</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">24<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.8</button>
</div>
<br />
<br />
</p>
<p class="para_i">The story of Saitama, a hero that does it just for fun & can defeat his enemies with a single punch.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin4()">▶Trailer</button>
<script type="text/javascript">
function openWin4(){
window.open("https://youtu.be/2JAElThbKrI","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>One Punch Man</b>
<br>
IMDb - 8.8
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/tokyo.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Tokyo Ghoul</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2014</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">12<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">7.8</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -40px;">A Tokyo college student is attacked by a ghoul, a superpowered human who feeds on human flesh. He survives, but has become part ghoul and becomes a fugitive on the run.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin5()">▶Trailer</button>
<script type="text/javascript">
function openWin5(){
window.open("https://youtu.be/ETHpMMV8rJU","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Tokyo Ghoul</b>
<br>
IMDb - 7.8
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/fullMetal.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Fullmetal Alchemist</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2003</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">51<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.5</button>
</div>
<br />
<br />
</p>
<p class="para_i" style="margin-top: -40px;">When a failed alchemical ritual leaves brothers Edward and Alphonse Elric with severely damaged bodies, they begin searching for the one thing that can save them, the fabled philosopher's stone.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin6()">▶Trailer</button>
<script type="text/javascript">
function openWin6(){
window.open("https://youtu.be/2Dsa8j_usqI","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Fullmetal Alchemist</b>
<br>
IMDb - 8.5
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/onePiece.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>One Piece</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">1999</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">981<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.8</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">Follows the adventures of Monkey D. Luffy and his pirate crew in order to find the greatest treasure ever left by the legendary Pirate, Gold Roger. The famous mystery treasure named "One Piece".</p>
<button class="trailer_i" type="submit" value="" onclick="openWin7()">▶Trailer</button>
<script type="text/javascript">
function openWin7(){
window.open("https://youtu.be/S8_YwFLCh4U","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>One Piece</b>
<br>
IMDb - 8.8
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/hunter.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Hunter x Hunter</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2011</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">148<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.0</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">Gon Freecss aspires to become a Hunter, an exceptional being capable of greatness. With his friends and his potential, he seeks for his father who left him when he was younger.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin8()">▶Trailer</button>
<script type="text/javascript">
function openWin8(){
window.open("https://youtu.be/d6kBeJjTGnY","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Hunter x Hunter</b>
<br>
IMDb - 9.0
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/code-geass.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Code Geass</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2006</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">50<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.7</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">After being given a mysterious power to control others, an outcast prince becomes the masked leader of the rebellion against an all powerful empire.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin9()">▶Trailer</button>
<script type="text/javascript">
function openWin9(){
window.open("https://youtu.be/v-AGjx0N24U","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i" onclick="openMovieWin9()">▶Play</button>
</div>
<script type="text/javascript">
function openMovieWin9(){
window.open("https://youtube.com/playlist?list=PLxSscENEp7JhJi1De2SBVmkdPbKKUHZcg","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script>
</div>
<div class="flim">
<b>Code Geass</b>
<br>
IMDb - 8.7
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/gintama.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Gintama</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2005</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">367<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.6</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -35px;">In an era where aliens have invaded and taken over feudal Tokyo, an unemployed samurai finds work however he can.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin10()">▶Trailer</button>
<script type="text/javascript">
function openWin10(){
window.open("https://youtu.be/YQC3ot0IjiA","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Gintama</b>
<br>
IMDb - 8.7
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/psycho-pass.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Psycho Pass</h1>
<div class="btnContainer">
<button class="btn_i b3_i" title="Year" style="color:white">2012</button>
<button class="btn_i b2_i" title="Episodes" style="color:white">41<button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.2</button>
</div>
<br />
<br />
</p>
<p class="para_i"style="margin-top: -40px;">Believing in humanity and order, policewoman Akane Tsunemori obeys the ruling, computerized, precognitive Sibyl System. But when she faces a criminal mastermind who can elude this "perfect" system, she questions both Sibyl and herself</p>
<button class="trailer_i" type="submit" value="" onclick="openWin11()">▶Trailer</button>
<script type="text/javascript">
function openWin11(){
window.open("https://youtu.be/YzuJnyebc40","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Psycho Pass</b>
<br>
IMDb - 8.2
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------Footer-------------------------------->
<div id="waterdrop"></div>
<footer class="footer">
<hr class="footer-hr">
<div class="footer-content">
<div class="footer-left">
<a href="index.html"><img class="footer-logo" src="Images/TheaterLogoFinal.png" alt="" width="30" height="24"></a>
<p class="footer-bottom-tagline">Watch! Chill! Repeat!</p>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Follow Us</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f facebook" style="color:red"></i></a>
<a class="footer-links" href="https://twitter.com/login?lang=en" target="_blank"><i class="fab fa-twitter twitter" style="color:red"></i></a>
<a class="footer-links" href="https://www.linkedin.com/login" target="_blank"><i class="fab fa-linkedin linkedin" style="color:red"></i></a>
<a class="footer-links" href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram instagram" style="color:red"></i></a>
<a class="footer-links" href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website" target="_blank"><i class="fab fa-github github" style="color:red"></i></a>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Services</h2>
<ul class="footer-middle-list">
<li class="footer-middle-list-item"><a href="index.html">Enjoy Latest Movies</a> </li>
<li class="footer-middle-list-item"><a href="web-series.html">Watch Web-Series</a> </li>
<li class="footer-middle-list-item"><a href="kids.html">Everything for Kids</a> </li>
<li class="footer-middle-list-item"><a href="news.html">Coming soon</a> </li>
<li class="footer-middle-list-item"><a href="index.html">Get Premium Subscription</a> </li>
<li class="footer-middle-list-item"><a href="faq.html">FAQ</a> </li>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Try Our App</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="#"><i class="fab fa-google-play" style="color:red"></i></a>
<a class="footer-links" href="#"><i class="fab fa-app-store-ios" style="color:red"></i></a>
</ul>
</div>
<div class="footer-right">
<p class="footer-links">
<h2 class="footer-heading">Contact Us</h2>
<p class="footer-bottom-tagline">Feel free to contact us.</p>
<a class="footer-contact-button" href="contactus.html">Contact</a>
</p>
</div>
</div>
<hr class="footer-hr">
<div class="footer-copyright">
<p>Copyright © and ® Since
<script>
document.write(new Date().getFullYear())
</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>
</div>
</footer>
<!---------scroll back to top button-->
<button id="scrollToTopButton" title="Go to top" class="ml-5" >
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</button>
<script>
$(document).ready(function(){
var scrollTopButton = document.getElementById("scrollToTopButton");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopButton.style.display = "block";
} else {
scrollTopButton.style.display = "none";
}
}
$("#scrollToTopButton").click(function(){
$('html ,body').animate({scrollTop : 0},800)
});
});
</script>
<script>
function logout(){
window.location.replace("login.html");
}
</script>
<!-- offcanva JS and footer js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main-min.js"></script>
<script>
jQuery('#waterdrop').raindrops({
color: '#292c2f',
canvasHeight: 150,
density: 0.1,
frequency: 20
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="./static/script.js"></script>
</body>
</html>
================================================
FILE: cards.css
================================================
*{
font-family: 'Ubuntu', sans-serif;
}
.poster, .movie_card {
box-shadow: 0 0 10px red !important;
}
.flip-card_i{
position: relative;
background-color: transparent;
width: 250px;
height: 360px;
perspective: 1000px;
cursor: default;
}
@media only screen and (max-width: 298px) {
.flip-card_i{
width: 200px;
height: 400px;
}
.flip-card-back_i{
width: 200px !important;
height: 400px !important;
}
.flip-card_i img {
height: 400px !important;
width: 200px !important;
}
.flip-card-back_i h1 {
font-size: 32px;
}
}
h1{
font-size: 45px;
}
.flip-card-inner_i {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
cursor: default;
}
.flip-card_i:hover .flip-card-inner_i {
transform: rotateY(180deg);
}
.btn_i{
width: 50px;
height: 35px;
border:none;
border:solid 2px grey;
border-radius: 5px;
background: rgba(255, 255, 255,0);
font-size: 1em;
}
.b1_i{
margin-left: 5px;
margin-right: 5px;
}
.b2_i{
margin-left: 10px;
margin-right: 10px;
}
.b3_i{
margin-left: 10px;
margin-right: 5px;
}
.b4_i{
margin-bottom: 2px;;
width: 90px;
height: 35px;
margin-top: auto;
border:none;
border:solid 2px white;
border-radius: 5px;
background-color: #e7e7e7;
color: black;
font-size: 1em;
}
.trailer_i{
width: 90px;
height: 35px;
margin-top: auto;
border:none;
border:solid 2px white;
border-radius: 5px;
background-color: #e7e7e7;
color: black;
font-size: 1em;
}
.para_i{
font-size: 0.8em;
margin-bottom: 5px;
}
.flip-card-front_i, .flip-card-back_i {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.form-group1_i {
float:left;
}
.form-group2_i{
float: none;
}
.form-group3_i {
float:right;
}
.flip-card-front_i {
background-color: #bbb;
color: black;
}
.flip-card-back_i {
width: 250px;
height: 360px;
background-image: linear-gradient(black,#8B0000);
color: white;
transform: rotateY(180deg);
cursor: default;
}
================================================
FILE: comedy.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ApnaTheatre.com</title>
<link rel="shortcut icon" href="./Images/Logo/Title.jpeg" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="./static/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/style-min.css">
<link rel="stylesheet" href="cards.css">
</head>
<!------------------------Scroll to top button------------------------------------------------>
<style>
#scrollToTopButton{
position:fixed;
bottom: 40px;
right: 25px;
font-size: 25px;
z-index: 99;
width: 50px;
height: 50px;
background-color:red;
color:black;
border: none;
cursor: pointer;
outline: none;
padding: 6px;
border-radius: 50%;
}
#scrollToTopButton:hover, i:hover {
background-color:white;
color:red;
}
#nav:hover
{
background-color:#e60e23!important;
}
.container {
text-align: center;
}
.nav-item :hover{
margin-bottom: 10px;
}
#header-nav .navbar-nav .nav-item .nav-link:hover {
color: red;
text-decoration: none; /* Remove underline */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */
text-shadow: 0 0 10px red; /* Add glowing effect */
}
</style>
<body>
<div class="scroll-bar">
<!-- navbar starts -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark" id="header-nav">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"><img class="logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<button id="nav" class="navbar-toggler" id="nav" style="background-color:#8b0000" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-color:dark-grey;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="movies.html">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="web-series.html">Web Series</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kids.html">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv.html">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premium.html">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
<li>
<!-- Genre dropdown starts-->
<div>
<div class="dropdown" style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton" style="font-size:20px;">
Genres
</button>
<div class="dropdown-content" style="color: white;">
<a href="popular.html">Popular</a>
<a href="crime.html">Crime</a>
<a href="suspense.html">Suspense & Thriller</a>
<a href="action.html">Action</a>
<a href="fantasy.html">Sci-Fi & Fantasy</a>
<a href="documentary.html">Documentary</a>
<a href="horror.html">Horror</a>
<a href="drama.html">Drama</a>
<a href="war.html">War & Politics</a>
<a href="comedy.html">Comedy</a>
<a href="romance.html">Romance</a>
<a href="anime.html">Anime</a>
</div>
</div>
</div>
<!-- Genre dropdown ends-->
</li>
<div style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<li>
<button type="button" class="btn btn-light" onclick="logout()">Logout</button>
</li>
</div>
</ul>
<form id="searchForm" class="d-flex">
<input class="form-control me-2" type="text" id="searchText" placeholder="Search" aria-label="Search">
<button class="btn btn-danger" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- navbar ends -->
<div class="maincontainer">
<div class="container">
<div id="movies" class="row"></div>
</div>
<hr>
<h2>Comedy</h2>
<hr>
<div class="container" id="Movies">
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/friends.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Friends</h1>
<button class="btn_i b3_i" title="Year" style="color:white">1994</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">10</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.9</button>
</span>
<br />
<br />
</p>
<p class="para_i">Follow the lives of six reckless adults living in Manhattan, as they indulge in adventures which make their lives both troublesome and happening.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin()">▶Trailer</button>
<script type="text/javascript">
function openWin(){
window.open("https://youtu.be/hDNNmeeJs1Q","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Friends</b>
<br>
IMDb - 8.9
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/big.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 44px;">The Big Bang Theory</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2007</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">12</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.1</button>
</span>
<br />
<br />
</p>
<p class="para_i">The lives of four socially awkward friends, Leonard, Sheldon, Howard and Raj, take a wild turn when they meet the beautiful and free-spirited Penny.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin1()">▶Trailer</button>
<script type="text/javascript">
function openWin1(){
window.open("https://youtu.be/WBb3fojgW0Q","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>The Big Bang Theory</b>
<br>
IMDb - 8.1
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/rick.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Rick And Morty</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2013</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">4</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.2</button>
</span>
<br />
<br />
</p>
<p class="para_i">After having been missing for nearly 20 years, Rick Sanchez suddenly arrives at daughter Beth's doorstep to move in with her and her family.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin2()">▶Trailer</button>
<script type="text/javascript">
function openWin2(){
window.open("https://youtu.be/_uUcMwsR5hg","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Rick and Morty</b>
<br>
IMDb - 9.2
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/php.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Phir Hera Pheri</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2006</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2h34m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">6.9</button>
</span>
<br />
<br />
</p>
<p class="para_i">The lives of Raju, Shyam and Baburao change completely when they get cheated by a fraudster. Now, they must find another way to repay the loan they took from a dreaded gangster.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin3()">▶Trailer</button>
<script type="text/javascript">
function openWin3(){
window.open("https://youtu.be/1rJQQCZcq2sc","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i" onclick="openMovieWin3()">▶Play</button>
</div>
<script type="text/javascript">
function openMovieWin3(){
window.open("https://youtu.be/TIQ5hrfermg","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script>
</div>
<div class="flim">
<b>Phir Hera Pheri</b>
<br>
IMDb - 6.9
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/bach.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>TVF Bachelors</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2016</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.2</button>
</span>
<br />
<br />
</p>
<p class="para_i">The series revolves around Four Bachelor Flatmates who in every episode will deal with a specific daily life bachelor related problem.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin4()">▶Trailer</button>
<script type="text/javascript">
function openWin4(){
window.open("https://youtu.be/5XuimeH5hME","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
<script type="text/javascript">
function openMovieWin43(){
window.open("https://youtube.com/playlist?list=PLTB0eCoUXErabI_K3mUcdiYM72o4CkWZC","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script>
</div>
<div class="flim">
<b>TVF Bachelors</b>
<br>
IMDb - 8.2
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/mbbs.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Munna Bhai MBBS</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2003</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2h36m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.1</button>
</span>
<br />
<br />
</p>
<p class="para_i">Munna is a goon who sets out to fulfil his father's dream of becoming a doctor. With some help from his ally, Circuit, he enrols himself in a medical college and drives Dr Asthana up the wall.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin5()">▶Trailer</button>
<script type="text/javascript">
function openWin5(){
window.open("https://youtu.be/6lCGvu-hwX4","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Munna Bhai MBBS</b>
<br>
IMDb - 8.1
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/tom.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 20px;">Tom and Jerry</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2021</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1h41m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">5.3</button>
</span>
<br />
<br />
</p>
<p class="para_i">A legendary rivalry reemerges when Jerry moves into New York City's finest hotel on the eve of the wedding of the century, forcing the desperate event planner to hire Tom to get rid of him.
As mayhem ensues, the escalating cat-and-mouse battle soon threatens to destroy her career, the wedding, and possibly the hotel itself.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin6()">▶Trailer</button>
</div>
<script type="text/javascript">
function openWin6(){
window.open("https://youtu.be/kP9TfCWaQT4","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
<div class="flim">
<b>Tom and Jerry</b>
<br>
IMDb - 5.3
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/chhal.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Chhalaang</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2020</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2h16m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">6.8</button>
</span>
<br />
<br />
</p>
<p class="para_i">Montu is a lazy physical training instructor who does the bare minimum to stay employed. However, a new teacher threatens to take his job and the woman he loves.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin7()">▶Trailer</button>
<script type="text/javascript">
function openWin7(){
window.open("https://youtu.be/BY-0SbSF2dE","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Chhalaang</b>
<br>
IMDb - 6.8
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/permanent roommates.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 25px;">Permanent Roommates</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2014</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.6</button>
</span>
<br />
<br />
</p>
<p class="para_i">Permanent Roommates is an Indian romantic comedy web series produced by The Viral Fever Media Labs. It was created by Arunabh Kumar, the founder of TVF, who also worked as the executive producer of the series.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin8()">▶Trailer</button>
<script type="text/javascript">
function openWin8(){
window.open("https://youtu.be/XsOjuDh4c-o","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Permanent Roommates</b>
<br>
IMDb - 8.6
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/trip.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>TVF Tripling</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2016</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.6</button>
</span>
<br />
<br />
</p>
<p class="para_i">TVF Tripling is an Indian web series created by The Viral Fever. It was developed by Sameer Saxena and written by Akarsh Khurana and Sumeet Vyas.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin9()">▶Trailer</button>
<script type="text/javascript">
function openWin9(){
window.open("https://youtu.be/MfKNEC9xcE8","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>TVF Tripling</b>
<br>
IMDb - 8.6
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/99.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Brooklyn Nine-Nine</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2013</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">8</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.4</button>
</span>
<br />
<br />
</p>
<p class="para_i">Ray Holt, an eccentric commanding officer, and his diverse and quirky team of odd detectives solve crimes in Brooklyn, New York City.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin10()">▶Trailer</button>
<script type="text/javascript">
function openWin10(){
window.open("https://youtu.be/icTOP9F17pU","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Brooklyn Nine-Nine</b>
<br>
IMDb - 8.4
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------Footer-------------------------------->
<div id="waterdrop"></div>
<footer class="footer">
<hr class="footer-hr">
<div class="footer-content">
<div class="footer-left">
<a href="home.html"><img class="footer-logo" src="Images/TheaterLogoFinal.png" alt="" width="30" height="24"></a>
<p class="footer-bottom-tagline">Watch! Chill! Repeat!</p>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Follow Us</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f facebook" style="color:red"></i></a>
<a class="footer-links" href="https://twitter.com/login?lang=en" target="_blank"><i class="fab fa-twitter twitter" style="color:red"></i></a>
<a class="footer-links" href="https://www.linkedin.com/login" target="_blank"><i class="fab fa-linkedin linkedin" style="color:red"></i></a>
<a class="footer-links" href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram instagram" style="color:red"></i></a>
<a class="footer-links" href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website" target="_blank"><i class="fab fa-github github" style="color:red"></i></a>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Services</h2>
<ul class="footer-middle-list">
<li class="footer-middle-list-item"><a href="home.html">Enjoy Latest Movies</a> </li>
<li class="footer-middle-list-item"><a href="web-series.html">Watch Web-Series</a> </li>
<li class="footer-middle-list-item"><a href="kids.html">Everything for Kids</a> </li>
<li class="footer-middle-list-item"><a href="news.html">Coming soon</a> </li>
<li class="footer-middle-list-item"><a href="premium.html">Get Premium Subscription</a> </li>
<li class="footer-middle-list-item"><a href="faq.html">FAQ</a> </li>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Try Our App</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="#"><i class="fab fa-google-play" style="color:red"></i></a>
<a class="footer-links" href="#"><i class="fab fa-app-store-ios" style="color:red"></i></a>
</ul>
</div>
<div class="footer-right">
<p class="footer-links">
<h2 class="footer-heading">Contact Us</h2>
<p class="footer-bottom-tagline">Feel free to contact us.</p>
<a class="footer-contact-button" href="contactus.html">Contact</a>
</p>
</div>
</div>
<hr class="footer-hr">
<div class="footer-copyright">
<p>Copyright © and ® Since
<script>
document.write(new Date().getFullYear())
</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>
</div>
</footer>
<!----------------------------scroll to top button-->
<button id="scrollToTopButton" title="Go to top" class="ml-5" >
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</button>
<script>
$(document).ready(function(){
var scrollTopButton = document.getElementById("scrollToTopButton");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopButton.style.display = "block";
} else {
scrollTopButton.style.display = "none";
}
}
$("#scrollToTopButton").click(function(){
$('html ,body').animate({scrollTop : 0},800)
});
});
</script>
<script>
function logout(){
window.location.replace("login.html");
}
</script>
<!-- offcanva JS and footer js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main-min.js"></script>
<script>
jQuery('#waterdrop').raindrops({
color: '#292c2f',
canvasHeight: 150,
density: 0.1,
frequency: 20
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="./static/script.js"></script>
</body>
</html>
================================================
FILE: contactus.html
================================================
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<title>Contact Us</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="./Images/Logo/Title.jpeg" type="image/x-icon">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="./static/style.css" rel="stylesheet" type="text/css" />
<style>
/* navbar css */
#header-nav .nav-link {
color: white;
font-size: 20px;
margin-left: 20px;
}
.menu li a {
text-decoration: none;
}
.nav-item :hover{
margin-bottom: 10px;
}
#header-nav .navbar-nav .nav-item .nav-link:hover {
color: red;
text-decoration: none; /* Remove underline */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */
text-shadow: 0 0 10px red; /* Add glowing effect */
}
.menu li a:hover {
color: red !important;
opacity: 0.5;
}
#variety {
margin: 0.5rem;
}
.btn-outline-danger,
.btn-outline-danger:focus {
outline: none;
box-shadow: none;
}
.contactForm {
margin: 5px;
}
/* <!------------------------Scroll to top button------------------------------------------------> */
#scrollToTopButton {
position: fixed;
bottom: 40px;
right: 25px;
font-size: 25px;
z-index: 99;
width: 50px;
height: 50px;
background-color: red;
color: black;
border: none;
cursor: pointer;
outline: none;
padding: 6px;
border-radius: 50%;
}
#scrollToTopButton:hover,
i:hover {
background-color: white;
color: red;
}
.btn-sm a {
color: white;
transition: all 0.3s ease;
float: right;
font-size: medium;
}
.btn-sm a:hover {
color: red;
transition: all 0.3s ease;
}
#nav:hover {
background-color: #e60e23 !important;
}
#header-nav .nav-link {
color: white;
font-size: 20px;
margin-left: 20px;
}
@media only screen and (max-width: 1400px){
#header-nav .nav-link {
color: white;
font-size: 18px;
margin-left: 18px;
}
}
@media only screen and (min-width: 1133px) and (max-width: 1275px) {
#header-nav .nav-link {
color: white;
font-size: 15px;
margin-left: 10px;
}
}
@media only screen and (min-width: 1035px) and (max-width: 1132px) {
#header-nav .nav-link {
color: white;
font-size: 15px;
margin-left: 10px;
}
#searchText{
width: 120px;
}
#submitBtn{
width: 60px;
display: flex;
justify-content: center;
}
}
@media only screen and (min-width: 993px) and (max-width: 1034px) {
#header-nav .nav-link {
color: white;
font-size: 14px;
margin-left: 10px;
}
#searchText{
width: 100px;
}
#submitBtn{
width: 50px;
display: flex;
justify-content: center;
}
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script type="text/javascript">
(function () {
emailjs.init("user_3Y57GrE42p8s0kTrKxP0W");
})();
</script>
<script type="text/javascript">
window.onload = function () {
document.getElementById('contact-form').addEventListener('submit', function (event) {
event.preventDefault();
// generate a five digit number for the contact_number variable
this.contact_number.value = Math.random() * 100000 | 0;
// these IDs from the previous steps
emailjs.sendForm('contact_service', 'contact_form', this)
.then(function () {
console.log('SUCCESS!');
}, function (error) {
console.log('FAILED...', error);
});
});
}
</script>
</head>
<body>
<div class="scroll-bar">
<!-- navbar starts -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark" id="header-nav">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"><img class="logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<button id="nav" class="navbar-toggler" id="nav" style="background-color:#8b0000" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-color:dark-grey;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="movies.html">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="web-series.html">Web Series</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kids.html">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv.html">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premium.html">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
<li>
<!-- Genre dropdown starts-->
<div>
<div class="dropdown" style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton" style="font-size:20px;">
Genres
</button>
<div class="dropdown-content" style="color: white;">
<a href="popular.html">Popular</a>
<a href="crime.html">Crime</a>
<a href="suspense.html">Suspense & Thriller</a>
<a href="action.html">Action</a>
<a href="fantasy.html">Sci-Fi & Fantasy</a>
<a href="documentary.html">Documentary</a>
<a href="horror.html">Horror</a>
<a href="drama.html">Drama</a>
<a href="war.html">War & Politics</a>
<a href="comedy.html">Comedy</a>
<a href="romance.html">Romance</a>
<a href="anime.html">Anime</a>
</div>
</div>
</div>
<!-- Genre dropdown ends-->
</li>
<div style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<li>
<button type="button" class="btn btn-light" onclick="logout()">Logout</button>
</li>
</div>
</ul>
<form id="searchForm" class="d-flex">
<input class="form-control me-2" type="text" id="searchText" placeholder="Search" aria-label="Search">
<button class="btn btn-danger" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- navbar ends -->
<div class="container">
<div id="movies" class="row"></div>
</div>
<hr>
<div class="box">
<div class="text">
<h1>Contact <span class="red">Us</span></h1>
<div class="redline"></div>
<p>Have Questions ? We have answers ( may be )</p>
</div>
</div>
<div class="touch">
<h2>Get in touch</h2>
<div class="redline"></div>
</div>
<div class="container fill">
<div class="forthis">
<form action="https://formcarry.com/s/S1peCWurw0C" method="POST" name="contact-form" id="contact-form" onsubmit="return validateForm();">
<div class="form-row two2">
<div class="form-group col-md-6 column">
<input type="text" class="form-control input" id="firstname" name="firstname" placeholder=" " >
<label for="firstname" class="">First Name</label>
<div class="underline">
</div>
</div>
<div class="form-group col-md-6 column">
<input type="text" class="form-control input" id="lastname" name="lastname" placeholder=" " >
<label for="lastname" class="">Last Name</label>
<div class="underline"></div>
</div>
</div>
<div class="form-row one1">
<div class="form-group col-lg-6 column">
<input type="text" class="form-control input" id="email" name="email" placeholder=" " >
<label for="email" class="">Email</label>
<div class="underline"></div>
</div>
<div class="form-group col-lg-6 column">
<input type="text" class="form-control input" id="phone" name="phone" placeholder=" ">
<label for="number" class="">Phone Number</label>
<div class="underline"></div>
</div>
</div>
<div class="form-row">
<div class="form-group column">
<input type="text" class="form-control input" name="subject" id="subject" placeholder=" " >
<label for="subject" class="">Subject</label>
<div class="underline extra"></div>
</div>
</div>
<div class="form-row size">
<div class="form-group column">
<textarea type="text" class="form-control input" name="message" id="message" rows="5" placeholder=" "></textarea>
<label for="message" class="">Message</label>
<div class="underline extra gap"></div>
</div>
</div>
<div class="btn-sm">
<input type="submit" value="SEND MESSAGE" class="sm-button" id="submit-btn">
<a href="#" onclick="clearFunc()">Reset</a>
</div>
</form>
</div>
</div>
<!-- address -->
<div class="container address">
<div class="row add-row">
<div class="col-sm-6">
<h3>Our Address</h3>
<div class="redline-address"></div>
<p>13 B</p>
<p>King Koti Road</p>
<p>Vadodara,</p>
<p>Gujrat - 500029</p>
<div class="phone-e">
<p><span class="glyphicon glyphicon-envelope"> </span> info@movie-website.com</p>
<p><span class="glyphicon glyphicon-phone"></span> +91-97427 66666</p>
</div>
</div>
<div class="col-sm-6 map-padd">
<!-- -map- -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3889.019213593812!2d77.62060731482127!3d12.906485990898592!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae14eed2a26dbb%3A0x98f64960052a26b0!2sTrainingMug!5e0!3m2!1sen!2sin!4v1504259922701"
width="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- offcanva JS and footer js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<div class="bottom-gap"></div>
<!-------------------------------Footer-------------------------------->
<div id="waterdrop"></div>
<footer class="footer">
<div class="footer-content">
<div class="footer-left">
<a href="home.html"><img class="footer-logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<p class="footer-bottom-tagline">Watch! Chill! Repeat!</p>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Follow Us</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="https://www.facebook.com/" target="_blank"><i
class="fab fa-facebook-f facebook" style="color:red"></i></a>
<a class="footer-links" href="https://twitter.com/login?lang=en" target="_blank"><i
class="fab fa-twitter twitter" style="color:red"></i></a>
<a class="footer-links" href="https://www.linkedin.com/login" target="_blank"><i
class="fab fa-linkedin linkedin" style="color:red"></i></a>
<a class="footer-links" href="https://www.instagram.com/" target="_blank"><i
class="fab fa-instagram instagram" style="color:red"></i></a>
<a class="footer-links" href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website" target="_blank"><i
class="fab fa-github github" style="color:red"></i></a>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Services</h2>
<ul class="footer-middle-list">
<li class="footer-middle-list-item"><a href="home.html">Enjoy Latest Movies</a> </li>
<li class="footer-middle-list-item"><a href="web-series.html">Watch Web-Series</a> </li>
<li class="footer-middle-list-item"><a href="kids.html">Everything for Kids</a> </li>
<li class="footer-middle-list-item"><a href="news.html">Coming soon</a> </li>
<li class="footer-middle-list-item"><a href="premium.html">Get Premium Subscription</a> </li>
<li class="footer-middle-list-item"><a href="faq.html">FAQ</a> </li>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Try Our App</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="#"><i class="fab fa-google-play" style="color:red"></i></a>
<a class="footer-links" href="#"><i class="fab fa-app-store-ios" style="color:red"></i></a>
</ul>
</div>
<div class="footer-right">
<p class="footer-links">
<h2 class="footer-heading">Contact Us</h2>
<p class="footer-bottom-tagline">Feel free to contact us.</p>
<a class="footer-contact-button" href="contactus.html">Contact</a>
</p>
</div>
</div>
<hr id="footer-hr">
<div class="footer-copyright">
<p>Copyright © and ® Since
<script>
document.write(new Date().getFullYear())
</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)
</p>
</div>
</footer>
<!--------------scrool to top button-->
<button id="scrollToTopButton" title="Go to top" class="ml-5">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</button>
<script>
$(document).ready(function () {
var scrollTopButton = document.getElementById("scrollToTopButton");
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopButton.style.display = "block";
} else {
scrollTopButton.style.display = "none";
}
}
$("#scrollToTopButton").click(function () {
$('html ,body').animate({
scrollTop: 0
}, 800)
});
});
</script>
<!-- offcanva JS and footer js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main-min.js"></script>
<script> jQuery('#waterdrop').raindrops({ color: '#292c2f', canvasHeight: 150, density: 0.1, frequency: 20 });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="./static/script.js"></script>
<script>
function logout(){
window.location.replace("login.html");
}
</script>
<script type="text/javascript">
function validateForm(){
const firstname = document.getElementById("firstname");
const lastname = document.getElementById("lastname");
const email = document.getElementById("email");
const phone = document.getElementById("phone");
const subject = document.getElementById("subject");
const message = document.getElementById("message");
let alphabets = /^[A-Za-z]+$/ ;
if (firstname.value.trim().length === 0 && lastname.value.trim().length === 0 && email.value.trim().length === 0 && phone.value.trim().length === 0 && subject.value.trim().length === 0 && message.value.trim().length === 0 ){
swal("Oops..." , "Please! Enter the credentials first ." , "error");
return false ;
}
if (firstname.value.trim().length === 0 ) {
swal("Oops..." , "Please! Enter your first name ." , "error");
return false ;
}
if (!firstname.value.trim().match(alphabets) ){
swal("Oops..." , "Please! Enter a valid first name." , "error");
return false;
}
if(lastname.value.trim().length > 0 ) {
if (!lastname.value.trim().match(alphabets) ){
swal("Oops..." , "Please! Enter a valid last name." , "error");
return false;
}
}
if (email.value.trim().length === 0 ) {
swal("Oops..." , "Please! Enter your email address." , "error");
return false ;
}
if (!email.value.trim().includes("@gmail.com")) {
swal("Oops..." , "Please! Enter a valid email address." , "error");
return false ;
}
if ( phone.value.trim().length != 10 || isNaN(phone.value.trim()) ) {
swal("Oops..." , "Phone number should be 10 digits. " , "error");
return false ;
}
if (subject.value.trim().length === 0 ) {
swal("Oops..." , "Please! Enter the subject." , "error");
return false ;
}
if (message.value.trim().length === 0 ) {
swal("Oops..." , "Please! Enter the message." , "error");
return false ;
}
swal("Congrats!", "Message was delivered successfully! Thanks for your Submission", "success");
return true ;
}
document.getElementById("submit-btn").addEventListener("click" , validateForm);
function clearFunc() {
document.getElementById("firstname").value = "";
document.getElementById("lastname").value = "";
document.getElementById("email").value = "";
document.getElementById("phone").value = "";
document.getElementById("subject").value = "";
document.getElementById("message").value = "";
}
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>
</html>
================================================
FILE: crime.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ApnaTheatre.com</title>
<link rel="shortcut icon" href="./Images/Logo/Title.jpeg" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="./static/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/style-min.css">
<link rel="stylesheet" href="cards.css">
</head>
<!------------------------Scroll to top button------------------------------------------------>
<style>
#scrollToTopButton{
position:fixed;
bottom: 40px;
right: 25px;
font-size: 25px;
z-index: 99;
width: 50px;
height: 50px;
background-color:red;
color:black;
border: none;
cursor: pointer;
outline: none;
padding: 6px;
border-radius: 50%;
}
#scrollToTopButton:hover, i:hover {
background-color:white;
color:red;
}
#nav:hover
{
background-color:#e60e23!important;
}
#header-nav .nav-link {
color: white;
font-size: 20px;
margin-left: 20px;
}
@media only screen and (max-width: 1400px){
#header-nav .nav-link {
color: white;
font-size: 18px;
margin-left: 18px;
}
#searchText{
width: 150px;
}
}
@media only screen and (min-width: 1133px) and (max-width: 1275px) {
#header-nav .nav-link {
color: white;
font-size: 15px;
margin-left: 10px;
}
}
@media only screen and (min-width: 1035px) and (max-width: 1132px) {
#header-nav .nav-link {
color: white;
font-size: 15px;
margin-left: 10px;
}
#searchText{
width: 120px;
}
#submitBtn{
width: 60px;
display: flex;
justify-content: center;
}
}
@media only screen and (min-width: 993px) and (max-width: 1034px) {
#header-nav .nav-link {
color: white;
font-size: 14px;
margin-left: 10px;
}
#searchText{
width: 100px;
}
#submitBtn{
width: 50px;
display: flex;
justify-content: center;
}
}
.container {
text-align: center;
}
.nav-item :hover{
margin-bottom: 10px;
}
#header-nav .navbar-nav .nav-item .nav-link:hover {
color: red;
text-decoration: none; /* Remove underline */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */
text-shadow: 0 0 10px red; /* Add glowing effect */
}
</style>
<body>
<div class="scroll-bar">
<!-- navbar starts -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark" id="header-nav">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"><img class="logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<button id="nav" class="navbar-toggler" id="nav" style="background-color:#8b0000" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-color:dark-grey;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="movies.html">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="web-series.html">Web Series</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kids.html">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv.html">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premium.html">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
<li>
<!-- Genre dropdown starts-->
<div>
<div class="dropdown" style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton" style="font-size:20px;">
Genres
</button>
<div class="dropdown-content" style="color: white;">
<a href="popular.html">Popular</a>
<a href="crime.html">Crime</a>
<a href="suspense.html">Suspense & Thriller</a>
<a href="action.html">Action</a>
<a href="fantasy.html">Sci-Fi & Fantasy</a>
<a href="documentary.html">Documentary</a>
<a href="horror.html">Horror</a>
<a href="drama.html">Drama</a>
<a href="war.html">War & Politics</a>
<a href="comedy.html">Comedy</a>
<a href="romance.html">Romance</a>
<a href="anime.html">Anime</a>
</div>
</div>
</div>
<!-- Genre dropdown ends-->
</li>
<div style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<li>
<button type="button" class="btn btn-light" onclick="logout()">Logout</button>
</li>
</div>
</ul>
<form id="searchForm" class="d-flex">
<input class="form-control me-2" type="text" id="searchText" placeholder="Search" aria-label="Search">
<button class="btn btn-danger" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- navbar ends -->
<div class="maincontainer">
<div class="container">
<div id="movies" class="row"></div>
</div>
<hr>
<h2>Crime</h2>
<hr>
<div class="container" id="Movies">
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/criminal.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Criminal Justice</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.1</button>
</span>
<br />
<br />
</p>
<p class="para_i">Criminal Justice is an Indian Hindi-language crime thriller legal drama web series for Hotstar Specials, based on the 2008 British television series of the same name,</p>
<button class="trailer_i" type="submit" value="" onclick="openWin()">▶Trailer</button>
<script type="text/javascript">
function openWin(){
window.open("https://youtu.be/KPyNH7mZkGc","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Criminal Justice</b>
<br>
IMDb - 8.1
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/peaky.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Peaky Blinders</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2013</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">5</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.8</button>
</span>
<br />
<br />
</p>
<p class="para_i">Tommy Shelby, a dangerous man, leads the Peaky Blinders, a gang based in Birmingham. Soon, Chester Campbell, an inspector, decides to nab him and put an end to the criminal activities.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin1()">▶Trailer</button>
<script type="text/javascript">
function openWin1(){
window.open("https://youtu.be/oVzVdvGIC7U","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Peaky Blinders</b>
<br>
IMDb - 8.8
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/special.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Special Ops</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2020</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.6</button>
</span>
<br />
<br />
</p>
<p class="para_i">Himmat Singh leads a task force searching for the mastermind behind several terrorist attacks</p>
<button class="trailer_i" type="submit" value="" onclick="openWin2()">▶Trailer</button>
<script type="text/javascript">
function openWin2(){
window.open("https://youtu.be/GF0H5DZAE2g","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Special Ops</b>
<br>
IMDb - 8.6
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/breaking.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1 style="font-size: 30px;">Breaking Bad</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2008</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">5</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.5</button>
</span>
<br />
<br />
</p>
<p class="para_i">Walter White, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. His priorities begin to change when he partners with Jesse</p>
<button class="trailer_i" type="submit" value="" onclick="openWin3()">▶Trailer</button>
<script type="text/javascript">
function openWin3(){
window.open("https://youtu.be/HhesaQXLuRY","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Breaking Bad</b>
<br>
IMDb - 9.5
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/apharan.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Aphran</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2018</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.3</button>
</span>
<br />
<br />
</p>
<p class="para_i">Rudra, a senior inspector, is lured into kidnapping a young girl at the behest of her mother. However, the plan of extorting money for her release goes horribly wrong, landing him in trouble</p>
<button class="trailer_i" type="submit" value="" onclick="openWin4()">▶Trailer</button>
<script type="text/javascript">
function openWin4(){
window.open("https://youtu.be/CxNYucYVEkQ","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Aphran</b>
<br>
IMDb - 8.3
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/joker.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Joker</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2h2m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.4</button>
</span>
<br />
<br />
</p>
<p class="para_i">Arthur Fleck, a party clown, leads an impoverished life with his ailing mother. However, when society shuns him and brands him as a freak, he decides to embrace the life of crime and chaos.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin5()">▶Trailer</button>
<script type="text/javascript">
function openWin5(){
window.open("https://youtu.be/t433PEQGErc","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Joker</b>
<br>
IMDb - 8.4
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/delhi.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Delhi Crime</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.5</button>
</span>
<br />
<br />
</p>
<p class="para_i">Based on a Delhi gang rape case, this crime drama follows the Delhi Police investigation into the finding of the men who perpetrated the crime.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin6()">▶Trailer</button>
<script type="text/javascript">
function openWin6(){
window.open("https://youtu.be/jNuKwlKJx2E","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Delhi Crime</b>
<br>
IMDb - 8.5
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/lok.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Paatal Lok</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2020</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">7.8</button>
</span>
<br />
<br />
</p>
<p class="para_i">A cynical inspector is tasked with investigating a high-profile case which leads him into a dark realm of the underworld.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin7()">▶Trailer</button>
<script type="text/javascript">
function openWin7(){
window.open("https://youtu.be/cNwWMW4mxO8","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Paatal Lok</b>
<br>
IMDb - 7.8
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/gangs of wassepur.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Gangs of Wasseypur</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2012</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">2h40m</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">8.2</button>
</span>
<br />
<br />
</p>
<p class="para_i">A gangster (Manoj Bajpayee) clashes with the ruthless, coal-mining kingpin (Tigmanshu Dhulia) who killed his father (Jaideep Ahlawat).</p>
<button class="trailer_i" type="submit" value="" onclick="openWin8()">▶Trailer</button>
<script type="text/javascript">
function openWin8(){
window.open("https://youtu.be/j-AkWDkXcMY","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i" onclick="openMovieWin8()">▶Play</button>
</div>
<script type="text/javascript">
function openMovieWin8(){
window.open("https://youtu.be/dz3uCM-MrGY","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script>
</div>
<div class="flim">
<b>Gangs of Wasseypur</b>
<br>
IMDb - 8.2
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------Footer-------------------------------->
<div id="waterdrop"></div>
<footer class="footer">
<hr class="footer-hr">
<div class="footer-content">
<div class="footer-left">
<a href="home.html"><img class="footer-logo" src="Images/TheaterLogoFinal.png" alt="" width="30" height="24"></a>
<p class="footer-bottom-tagline">Watch! Chill! Repeat!</p>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Follow Us</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f facebook" style="color:red"></i></a>
<a class="footer-links" href="https://twitter.com/login?lang=en" target="_blank"><i class="fab fa-twitter twitter" style="color:red"></i></a>
<a class="footer-links" href="https://www.linkedin.com/login" target="_blank"><i class="fab fa-linkedin linkedin" style="color:red"></i></a>
<a class="footer-links" href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram instagram" style="color:red"></i></a>
<a class="footer-links" href="https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website" target="_blank"><i class="fab fa-github github" style="color:red"></i></a>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Services</h2>
<ul class="footer-middle-list">
<li class="footer-middle-list-item"><a href="home.html">Enjoy Latest Movies</a> </li>
<li class="footer-middle-list-item"><a href="web-series.html">Watch Web-Series</a> </li>
<li class="footer-middle-list-item"><a href="kids.html">Everything for Kids</a> </li>
<li class="footer-middle-list-item"><a href="news.html">Coming soon</a> </li>
<li class="footer-middle-list-item"><a href="premium.html">Get Premium Subscription</a> </li>
<li class="footer-middle-list-item"><a href="faq.html">FAQ</a> </li>
</ul>
</div>
<div class="footer-middle">
<h2 class="footer-heading">Try Our App</h2>
<ul class="footer-middle-list icons">
<a class="footer-links" href="#"><i class="fab fa-google-play" style="color:red"></i></a>
<a class="footer-links" href="#"><i class="fab fa-app-store-ios" style="color:red"></i></a>
</ul>
</div>
<div class="footer-right">
<p class="footer-links">
<h2 class="footer-heading">Contact Us</h2>
<p class="footer-bottom-tagline">Feel free to contact us.</p>
<a class="footer-contact-button" href="contactus.html">Contact</a>
</p>
</div>
</div>
<hr class="footer-hr">
<div class="footer-copyright">
<p>Copyright © and ® Since
<script>
document.write(new Date().getFullYear())
</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>
</div>
</footer>
<!-----------------scroll back to top button-->
<button id="scrollToTopButton" title="Go to top" class="ml-5" >
<i class="fa fa-angle-double-up" aria-hidden="true" ></i>
</button>
<script>
$(document).ready(function(){
var scrollTopButton = document.getElementById("scrollToTopButton");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopButton.style.display = "block";
} else {
scrollTopButton.style.display = "none";
}
}
$("#scrollToTopButton").click(function(){
$('html ,body').animate({scrollTop : 0},800)
});
});
</script>
<!-- offcanva JS and footer js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://daniellaharel.com/raindrops/js/raindrops.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main-min.js"></script>
<script>
jQuery('#waterdrop').raindrops({
color: '#292c2f',
canvasHeight: 150,
density: 0.1,
frequency: 20
});
</script>
<script>
function logout(){
window.location.replace("login.html");
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="./static/script.js"></script>
</body>
</html>
================================================
FILE: documentary.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ApnaTheatre.com</title>
<link rel="shortcut icon" href="./Images/Logo/Title.jpeg" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="./static/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/style-min.css">
<link rel="stylesheet" href="cards.css">
</head>
<!------------------------Scroll to top button------------------------------------------------>
<style>
#scrollToTopButton{
background-color:red;
border: none;
border-radius: 50%;
bottom: 40px;
color:black;
cursor: pointer;
font-size: 25px;
height: 50px;
right: 25px;
outline: none;
padding: 6px;
position:fixed;
width: 50px;
z-index: 99;
}
#scrollToTopButton:hover, i:hover {
background-color:white;
color:red;
}
#header-nav .nav-link {
color: white;
font-size: 20px;
margin-left: 20px;
}
@media only screen and (max-width: 1400px){
#header-nav .nav-link {
color: white;
font-size: 18px;
margin-left: 18px;
}
}
@media only screen and (min-width: 1133px) and (max-width: 1275px) {
#header-nav .nav-link {
color: white;
font-size: 15px;
margin-left: 10px;
}
}
@media only screen and (min-width: 1035px) and (max-width: 1132px) {
#header-nav .nav-link {
color: white;
font-size: 15px;
margin-left: 10px;
}
#searchText{
width: 120px;
}
#submitBtn{
display: flex;
justify-content: center;
width: 60px;
}
}
@media only screen and (min-width: 993px) and (max-width: 1034px) {
#header-nav .nav-link {
color: white;
font-size: 14px;
margin-left: 10px;
}
#searchText{
width: 100px;
}
#submitBtn{
display: flex;
justify-content: center;
width: 50px;
}
}
.container {
text-align: center;
}
.nav-item :hover{
margin-bottom: 10px;
}
#header-nav .navbar-nav .nav-item .nav-link:hover {
color: red;
text-decoration: none; /* Remove underline */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */
text-shadow: 0 0 10px red; /* Add glowing effect */
}
</style>
<body>
<div class="scroll-bar">
<!-- navbar starts -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark" id="header-nav">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"><img class="logo" src="Images/TheaterLogoFinal.png" alt="" width="30"
height="24"></a>
<button id="nav" class="navbar-toggler" id="nav" style="background-color:#8b0000" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-color:dark-grey;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="movies.html">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="web-series.html">Web Series</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kids.html">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv.html">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premium.html">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
<li>
<!-- Genre dropdown starts-->
<div>
<div class="dropdown" style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton" style="font-size:20px;">
Genres
</button>
<div class="dropdown-content" style="color: white;">
<a href="popular.html">Popular</a>
<a href="crime.html">Crime</a>
<a href="suspense.html">Suspense & Thriller</a>
<a href="action.html">Action</a>
<a href="fantasy.html">Sci-Fi & Fantasy</a>
<a href="documentary.html">Documentary</a>
<a href="horror.html">Horror</a>
<a href="drama.html">Drama</a>
<a href="war.html">War & Politics</a>
<a href="comedy.html">Comedy</a>
<a href="romance.html">Romance</a>
<a href="anime.html">Anime</a>
</div>
</div>
</div>
<!-- Genre dropdown ends-->
</li>
<div style="position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;">
<li>
<button type="button" class="btn btn-light" onclick="logout()">Logout</button>
</li>
</div>
</ul>
<form id="searchForm" class="d-flex">
<input class="form-control me-2" type="text" id="searchText" placeholder="Search" aria-label="Search">
<button class="btn btn-danger" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- navbar ends -->
<div class="maincontainer">
<div class="container">
<div id="movies" class="row"></div>
</div>
<hr>
<h2>Documentary</h2>
<hr>
<div class="container" id="Movies">
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/chernobyl.jpg" alt="Avatar" style="width:250px;height:360px;">
</div>
<div class="flip-card-back_i">
<h1>Chernobyl</h1>
<button class="btn_i b3_i" title="Year" style="color:white">2019</button>
<button class="btn_i b2_i" title="Seasons" style="color:white">1</button>
<button class="btn_i b1_i" title="IMDb" style="color:white">9.4</button>
</span>
<br />
<br />
</p>
<p class="para_i">In April 1986, the city of Chernobyl in the Soviet Union suffers one of the worst nuclear disasters in the history of mankind. Consequently, many heroes put their lives on the line to save Europe.</p>
<button class="trailer_i" type="submit" value="" onclick="openWin()">▶Trailer</button>
<script type="text/javascript">
function openWin(){
window.open("https://youtu.be/s9APLXM9Ei8","_blank","top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no");
}
</script><br>
<br>
<button class="btn_i b4_i">▶Play</button>
</div>
</div>
<div class="flim">
<b>Chernobyl</b>
<br>
IMDb - 9.4
</div>
</div>
</div>
<div class="poster">
<div class="flip-card_i">
<div class="flip-card-inner_i">
<div class="flip-card-front_i">
<img src="./Images/social.jpg" alt="Avatar" style="width:250px;height:360px;">
<
gitextract_pzue29uj/ ├── .github/ │ ├── FUNDING.yml │ ├── Issue_Template/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── labels.json │ ├── pull_request_template.md │ └── workflows/ │ ├── abc.css │ └── issue-label.yml ├── .vscode/ │ └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Images/ │ ├── animal-world.ZW1zLXByZC1hc3NldHMvbW92aWVzL2JjNTBhMTY4LTczZTItNGQxZi05ZmUxLWQwN2ZlNThiZGVkYi53ZWJw │ ├── aotd.jpg.crdownload │ ├── baagi.jpg.crdownload │ ├── ci.avif │ ├── ci2.avif │ └── msd.avif ├── LICENSE ├── README.md ├── action.html ├── anime.html ├── cards.css ├── comedy.html ├── contactus.html ├── crime.html ├── documentary.html ├── drama.html ├── dummy.html ├── fantasy.html ├── faq.html ├── footer.css ├── home.html ├── horror.html ├── index.html ├── js/ │ ├── main-min.js │ ├── questions.js │ └── script.js ├── kids.html ├── landpage.css ├── login.html ├── movie-min.html ├── movies.html ├── news.html ├── popular.html ├── premium.html ├── quiz.html ├── quizstyle.css ├── romance.html ├── signup.html ├── static/ │ ├── faq.css │ ├── premium.css │ ├── script.js │ ├── style-min.css │ └── style.css ├── suspense.html ├── tv.html ├── war.html ├── web-series.html └── webStyle.css
SYMBOL INDEX (7 symbols across 2 files)
FILE: js/main-min.js
function getMovies (line 1) | function getMovies(t) {
function movieSelected (line 15) | function movieSelected(t) {
function getMovie (line 23) | function getMovie() {
FILE: js/script.js
function showQuetions (line 90) | function showQuetions(index){
function optionSelected (line 113) | function optionSelected(answer){
function showResult (line 145) | function showResult(){
function startTimer (line 165) | function startTimer(time){
Condensed preview — 58 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (963K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 23,
"preview": "github: QAZIMAAZARSHAD\n"
},
{
"path": ".github/Issue_Template/bug_report.md",
"chars": 602,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: 'Type: Bug'\nassignees: ''\n\n---\n\n## Desc"
},
{
"path": ".github/Issue_Template/feature_request.md",
"chars": 457,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: 'Type: Enhancement'\nassignees: ''\n\n-"
},
{
"path": ".github/labels.json",
"chars": 1416,
"preview": "[\n {\n \"name\": \"good first issue\",\n \"description\": \"This issue is good for first timers\",\n \"color\": \"a9e3ff\"\n "
},
{
"path": ".github/pull_request_template.md",
"chars": 1535,
"preview": "#### Fixes #(issue number)\n<!-- Please Mention the issue number as Fixes #(issue number) instead of ISSUE #(issue numb"
},
{
"path": ".github/workflows/abc.css",
"chars": 1,
"preview": "\n"
},
{
"path": ".github/workflows/issue-label.yml",
"chars": 369,
"preview": "name: Default\n\non: [push]\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v1\n - na"
},
{
"path": ".vscode/settings.json",
"chars": 40,
"preview": "{\n \"liveServer.settings.port\": 5501\n}"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5582,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "CONTRIBUTING.md",
"chars": 2525,
"preview": "## Contribution Guidelines 🏗\n\nAre we missing any of your favorite features, which you think you can add to it❓ We invite"
},
{
"path": "LICENSE",
"chars": 1073,
"preview": "MIT License\n\nCopyright (c) 2021 Qazi Maaz Arshad\n\nPermission is hereby granted, free of charge, to any person obtaining "
},
{
"path": "README.md",
"chars": 7627,
"preview": "# Movie Streaming Website 🎬\n\nAre you a movie maniac, who loves to binge-watch awesome movies & series? If Yes, then you"
},
{
"path": "action.html",
"chars": 36845,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "anime.html",
"chars": 40774,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width\">\r\n"
},
{
"path": "cards.css",
"chars": 2250,
"preview": "*{\n font-family: 'Ubuntu', sans-serif;\n}\n.poster, .movie_card {\n box-shadow: 0 0 10px red !important;\n\n}\n\n.flip-card_i"
},
{
"path": "comedy.html",
"chars": 35770,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "contactus.html",
"chars": 20442,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" data-theme=\"light\">\n\n<head>\n <title>Contact Us</title>\n <meta charset=\"UTF-8\" />\n <me"
},
{
"path": "crime.html",
"chars": 30583,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "documentary.html",
"chars": 31114,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "drama.html",
"chars": 47300,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "dummy.html",
"chars": 11089,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <title>A"
},
{
"path": "fantasy.html",
"chars": 39662,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "faq.html",
"chars": 13649,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <title>A"
},
{
"path": "footer.css",
"chars": 4646,
"preview": " /* CSS FOR FOOTER */\n *{\n font-family: 'Ubuntu', sans-serif;\n }\n\n .footer-distributed {\n background-color: #292c2f;\n"
},
{
"path": "home.html",
"chars": 139954,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <title>A"
},
{
"path": "horror.html",
"chars": 30780,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "index.html",
"chars": 10453,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <!-- SEO Meta Tags -->\n <meta\n name=\""
},
{
"path": "js/main-min.js",
"chars": 2435,
"preview": "function getMovies(t) {\n axios\n .get(\"https://www.omdbapi.com/?apikey=8d5cb2e&s=\" + t)\n .then((t) => {\n let "
},
{
"path": "js/questions.js",
"chars": 1051,
"preview": "// creating an array and passing the number, questions, options, and answers\nlet questions = [\n {\n numb: 1,\n qu"
},
{
"path": "js/script.js",
"chars": 8273,
"preview": "//selecting all required elements\nconst start_btn = document.querySelector(\".start_btn button\");\nconst info_box = docume"
},
{
"path": "kids.html",
"chars": 31224,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "landpage.css",
"chars": 3709,
"preview": "*{\n margin:0;\n padding:0;\n box-sizing: border-box;\n font-family: 'Ubuntu', sans-serif;\n }\n .nav-link.b:hov"
},
{
"path": "login.html",
"chars": 18945,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "movie-min.html",
"chars": 1309,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "movies.html",
"chars": 27886,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\n\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edg"
},
{
"path": "news.html",
"chars": 29341,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width\">\r\n <t"
},
{
"path": "popular.html",
"chars": 30773,
"preview": "<!DOCTYPE html>\n<html>\n\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <"
},
{
"path": "premium.html",
"chars": 16392,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n"
},
{
"path": "quiz.html",
"chars": 2880,
"preview": "\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "quizstyle.css",
"chars": 7279,
"preview": "/* importing google fonts */\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&"
},
{
"path": "romance.html",
"chars": 27696,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "signup.html",
"chars": 22774,
"preview": "<!DOCTYPE html>\n<link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\" />\n<link\n href=\"https://c"
},
{
"path": "static/faq.css",
"chars": 1276,
"preview": "/*--------------------------------------------------------------\n# Frequently Asked Questions\n--------------------------"
},
{
"path": "static/premium.css",
"chars": 11302,
"preview": "/* Pricing Table Start */\n\n\n/* *{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nbody{\n font-family: 'M"
},
{
"path": "static/script.js",
"chars": 378,
"preview": "var modal = document.getElementById(\"myModal\");\nvar btn = document.getElementById(\"myBtn\");\nvar span = document.getEleme"
},
{
"path": "static/style-min.css",
"chars": 186,
"preview": "#movies img,\n#movie img {\n width: 100%\n}\n\n@media(min-width:960px) {\n #movies .col-md-3 .well {\n height: 390"
},
{
"path": "static/style.css",
"chars": 13000,
"preview": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Ubuntu\", sans-serif;\n}\nbody {\n background: bla"
},
{
"path": "suspense.html",
"chars": 30691,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "tv.html",
"chars": 46881,
"preview": "\n<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta"
},
{
"path": "war.html",
"chars": 30216,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <t"
},
{
"path": "web-series.html",
"chars": 24014,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\n\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edg"
},
{
"path": "webStyle.css",
"chars": 4163,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: \"Ubuntu\", sans-serif;\n}\n/* navbar css */\n#header-nav .nav-link {\n color: "
}
]
// ... and 6 more files (download for full content)
About this extraction
This page contains the full source code of the QAZIMAAZARSHAD/Movie-Streaming-Website GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 58 files (889.3 KB), approximately 219.5k tokens, and a symbol index with 7 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.