Skip to content

Commit

Permalink
pages updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@pirateIV
pirateIV committed Aug 25, 2023
1 parent fcf3df5 commit 0a9441e
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 21 deletions.
4 changes: 2 additions & 2 deletions css/pages.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300&display=swap");
*{font-family: 'Lexend', sans-serif !important;}
/* body {
body {
background-color: #111 !important;
/* color: white !important; */
}
Expand All @@ -15,4 +15,4 @@ img#profileImg {
p.small span {
opacity: 1 !important;
color: white !important;
} */
}
28 changes: 21 additions & 7 deletions html/pages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,30 @@ <h2 class="cast-name text-white"></h2>
</div>
</div>
</div>

<div class="tabs-container my-4 d-flex gap-3 justify-content-center">
<button class="tab bg-transparent border-0 text-white border-bottom" data-tab="tab1">KNOWN FOR</button>
<button class="tab bg-transparent border-0 text-white" data-tab="tab2">CREDITS</button>
<button class="tab bg-transparent border-0 text-white" data-tab="tab1">KNOWN FOR</button>
<button class="tab bg-transparent border-0 text-white border-bottom" data-tab="tab2">CREDITS</button>
<button class="tab bg-transparent border-0 text-white " data-tab="tab3">PHOTOS</button>
</div>

<div class="tab-content d-flex flex-wrap justify-content-center align-items-center gap-2" id="tab1"> </div>
<div class="tab-content d-none" id="tab2">
Content for Tab 2

<div class="tab-content d-none flex-wrap justify-content-center align-items-center gap-2" id="tab1"> </div>
<div class="tab-content d-flex flex-column gap-3" id="tab2">
<section class="container d-flex flex-column gap-2">
<div class="d-block p-3 bg-secondary rounded-3">
<div class="credit-titl">
<h4>The One who must not be seedn</h4>
</div>
</div>
<div class="d-block p-3 bg-secondary rounded-3"></div>
<div class="d-block p-3 bg-secondary rounded-3"></div>
<div class="d-block p-3 bg-secondary rounded-3"></div>
<div class="d-block p-3 bg-secondary rounded-3"></div>
<div class="d-block p-3 bg-secondary rounded-3"></div>
<div class="d-block p-3 bg-secondary rounded-3"></div>
<div class="d-block p-3 bg-secondary rounded-3"></div>

</section>
</div>
<div class="tab-content d-none" id="tab3">
Content for Tab 3
Expand Down
24 changes: 12 additions & 12 deletions js/movies.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const img_path = "https://image.tmdb.org/t/p/w1280";
const mainSection = document.getElementById("mainSection");
const mainAbout = document.getElementById("mainAbout");

let currentIndex = 23;
let currentIndex = 2;

getMovies(api_url);
async function getMovies(url) {
Expand Down Expand Up @@ -170,30 +170,30 @@ async function getMovieDetails(mov_detail_id) {
<div class="mov-items d-flex gap-5 text-white mt-5 flex-row">
<ul class="d-flex gap-3 flex-column">
<li class="d-flex gap-4"><span class="text-light opacity-50">Released</span> ${release_date
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Released</span> ${release_date
.split("-")
.join("/")}</li>
<li class="d-flex gap-4"><span class="text-light opacity-50">Director</span> <a class="dir">${
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Director</span> <a class="dir">${
director.name
}</a></li>
<li class="d-flex gap-4"><span class="text-light opacity-50">Revenue</span> ${
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Revenue</span> ${
document.createTextNode(formattedRevenue).textContent
}</li>
<li class="d-flex gap-4"><span class="text-light opacity-50">Status</span> ${status}</li>
<li class="d-flex gap-4"><span class="text-light opacity-50">Production</span>
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Status</span> ${status}</li>
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Production</span>
</li>
</ul>
<ul class="d-flex gap-3 flex-column">
<li class="runtime d-flex gap-4" id="runtime"><span class="text-light opacity-50">Runtime: </span>${convertRuntime(
<li class="runtime d-flex gap-4" id="runtime"><span class="text-light opacity-50 fw-bold">Runtime: </span>${convertRuntime(
runtime
)}</li>
<li class="d-flex gap-4"><span class="text-light opacity-50">Language</span> <a class="dir">${original_language}</a></li>
<li class="d-flex gap-4"><span class="text-light opacity-50">Spoken Languages</span> ${spoken_languages
<li class="d-flex gap-4"><span class="text-light opacity-50" fw-bold>Language</span> <a class="dir">${original_language}</a></li>
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Spoken Languages</span> ${spoken_languages
.map((item, index) => `<a>${item.english_name}</a>`)
.join(" ")}</li>
<li class="d-flex gap-4"><span class="text-light opacity-50 ">Production companies</span>
<li class="d-flex gap-4"><span class="text-light opacity-50 fw-bold">Production companies</span>
${production_companies
.map(
(comp, index) =>
Expand All @@ -211,7 +211,7 @@ async function getMovieDetails(mov_detail_id) {
<section class="casts d-flex gap-5 overflow-scroll overflow-hidden position-relative" style="width: 90vw; height: 50vh">
<div class="d-flex flex-row gap-4 text-center">
${cast
.forEach(
.map(
(cst, index) =>
`<div class="cast-img rounded-2">
<div>
Expand Down Expand Up @@ -240,7 +240,7 @@ async function getMovieDetails(mov_detail_id) {
<section class="casts d-flex gap-5 overflow-scroll overflow-hidden position-relative" style="width: 90vw; height: 50vh">
<div class="d-flex flex-row gap-4 text-center">
${crew
.forEach(
.map(
(cst, index) => `
<div class="cast-img rounded-2">
<div>
Expand Down

0 comments on commit 0a9441e

Please sign in to comment.