<?php
    include('../loginsession.php');
    error_reporting(E_ALL);
    $filename = __FILE__;  //---Nama file saat ini
    if (strlen(__FILE__) > 48) {$filename = substr(__FILE__, 48);}
    $save = mysqli_query($conn, "INSERT INTO novia_abc_user_logs (userid,filename) VALUES ('$userini_id','$filename')");
    
    /*
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
    */
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//ID" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="id">
<head>
   <title>MP3</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link href="../images/balance.ico" rel="icon" type="image/icon"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

	<style>
        body {
            background-image : url('../images/bg_brown_04.jpg');
            }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            font-family: 'Arial', sans-serif;
            color: #333;
        }
        .content {
            font-family: 'Arial', sans-serif;
            text-align: justify;
            color: #666;
        }
        .box{
			max-width: 100px;
			/*margin: 0px 0 0 100px;*/
			margin-left: 50px;
			font-family: "Time New Roman";
		}
		.song {
            text-align: right;
            font-family: 'Arial', sans-serif;
            color: #333;
        }
    </style>	
</head>

<body>
<br>
<a href="../coding/coding_main.php" title="Lihat Keuangan Hari ini"><button style="padding : 10px; width:100%; background-color:#546E7A;">CODING</button></a>
<br>
<br>
    <table width="100%" cellpadding="5">
		<tr class="dua">
		    <td width="33%"><a href="../index.php" title="Web Dr Rocky"><button style="padding : 10px; width:100%; background-color:#A6B7C1;"> HOME </button></a></td>
    		<td width="34%"><a href="../cash/cash-view-daily.php?tanggal=<?php echo date("Y-m-d");?>" title="Lihat Pengeluaran Hari ini"><button style="padding : 10px; width:100%; background-color:#8baca4;">KEUANGAN</button></a></td>
		    <td width="33%"><a href="../administrasi.php" title="Pusat Navigasi Data"><button style="padding : 10px; width:100%; background-color:#A6B7C1;"> NAVIGASI </button></a></td>
		</tr>
	</table>
    <br>
    <div class="container">
        <div class="header">
            <h1>Afirmasi Harian</h1>
        </div>
        <div class="content">
            <p>Halaman ini berisi afirmasi harian yang bersifat pasif. Cukup dengarkan dengan santai tapi penuh perhatian. Lebih baik didengar sambil bermeditasi, atau dengan sikap meditasi</p>
            <p></p>
        </div>
        <div class="song">
            <button id="musicButton_01" onclick="putarMusik_01()"><h3>Afirmasi Bangun Tidur</h3></button>
        </div>
        <br>
        <div class="song">
            <button id="musicButton_02" onclick="putarMusik_02()"><h3>Afirmasi Harian</h3></button>
        </div>
        <br>
        <div class="song">
            <button id="musicButton_03" onclick="putarMusik_03()"><h3>Afirmasi Sebelum Tidur</h3></button>
        </div>
    </div>

    <script>
      var sound_01;
    
      function putarMusik_01() {
        sound_01 = new Howl({
          src: ['https://www.drrocky.skin/abc/audio/bangun_tidur.mp3'],
          html5: true,
          loop: true
        });
    
        sound_01.play();
        
        var button = document.getElementById("musicButton_01");
            button.innerHTML = "Berhenti Afirmasi Bangun Tidur";
            button.setAttribute("onclick", "berhentiMusik_01()");
      }
    
      function berhentiMusik_01() {
        if (sound_01) {
          sound_01.stop();
        }
        var button = document.getElementById("musicButton_01");
            button.innerHTML = "<h3>Putar Afirmasi Bangun Tidur</h3>";
            button.setAttribute("onclick", "putarMusik_01()");
      }
    </script>
    
    <script>
      var sound_02;
    
      function putarMusik_02() {
        sound_02 = new Howl({
          src: ['https://www.drrocky.skin/abc/audio/afirmasi_harian.mp3'],
          html5: true,
          loop: true
        });
    
        sound_02.play();
        
        var button = document.getElementById("musicButton_02");
            button.innerHTML = "Berhenti Afirmasi Harian";
            button.setAttribute("onclick", "berhentiMusik_02()");
      }
    
      function berhentiMusik_02() {
        if (sound_02) {
          sound_02.stop();
        }
        var button = document.getElementById("musicButton_02");
            button.innerHTML = "<h3>Putar Afirmasi Harian</h3>";
            button.setAttribute("onclick", "putarMusik_02()");
      }
    </script>
    
    <script>
      var sound_03;
    
      function putarMusik_03() {
        sound_03 = new Howl({
          src: ['https://www.drrocky.skin/abc/audio/sebelum_tidur.mp3'],
          html5: true,
          loop: true
        });
    
        sound_03.play();
        
        var button = document.getElementById("musicButton_03");
            button.innerHTML = "Berhenti Afirmasi Sebelum Tidur";
            button.setAttribute("onclick", "berhentiMusik_03()");
      }
    
      function berhentiMusik_03() {
        if (sound_03) {
          sound_03.stop();
        }
        var button = document.getElementById("musicButton_03");
            button.innerHTML = "<h3>Putar Afirmasi Sebelum Tidur</h3>";
            button.setAttribute("onclick", "putarMusik_03()");
      }
    </script>
</body>
</html>