store/walink.html at main · Subeesh-Zero/store · 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp Link Generator</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@400;500&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f7f7f7;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 600px;
            margin-top: 50px;
            text-align: center;
        }
        h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 32px;
            margin-bottom: 20px;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        select, input, textarea, button {
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #ccc;
            width: 100%;
            margin-bottom: 15px;
        }
        textarea {
            resize: none;
            height: 100px;
        }
        select:focus, input:focus, textarea:focus, button:focus {
            outline: none;
            border-color: #007bff;
        }
        .btn-generate {
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: white;
            border: none;
            font-weight: bold;
            transition: background-color 0.3s, transform 0.2s ease-in-out;
            padding: 12px;
        }
        .btn-generate:hover {
            background: linear-gradient(90deg, #0056b3, #004085);
            transform: translateY(-4px);
        }
        .copy-btn {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 12px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        .copy-btn:hover {
            background-color: #218838;
        }
        .output-container {
            margin-top: 30px;
        }
        .output-container input {
            width: 80%;
            max-width: 350px;
            margin: 10px 0;
        }
        .output-container button {
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h2>WhatsApp Link Generator</h2>
        <p>Select your country, enter your phone number, and type your message.</p>

        <!-- Country selection dropdown -->
        <div class="form-group">
            <select id="countryCode" class="form-control">
                <option value="+1">USA (+1)</option>
                <option value="+91">India (+91)</option>
                <option value="+44">UK (+44)</option>
                <option value="+61">Australia (+61)</option>
                <option value="+1">Canada (+1)</option>
            </select>
        </div>

        <!-- Phone number input -->
        <div class="form-group">
            <input type="text" id="phoneNumber" class="form-control" placeholder="Enter Phone Number" />
        </div>

        <!-- Message input -->
        <div class="form-group">
            <textarea id="message" class="form-control" placeholder="Type your message here..."></textarea>
        </div>

        <!-- Generate button -->
        <button onclick="generateLink()" class="btn btn-generate">Generate WhatsApp Link</button>

        <!-- Output Section -->
        <div id="output" class="output-container"></div>
    </div>

    <script>
        function generateLink() {
            const countryCode = document.getElementById("countryCode").value;
            const phoneNumber = document.getElementById("phoneNumber").value.trim();
            const message = document.getElementById("message").value.trim();

            // Validate phone number
            if (phoneNumber) {
                // Encode the message for URL
                const encodedMessage = encodeURIComponent(message);

                // Create WhatsApp URL
                const whatsappLink = `https://wa.me/${countryCode}${phoneNumber}${message ? '?text=' + encodedMessage : ''}`;

                // Display the WhatsApp link
                document.getElementById("output").innerHTML = `
                    <p><strong>Click below to open WhatsApp:</strong></p>
                    <a href="${whatsappLink}" target="_blank" class="btn btn-success">Open WhatsApp</a>
                    <div class="form-group">
                        <p>Link:</p>
                        <input type="text" id="whatsappLink" class="form-control" value="${whatsappLink}" readonly>
                    </div>
                    <button class="copy-btn" onclick="copyToClipboard()">Copy Link</button>
                `;
            } else {
                document.getElementById("output").innerHTML = "<p style='color: red;'>Please enter a valid phone number.</p>";
            }
        }

        function copyToClipboard() {
            const copyText = document.getElementById("whatsappLink");
            copyText.select();
            copyText.setSelectionRange(0, 99999); // For mobile devices
            document.execCommand("copy");
            alert("WhatsApp link copied!");
        }
    </script>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>