Untitled

avatar
unknown
plain_text
3 years ago
19 kB
7
Indexable
modifica acest cod "<!DOCTYPE html>
<html lang="ro">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beat Store</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>

<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 1.6;
    }

    .navbar {
        margin-bottom: 30px;
    }

    .card {
        transition: transform 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card:hover {
        transform: scale(1.03);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    .card-img-top {
        object-fit: scale-down;
        margin: 0 auto;
        max-height: 150px;
        width: calc(100% - 30px);
        height: auto;
    }

    .footer {
        background-color: #f8f9fa;
        padding: 20px 0;
        margin-top: 30px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
    }

.col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
    max-width: fit-content;
}

.img-fluid.rounded {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

</style>

</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Beat Store</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Acasă</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Despre</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<div class="container">
    <h1 class="my-4 text-center">Achiziționează producții muzicale</h1>
    <div class="row">
        <?php
        include 'beat-db.php';
        $sql = "SELECT * FROM beats";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <div class="col-md-4">
                <div class="card">
                    <img src="<?php echo $row['image']; ?>" class="card-img-top img-fluid" alt="<?php echo $row['genre']; ?>">
                    <div class="card-body">
                        <h5 class="card-title"><?php echo pathinfo(basename($row['audio']), PATHINFO_FILENAME); ?></h5>
                        <p class="card-text"><?php echo pathinfo(basename($row['audio']), PATHINFO_FILENAME); ?></p>

                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyModal<?php echo $row['id']; ?>">Mai multe detalii</button>
                    </div>
                </div>
            </div>
            <!-- Modal -->
<div class="modal fade" id="buyModal<?php echo $row['id']; ?>" tabindex="-1" aria-labelledby="buyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="buyModalLabel"><?php echo pathinfo(basename($row['audio']), PATHINFO_FILENAME); ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-5">
                        <img src="<?php echo $row['image']; ?>" class="img-fluid rounded" alt="<?php echo $row['genre']; ?>">
                    </div>
                    <div class="col-md-7">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <strong>Gen muzical:</strong> <?php echo $row['genre']; ?>
                            </li>
                            <li class="list-group-item">
                                <strong>BPM:</strong> <?php echo $row['bpm']; ?>
                            </li>
                            <li class="list-group-item">
                                <strong>Tonalitate:</strong> <?php echo $row['key_signature']; ?>
                            </li>
                            <li class="list-group-item">
                                <strong>Preț:</strong> <?php echo $row['price']; ?> EUR
                            </li>
                        </ul>
                        <br>
                        <audio controls style="max-width: 100%;">
                            <source src="<?php echo $row['audio']; ?>" type="audio/mpeg">
                            Your browser does not support the audio element.
                        </audio>
                        <br><br>
                    <form action="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=${paypalEmail}&amount=${beatPrice}&item_name=Beat%20ID:%20${beatId}&currency_code=EUR" method="post" target="_top">
                        <input type="hidden" name="cmd" value="_s-xclick">
                        <input type="hidden" name="hosted_button_id" value="S6KYJU6S79DY6">
                        <input type="hidden" name="custom" value="<?php echo $row['id']; ?>">
                        <input type="hidden" name="amount" value="<?php echo $row['price']; ?>"> <!-- Auto-complete price -->
                        <div class="form-group">
                            <label for="name<?php echo $row['id']; ?>">Nume:</label>
                            <input type="text" class="form-control" id="name<?php echo $row['id']; ?>" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email<?php echo $row['id']; ?>">Email:</label>
                            <input type="email" class="form-control" id="email<?php echo $row['id']; ?>" name="email" required>
                        </div>
                        <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>
                    </form>

                    </div>
                </div>
            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Închide</button>
                </div>
            </div>
        </div>
    </div>
</div>
        <?php
            }
        } else {
            echo "<p class='text-center'>Momentan nu există beat-uri disponibile.</p>";
        }
        $conn->close();
        ?>
    </div>
</div>

<footer class="footer">
    <div class="container text-center">
        <p>&copy; 2023 Beat Store. Toate drepturile rezervate.</p>
    </div>
</footer>

<script>
    $(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");
        });
    });
</script>

    </script>
</body>

</html>"



incat sa functioneze exact ca acesta ca metoda "<?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>

"


ma refer strict pentru metoda de plata pentru butonul cumpara, corecteaza incat sa functioneze
Editor is loading...