Add 2 files
Browse files- index.html +40 -6
- prompts.txt +2 -1
index.html
CHANGED
|
@@ -18,6 +18,18 @@
|
|
| 18 |
font-size: 3rem;
|
| 19 |
display: inline-block;
|
| 20 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
</style>
|
| 22 |
</head>
|
| 23 |
<body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen flex items-center justify-center p-4">
|
|
@@ -44,7 +56,7 @@
|
|
| 44 |
|
| 45 |
<div id="resultContainer" class="hidden bg-purple-50 rounded-lg p-4 text-center transition-all duration-300">
|
| 46 |
<div id="resultMessage" class="font-bold text-xl"></div>
|
| 47 |
-
<div id="
|
| 48 |
</div>
|
| 49 |
|
| 50 |
<div class="mt-8 text-center text-sm text-gray-500">
|
|
@@ -57,7 +69,7 @@
|
|
| 57 |
const nameInput = document.getElementById('nameInput').value.trim();
|
| 58 |
const resultContainer = document.getElementById('resultContainer');
|
| 59 |
const resultMessage = document.getElementById('resultMessage');
|
| 60 |
-
const
|
| 61 |
|
| 62 |
if (nameInput === 'μ±κ·λ³') {
|
| 63 |
resultContainer.classList.remove('hidden');
|
|
@@ -65,23 +77,45 @@
|
|
| 65 |
resultMessage.className = 'font-bold text-xl text-green-600';
|
| 66 |
|
| 67 |
// μΌμ± μ΄λͺ¨μ§ μ λλ©μ΄μ
|
| 68 |
-
|
|
|
|
| 69 |
const emojis = ['π₯¬', 'π₯¦', 'π₯', 'π', 'π
', 'π½'];
|
| 70 |
emojis.forEach(emoji => {
|
| 71 |
const span = document.createElement('span');
|
| 72 |
span.textContent = emoji;
|
| 73 |
span.className = 'mx-1 bounce';
|
| 74 |
span.style.animationDelay = `${Math.random() * 0.5}s`;
|
| 75 |
-
|
| 76 |
});
|
| 77 |
|
| 78 |
// 컨ν
μ΄λμ μμ μΆκ°
|
| 79 |
resultContainer.className = 'bg-green-50 rounded-lg p-4 text-center transition-all duration-300';
|
| 80 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
resultContainer.classList.remove('hidden');
|
| 82 |
resultMessage.textContent = `${nameInput}λ, μλ
νμΈμ!`;
|
| 83 |
resultMessage.className = 'font-bold text-xl text-purple-600';
|
| 84 |
-
|
| 85 |
|
| 86 |
// 컨ν
μ΄λ μμ μλλλ‘
|
| 87 |
resultContainer.className = 'bg-purple-50 rounded-lg p-4 text-center transition-all duration-300';
|
|
|
|
| 18 |
font-size: 3rem;
|
| 19 |
display: inline-block;
|
| 20 |
}
|
| 21 |
+
@keyframes sparkle {
|
| 22 |
+
0% { transform: scale(1); opacity: 1; }
|
| 23 |
+
50% { transform: scale(1.2); opacity: 0.7; }
|
| 24 |
+
100% { transform: scale(1); opacity: 1; }
|
| 25 |
+
}
|
| 26 |
+
.sparkle {
|
| 27 |
+
animation: sparkle 1.5s infinite;
|
| 28 |
+
}
|
| 29 |
+
.star-emoji {
|
| 30 |
+
font-size: 2rem;
|
| 31 |
+
display: inline-block;
|
| 32 |
+
}
|
| 33 |
</style>
|
| 34 |
</head>
|
| 35 |
<body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen flex items-center justify-center p-4">
|
|
|
|
| 56 |
|
| 57 |
<div id="resultContainer" class="hidden bg-purple-50 rounded-lg p-4 text-center transition-all duration-300">
|
| 58 |
<div id="resultMessage" class="font-bold text-xl"></div>
|
| 59 |
+
<div id="specialEmoji" class="mt-2"></div>
|
| 60 |
</div>
|
| 61 |
|
| 62 |
<div class="mt-8 text-center text-sm text-gray-500">
|
|
|
|
| 69 |
const nameInput = document.getElementById('nameInput').value.trim();
|
| 70 |
const resultContainer = document.getElementById('resultContainer');
|
| 71 |
const resultMessage = document.getElementById('resultMessage');
|
| 72 |
+
const specialEmoji = document.getElementById('specialEmoji');
|
| 73 |
|
| 74 |
if (nameInput === 'μ±κ·λ³') {
|
| 75 |
resultContainer.classList.remove('hidden');
|
|
|
|
| 77 |
resultMessage.className = 'font-bold text-xl text-green-600';
|
| 78 |
|
| 79 |
// μΌμ± μ΄λͺ¨μ§ μ λλ©μ΄μ
|
| 80 |
+
specialEmoji.innerHTML = '';
|
| 81 |
+
specialEmoji.className = 'vegetable-emoji mt-2';
|
| 82 |
const emojis = ['π₯¬', 'π₯¦', 'π₯', 'π', 'π
', 'π½'];
|
| 83 |
emojis.forEach(emoji => {
|
| 84 |
const span = document.createElement('span');
|
| 85 |
span.textContent = emoji;
|
| 86 |
span.className = 'mx-1 bounce';
|
| 87 |
span.style.animationDelay = `${Math.random() * 0.5}s`;
|
| 88 |
+
specialEmoji.appendChild(span);
|
| 89 |
});
|
| 90 |
|
| 91 |
// 컨ν
μ΄λμ μμ μΆκ°
|
| 92 |
resultContainer.className = 'bg-green-50 rounded-lg p-4 text-center transition-all duration-300';
|
| 93 |
+
}
|
| 94 |
+
else if (nameInput === 'μΈμκΈ°') {
|
| 95 |
+
resultContainer.classList.remove('hidden');
|
| 96 |
+
resultMessage.textContent = 'μ΄ νμ΄μ§λ₯Ό λ§λ νλ₯ν λΆμ΄μλ€μ!';
|
| 97 |
+
resultMessage.className = 'font-bold text-xl text-yellow-600';
|
| 98 |
+
specialEmoji.innerHTML = '';
|
| 99 |
+
specialEmoji.className = 'star-emoji mt-2';
|
| 100 |
+
|
| 101 |
+
// λ³ μ΄λͺ¨μ§ μ λλ©μ΄μ
|
| 102 |
+
const stars = ['β', 'π', 'β¨', 'π«', 'βοΈ'];
|
| 103 |
+
stars.forEach((star, index) => {
|
| 104 |
+
const span = document.createElement('span');
|
| 105 |
+
span.textContent = star;
|
| 106 |
+
span.className = 'mx-1 sparkle';
|
| 107 |
+
span.style.animationDelay = `${index * 0.3}s`;
|
| 108 |
+
specialEmoji.appendChild(span);
|
| 109 |
+
});
|
| 110 |
+
|
| 111 |
+
// 컨ν
μ΄λμ μμ μΆκ°
|
| 112 |
+
resultContainer.className = 'bg-yellow-50 rounded-lg p-4 text-center transition-all duration-300';
|
| 113 |
+
}
|
| 114 |
+
else if (nameInput !== '') {
|
| 115 |
resultContainer.classList.remove('hidden');
|
| 116 |
resultMessage.textContent = `${nameInput}λ, μλ
νμΈμ!`;
|
| 117 |
resultMessage.className = 'font-bold text-xl text-purple-600';
|
| 118 |
+
specialEmoji.innerHTML = '';
|
| 119 |
|
| 120 |
// 컨ν
μ΄λ μμ μλλλ‘
|
| 121 |
resultContainer.className = 'bg-purple-50 rounded-lg p-4 text-center transition-all duration-300';
|
prompts.txt
CHANGED
|
@@ -1 +1,2 @@
|
|
| 1 |
-
μ±κ·λ³μ΄λΌλ μ
λ ₯μ μ
λ ₯νμΈμλΌλ μλ΄κ° λμ€λλ° μ΄κ±΄ κ·Έλ₯ μ΄λ¦μ μ
λ ₯νμΈμλ‘ λ°κΏ
|
|
|
|
|
|
| 1 |
+
μ±κ·λ³μ΄λΌλ μ
λ ₯μ μ
λ ₯νμΈμλΌλ μλ΄κ° λμ€λλ° μ΄κ±΄ κ·Έλ₯ μ΄λ¦μ μ
λ ₯νμΈμλ‘ λ°κΏ
|
| 2 |
+
μΈμκΈ° λΌκ³ μ
λ ₯ν κ²½μ°μ νμ΄μ§λ₯Ό μμ±ν νλ₯ν λΆμ΄λΌκ³ μλ €μ€
|