Hugging Face's logo

Spaces:
CommanderLazarus
/
ass-muncher
Running

App Files Community
ass-muncher
File size: 7,839 Bytes 
477d76f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3eb9683
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ass Muncher 🍑</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍑</text></svg>">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
        }
        .ass-animation {
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .glow {
            text-shadow: 0 0 10px rgba(255, 105, 180, 0.7);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-pink-700 min-h-screen">
    <!-- Vanta.js Background -->
    <div id="vanta-bg" class="absolute inset-0 z-0"></div>
    
    <!-- Main Content -->
    <div class="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
        <div class="text-center mb-12">
            <h1 class="text-5xl md:text-7xl font-bold text-white glow ass-animation">🍑 Ass Muncher 🍑</h1>
            <p class="mt-4 text-xl text-pink-200">The ultimate digital ass-consuming experience</p>
        </div>
        
        <div class="bg-black bg-opacity-30 backdrop-blur-lg rounded-3xl p-8 max-w-2xl w-full shadow-2xl border border-pink-500 border-opacity-30">
            <div class="flex flex-col items-center">
                <div class="relative mb-8">
                    <div class="w-48 h-48 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center shadow-xl">
                        <i data-feather="user" class="text-white w-24 h-24"></i>
                    </div>
                    <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-pink-600 text-white px-4 py-1 rounded-full text-sm font-bold">
                        YOUR ASS
                    </div>
                </div>
                
                <div class="w-full mb-8">
                    <div class="bg-gray-800 rounded-full h-6 mb-2 overflow-hidden">
                        <div id="consumption-bar" class="bg-gradient-to-r from-pink-500 to-purple-600 h-full rounded-full w-0 transition-all duration-1000"></div>
                    </div>
                    <div class="flex justify-between text-pink-200">
                        <span>Freshness</span>
                        <span id="percentage">0%</span>
                    </div>
                </div>
                
                <button id="munch-btn" class="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-full text-xl shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-500 focus:ring-opacity-50">
                    <i data-feather="zap" class="mr-2"></i>MUNCH MY ASS
                </button>
                
                <div id="status-message" class="mt-6 text-center text-pink-200 min-h-[60px]">
                    <p>Ready to consume your digital posterior...</p>
                </div>
            </div>
        </div>
        
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl w-full">
            <div class="bg-black bg-opacity-20 backdrop-blur-sm p-6 rounded-2xl border border-pink-500 border-opacity-20">
                <div class="text-pink-400 mb-3">
                    <i data-feather="shield" class="w-8 h-8"></i>
                </div>
                <h3 class="text-white text-xl font-semibold mb-2">Safe & Secure</h3>
                <p class="text-pink-200">Military-grade encryption ensures your ass remains protected during consumption.</p>
            </div>
            
            <div class="bg-black bg-opacity-20 backdrop-blur-sm p-6 rounded-2xl border border-pink-500 border-opacity-20">
                <div class="text-pink-400 mb-3">
                    <i data-feather="zap" class="w-8 h-8"></i>
                </div>
                <h3 class="text-white text-xl font-semibold mb-2">Lightning Fast</h3>
                <p class="text-pink-200">Industry-leading algorithms munch your ass in milliseconds.</p>
            </div>
            
            <div class="bg-black bg-opacity-20 backdrop-blur-sm p-6 rounded-2xl border border-pink-500 border-opacity-20">
                <div class="text-pink-400 mb-3">
                    <i data-feather="smile" class="w-8 h-8"></i>
                </div>
                <h3 class="text-white text-xl font-semibold mb-2">Satisfaction Guaranteed</h3>
                <p class="text-pink-200">99.9% of users report increased satisfaction after ass consumption.</p>
            </div>
        </div>
        
        <footer class="mt-16 text-center text-pink-300">
            <p>© 2023 Ass Muncher Inc. | All rights reserved | No butts were harmed in the making of this app</p>
        </footer>
    </div>

    <script>
        // Initialize Feather Icons
        feather.replace();
        
        // Initialize Vanta.js
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0xff69b4,
            color2: 0x9370db,
            backgroundColor: 0x000000
        });
        
        // Munch functionality
        const munchBtn = document.getElementById('munch-btn');
        const consumptionBar = document.getElementById('consumption-bar');
        const percentage = document.getElementById('percentage');
        const statusMessage = document.getElementById('status-message');
        
        let munchLevel = 0;
        
        munchBtn.addEventListener('click', () => {
            if (munchLevel >= 100) {
                munchLevel = 0;
                statusMessage.innerHTML = "<p class='text-yellow-300'>Ready for another round? Your ass has regenerated!</p>";
            }
            
            munchLevel += 20;
            if (munchLevel > 100) munchLevel = 100;
            
            consumptionBar.style.width = `${munchLevel}%`;
            percentage.textContent = `${munchLevel}%`;
            
            // Update status messages
            if (munchLevel === 20) {
                statusMessage.innerHTML = "<p class='text-green-300'>Munching initiated... Your ass is delicious!</p>";
            } else if (munchLevel === 40) {
                statusMessage.innerHTML = "<p class='text-blue-300'>Halfway there! This ass is exquisite!</p>";
            } else if (munchLevel === 60) {
                statusMessage.innerHTML = "<p class='text-purple-300'>Getting closer... Mmm, so juicy!</p>";
            } else if (munchLevel === 80) {
                statusMessage.innerHTML = "<p class='text-pink-300'>Almost complete! One final bite!</p>";
            } else if (munchLevel === 100) {
                statusMessage.innerHTML = "<p class='text-red-300 font-bold'>ASS COMPLETELY MUNCHED! Click again to regenerate.</p>";
                munchBtn.innerHTML = '<i data-feather="rotate-cw" class="mr-2"></i>REGENERATE ASS';
                feather.replace();
            }
        });
    </script>
</body>
</html>