-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlinkShow.html
137 lines (112 loc) · 5.85 KB
/
linkShow.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
<title>share the Card</title>
<link rel="stylesheet" href="CSS/linkShow.css">
<link rel="stylesheet" href="CSS/mobileView.css">
<link rel="icon" type="image/x-icon" href="https://firebasestorage.googleapis.com/v0/b/birthday-1340e.appspot.com/o/Assests%2FBirthday%20Cake.png?alt=media&token=63f1f8c9-4b38-4c12-b127-c8ad751bc6f0">
</head>
<body>
<div class="containerBranch">
<div class="majorContainer"></div>
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
<div class="blob4"></div>
<span class="linkAcceptPreURL"><p class="link_container">liamAsm.io/</p><div class="spinner"><div class="spinner1"></div></div></span>
<input type="text" class="linkAccept" id="linkAccept" placeholder="" value="">
<h1 class="direction1 linkshow">
CLick on the Copy Invite Button
<span class="magic">
<span class="magic-starDir1">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="magic-starDir1">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="magic-starDir1">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="magic-text">Send it to the Recipent</span>
</span>
and Cheers!! There we have it...
</h1>
<button class="btn" id="fetchCard">
<svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" class="sparkle">
<path d="M10,21.236,6.755,14.745,0.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z" />
</svg>
<span class="text">Copy Invite</span>
</button>
<button class="btn" id="makeCardCard">
<svg fill="#FFFFFF" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M424 80H88a56.06 56.06 0 00-56 56v240a56.06 56.06 0 0056 56h336a56.06 56.06 0 0056-56V136a56.06 56.06 0 00-56-56zm-14.18 92.63l-144 112a16 16 0 01-19.64 0l-144-112a16 16 0 1119.64-25.26L256 251.73l134.18-104.36a16 16 0 0119.64 25.26z"/></svg>
<span class="text">Generate Card</span>
</button>
</div>
<script>
let index = 0,
interval = 1000;
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
const animate = star => {
star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
star.style.animation = "none";
star.offsetHeight;
star.style.animation = "";
}
for(const star of document.getElementsByClassName("magic-starDir1")) {
setTimeout(() => {
animate(star);
setInterval(() => animate(star), 1000);
}, index++ * (interval / 3))
}
window.onload = e => {
if(sessionStorage.getItem("linkToShare") == null)
{
location.replace("birthdayCard.html");
}
else
{
document.getElementById("linkAccept").value = sessionStorage.getItem("linkToShare");
}
}
document.getElementById("makeCardCard").addEventListener("click", () => {
location.replace("birthdayCard.html");
})
document.getElementById("fetchCard").addEventListener("click", () => {
let inviteCopied = `
Hey! Here's Surprise for you.... ✨
I've made a Small Birthday Gift for You.... 🎁
Here's The Secret Code for you to Access it: '${sessionStorage.getItem("linkToShare")}' (case sensative)
1. Go to the Site and Paste your Secret Code 📋
2. Click on Receive Card to see the Surprise 😯
Wishing you a very happy day! 🎉
click on this link to get your Surprise:- https://circuit-overtime.github.io/Birthday/linkRedirect.html
....Don't Forget, your secret code is "${sessionStorage.getItem("linkToShare")}"; (case sensative)
(Secured by Firebase, Hosted by GitHub);
`;
navigator.clipboard.writeText(inviteCopied)
.then(() => {
document.getElementById("linkAccept").value = "Invitation Copied! Share Now";
setTimeout(() => {
document.getElementById("linkAccept").value = sessionStorage.getItem("linkToShare");
}, 1200);
})
.catch(err => {
document.getElementById("linkAccept").value = "Copy Failed Try Again";
setTimeout(() => {
document.getElementById("linkAccept").value = sessionStorage.getItem("linkToShare");
}, 1200);
});
})
</script>
<script src="JS/PatchContextMenu.js"></script>
</body>