<!DOCTYPE html>
<html lang="gu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Republic Day Wishing Script</title>
<style>
body {
background: linear-gradient(to bottom, #FF9933, #FFFFFF, #138808);
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
text-align: center;
overflow-x: hidden;
}
.container {
padding-top: 50px;
}
.main-card {
background: rgba(255, 255, 255, 0.9);
margin: 20px auto;
padding: 20px;
width: 85%;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
h1 { color: #000080; text-shadow: 1px 1px 2px #ccc; }
.name-display {
font-size: 30px;
color: #FF6600;
font-weight: bold;
animation: bounce 2s infinite;
}
.whatsapp-btn {
background-color: #25D366;
color: white;
padding: 15px 25px;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
display: inline-block;
margin-top: 20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
input[type="text"] {
padding: 10px;
width: 70%;
border: 2px solid #000080;
border-radius: 5px;
}
.btn-create {
background: #000080;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body>
<div class="container">
<div class="main-card">
<p id="fromName" class="name-display">તમારું નામ અહીં આવશે</p>
<p>તરફથી તમને અને તમારા પરિવારને</p>
<h1 style="color:#FF9933">પ્રજાસત્તાક પર્વની</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Ashoka_Chakra.svg/200px-Ashoka_Chakra.svg.png" width="100" alt="Ashoka Chakra">
<h1 style="color:#138808">ખૂબ ખૂબ શુભકામનાઓ!</h1>
<p>🇮🇳 **વંદે માતરમ - જય હિન્દ** 🇮🇳</p>
</div>
<div class="main-card">
<input type="text" id="nameInput" placeholder="તમારું નામ લખો...">
<button class="btn-create" onclick="createWish()">બનાવો</button>
<br>
<a id="shareBtn" href="#" class="whatsapp-btn" style="display:none;">👉 વોટ્સએપ પર મોકલો</a>
</div>
</div>
<script>
function createWish() {
var name = document.getElementById('nameInput').value;
if(name == "") {
alert("કૃપા કરીને નામ લખો!");
return;
}
document.getElementById('fromName').innerText = name;
var encodedName = encodeURIComponent(name);
var url = window.location.href.split('?')[0] + "?name=" + encodedName;
var whatsappMsg = "🇮🇳 *" + name + "* એ તમારા માટે એક ખાસ સરપ્રાઈઝ મોકલી છે! %0A જોવા માટે નીચેની લિંક પર ક્લિક કરો 👇 %0A" + url;
document.getElementById('shareBtn').href = "https://api.whatsapp.com/send?text=" + whatsappMsg;
document.getElementById('shareBtn').style.display = "inline-block";
}
// URL માંથી નામ મેળવવા માટે
window.onload = function() {
const urlParams = new URLSearchParams(window.location.search);
const myName = urlParams.get('name');
if (myName) {
document.getElementById('fromName').innerText = myName;
}
}
</script>
</body>
</html>
0 Comments