Hugging Face's logo

Spaces:
AhBoh
/
cazzata
Running

App Files Community
cazzata
File size: 7,775 Bytes
0cb6d29
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Exclamation Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        @keyframes shake {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            50% { transform: rotate(0deg); }
            75% { transform: rotate(-5deg); }
            100% { transform: rotate(0deg); }
        }
        @keyframes confused {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(10deg) scale(1.1); }
            100% { transform: rotate(0deg) scale(1); }
        }
        .character {
            transition: all 0.3s ease;
        }
        .bounce {
            animation: bounce 0.5s ease;
        }
        .shake {
            animation: shake 0.5s ease;
        }
        .confused {
            animation: confused 0.8s ease;
        }
        .speech-bubble {
            position: relative;
            background: #fff;
            border-radius: 1rem;
            padding: 1rem;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }
        .speech-bubble:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #fff;
            border-bottom: 0;
            margin-left: -10px;
            margin-bottom: -10px;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-100 to-blue-100 min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="p-6">
            <h1 class="text-3xl font-bold text-center text-purple-800 mb-2">Exclamation Generator</h1>
            <p class="text-gray-600 text-center mb-6">Click the buttons to hear reactions!</p>
            
            <div class="flex flex-col items-center mb-8">
                <!-- Character -->
                <div class="character relative mb-4" id="character">
                    <div class="w-32 h-32 bg-yellow-300 rounded-full relative">
                        <!-- Eyes -->
                        <div class="absolute top-8 left-6 w-6 h-6 bg-white rounded-full flex justify-center items-center">
                            <div class="w-3 h-3 bg-black rounded-full"></div>
                        </div>
                        <div class="absolute top-8 right-6 w-6 h-6 bg-white rounded-full flex justify-center items-center">
                            <div class="w-3 h-3 bg-black rounded-full"></div>
                        </div>
                        <!-- Mouth -->
                        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-8 h-2 bg-black rounded-full"></div>
                    </div>
                </div>
                
                <!-- Speech bubble -->
                <div class="speech-bubble mb-4 hidden" id="speechBubble">
                    <p class="text-lg font-medium" id="exclamationText"></p>
                </div>
            </div>
            
            <!-- Buttons -->
            <div class="grid grid-cols-3 gap-3">
                <button onclick="triggerReaction('Ouch!', 'shake', 'bg-red-500')" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center">
                    <i class="fas fa-bolt mr-2"></i> Pain
                </button>
                <button onclick="triggerReaction('Iggit!', 'bounce', 'bg-green-500')" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center">
                    <i class="fas fa-star mr-2"></i> Surprise
                </button>
                <button onclick="triggerReaction('Äh?', 'confused', 'bg-blue-500')" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center">
                    <i class="fas fa-question mr-2"></i> Confusion
                </button>
            </div>
            
            <!-- Custom input -->
            <div class="mt-6">
                <label class="block text-gray-700 mb-2">Make your own exclamation:</label>
                <div class="flex">
                    <input type="text" id="customExclamation" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <button onclick="triggerCustom()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold px-4 py-2 rounded-r-lg transition-colors">
                        Go!
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function triggerReaction(text, animation, colorClass) {
            const character = document.getElementById('character');
            const speechBubble = document.getElementById('speechBubble');
            const exclamationText = document.getElementById('exclamationText');
            
            // Reset classes
            character.className = 'character relative mb-4';
            speechBubble.className = 'speech-bubble mb-4';
            
            // Add new classes
            character.classList.add(animation);
            speechBubble.classList.remove('hidden');
            speechBubble.classList.add(colorClass);
            exclamationText.textContent = text;
            
            // Reset after animation
            setTimeout(() => {
                character.classList.remove(animation);
            }, 1000);
        }
        
        function triggerCustom() {
            const input = document.getElementById('customExclamation');
            if (input.value.trim() !== '') {
                triggerReaction(input.value, 'bounce', 'bg-purple-500');
                input.value = '';
            }
        }
        
        // Easter egg - click on character
        document.getElementById('character').addEventListener('click', function() {
            const reactions = [
                {text: "Hey!", animation: "bounce", color: "bg-pink-500"},
                {text: "Stop that!", animation: "shake", color: "bg-red-500"},
                {text: "Haha!", animation: "bounce", color: "bg-yellow-500"},
                {text: "Äh?", animation: "confused", color: "bg-blue-500"}
            ];
            const random = Math.floor(Math.random() * reactions.length);
            triggerReaction(reactions[random].text, reactions[random].animation, reactions[random].color);
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AhBoh/cazzata" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>