-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (112 loc) · 6.69 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BirthYay</title>
<meta name="description" content="Create personalized birthday cards and share them with your loved ones. Make each birthday special with a unique and heartfelt wish.">
<!-- Open Graph Tags for Social Media Sharing (optional) -->
<meta property="og:type" content="website">
<meta property="og:title" content="BirthYay">
<meta property="og:description" content="Easily create custom birthday wishes and share joy with your friends and family. Personalize your message for a special touch.">
<meta property="og:image" content="https://wish.vishakh.fun/assets/main-card.png">
<meta property="og:url" content="https://wish.vishakh.fun">
<meta property="og:site_name" content="Custom Birthday Wishes">
<meta name="keywords" content="personalized birthday wishes, custom birthday cards, birthday greetings, unique birthday messages, special birthday wishes">
<!-- Twitter Card Tags for Twitter Sharing (optional) -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@AbhayanVishakh">
<meta name="twitter:title" content="Create Personalized Birthday Wishes">
<meta name="twitter:description" content="Design your own birthday greetings and make your loved ones feel special. Share your personalized message today.">
<meta name="twitter:image" content="https://wish.vishakh.fun/assets/main-card.png">
<meta name="twitter:url" content="https://wish.vishakh.fun">
<!-- Favicon (Site Icon) -->
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon">
<!-- Canonical Tag (if needed) -->
<link rel="canonical" href="https://wish.vishakh.fun">
<!-- Meta Robots Tag (adjust as needed) -->
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<canvas id="confetti" class="confetti"> </canvas>
<div class="birthdayCard">
<div class="cardFront">
<div class="front-text">
<h3 class="happy">HAPPY</h3>
<h2 class="bday">BIRTHDAY</h2>
<h3 class="toyou">to you!</h3>
</div>
<div class="wrap-deco">
<div class="decorations"></div>
<div class="decorationsTwo"></div>
</div>
<div class="wrap-decoTwo">
<div class="decorations"></div>
<div class="decorationsThree"></div>
</div>
<div class="plate">
<div class="cake"></div>
<div class="flame"></div>
</div>
</div>
<div class="cardInside">
<div class="inside-text">
<h3 class="happy">HAPPY</h3>
<h2 class="bday">BIRTHDAY</h2>
<h3 class="toyou">to you!</h3>
</div>
<div class="wishes">
<p>Dear <span id="to">Name</span>,</p>
<p>
Happy birthday!! I hope your day is filled with lots of love and
laughter! May all of your birthday wishes come true.
</p>
<p id="from" class="name">Name</p>
</div>
</div>
<div class="cursor" id="cursor">
<svg
id="click_l2b"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 47.619 68.23"
>
<title>noun_692985</title>
<path
d="M59.773,79.1l0.033-.176c2.062-9.136,9.688-20.832,8.023-31.685-0.45-2.583-.877-3.861-1.383-4.527-0.33-.435-0.807-0.769-2.285-0.769a4.6,4.6,0,0,0-1.063.116L63.041,47.7a1.875,1.875,0,0,1-3.749-.035l0.061-6.554c0.071-2.036-.252-2.656-0.443-2.862-0.169-.181-0.651-0.485-2.388-0.485a2.962,2.962,0,0,0-2.436.915l-0.07,5.843a1.875,1.875,0,1,1-3.749-.035l0.062-6.553c0.071-2.036-.252-2.657-0.443-2.864-0.169-.181-0.653-0.485-2.389-0.485a3.423,3.423,0,0,0-2.054.551l-0.177.17-0.025,9.4a1.875,1.875,0,0,1-3.749-.011L41.554,21.73c0.071-2.042-.25-2.66-0.443-2.869-0.169-.181-0.652-0.485-2.389-0.485a3.225,3.225,0,0,0-2.223.688,2.533,2.533,0,0,0-.654,2.17l0,0.116V54.614a1.875,1.875,0,0,1-3.75,0V47.837l-0.875.232a4.476,4.476,0,0,0-3.115,3.319A10.042,10.042,0,0,0,29.864,58.8c3.487,5.315,8.108,11.265,9.58,18.686l0.251,1.521Z"
transform="translate(-24.187 -14.626)"
style="fill: #fff"
/>
<path
d="M61.32,82.856l-23.33-.1a1.875,1.875,0,0,1-1.863-1.759c-0.476-7.733-5.126-13.62-9.4-20.132-2.013-3.068-3.083-6.96-2.266-10.351,0.766-3.185,3.113-5.585,7-6.378l0.64-.087V21.35l-0.011-.659a6.017,6.017,0,0,1,1.865-4.38,6.923,6.923,0,0,1,4.769-1.685c1.871,0,3.817.263,5.136,1.683,1.293,1.391,1.519,3.4,1.445,5.492l-0.026,9.37,0.724-.2a8.546,8.546,0,0,1,1.5-.129,10.564,10.564,0,0,1,2.776.309,4.92,4.92,0,0,1,2.36,1.374,4.7,4.7,0,0,1,.782,1.153L53.7,34.519l1.325-.374a8.535,8.535,0,0,1,1.495-.129,10.564,10.564,0,0,1,2.776.309A4.922,4.922,0,0,1,61.657,35.7a5.227,5.227,0,0,1,1.235,2.486l0.015,0.11,0.288-.049a8.892,8.892,0,0,1,.966-0.052,6.109,6.109,0,0,1,5.272,2.251c1.127,1.485,1.653,3.64,2.1,6.188,1.965,12.813-7.146,26.223-8.345,34.614A1.875,1.875,0,0,1,61.32,82.856ZM59.773,79.1l0.033-.176c2.062-9.136,9.688-20.832,8.023-31.685-0.45-2.583-.877-3.861-1.383-4.527-0.33-.435-0.807-0.769-2.285-0.769a4.6,4.6,0,0,0-1.063.116L63.041,47.7a1.875,1.875,0,0,1-3.749-.035l0.061-6.554c0.071-2.036-.252-2.656-0.443-2.862-0.169-.181-0.651-0.485-2.388-0.485a2.962,2.962,0,0,0-2.436.915l-0.07,5.843a1.875,1.875,0,1,1-3.749-.035l0.062-6.553c0.071-2.036-.252-2.657-0.443-2.864-0.169-.181-0.653-0.485-2.389-0.485a3.423,3.423,0,0,0-2.054.551l-0.177.17-0.025,9.4a1.875,1.875,0,0,1-3.749-.011L41.554,21.73c0.071-2.042-.25-2.66-0.443-2.869-0.169-.181-0.652-0.485-2.389-0.485a3.225,3.225,0,0,0-2.223.688,2.533,2.533,0,0,0-.654,2.17l0,0.116V54.614a1.875,1.875,0,0,1-3.75,0V47.837l-0.875.232a4.476,4.476,0,0,0-3.115,3.319A10.042,10.042,0,0,0,29.864,58.8c3.487,5.315,8.108,11.265,9.58,18.686l0.251,1.521Z"
transform="translate(-24.187 -14.626)"
/>
</svg>
</div>
</div>
<div id="modal" class="modal">
<form id="wishForm" class="form ">
<span class="close">×</span>
<input class="input" placeholder="From:"
type="text"
id="fromName"
name="fromName" />
<input
class="input"
placeholder="To"
type="text"
id="toName"
name="toName"
/>
<input class="input_url" type="submit" value="Create Wish" />
<input class="input" placeholder="URL" type="text" id="generatedUrl" readonly ></input>
<div class="btn_container">
<button class="button-confirm" id="copyButton">Send wish→</button>
</div>
</form>
</div>
</body>
<script src="script.js" defer></script>
<script src="confetti.js" defer></script>
</html>