:: **Zploit** v1.0 | Current Path: **/home/kreativepixelz/www/demo/soulmeetvivah.com/member/**
:: Editing File: my-photos.php
<?php include('header.php'); include('php/fetch_photo_gallery.php'); ?> <style type="text/css"> /* ============================================ Modern Photo Gallery UI Styles ============================================ */ .banner-user .media .item-title:before { content: "\eed6"; font-family: IcoFont; text-align: center; display: inline-block; height: 26px; width: 26px; line-height: 26px; background-color: #17dd17; border-radius: 50%; font-size: 20px; color: #ffffff; position: absolute; top: 1px; right: -38px; } /* ============================================ Modern Tab Navigation Styles ============================================ */ .user-top-header { background: #fff; border-radius: 15px; padding: 0; box-shadow: 0 5px 20px rgba(0,0,0,0.1); margin-bottom: 30px; overflow: hidden; } .menu-list { list-style: none; padding: 0; margin: 0; display: flex; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); border-bottom: 3px solid #e0e0e0; position: relative; } .menu-list::after { content: ''; position: absolute; bottom: -3px; left: 0; height: 3px; background: #cd4252; transition: width 0.3s ease; width: 0; } .menu-list li { position: relative; flex: 1; text-align: center; transition: all 0.3s ease; } .menu-list li:not(:last-child) { border-right: 1px solid rgba(0,0,0,0.1); } .menu-list li a { display: flex; align-items: center; justify-content: center; padding: 18px 20px; text-decoration: none; color: #666; font-weight: 600; font-size: 15px; transition: all 0.3s ease; position: relative; text-transform: uppercase; letter-spacing: 0.5px; gap: 10px; } .menu-list li a i { font-size: 18px; transition: all 0.3s ease; } .menu-list li:hover:not(.active) a { color: #cd4252; background: rgba(205, 66, 82, 0.05); } .menu-list li:hover:not(.active) a i { transform: scale(1.1); } .menu-list .active { background: #cd4252; position: relative; } .menu-list .active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.3); } .menu-list .active a { color: #fff !important; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .menu-list .active a i { color: #fff; transform: scale(1.15); } /* Tab Icons */ .menu-list li a i { opacity: 0.8; } .menu-list .active a i { opacity: 1; } /* Responsive Tabs */ @media (max-width: 768px) { .menu-list { flex-wrap: wrap; } .menu-list li { flex: 1 1 50%; min-width: 50%; } .menu-list li a { padding: 15px 10px; font-size: 13px; flex-direction: column; gap: 5px; } .menu-list li a i { font-size: 20px; } } @media (max-width: 480px) { .menu-list li { flex: 1 1 100%; } } /* Photo Gallery Container */ .photo-gallery-container { padding: 20px 0; } /* Profile Image Section */ .current-profile-section { background: #cd4252; border-radius: 15px; padding: 25px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(205, 66, 82, 0.3); } .current-profile-section .widget-heading h3 { color: #fff !important; font-weight: 600; margin-bottom: 20px; } /* Photo Card Styles */ .photo-card { position: relative; margin-bottom: 25px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; background: #fff; } .photo-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .photo-card .photo-wrapper { position: relative; width: 100%; height: 280px; overflow: hidden; background: #f5f5f5; } .photo-card .photo-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .photo-card:hover .photo-wrapper img { transform: scale(1.05); } .photo-card.profile-active .photo-wrapper { border: 4px solid #cd4252; border-radius: 15px 15px 0 0; } .photo-card.profile-active::before { content: ''; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: #cd4252; border-radius: 50%; z-index: 10; box-shadow: 0 3px 10px rgba(205, 66, 82, 0.4); } .photo-card.profile-active::after { content: '\eed6'; font-family: IcoFont; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 20px; z-index: 11; } /* Photo Actions */ .photo-actions { padding: 15px; background: #fff; text-align: center; } .photo-actions .btn-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Modern Button Styles */ .btn-modern { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .btn-modern:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .btn-modern:active { transform: translateY(0); } .btn-set-profile { background: #cd4252; color: #fff; } .btn-set-profile:hover { background: #b83847; color: #fff; } .btn-delete { background: #e74c3c; color: #fff; } .btn-delete:hover { background: #c0392b; color: #fff; } .btn-current-profile { background: #cd4252; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 3px 10px rgba(205, 66, 82, 0.3); } /* Upload Card */ .upload-card { position: relative; margin-bottom: 25px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; background: linear-gradient(135deg, #f5f7fa 0%, #ffe5e8 100%); border: 3px dashed #cd4252; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .upload-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(205, 66, 82, 0.3); border-color: #b83847; } .upload-card .upload-icon { width: 80px; height: 80px; background: #cd4252; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(205, 66, 82, 0.4); transition: all 0.3s ease; } .upload-card:hover .upload-icon { transform: scale(1.1) rotate(90deg); } .upload-card .upload-icon i { font-size: 40px; color: #fff; } .upload-card .upload-text { color: #cd4252; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; } /* No Profile Image Placeholder */ .no-profile-placeholder { height: 280px; width: 100%; border: 3px dashed #ddd; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); color: #999; font-size: 16px; transition: all 0.3s ease; } .no-profile-placeholder:hover { border-color: #cd4252; background: linear-gradient(135deg, #ffe5e8 0%, #f5f7fa 100%); } .no-profile-placeholder i { font-size: 48px; margin-bottom: 10px; opacity: 0.5; } /* Modal Styles */ .modal-content { border-radius: 15px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } .modal-header { background: #cd4252; color: #fff; border-radius: 15px 15px 0 0; padding: 20px 25px; } .modal-header .modal-title { font-weight: 600; font-size: 20px; } .modal-header .close { color: #fff; opacity: 0.9; font-size: 28px; text-shadow: none; } .modal-header .close:hover { opacity: 1; } .modal-body { padding: 30px; } .modal-footer { border-top: 1px solid #e9ecef; padding: 20px 25px; border-radius: 0 0 15px 15px; } .btn-choose-image { background: #cd4252; color: #fff; border: none; padding: 12px 25px; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(205, 66, 82, 0.3); } .btn-choose-image:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(205, 66, 82, 0.4); background: #b83847; color: #fff; } .preview-image-container { margin-top: 20px; text-align: center; } .preview-image-container img { max-width: 100%; max-height: 400px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); } /* Responsive Design */ @media (max-width: 768px) { .photo-card .photo-wrapper { height: 220px; } .upload-card { height: 220px; } .no-profile-placeholder { height: 220px; } .btn-modern { padding: 8px 15px; font-size: 12px; } } /* Loading Animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .btn-modern:disabled { opacity: 0.6; cursor: not-allowed; animation: pulse 2s infinite; } /* Section Headings */ .section-heading { font-size: 24px; font-weight: 700; color: #2c3e50; margin-bottom: 25px; position: relative; padding-bottom: 15px; } .section-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background: #cd4252; border-radius: 2px; } </style> <div style="height: 100px;"></div> <!-- Page Content --> <div class="page-content"> <?php if ($verified_status == 1) { ?> <style type="text/css"> .banner-user .media .item-title:before { content: "\eed6"; font-family: IcoFont; text-align: center; display: inline-block; height: 26px; width: 26px; line-height: 26px; background-color: #17dd17; border-radius: 50%; font-size: 20px; color: #ffffff; position: absolute; top: 1px; right: -38px; } </style> <?php } ?> <div class="container"> <!-- Menu Navigation --> <div class="user-top-header"> <ul class="menu-list"> <li><a href="my-soulmeet"> <i class="icofont-user"></i> <span>My Profile</span> </a></li> <li class="active"><a href="my-photos"> <i class="icofont-picture"></i> <span>My Photos</span> </a></li> <li><a href="partner-preferences"> <i class="icofont-heart"></i> <span>Partner Preferences</span> </a></li> <li><a href="settings"> <i class="icofont-settings"></i> <span>Setting</span> </a></li> </ul> </div> <!-- Current Profile Image Section --> <div class="current-profile-section"> <div class="widget-heading"> <div> <h3 style="font-size: 20px!important; color: #fff!important;"> <i class="icofont-image" style="margin-right: 10px;"></i>Current Profile Image </h3> </div> </div> <div class="row"> <div class="col-lg-3 col-md-4 col-6"> <div class="photo-card profile-active"> <?php $img_path = '../admin/images/members/'; $current_profile_img = ''; $user_id_escaped_profile = mysqli_real_escape_string($conn, $user_id); $sql_current_profile = "SELECT profile_img FROM profile_images WHERE user_id = '$user_id_escaped_profile'"; $result_current_profile = mysqli_query($conn, $sql_current_profile); if ($result_current_profile && mysqli_num_rows($result_current_profile) > 0) { $row_profile = mysqli_fetch_assoc($result_current_profile); $current_profile_img = $row_profile['profile_img']; } if (!empty($current_profile_img)) { ?> <div class="photo-wrapper"> <a href="<?=$img_path?><?=$current_profile_img?>" class="popup-zoom"> <img src="<?=$img_path?><?=$current_profile_img?>" alt="Current Profile Image"> </a> </div> <div class="photo-actions"> <span class="btn-current-profile"> <i class="icofont-check-circled"></i> Current Profile </span> </div> <?php } else { ?> <div class="no-profile-placeholder"> <i class="icofont-user"></i> <span>No Profile Image</span> </div> <?php } ?> </div> </div> </div> </div> <!-- Photos Gallery --> <div class="block-box user-about" style="margin-top: 20px;"> <div class="widget-heading"> <div> <h3 class="section-heading" style="font-size: 24px!important; margin-bottom: 25px;"> <i class="icofont-picture" style="margin-right: 10px; color: #cd4252;"></i>Photo Gallery </h3> </div> </div> <div class="row gutters-20 zoom-gallery" id="fetchPhotos"> <?php $total = 0; $img_path = '../admin/images/members/'; // Check if photo_gallery table exists, create if not $table_check = mysqli_query($conn, "SHOW TABLES LIKE 'photo_gallery'"); if (!$table_check || mysqli_num_rows($table_check) == 0) { // Create the table $sql_create_table = "CREATE TABLE IF NOT EXISTS `photo_gallery` ( `photo_id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, `img_name` varchar(255) NOT NULL, `status` int(11) DEFAULT '1', `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`photo_id`), KEY `user_id` (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8"; mysqli_query($conn, $sql_create_table); } $user_id_escaped = mysqli_real_escape_string($conn, $user_id); $sql_fetch_gallery = "SELECT * FROM photo_gallery WHERE user_id = '$user_id_escaped' AND status = '1'"; $result_fetch_gallery = mysqli_query($conn, $sql_fetch_gallery); if (mysqli_num_rows($result_fetch_gallery) > 0) { foreach ($result_fetch_gallery as $row) { $total++; $is_current_profile = ($row['img_name'] == $current_profile_img); ?> <div class="col-lg-3 col-md-4 col-6"> <div class="photo-card <?=$is_current_profile ? 'profile-active' : ''?>"> <div class="photo-wrapper"> <a href="<?=$img_path?><?=$row['img_name']?>" class="popup-zoom"> <img src="<?=$img_path?><?=$row['img_name']?>" alt="Soulmeet Vivah"> </a> </div> <div class="photo-actions"> <div class="btn-group"> <?php if ($is_current_profile) { ?> <span class="btn-current-profile"> <i class="icofont-check-circled"></i> Current Profile </span> <?php } else { ?> <button class="btn-modern btn-set-profile set_profile_photo" data-photo-id="<?=$row['photo_id']?>" data-img-name="<?=$row['img_name']?>"> <i class="icofont-image"></i> Set as Profile </button> <?php } ?> <button class="btn-modern btn-delete delete_photo" id="<?=$row['photo_id']?>"> <i class="icofont-trash"></i> Delete </button> </div> </div> </div> </div> <?php } } ?> <?php if ($total < 4) { ?> <div class="col-lg-3 col-md-4 col-6"> <div class="upload-card" id="upload_photo"> <div class="upload-icon"> <i class="icofont-plus"></i> </div> <div class="upload-text">Upload Image</div> </div> </div> <?php } ?> </div> </div> <br><br> </div> <!-- Upload Photo Modal --> <button style="display:none;" type="button" class="btn btn-primary uploadphotomodalbtn" data-toggle="modal" data-target="#uploadphotomodal"> Launch demo modal </button> <form id="imageUploadForm" enctype="multipart/form-data"> <div class="modal fade" id="uploadphotomodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Upload Image</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p style="color: #666; margin-bottom: 20px; font-size: 14px;"> <i class="icofont-info-circle" style="margin-right: 5px;"></i> Select an image from your device. Maximum file size: 5MB. Supported formats: JPG, PNG, GIF </p> <div style="text-align: center;"> <button type="button" class="btn-choose-image" onclick="$('#choose_img').click();"> <i class="icofont-upload" style="margin-right: 8px;"></i> Choose Image </button> </div> <div class="preview-image-container"> <img class="profile_img" id="profile_img" src="" style="display: none;"> </div> <input style="display: none;" type="file" name="profileImage" id="choose_img" accept="image/jpeg,image/jpg,image/png,image/gif"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary modal_close_btn" data-dismiss="modal" style="border-radius: 8px; padding: 10px 20px;"> <i class="icofont-close" style="margin-right: 5px;"></i> Close </button> <button type="submit" id="uploadBtn" class="btn-choose-image" style="border-radius: 8px; padding: 10px 25px;"> <i class="icofont-upload" style="margin-right: 8px;"></i> Upload </button> </div> </div> </div> </div> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> <script type="text/javascript"> // Initialize Magnific Popup for image zoom $(document).ready(function() { $('.popup-zoom').magnificPopup({ type: 'image', gallery: { enabled: true } }); }); $('#upload_photo').click(function() { $('#uploadphotomodal').modal('show'); }); // Reset form when modal is closed $('#uploadphotomodal').on('hidden.bs.modal', function () { $('#imageUploadForm')[0].reset(); $('#profile_img').hide().attr('src', ''); $('#uploadBtn').prop('disabled', false).text('Upload'); }); $('#choose_img').change(function() { if (this.files && this.files[0]) { var file = this.files[0]; // Validate file size (5MB max) if (file.size > 5 * 1024 * 1024) { alert('File size exceeds 5MB limit. Please choose a smaller file.'); $(this).val(''); return; } // Validate file type var allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']; if (!allowedTypes.includes(file.type)) { alert('Invalid file type. Only JPEG, PNG, and GIF are allowed.'); $(this).val(''); return; } var reader = new FileReader(); reader.onload = function(e) { $('#profile_img').attr('src', e.target.result).show(); }; reader.readAsDataURL(file); } }); $(document).ready(function(){ $("#imageUploadForm").submit(function(e){ e.preventDefault(); // Check if file is selected var fileInput = document.getElementById('choose_img'); if (!fileInput.files || !fileInput.files[0]) { alert('Please select an image to upload.'); return; } var formData = new FormData(this); formData.append('user_id', '<?=$user_id?>'); $('#uploadBtn').prop('disabled', true).text('Uploading...'); $.ajax({ url: 'php/update_photos.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(response){ $('#uploadBtn').prop('disabled', false).text('Upload'); $('#uploadphotomodal').modal('hide'); alert(response); location.reload(); }, error: function(xhr, status, error){ $('#uploadBtn').prop('disabled', false).text('Upload'); console.error('Upload Error:', error); console.error('Status:', status); console.error('Response:', xhr.responseText); var errorMsg = 'Error uploading image. '; if (xhr.responseText) { errorMsg += xhr.responseText; } else { errorMsg += 'Please try again.'; } alert(errorMsg); } }); }); }); $('.delete_photo').click(function(){ if (!confirm('Are you sure you want to delete this photo?')) { return; } var id = $(this).attr("id"); var button = $(this); button.prop('disabled', true).text('Deleting...'); $.ajax({ url:'php/delete_photo.php', method:'POST', data:{id:id, user_id: '<?=$user_id?>'}, success:function(res){ if (res == '1' || res.trim() == '1') { alert('Photo deleted successfully!'); location.reload(); } else { alert('Failed to delete photo. ' + res); button.prop('disabled', false).text('Delete'); } }, error: function() { alert('Error deleting photo. Please try again.'); button.prop('disabled', false).text('Delete'); } }); }); // Set photo as profile image $(document).on('click', '.set_profile_photo', function(){ var photo_id = $(this).data('photo-id'); var img_name = $(this).data('img-name'); var button = $(this); if(confirm("Set this photo as your profile image?")) { button.prop('disabled', true).text('Setting...'); $.ajax({ url:'php/set_profile_from_gallery.php', method:'POST', data:{ photo_id: photo_id, img_name: img_name, user_id: '<?=$user_id?>' }, success:function(res){ if(res.trim() == '1') { alert("Profile image updated successfully!"); location.reload(); } else { alert("Error: " + res); button.prop('disabled', false).text('Set as Profile'); } }, error:function(xhr, status, error){ alert("An error occurred. Please try again."); console.error("Error:", error); button.prop('disabled', false).text('Set as Profile'); } }); } }); </script> <?php include('footer.php'); ?>