- 掃描 ID:
- 6f71dfbe-5028-45b9-8d42-5a15101c38cb已完成
- 已提交的 URL:
- https://inst.benefitstrategyhub.co/unsub/1/611acb76-9f27-4a83-b1b9-21f776b1df29
- 報告完成時間:
連結 · 找到 0 個
從頁面中識別的傳出連結
JavaScript 變數 · 找到 6 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數,可從目前範圍內程式碼中的任何位置存取
名稱 | 類型 |
---|---|
onbeforetoggle | object |
documentPictureInPicture | object |
onscrollend | object |
closeTab | function |
handleUnsubscribe | function |
displayDate | function |
主控台記錄訊息 · 找到 1 條
記錄到 Web 主控台的訊息
類型 | 類別 | 記錄 |
---|---|---|
error | network |
|
HTML
頁面的原始 HTML 主體
<!DOCTYPE html><html><head>
<style>
/*------ Base styles ------*/
body {
background: #f7f8f9;
font-family: arial;
background-color: #FFF9DE;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 500px;
height: auto;
margin: 50px auto;
padding: 60px;
padding-bottom: 20px;
background-color: #fff;
box-sizing: border-box;
text-align: center;
border-radius: 10px;
box-shadow: 0px 15px 15px -12px rgba(0, 0, 0, 0.09);
}
.btn {
cursor: pointer;
background-color: #f28e68;
text-decoration: none;
padding: 15px 20px;
font-weight: bold;
border-radius: 50px;
color: #fff;
}
.btn-light {
background-color: #eee;
color: #222;
}
@media only screen and (max-width: 380px) {
.btn-light {
display: none;
}
}
.btn:hover {
opacity: 0.8;
}
h2 {
margin: 0;
padding: 0;
color: #444;
}
p {
margin-top: 10px;
line-height: 24px;
margin-bottom: 40px;
color: #888;
}
/*------ Main Emoji Styling ------*/
.emoji {
box-sizing: border-box;
margin: 30px auto 20px;
width: 120px;
height: 120px;
}
.face {
width: 100px;
height: 100px;
position: relative;
margin: 0 15px 30px 0;
border-radius: 50%;
background: #F2DD68;
transition: 1s;
}
.face:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: -8px;
left: -8px;
border-radius: 50%;
box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.07);
}
.eye {
position: absolute;
width: 14px;
height: 14px;
top: 30px;
left: 18px;
z-index: 1;
border-radius: 50%;
background: #995710;
}
.eye:last-child {
left: auto;
right: 18px;
}
.emoji .eyed {
animation-name: blink;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes blink {
10% {
height: 10px;
top: 32px;
}
20% {
height: 0.5px;
top: 37px;
}
50% {
height: 10px;
top: 32px;
}
}
.mouth {
position: absolute;
top: 50px;
left: 0;
right: 0;
z-index: 1;
width: 70px;
height: 34px;
margin: 0 auto;
border-radius: 0 0 70px 70px;
overflow: hidden;
background: #995710;
transition: 0.3s;
}
.mouth:before,
.mouth:after {
content: '';
position: absolute;
display: block;
}
/*------ Shocked Emoji Styling ------*/
.shocked .mouth {
width: 25px;
height: 25px;
border-radius: 50%;
}
#cancel:hover~.emoji .mouth {
top: 55px;
z-index: 1;
width: 50px;
height: 25px;
margin: 0 auto;
border-radius: 0 0 70px 70px;
overflow: hidden;
background: #995710;
}
#unsubscribe:hover~.emoji .mouth {
width: 50px;
height: 5px;
top: 60px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="container">
<h2>Unsubscribe</h2>
<p>Are you sure you want to unsubscribe? We'd be sorry to see you go.</p>
<a class="btn" id="unsubscribe">Unsubscribe</a>
<a class="btn btn-light" id="cancel">Cancel</a>
<br>
<br>
<div class="emoji shocked">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth">
</span>
</figure>
</div>
</div>
<script>
document.getElementById("unsubscribe").addEventListener("click", handleUnsubscribe);
document.getElementById("cancel").addEventListener("click", closeTab);
function closeTab() {
window.close();
}
function handleUnsubscribe() {
var url = window.location.href;
url = url.replace("unsub/", "unsub_confirm/");
window.location.href = url;
}
function displayDate() {
var date = new Date();
alert("You have unsubscribed successfully. We will miss you. Bye bye!");
}
</script>
</body></html>