diff --git a/View/Pages/Lagu.php b/View/Pages/Lagu.php index 9d2869b6630e41d7c44f4cee6adcece33a586a57..1e132b0340536c7e22d1dbb189f7ed78c709bd0f 100644 --- a/View/Pages/Lagu.php +++ b/View/Pages/Lagu.php @@ -8,25 +8,39 @@ $this->layout("Templates/PageTemplate", [ "auth" => $auth, "page" => "lagu", "styles" => [ - "/static/css/form.css" + "/static/css/form.css", + "/static/css/lagu.css" ], ]); ?> <p id="status"><?= $status ?? ""?></p> -<div id="imageContainer"> - <img src="<?= $image_path ?>" alt="<?= $title ?> by <?= $singer_name ?>" id="image"> +<div> + +</div> +<div class="container__lagu"> + <div id="imageContainer"> + <img src="<?= $image_path ?>" alt="<?= $title ?> by <?= $singer_name ?>" id="image"> + </div> + <div class="detail"> + <p id="title">Judul: <?= $title ?></p> + <audio controls> + <source src="<?= $audio_path ?>" type="<?= $sound_type ?>" id="audio"> + </audio> + + <div> + <p id="singer_name">Penyanyi: <?= $singer_name ?></p> + <p id="release_date" data-date-type="<?= $date ?>">Tanggal Rilis: <?= $release_date ?></p> + <p id="genre">Genre: <?= $genre ?></p> + <p id="duration">Durasi: <?= $duration ?></p> + </div> + <div> + <?php if (isset($auth) && $auth->is_admin) { + echo <<<XYZ + <button id="edit">Edit Lagu</button> + XYZ; + }?> + </div> + </div> + </div> -<audio controls> - <source src="<?= $audio_path ?>" type="<?= $sound_type ?>" id="audio"> -</audio> -<p id="title">Judul: <?= $title ?></p> -<p id="singer_name">Penyanyi: <?= $singer_name ?></p> -<p id="release_date" data-date-type="<?= $date ?>">Tanggal Rilis: <?= $release_date ?></p> -<p id="genre">Genre: <?= $genre ?></p> -<p id="duration">Durasi: <?= $duration ?></p> -<?php if (isset($auth) && $auth->is_admin) { - echo <<<XYZ - <button id="edit">Edit Lagu</button> - XYZ; - }?> <input type="hidden" name="id" value=<?= $id ?>> \ No newline at end of file diff --git a/static/css/lagu.css b/static/css/lagu.css new file mode 100644 index 0000000000000000000000000000000000000000..2e99593bf9942bcf57cd35d778cf6ff072e1473c --- /dev/null +++ b/static/css/lagu.css @@ -0,0 +1,29 @@ +.container__lagu { + display: flex; + width: 100%; + gap: 1.5rem; +} + +#imageContainer { + width: 200px; +} + +.inner-detail { + margin: 10px 0; +} + +#image { + border-radius: 10px; + width: 100%; +} + +.container__lagu button { + margin: 10px; + background-color: #33373b; + color: white; +} + +.container__lagu button:hover { + background-color: #036496; + color: white; +}