beatstore.php

mail@pastecode.io avatar
unknown
php
2 years ago
11 kB
1
Indexable
<?php
session_start();

if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    $_SESSION['return_to_page'] = $_SERVER['REQUEST_URI'];
    header("location: login.php");
    exit;
}

// Preiați numele utilizatorului autentificat din variabila de sesiune
$uploader = $_SESSION['username'];

// Conectare la baza de date pentru dashboard
$servername_dashboard = "localhost";
$username_dashboard = "xtramus1_user";
$password_dashboard = "Pysquaifk!1@@XtraMusic";
$dbname_dashboard = "xtramus1_dashboard";

$conn_dashboard = new mysqli($servername_dashboard, $username_dashboard, $password_dashboard, $dbname_dashboard);

if ($conn_dashboard->connect_error) {
    die("Connection failed: " . $conn_dashboard->connect_error);
}


// Conectați-vă la baza de date pentru beat-uri
$servername = "localhost";
$username = "xtramus1_accounts";
$password = "Pysquaifk!1@@XtraMusic1234";
$dbname = "xtramus1_beatstore";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Selectați toate beat-urile din baza de date
$sql = "SELECT * FROM beats";
$result = $conn->query($sql);
$beat_data = [];

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $beat_data[] = $row;
    }
}
?>



<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beatstore</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./build/mediaelementplayer.min.css"/>

<script src="./build/mediaelement-and-player.min.js"></script>
<script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>


    <style>
        /* Adăugați aici stilurile CSS personalizate */
body {
    background-image: linear-gradient(to bottom right, white, black);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh; /* Adăugați această linie pentru a vă asigura că gradientul se întinde pe întreaga înălțime a paginii */
    margin: 0; /* Adăugați această linie pentru a elimina marginile implicite ale elementului body */
    backdrop-filter: blur(430px);
}

                .container {
            background-image: linear-gradient(to bottom right, #242424, #1a1a1a);
            color: #fff;
            font-family: Arial, sans-serif;
            padding: 50px 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Stilurile personalizate pentru tabel */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 40px;
            color:white;
        }

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #333;
  vertical-align: middle;
  color:white;
}


        th {
            background-color: #333;
            color:white;
        }
td {
    color:white;
}



.table-striped>tbody>tr:nth-of-type(odd)>* {
    color:white;
}
        /* Stilurile personalizate pentru butoane */
        .btn-primary {
            background-color: #1DB954;
            border-color: #1DB954;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            background-color: #13843c;
            border-color: #13843c;
        }

        .play-btn {
            background-color: #333;
            border-color: #333;
            color: #fff;
            transition: all 0.2s ease;
        }

        .play-btn:hover {
            background-color: #1DB954;
            border-color: #1DB954;
            color: #000;
        }

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(to bottom right, #242424, #1a1a1a);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
width: 90%;
max-width: 350px;
margin: 0 auto;
}

.popup .close-btn {
position: absolute;
top: 2px;
right: 29px;
font-size: 24px;
color: #666;
background-color: transparent;
border: none;
cursor: pointer;
transform: translateX(50%);
}

.popup audio {
width: 100%;
margin-bottom: 20px;
display: none;
}

.popup button.play-pause {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: #fff;
transition: all 0.2s ease;
}

.popup button.play-pause:hover {
color: #1DB954;
}

.popup .progress-bar {
height: 4px;
background-color: #333;
position: relative;
margin-top: 8px;
margin-bottom: 16px;
}

.popup .progress-bar .progress {
height: 100%;
width: 0;
position: absolute;
top: 0;
left: 0;
background-color: #1DB954;
transition: all 0.2s ease;
}

.popup .progress-bar .progress.playing {
width: 100%;
}

.popup .time {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #fff;
}

.popup .time span {
margin: 0 8px;
}

.popup .volume {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
}

.popup .volume .slider {
width: 100%;
height: 4px;
background-color: #333;
position: relative;
margin-left: 8px;
margin-right: 8px;
}

.popup .volume .slider .progress {
height: 100%;
width: 0;
position: absolute;
top: 0;
left: 0;
background-color: #1DB954;
transition: all 0.2s ease;
}

.popup .volume .slider .progress.volume {
width: 50%;
}

.popup .volume .icon {
font-size: 24px;
color: #fff;
cursor: pointer;
transition: all 0.2s ease;
}

.popup .volume .icon:hover {
color: #1DB954;
}
.mejs__container {
    background: #000;
    font-family: Helvetica,Arial,serif;
    position: relative;
    text-align: left;
    text-indent: 0;
    vertical-align: top;
    max-width: 316px;
    margin-bottom: 27px;
    margin-top: 30px;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h1 {
    position: relative;
    right: -40%;
}

    </style>

</head>
<body>
    <div class="container">
<div class="header-container">
    <h1>XTRA STORE</h1>
    <a href="./upload-beatstore.php" class="btn btn-primary">Încărcați un beat</a>
</div>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Titlu</th>
                    <th> </th>
                    <th>BPM</th>
                    <th>Tonalitate</th>
                    <th>Gen muzical</th>
                    <th>Uploader</th>
                    <th>Pret</th>
                </tr>
            </thead>
            <tbody>
<?php
                    foreach ($beat_data as $beat) {
                        echo "<tr>";
                        echo "<td>{$beat['name']}</td>";
                        echo "<td>
                            <button class='btn btn-primary play-btn' data-audio-id='{$beat['id']}'>Mai multe detalii</button>
                            <div id='popup-{$beat['id']}' class='popup'>
                                <button class='close-btn'>&times;</button>
                                <h2>{$beat['name']}</h2>
                                <audio controls class='mejs__player'><source src='" . $beat['file_path'] . "' type='audio/mpeg'/></audio>
                                <p><strong>BPM:</strong> {$beat['bpm']}</p>
                                <p><strong>Tonalitate:</strong> {$beat['tone_key']}</p>
                                <p><strong>Gen muzical:</strong> {$beat['genre']}</p>
                                <p><strong>Uploader:</strong> {$beat['uploader']}</p>
                                <p><strong>Mood:</strong> {$beat['main_mood']}, {$beat['secondary_mood']}</p>
                                <p><strong>Subgenuri:</strong> {$beat['subgenre']}</p>
                                <p><strong>Preț:</strong> {$beat['price']} Euro</p>
                                <button class='btn btn-primary buy-btn' data-beat-id='{$beat['id']}' data-beat-price='{$beat['price']}' data-paypal-email='{$beat['paypal_email']}'>Cumpără</button>";
                              


                        


echo "</div>";
echo "</td>";
echo "<td>{$beat['bpm']}</td>";
echo "<td>{$beat['tone_key']}</td>";
echo "<td>{$beat['genre']}</td>";
echo "<td>{$beat['uploader']}</td>";
echo "<td>{$beat['price']} &euro;</td>";
echo "</tr>";
}

?>
            </tbody>
        </table>
    </div>

<script>
  $(document).ready(function() {
$('.play-btn').on('click', function() {
    let audioId = $(this).data('audio-id');
    let popupElement = $('#popup-' + audioId);
    let audioElement = popupElement.find('audio')[0];

    // Verificați dacă fișierul audio poate fi redat
    if (!canPlayAudioType(audioElement, 'audio/mpeg')) {
        alert('Acest fișier audio nu este suportat de browserul dvs. web.');
        return;
    }

    audioElement.setAttribute('controls', '');
    audioElement.setAttribute('controlslist', 'nodownload');
    popupElement.show();

    $('.close-btn').on('click', function() {
        popupElement.hide();
    });
});

  });
$(document).ready(function () {
    $(".buy-btn").on("click", function () {
        const beatId = $(this).data("beat-id");
        const beatPrice = $(this).data("beat-price");
        const paypalEmail = $(this).data("paypal-email"); // Folosiți e-mailul PayPal specific beat-ului
        
        const paymentLink = `https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=${paypalEmail}&amount=${beatPrice}&item_name=Beat%20ID:%20${beatId}&currency_code=EUR`;
        window.open(paymentLink, "_blank");
    });
});

function canPlayAudioType(audioElement, type) {
    let canPlay = audioElement.canPlayType(type);
    return canPlay !== '' && canPlay !== 'no';
}

var contactBtns = document.querySelectorAll(".popup .contact-btn");
contactBtns.forEach(function(contactBtn) {
    contactBtn.addEventListener("click", function() {
        var userEmail = this.getAttribute("data-user-email");
        console.log("User email attribute:", userEmail); // Adăugați această linie
        var mailToLink = "mailto:" + userEmail;
        console.log("Mailto link:", mailToLink); // Adăugați această linie
        window.location.href = mailToLink;
    });
});









</script>
</body>
</html>