457 lines
14 KiB
PHP
457 lines
14 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Popup Konfirmasi Edit</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--primary-color: #2196F3;
|
|
--primary-hover: #1976D2;
|
|
--dark-color: #1a2e4c;
|
|
--text-color: #333;
|
|
--text-light: #666;
|
|
--shadow-color: rgba(33, 150, 243, 0.3);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: linear-gradient(135deg, #1a2e4c 0%, #2c3e67 100%);
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle, transparent 20%, #1a2e4c 80%);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
animation: float 15s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0) translateX(0);
|
|
}
|
|
25% {
|
|
transform: translateY(-50px) translateX(50px);
|
|
}
|
|
50% {
|
|
transform: translateY(-100px) translateX(0);
|
|
}
|
|
75% {
|
|
transform: translateY(-50px) translateX(-50px);
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(5px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.popup {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 20px;
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 30px 60px rgba(0, 0, 0, 0.3);
|
|
width: 420px;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 40px 30px 35px;
|
|
transform: translateY(30px);
|
|
opacity: 0;
|
|
animation: popup-appear 0.6s ease-out forwards;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes popup-appear {
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.success-icon-wrapper {
|
|
position: relative;
|
|
width: 110px;
|
|
height: 110px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #2196F3, #1E88E5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: -75px auto 20px;
|
|
box-shadow: 0 10px 20px var(--shadow-color);
|
|
animation: icon-bounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
|
|
transform: scale(0);
|
|
}
|
|
|
|
@keyframes icon-bounce {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
80% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.success-icon-wrapper::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: var(--primary-color);
|
|
z-index: -1;
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.3;
|
|
}
|
|
70% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.edit-icon {
|
|
color: white;
|
|
font-size: 42px;
|
|
animation: icon-appear 0.4s ease-in-out 0.8s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes icon-appear {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.popup-title {
|
|
color: var(--text-color);
|
|
font-size: 38px;
|
|
font-weight: 700;
|
|
margin: 15px 0 5px;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: text-appear 0.6s ease-out 0.4s forwards;
|
|
}
|
|
|
|
.popup-message {
|
|
color: var(--text-light);
|
|
margin: 10px 0 35px;
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
padding: 0 15px;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: text-appear 0.6s ease-out 0.6s forwards;
|
|
}
|
|
|
|
@keyframes text-appear {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.ok-button {
|
|
background: linear-gradient(145deg, #2196F3, #1E88E5);
|
|
color: white;
|
|
border: none;
|
|
padding: 16px 0;
|
|
width: 100%;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 15px var(--shadow-color);
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
animation: button-appear 0.6s ease-out 0.8s forwards;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes button-appear {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.ok-button:hover {
|
|
background: linear-gradient(145deg, #1E88E5, #1976D2);
|
|
box-shadow: 0 15px 20px var(--shadow-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.ok-button:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 5px 10px var(--shadow-color);
|
|
}
|
|
|
|
.ok-button .ripple {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
transform: scale(0);
|
|
animation: ripple 0.8s linear;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
to {
|
|
transform: scale(2.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.confetti {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
opacity: 0;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.popup {
|
|
width: 90%;
|
|
padding: 30px 20px 25px;
|
|
}
|
|
|
|
.success-icon-wrapper {
|
|
width: 90px;
|
|
height: 90px;
|
|
margin: -60px auto 15px;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.popup-message {
|
|
font-size: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<div class="overlay">
|
|
<div class="popup">
|
|
<div class="success-icon-wrapper">
|
|
<i class="fas fa-edit edit-icon"></i>
|
|
</div>
|
|
<h2 class="popup-title">Perubahan Tersimpan!</h2>
|
|
<p class="popup-message">Berita telah berhasil diperbarui.</p>
|
|
<button class="ok-button" id="okButton">OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Create particles in the background
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 20;
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
|
|
// Random size, position and animation delay
|
|
const size = Math.random() * 6 + 2;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
const delay = Math.random() * 10;
|
|
const opacity = Math.random() * 0.6 + 0.2;
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.top = `${posY}%`;
|
|
particle.style.animationDelay = `${delay}s`;
|
|
particle.style.opacity = opacity;
|
|
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// Create a ripple effect on button
|
|
function createRipple(event) {
|
|
const button = event.currentTarget;
|
|
const circle = document.createElement('span');
|
|
const diameter = Math.max(button.clientWidth, button.clientHeight);
|
|
const radius = diameter / 2;
|
|
|
|
circle.style.width = circle.style.height = `${diameter}px`;
|
|
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
|
|
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
|
|
circle.classList.add('ripple');
|
|
|
|
const ripple = button.getElementsByClassName('ripple')[0];
|
|
if (ripple) {
|
|
ripple.remove();
|
|
}
|
|
|
|
button.appendChild(circle);
|
|
|
|
// Close popup with a slight delay to see the ripple effect
|
|
setTimeout(() => {
|
|
closePopup();
|
|
}, 300);
|
|
}
|
|
|
|
// Create confetti effect
|
|
function createConfetti() {
|
|
const confettiCount = 100;
|
|
const colors = ['#2196F3', '#42A5F5', '#64B5F6', '#90CAF9', '#BBDEFB'];
|
|
const popup = document.querySelector('.popup');
|
|
|
|
for (let i = 0; i < confettiCount; i++) {
|
|
const confetti = document.createElement('div');
|
|
confetti.classList.add('confetti');
|
|
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
const size = Math.random() * 8 + 4;
|
|
const posX = Math.random() * 100;
|
|
|
|
confetti.style.backgroundColor = color;
|
|
confetti.style.width = `${size}px`;
|
|
confetti.style.height = `${size}px`;
|
|
confetti.style.left = `${posX}%`;
|
|
confetti.style.top = '-10px';
|
|
|
|
const animationDuration = Math.random() * 3 + 2;
|
|
const animationDelay = Math.random() * 0.5;
|
|
|
|
confetti.style.animation = `confetti-fall ${animationDuration}s ease-in ${animationDelay}s forwards`;
|
|
|
|
// Create randomly rotated confetti
|
|
const rotation = Math.random() * 360;
|
|
confetti.style.transform = `rotate(${rotation}deg)`;
|
|
|
|
document.body.appendChild(confetti);
|
|
}
|
|
|
|
// Add confetti fall animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes confetti-fall {
|
|
0% {
|
|
opacity: 1;
|
|
top: -10px;
|
|
transform: translateX(0) rotate(0deg);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translateX(${Math.random() > 0.5 ? '+' : '-'}${Math.random() * 50}px) rotate(${Math.random() * 360}deg);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
top: 110vh;
|
|
transform: translateX(${Math.random() > 0.5 ? '+' : '-'}${Math.random() * 100}px) rotate(${Math.random() * 720}deg);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Function to show the popup
|
|
function showPopup() {
|
|
document.querySelector('.overlay').style.display = 'flex';
|
|
setTimeout(createConfetti, 800); // Start confetti after popup appears
|
|
}
|
|
|
|
// Function to close the popup
|
|
function closePopup() {
|
|
const overlay = document.querySelector('.overlay');
|
|
const popup = document.querySelector('.popup');
|
|
|
|
popup.style.animation = 'popup-disappear 0.4s ease-in forwards';
|
|
|
|
// Add popup disappear animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes popup-disappear {
|
|
to {
|
|
transform: translateY(30px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
setTimeout(() => {
|
|
overlay.style.display = 'none';
|
|
window.location.href = '{{ url("/Berita") }}';
|
|
}, 400);
|
|
}
|
|
|
|
// Initialize
|
|
window.onload = function() {
|
|
createParticles();
|
|
showPopup();
|
|
|
|
const okButton = document.getElementById('okButton');
|
|
okButton.addEventListener('click', createRipple);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |