Spaces:
Running
Running
File size: 12,159 Bytes
8dc38f4 | 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 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 | <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Bullying - Cartaz Impactante</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>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f8fafc;
}
.poster {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
border-radius: 1rem;
overflow: hidden;
}
.hand-icon {
animation: wave 2s infinite;
transform-origin: 70% 70%;
}
@keyframes wave {
0% { transform: rotate(0deg); }
10% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
60% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
.copy-btn {
transition: all 0.3s ease;
}
.copy-btn:hover {
transform: translateY(-2px);
}
.heart-beat {
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.image-container {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
height: 200px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.image-container:hover img {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 1rem;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="poster w-full max-w-3xl">
<!-- Header with title -->
<div class="bg-gradient-to-r from-red-600 to-red-800 py-6 px-8 text-center relative">
<div class="absolute top-0 left-0 w-full h-full opacity-20">
<div class="absolute top-0 left-0 w-full h-full bg-repeat" style="background-image: url('https://images.unsplash.com/photo-1608889825103-eb2d9e23f5f4?q=80&w=1000');"></div>
</div>
<h1 class="text-4xl md:text-5xl font-black text-white uppercase tracking-wide relative z-10">
<span class="inline-block transform rotate-12">✋</span>
STOP BULLYING
<span class="inline-block transform -rotate-12">✋</span>
</h1>
<p class="text-white text-lg mt-2 font-medium relative z-10">Juntos contra a violência!</p>
</div>
<!-- Main content -->
<div class="p-8 space-y-6">
<!-- Image row -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Jovem triste">
<div class="image-overlay">
<p class="font-bold">Ninguém merece se sentir assim</p>
</div>
</div>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Grupo de amigos">
<div class="image-overlay">
<p class="font-bold">A amizade supera qualquer diferença</p>
</div>
</div>
</div>
<!-- Quote 1 -->
<div class="bg-white p-6 rounded-lg shadow-md border-l-8 border-red-500 flex items-start">
<img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Rosto triste" class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<p class="text-xl font-bold text-gray-800">
"Palavras podem machucar mais que socos. Pense antes de falar!"
</p>
<div class="mt-3 flex items-center text-red-500">
<i class="fas fa-heart heart-beat mr-2"></i>
<span class="text-sm font-medium">Seja gentil sempre</span>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="bg-white p-6 rounded-lg shadow-md border-l-8 border-blue-500 flex items-start">
<img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Diversidade" class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<p class="text-xl font-bold text-gray-800">
"Ninguém é igual a ninguém, e isso é o que nos torna especiais. Respeite as diferenças!"
</p>
<div class="mt-3 flex items-center text-blue-500">
<i class="fas fa-hands-helping mr-2"></i>
<span class="text-sm font-medium">Diversidade é beleza</span>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="bg-white p-6 rounded-lg shadow-md border-l-8 border-purple-500 flex items-start">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Silêncio" class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<p class="text-xl font-bold text-gray-800">
"Se você não tem nada de bom para dizer, fique quieto. Silêncio nunca machucou ninguém."
</p>
<div class="mt-3 flex items-center text-purple-500">
<i class="fas fa-comment-slash mr-2"></i>
<span class="text-sm font-medium">Pense duas vezes</span>
</div>
</div>
</div>
<!-- Quote 4 -->
<div class="bg-white p-6 rounded-lg shadow-md border-l-8 border-green-500 flex items-start">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Alerta" class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<p class="text-xl font-bold text-gray-800">
"Bullying não é brincadeira. É covardia disfarçada de diversão."
</p>
<div class="mt-3 flex items-center text-green-500">
<i class="fas fa-exclamation-triangle mr-2"></i>
<span class="text-sm font-medium">Não seja cúmplice</span>
</div>
</div>
</div>
<!-- Image with message -->
<div class="image-container">
<img src="https://images.unsplash.com/photo-1498522271744-cdd435c13f24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mãos unidas">
<div class="image-overlay">
<h3 class="text-2xl font-black mb-2">FAÇA A DIFERENÇA!</h3>
<p class="text-white">
Se você sofre ou vê alguém sofrendo bullying, não fique calado.
Denuncie! Juntos podemos criar um ambiente melhor para todos.
</p>
</div>
</div>
</div>
<!-- Footer with share options -->
<div class="bg-gray-100 px-8 py-6 flex flex-col sm:flex-row items-center justify-between">
<div class="mb-4 sm:mb-0">
<h4 class="font-bold text-gray-700">Compartilhe esta mensagem:</h4>
<p class="text-sm text-gray-600">Ajude a conscientizar mais pessoas</p>
</div>
<div class="flex space-x-3">
<button onclick="copyPosterLink()" class="copy-btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-link mr-2"></i> Copiar Link
</button>
<a href="#" class="copy-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fab fa-facebook-f mr-2"></i> Compartilhar
</a>
<a href="#" class="copy-btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fab fa-whatsapp mr-2"></i> WhatsApp
</a>
</div>
</div>
</div>
<!-- Toast notification -->
<div id="toast" class="fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg hidden transform transition-all duration-300 translate-y-10">
<div class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>Link copiado com sucesso!</span>
</div>
</div>
<script>
function copyPosterLink() {
// In a real scenario, this would be the actual URL to share
const dummyLink = "https://exemplo.com/stop-bullying-cartaz";
navigator.clipboard.writeText(dummyLink).then(() => {
// Show toast notification
const toast = document.getElementById('toast');
toast.classList.remove('hidden');
toast.classList.remove('translate-y-10');
toast.classList.add('translate-y-0');
// Hide after 3 seconds
setTimeout(() => {
toast.classList.add('translate-y-10');
setTimeout(() => {
toast.classList.add('hidden');
}, 300);
}, 3000);
});
}
</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=Jinx5467/stop-bowling" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |