generated from CursedPrograms/website-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (145 loc) · 5.05 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここ☆デレデレ</title>
<style>
body {
font-family: 'Comic Sans MS', cursive;
background: url('images/cute-pattern.svg') repeat;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.chat-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.chat-bubble {
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
padding: 10px 15px;
margin: 10px;
max-width: 200px;
animation: bounce 0.5s ease infinite alternate;
}
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-10px); }
}
.bot-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.floating-emoji {
position: fixed;
font-size: 2rem;
pointer-events: none;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
100% { transform: translateY(0) rotate(360deg); }
}
.neon-text {
font-size: 2rem;
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
animation: neon 1.5s ease-in-out infinite alternate;
}
@keyframes neon {
from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; }
to { text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #ff00de, 0 0 17.5px #ff00de, 0 0 20px #ff00de, 0 0 25px #ff00de, 0 0 37.5px #ff00de; }
}
</style>
</head>
<body>
<div class="chat-container" id="chatContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
const botPhrases = [
"こんにちは！かわいいですね～ (≧◡≦)",
"あなたのことが大好きです！(´｡• ᵕ •｡`)",
"一緒に遊ぼう！ヽ(°◇° )ノ",
"素敵な一日になりますように★",
"がんばって！応援してるよ (ﾉ´ヮ`)ﾉ*: ･ﾟ",
"だいすき！ chu☆ (づ￣ ³￣)づ",
"きゃ～！すごくうれしい！(≧▽≦)",
"一緒にお茶しよう？(^-^)",
"あなたは最高だよ！(„• ֊ •„)",
"きらきら輝いてる✨(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧",
"あなたの存在が宝物だよ！💖",
"素晴らしいことが待ってるよ！(✿◠‿◠)",
"一緒に素敵な思い出を作ろう！(ﾉ´ з `)ノ"
];
const botNames = [
"ピカチュウ", "サクラ", "ナルト", "ミク", "トトロ",
"ポケモン", "ゴジラ", "キティ", "ドラえもん", "プリキュア"
];
const avatarImages = [
'avatar1.png',
'avatar2.png',
'avatar3.png',
'avatar4.png',
'avatar5.png',
'avatar6.png'
];
function createChatBubble() {
const bubble = document.createElement('div');
bubble.className = 'chat-bubble';
const avatar = document.createElement('img');
avatar.className = 'bot-avatar';
// Randomly select an avatar from the array
const randomImage = avatarImages[Math.floor(Math.random() * avatarImages.length)];
avatar.src = `images/avatars/${randomImage}`;
avatar.alt = "Cute anime bot avatar";
const botName = botNames[Math.floor(Math.random() * botNames.length)];
const message = botPhrases[Math.floor(Math.random() * botPhrases.length)];
bubble.innerHTML = `
<strong>${botName}:</strong><br>
${message}
`;
bubble.prepend(avatar);
document.getElementById('chatContainer').appendChild(bubble);
anime({
targets: bubble,
scale: [0, 1],
opacity: [0, 1],
duration: 1000,
easing: 'easeOutElastic(1, .8)'
});
}
function createFloatingEmoji() {
const emoji = document.createElement('div');
emoji.className = 'floating-emoji';
emoji.style.left = `${Math.random() * 100}vw`;
emoji.style.top = `${Math.random() * 100}vh`;
emoji.textContent = ['🌸', '🍙', '🎀', '✨', '🌟', '🍡', '🐱', '🍣'][Math.floor(Math.random() * 8)];
document.body.appendChild(emoji);
setTimeout(() => {
emoji.remove();
}, 5000);
}
function createNeonText() {
const neon = document.createElement('div');
neon.className = 'neon-text';
neon.style.position = 'absolute';
neon.style.left = `${Math.random() * 80}vw`;
neon.style.top = `${Math.random() * 80}vh`;
neon.textContent = ['かわいい', 'スゴイ', 'カッコイイ', 'キラキラ'][Math.floor(Math.random() * 4)];
document.body.appendChild(neon);
setTimeout(() => {
neon.remove();
}, 3000);
}
setInterval(createChatBubble, 2000);
setInterval(createFloatingEmoji, 3000);
setInterval(createNeonText, 5000);
</script>
</body>
</html>