Empty/script.js at main · tiger-vin/Empty · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
document.addEventListener('DOMContentLoaded', function() {
    // Get the buy button element
    const buyButton = document.querySelector('.buy-button');

    // Add click event listener to the buy button
    buyButton.addEventListener('click', function() {
        // Show a confirmation modal before executing
        const overlay = document.createElement('div');
        overlay.className = 'modal-overlay';

        // Create the modal content
        const modal = document.createElement('div');
        modal.className = 'modal';

        // Add content to the modal
        modal.innerHTML = `
            <h2>Confirm Purchase</h2>
            <p>You are about to purchase 1M DocDB Boost Z9000s for $349.99 Each</p>
            <p class="success-message">Order #: DB${Math.floor(Math.random() * 10000)}</p>
            <div class="button-container">
                <button class="execute-button">Confirm & Execute</button>
                <button class="close-button">Cancel</button>
            </div>
        `;

        // Append modal to overlay and overlay to body
        overlay.appendChild(modal);
        document.body.appendChild(overlay);

        // Add click event to close button
        const closeButton = modal.querySelector('.close-button');
        closeButton.addEventListener('click', function() {
            document.body.removeChild(overlay);
        });

        // Add click event to execute button
        const executeButton = modal.querySelector('.execute-button');
        executeButton.addEventListener('click', function() {
            // Redirect to the execution page
            window.location.href = 'execute-mgodatagen.html';
        });

        // Add click event to overlay to close when clicking outside modal
        overlay.addEventListener('click', function(event) {
            if (event.target === overlay) {
                document.body.removeChild(overlay);
            }
        });
    });

    // Add hover effect to product image
    const productImage = document.querySelector('.product-image img');
    productImage.addEventListener('mouseover', function() {
        this.style.transform = 'scale(1.05)';
    });

    productImage.addEventListener('mouseout', function() {
        this.style.transform = 'scale(1)';
    });
});

// Add these styles to the document
const styles = document.createElement('style');
styles.textContent = `
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        text-align: center;
        max-width: 500px;
        width: 90%;
        animation: modalFadeIn 0.3s ease-out;
    }

    .modal h2 {
        color: #ff00cc;
        margin-bottom: 1rem;
    }

    .success-message {
        font-size: 1.5rem;
        font-weight: bold;
        color: #3333ff;
        margin: 1.5rem 0;
    }

    .button-container {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .execute-button {
        background: linear-gradient(90deg, #ff00cc 0%, #3333ff 100%);
        color: white;
        border: none;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .execute-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .close-button {
        background: #f5f5f5;
        color: #333;
        border: none;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .close-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
`;

document.head.appendChild(styles);