1#@!#!123s

: / home / markniuj / bazmeasar.com /
Filename : details_error.php
back
<?php
// Database connection parameters
        include 'config.php';
// Retrieve the audio file's ID from the query string
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $audio_id = $_GET['id'];

    // Query to select the specific audio file
    $query = "SELECT * FROM audio_files WHERE id = $audio_id";
    $result = $conn->query($query);

    if ($result && $result->num_rows > 0) {
        // Fetch audio file details
        $row = $result->fetch_assoc();
        $english_title = $row["english_title"];
        $urdu_title = $row["urdu_title"];
        $speaker = $row["speaker"];
        $category = $row["category"];
        $details = $row["details"];          
         $upload_date = date('Y-m-d', strtotime($row["upload_date"]));
        $audio_filename = $row["audio_filename"];
        $image_filename = $row["image_filename"];
        $hits = $row["hits"];
    } else {
        echo "Audio file not found.";
    }
} else {
    echo "Invalid audio file ID.";
}

// Close the database connection
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title><?php echo $english_title; ?></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <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=Barlow:wght@600;700&family=Ubuntu:wght@400;500&display=swap" rel="stylesheet"> 
    
    <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=Amiri+Quran&family=Noto+Nastaliq+Urdu:wght@600&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    
    
    
     <style>
        .row {
            display: flex;
            justify-content: space-between;
            margin: 20px 0; /* Add margin for space between rows */
        }
        .urdu{
            font-family: 'Amiri Quran', serif;
font-family: 'Noto Nastaliq Urdu', serif;

        
        }

        .column {
            width: 99%; /* Adjust the width as needed */
            background-color: #f1f1f1;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ddd; /* Optional: Add border for visual separation */
        }



    #app {
        text-align: center;
    }

    .audio-container {
        max-width: 600px;
        margin: auto;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .audio {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 10px;
        outline: none;
    }

    .controls {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    button {
        background-color: #3498db;
        color: white;
        padding: 15px 30px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin: 10px;
        transition: background-color 0.3s ease;
        font-size: 16px;
        outline: none;
    }

    button.active {
        background-color: #e74c3c;
    }

    input.volume-control {
        width: 100%;
        margin: 15px;
    }

    .progress-bar {
        height: 8px;
        background-color: #2ecc71;
        width: 0;
        transition: width 0.3s ease-in-out;
        border-radius: 5px;
    }
</style>

    
    
</head>

<body>
    <!-- Spinner Start -->
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->




    <!-- Navbar Start -->
    <?php include 'include/menu.php';?>
    <!-- Navbar End -->



    <!-- Team Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                <h6 class="text-primary text-uppercase">// Mian Category >>> <?php echo $category; ?> //</h6>
                <h1 class="mb-5"><?php echo $english_title; ?></h1>
            </div>
            <div class="row g-12">
             <div class="col-lg-3 col-md-2 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="team-item">
                 
                        </div></div></div>
   
                
             <div class="row g-2">    
                <div class="col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="team-item">
  
<div id="app">
    <div class="audio-container">
                <h4><?php echo $speaker; ?></h4>

    <div class='urdu'>(<?php echo $urdu_title; ?>)</div>
     <p>    <?php echo $upload_date; ?></p>
    <h7 class="mb-5"><?php echo $english_title; ?></h7><br></br>
             <h7><img src="admin/uploads/images/<?php echo $image_filename; ?>" alt="Urdu bayan"></h7></br>
             </br>
        <audio ref="audioPlayer" :src="audioSource" @ended="audioEnded" class="audio" controls></audio>
        <div class="controls">
            <button @click="togglePlayPause" :class="{ 'active': isPlaying }">
                {{ isPlaying ? 'Pause' : 'Play' }}
            </button>
            <button @click="downloadAudio">Download</button>
            <input type="range" v-model="volume" max="1" step="0.01" class="volume-control">
        </div>
        <div class="progress-bar" ref="progressBar"></div>
        
        
        
<div class="row">
    <div class="column">
        <!-- Content for the second column -->
        <h5>DETAILS:</h5>
        <p><?php echo $details; ?></p>
    </div>

 </div>
     </div>
          </div>

<script src="https://unpkg.com/vue@next"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                audioSource: 'admin/uploads/audio/<?php echo $audio_filename; ?>',
                isPlaying: false,
                volume: 1,
            };
        },
        methods: {
            togglePlayPause() {
                const audio = this.$refs.audioPlayer;
                this.isPlaying ? audio.pause() : audio.play();
                this.isPlaying = !this.isPlaying;
            },
            audioEnded() {
                this.isPlaying = false;
            },
            downloadAudio() {
                const audio = this.$refs.audioPlayer;
                const a = document.createElement('a');
                a.href = audio.src;
                a.download = 'downloaded-audio.mp3';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            },
        },
        watch: {
            volume(newVolume) {
                this.$refs.audioPlayer.volume = newVolume;
            },
        },
    });

    app.mount('#app');
</script>

    <!-- Provide a link to download the audio file -->
    <p><a href="uploads/audio/<?php echo $audio_filename; ?>" download><h1></h1></a></p>

                        <div class="bg-light text-center p-4">
                           
                        </div>
                    </div>
                </div>












          </div>
        </div>
    </div>
    <!-- Team End -->
    
    
    
    
    
    
    
    
    

    <!-- Footer Start -->
<?php include 'include/footer.php';?>
    <!-- Footer End -->


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/counterup/counterup.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/tempusdominus/js/moment.min.js"></script>
    <script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
    <script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Template Javascript -->

    <script src="js/main.js"></script>
    
</body>

</html>