-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
72 lines (66 loc) · 1.97 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
$(document).ready(function() {
// Function to update the card color
function updateCardColor() {
var color = $('#color_front').val();
$('.style-I6XLc').css('background-image', 'none');
$('.style-I6XLc').css('background-color', color);
}
// Function to reinitialize the minicolors plugin
function initializeMinicolors() {
$('.colorpick').minicolors({
control: 'hue',
position: 'bottom',
format: 'hex',
theme: 'bootstrap',
swatchPosition: 'left',
defaultValue: '#000',
change: function(value, opacity) {
updateCardColor();
},
});
}
// Event handler for color change
$('#color_front').on('change', function() {
updateCardColor();
});
// Event handler for logo upload
$('#logo_upload').on('change', function() {
var file = this.files[0];
if (file && file.type.startsWith('image/')) {
var reader = new FileReader();
reader.onload = function(e) {
$('#card_logo').html('<img src="' + e.target.result + '" alt="Logo">');
};
reader.readAsDataURL(file);
} else {
// Clear the logo
$('#card_logo').html('<span id="style-7MoSN" class="style-7MoSN">YOUR LOGO</span>');
}
});
// Flip the card on hover
$('.credit-card').hover(
function() {
$(this).toggleClass('flipped');
},
function() {
$(this).toggleClass('flipped');
}
);
// Preview button click event
$('#previewDesign').on('click', function() {
updateCardColor();
var logo = $('#logo_upload').prop('files')[0];
if (logo && logo.type.startsWith('image/')) {
var reader = new FileReader();
reader.onload = function(e) {
$('#card_logo').html('<img src="' + e.target.result + '" alt="Logo">');
};
reader.readAsDataURL(logo);
} else {
// Clear the logo
$('#card_logo').html('<span id="style-7MoSN" class="style-7MoSN">YOUR LOGO</span>');
}
});
// Initialize the minicolors plugin
initializeMinicolors();
});