-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (130 loc) · 5.01 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
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お気持ち募金</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="favicon.ico">
<meta name="keywords" content="PIENNU,お気持ち募金,募金,お願い">
<meta name="description" content="PIENNUへのお気持ち募金！募金してくれるだけでモチベUP!!!!!!!!!">
<link href="style.css" rel="stylesheet" />
<script>
function incrementCount() {
var xhr = new XMLHttpRequest();
var audio = new Audio('money.mp3');
xhr.open('POST', 'increment.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var count = xhr.responseText;
var formattedCount = parseInt(count).toLocaleString(); // カンマを追加
document.getElementById('countDisplay').textContent = '現在の募金数: ' + count + '円';
}
};
xhr.send();
audio.volume = 1.0;
audio.play();
}
</script>
</head>
<body>
<div id="loader-bg">
<div id="loader">
<p>Now Loading...</p>
</div>
</div>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<div class="container">
<div class="content">
<h1>お気持ち募金</h1>
<div style="padding: 1rem 2rem;
border: 3px dotted #000;
text-align: center;
margin-top: 10px;
">
<p>あなたのお気持ちを募金していってください。<br><spam style="color: red;">※実際にお金はかかりません。</spam></p>
<button class="fancy-button" id="donateButton" onclick="incrementCount()">お気持ちを寄付</button>
<div id="countDisplay" class="fancy-display"></div>
<script>
window.addEventListener('load', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getcount.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var count = xhr.responseText;
document.getElementById('countDisplay').textContent = '現在の募金数: ' + count + '円';
}
};
xhr.send();
});
let cooldownActive = false;
function incrementCount() {
var xhr = new XMLHttpRequest();
var audio = new Audio('money.mp3');
xhr.open('POST', 'increment.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var count = xhr.responseText;
var formattedCount = parseInt(count).toLocaleString();
document.getElementById('countDisplay').textContent = '現在の募金数: ' + formattedCount + '円';
} else {
// 失敗メッセージを表示
alert('募金に失敗しました。もう一度お試しください。');
}
// ボタンのクールダウンを終了
resetCooldown();
}
};
// 事前に作成した Audio オブジェクトを再利用
audio.volume = 1.0;
audio.play();
if (!cooldownActive) {
startCooldown();
}
}
function startCooldown() {
cooldownActive = true;
const button = document.getElementById("donateButton");
// クールダウン中の背景色を適用
button.classList.add("cooldown");
// ボタンを無効化
button.disabled = true;
// クールダウン時間後にクールダウンを終了し、背景色を元に戻す
setTimeout(resetCooldown, 1000); // 1秒間のクールダウン
}
function resetCooldown() {
cooldownActive = false;
const button = document.getElementById("donateButton");
button.classList.remove("cooldown");
button.disabled = false;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
var h = $(window).height();
$('#wrap').css('display','none');
$('#loader-bg ,#loader').height(h).css('display','block');
});
$(window).load(function () { //全ての読み込みが完了したら実行
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
$('#wrap').css('display', 'block');
});
//10秒たったら強制的にロード画面を非表示
$(function(){
setTimeout('stopload()',10000);
});
function stopload(){
$('#wrap').css('display','block');
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
}
</script>
</div>
<!-- <p><img style="transform: translateY(16%);" src="warning.webp"> 現在テスト中 <a href="test-details/">(詳細)</a></p> -->
</div>
</div>
</div>
</body>
</html>