diff --git a/public/assets/back-icon.svg b/public/assets/back-icon.svg new file mode 100644 index 0000000000000000000000000000000000000000..c04d81f154ae27c0d91fbe0c44f34d0e6644904f --- /dev/null +++ b/public/assets/back-icon.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg> \ No newline at end of file diff --git a/public/assets/placeholder-image.svg b/public/assets/placeholder-image.svg new file mode 100644 index 0000000000000000000000000000000000000000..cca8bb777ea49f08f660cd0bb53f9fba6a460298 --- /dev/null +++ b/public/assets/placeholder-image.svg @@ -0,0 +1,7 @@ +<svg viewBox="0 0 <?php echo $wh[0] ?> <?php echo $wh[1] ?>" xmlns="http://www.w3.org/2000/svg"> + <g> + <title>placeholder</title> + <rect id="svg_1" height="<?php echo $wh[0] ?>" width="<?php echo $wh[1] ?>" y="0" x="0" fill="#<?php echo $fill ?>"/> + <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" font-size="<?php echo $size ?>" dominant-baseline="middle" font-family="<?php echo $fontfamily ?>" fill="#<?php echo $color ?>"><?php echo $wh[0] ?>x<?php echo $wh[1] ?></text> + </g> + </svg> \ No newline at end of file diff --git a/public/css/give-review.css b/public/css/give-review.css new file mode 100644 index 0000000000000000000000000000000000000000..0afc46ca13f63ff473ae910d3f37331a2d8c1b40 --- /dev/null +++ b/public/css/give-review.css @@ -0,0 +1,191 @@ +.background { + background-color: rgb(56, 55, 55); /* Ganti dengan URL latar belakang Anda */ + background-size: cover; + filter: blur(5px); /* Ubah nilai blur sesuai keinginan Anda */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.card { + background-color: #365563; + display: flex; + align-items: center; + justify-content: center; + width: 50%; + height: 80%; + gap: 2rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.close-button { + position: absolute; + top: 10px; + right: 10px; + background-color: transparent; + border: none; + cursor: pointer; + color: gray; +} + +.close-button:hover { + color: white; +} + +.movie-info { + display: flex; + flex-direction: column; +} + +.back-btn { + background-color: #5b7c8f; + justify-content: center; + align-items: center; + display: flex; + border-radius: 8px; + cursor: pointer; + color: white; + font-weight: bold; +} + +.back-btn:hover { + transform: translateY(1px); +} + +.review { + display: flex; + flex-direction: column; +} + +.input-review { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.select-movie { + gap: 1.5 rem; +} + +.input-review label { + color: #d8e3e9; +} + +.select-input { + background-color: #d8e3e9; + padding: 5 10; + appearance: none; + border: none; + margin: 0; + width: 100%; + z-index: 1; + outline: none; + border-radius: 8px; + text-align: center; +} + +.write-review { + background-color: #d8e3e9; + min-height: 15rem; + min-width: 20rem; + display: flex; + align-items: start; +} + +.review label { + color: white; +} + +.rating { + display: inline-block; + position: relative; + height: 50px; + line-height: 50px; + font-size: 50px; +} + +.rating label { + position: absolute; + top: 0; + left: 0; + height: 100%; + cursor: pointer; +} + +.rating label:last-child { + position: static; +} + +.rating label:nth-child(1) { + z-index: 5; +} + +.rating label:nth-child(2) { + z-index: 4; +} + +.rating label:nth-child(3) { + z-index: 3; +} + +.rating label:nth-child(4) { + z-index: 2; +} + +.rating label:nth-child(5) { + z-index: 1; +} + +.rating label input { + position: absolute; + top: 0; + left: 0; + opacity: 0; +} + +.rating label .icon { + float: left; + color: transparent; +} + +.rating label:last-child .icon { + color: #000; +} + +.rating:not(:hover) label input:checked ~ .icon, +.rating:hover label:hover input ~ .icon { + color: #09f; +} + +.rating label input:focus:not(:checked) ~ .icon:last-child { + color: #000; + text-shadow: 0 0 5px #09f; +} + +.save-button-conf { + display: flex; + width: 100%; + justify-content: end; + align-items: center; +} + +.save-btn { + background-color: #00c06a; + justify-content: center; + align-items: center; + border-radius: 8px; + width: fit-content; + padding: 5 10; + font-weight: bold; + color: white; +} + +.save-btn:hover { + transform: translateY(1px); +} diff --git a/public/css/navbar.css b/public/css/navbar.css index 2387aea0ab8d310bf54081aaa209c6584540e402..447fe8ebbd12a82c7a595cca5cf622f1bb8c176a 100644 --- a/public/css/navbar.css +++ b/public/css/navbar.css @@ -17,10 +17,6 @@ li { color: #fff; } -.nav-links { - color: white; -} - .navbar h1 { color: white; font-size: 32px; @@ -38,10 +34,6 @@ li { font-size: 18px; } -.menu li { - color: white; -} - .menu li:hover { text-shadow: 2px 2px 10px white; filter: dropshadow(color=#000000, offx=2, offy=2); @@ -74,3 +66,9 @@ li { top: 50%; transform: translateY(-50%); } + +@media screen and (max-width: 800px) { + .menu li { + font-size: 10px; + } +} diff --git a/views/layouts/base.php b/views/layouts/base.php index 3c98aee1fe0e8bc5ba8a52f530c17d56f2f5cf72..bb8ff64b36c11cff4dba85ad1727bd065d6a3bb4 100644 --- a/views/layouts/base.php +++ b/views/layouts/base.php @@ -5,6 +5,7 @@ <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel='stylesheet' href='/public/css/navbar.css'> <!-- <link rel="stylesheet" href="public/css/lib.css"> <link rel="stylesheet" href="public/css/shared.css"> <link rel="stylesheet" href="public/css/home.css"> --> @@ -12,9 +13,28 @@ </head> <body> - <nav> - - </nav> + <nav class='navbar'> + <div class='logo' href='/'> + <img src='/public/assets/logo.svg' alt='logo' width="45" height="45" draggable='false'/> + <h1>Letterpaw</h1> + </div> + <ul class='nav-links'> + <div class='menu'> + <li><a href='/'>SIGN IN</a></li> + <li><a href='/'>CREATE ACCOUNT</a></li> + <li><a href='/'>FILMS</a></li> + <li><a href='/'>LISTS</a></li> + <li><a href='/'>MEMBERS</a></li> + <li><a href='/'>JOURNAL</a></li> + </div> + </ul> + <form method='get'> + <div class='input-search'> + <input class='' placeholder='Search...'/> + <img src='/public/assets/search-icon.svg' alt='search icon' /> + </div> + </form> + </nav> <main> <h1>hai!!!</h1> diff --git a/views/layouts/give-review.php b/views/layouts/give-review.php new file mode 100644 index 0000000000000000000000000000000000000000..385534a5778fd03bd4cb18220592520f9257e0fc --- /dev/null +++ b/views/layouts/give-review.php @@ -0,0 +1,76 @@ +<html> +<head> + <link rel='stylesheet' href='/public/css/give-review.css'> +</head> +<body> + <div class="background"> + + </div> + <div class='card'> + <button class='close-button' onclick="closeCard()">X</button> + <!-- Image of the movie --> + <div class='movie-info'> + <button class="back-btn"> + <img src='/public/assets/back-icon.svg' width='30' height='30' /> + BACK + </button> + <img src='/public/assets/placeholder-image.svg' width='20rem' height='50rem'/> + </div> + <!-- Main Info --> + <div class='review'> + <form class='input-review'> + <div class='select-movie'> + <label>I WATCHED...</label> + <select class='select-input'> + <option>--Please choose a movie--</option> + <option>a</option> + <option>a</option> + <option>a</option> + <option>a</option> + </select> + </div> + <input type="text" class='write-review' placeholder='Add a review...'> + </form> + <label>Rating</label> + <form class="rating"> + <label> + <input type="radio" name="stars" value="1" /> + <span class="icon">★</span> + </label> + <label> + <input type="radio" name="stars" value="2" /> + <span class="icon">★</span> + <span class="icon">★</span> + </label> + <label> + <input type="radio" name="stars" value="3" /> + <span class="icon">★</span> + <span class="icon">★</span> + <span class="icon">★</span> + </label> + <label> + <input type="radio" name="stars" value="4" /> + <span class="icon">★</span> + <span class="icon">★</span> + <span class="icon">★</span> + <span class="icon">★</span> + </label> + <label> + <input type="radio" name="stars" value="5" /> + <span class="icon">★</span> + <span class="icon">★</span> + <span class="icon">★</span> + <span class="icon">★</span> + <span class="icon">★</span> + </label> + </form> + <div class='save-button-conf'> + <button class='save-btn'> + SAVE + </button> + </div> + </div> + </div> + </div> +</body> +</html> \ No newline at end of file