Prvi commit: Začetna verzija vtičnika Wheel of Fortune
This commit is contained in:
Mark Poljanšek committed
commit
0d28b08727
21 files changed
+13814
No files matched your search
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Congratulations on your win!</title>
|
||||
</head>
|
||||
<body style="font-family: Arial, sans-serif; margin: 20px; padding: 0; background-color: #f4f4f4;">
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; background-color: #ffffff; border: 1px solid #dddddd;">
|
||||
<tr>
|
||||
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #ffffff; font-size: 28px; font-weight: bold;">
|
||||
Congratulations, {user_name}!
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
|
||||
<h1 style="color: #333333;">You've won a prize!</h1>
|
||||
<p style="color: #555555; font-size: 16px;">
|
||||
You just won a fantastic prize on our Wheel of Fortune:
|
||||
</p>
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px;">
|
||||
<tr>
|
||||
<td width="150" style="font-weight: bold;">Prize:</td>
|
||||
<td>{prize_name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight: bold;">Description:</td>
|
||||
<td>{prize_description}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight: bold;">Redemption code:</td>
|
||||
<td><strong>{redemption_code}</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="color: #555555; font-size: 16px; margin-top: 30px;">
|
||||
To redeem your prize, follow the instructions on our website or contact our support team.
|
||||
</p>
|
||||
<p style="color: #555555; font-size: 16px;">
|
||||
Thank you for participating!
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td bgcolor="#eeeeee" style="padding: 30px 30px 30px 30px; text-align: center; color: #888888; font-size: 12px;">
|
||||
This is an automated message. Please do not reply to this email.<br/>
|
||||
© {date} <a href="{site_url}" style="color: #888888;">{site_name}</a>. All rights reserved.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,223 @@
|
||||
<?php
|
||||
/**
|
||||
* Template for displaying the wheel of fortune
|
||||
*
|
||||
* @var array $atts Shortcode attributes
|
||||
*/
|
||||
|
||||
// Prevent direct access
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
// Get number of available spins for this specific wheel
|
||||
$user_id = get_current_user_id();
|
||||
$wheel_id = isset($template_vars['wheel_id']) ? $template_vars['wheel_id'] : 1;
|
||||
global $wpdb;
|
||||
$spins_table = $wpdb->prefix . 'wheel_spins';
|
||||
$spins = $wpdb->get_var($wpdb->prepare("SELECT spins_available FROM $spins_table WHERE user_id = %d AND wheel_id = %d", $user_id, $wheel_id));
|
||||
$spins = $spins === null ? 0 : (int) $spins;
|
||||
|
||||
// Get prizes for the specific wheel
|
||||
$wheel = wheel_of_fortune();
|
||||
$prizes = $wheel->get_wheel_prizes($wheel_id);
|
||||
|
||||
// Set classes for size, theme and scale
|
||||
$container_classes = array(
|
||||
'wheel-container',
|
||||
'wheel-of-fortune-container',
|
||||
'size-' . $atts['size'],
|
||||
'theme-' . $atts['theme']
|
||||
);
|
||||
|
||||
// Add scale class if provided
|
||||
if (!empty($atts['scale'])) {
|
||||
$container_classes[] = $atts['scale'];
|
||||
}
|
||||
|
||||
// Generate unique ID for this wheel
|
||||
$wheel_id_html = 'wheel-of-fortune-' . uniqid();
|
||||
|
||||
?>
|
||||
<div id="<?php echo esc_attr($wheel_id_html); ?>" class="<?php echo esc_attr(implode(' ', $container_classes)); ?>">
|
||||
<!-- SVG Filters and Gradients for 3D effects -->
|
||||
<svg width="0" height="0" style="position: absolute;">
|
||||
<!-- Gradients for wheel segments -->
|
||||
<linearGradient id="gradientYellow" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffdd00" />
|
||||
<stop offset="100%" stop-color="#ffaa00" />
|
||||
</linearGradient>
|
||||
<linearGradient id="gradientGreen" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#88ff00" />
|
||||
<stop offset="100%" stop-color="#44cc00" />
|
||||
</linearGradient>
|
||||
<linearGradient id="gradientRed" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff5500" />
|
||||
<stop offset="100%" stop-color="#cc3300" />
|
||||
</linearGradient>
|
||||
<linearGradient id="gradientPink" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff44aa" />
|
||||
<stop offset="100%" stop-color="#cc2288" />
|
||||
</linearGradient>
|
||||
<linearGradient id="gradientBlue" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#00ccff" />
|
||||
<stop offset="100%" stop-color="#0088cc" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Hub gradients -->
|
||||
<radialGradient id="hubGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
||||
<stop offset="0%" stop-color="#dddddd" />
|
||||
<stop offset="70%" stop-color="#999999" />
|
||||
<stop offset="100%" stop-color="#666666" />
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="buttonGradient" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
|
||||
<stop offset="0%" stop-color="#330066" />
|
||||
<stop offset="100%" stop-color="#220044" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- Chrome effect for pegs -->
|
||||
<linearGradient id="chromeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="25%" stop-color="#f0f0f0" />
|
||||
<stop offset="50%" stop-color="#d0d0d0" />
|
||||
<stop offset="75%" stop-color="#a0a0a0" />
|
||||
<stop offset="100%" stop-color="#808080" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Pointer gradients -->
|
||||
<linearGradient id="pointerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e0e0e0" />
|
||||
<stop offset="50%" stop-color="#b0b0b0" />
|
||||
<stop offset="100%" stop-color="#707070" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="pointerShineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Filters for 3D effects -->
|
||||
<filter id="bevel" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
|
||||
<feOffset in="blur" dx="2" dy="2" result="offsetBlur"/>
|
||||
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="#ffffff" result="specOut">
|
||||
<fePointLight x="-5000" y="-10000" z="20000"/>
|
||||
</feSpecularLighting>
|
||||
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
|
||||
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="offsetBlur"/>
|
||||
<feMergeNode in="litPaint"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
|
||||
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
|
||||
<feComposite in="offsetBlur" in2="SourceAlpha" operator="in" result="innerShadow"/>
|
||||
<feComposite in="SourceGraphic" in2="innerShadow" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<filter id="neonGlowBright" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
|
||||
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<filter id="pegGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
|
||||
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<filter id="textShadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.7"/>
|
||||
</filter>
|
||||
|
||||
<filter id="innerGlow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
|
||||
<feComposite in="blur" in2="SourceGraphic" operator="atop"/>
|
||||
</filter>
|
||||
|
||||
<filter id="buttonGlow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<filter id="chromeEffect" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
|
||||
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="#ffffff" result="specOut">
|
||||
<fePointLight x="-5000" y="-10000" z="20000"/>
|
||||
</feSpecularLighting>
|
||||
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
|
||||
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
|
||||
</filter>
|
||||
|
||||
<filter id="pointerShadow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<!-- Wheel Pointer (Arrow) -->
|
||||
<div class="wheel-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100">
|
||||
<!-- Base/Mount -->
|
||||
<rect x="15" y="0" width="50" height="15" rx="5" ry="5" fill="url(#pointerGradient)" filter="url(#bevel)" />
|
||||
|
||||
<!-- Arrow body -->
|
||||
<path d="M25,10 L25,50 L15,50 L40,85 L65,50 L55,50 L55,10 Z"
|
||||
fill="url(#pointerGradient)"
|
||||
stroke="#505050"
|
||||
stroke-width="2"
|
||||
filter="url(#pointerShadow)" />
|
||||
|
||||
<!-- Highlight on arrow (3D effect) -->
|
||||
<path d="M30,15 L30,45 L20,45 L40,75 L60,45 L50,45 L50,15 Z"
|
||||
fill="url(#pointerShineGradient)"
|
||||
opacity="0.3" />
|
||||
|
||||
<!-- Center bolt -->
|
||||
<circle cx="40" cy="25" r="5" fill="url(#chromeGradient)" filter="url(#chromeEffect)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="wheel-wrapper">
|
||||
<?php
|
||||
if (!empty($prizes)) {
|
||||
echo $wheel->generate_wheel_svg($prizes);
|
||||
} else {
|
||||
echo '<div class="wheel-error">' . esc_html__('Error loading the wheel. No prizes available.', 'wheel-of-fortune') . '</div>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="wheel-spins-counter">
|
||||
<?php echo esc_html__('Remaining spins:', 'wheel-of-fortune'); ?> <span><?php echo esc_html($spins); ?></span>
|
||||
</div>
|
||||
|
||||
<button class="wheel-button" <?php echo ($spins <= 0) ? 'disabled' : ''; ?>>
|
||||
<?php echo esc_html__('SPIN', 'wheel-of-fortune'); ?>
|
||||
</button>
|
||||
|
||||
<div class="wheel-result"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Additional initialization for this specific wheel
|
||||
jQuery(document).ready(function($) {
|
||||
if (typeof wheel_params !== 'undefined') {
|
||||
console.log('Wheel of Fortune initialized: <?php echo esc_js($wheel_id_html); ?>');
|
||||
} else {
|
||||
console.error('Wheel of Fortune: wheel_params is not defined. Check if the plugin is properly loaded.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in new issue
Block a user