mieibrani Archivi - Blog di sceneinmovimento

mieibrani

Dipingere un volto

La madre cerca e scruta il voltodella figlia, ma non ne riconosce l’odore,né l’imperfezione che da anni si…

sceneinmovimento Maggio 11, 2026Maggio 11, 2026

mieibrani

ANATOMIA DI UNA ROSA

Dicono che la fragilità sia un difetto, ma non sanno che è l’unica materia capace di costruire un…

sceneinmovimento Aprile 17, 2026Aprile 17, 2026

mieibrani

Oltre la superficie:

❤️Se il dolore diventa un “Like” agli occhi degli adulti Troppo spesso sentiamo frasi che tagliano più affilate…

sceneinmovimento Aprile 11, 2026Aprile 12, 2026

mieibrani

Monologo: Il Colore dei Passi

Sotto ai miei piedi sento il grido di uno specchio rotto. I vetri sparsi sono schegge di un’immagine…

sceneinmovimento Aprile 4, 2026Aprile 4, 2026

mieibrani

Equilibrio

🌹 Perdo l’equilibrio,mi guardo e riscrivo le pagine della vita.Il cuore si ferma e ascolta i pensieri;ti vedo,…

sceneinmovimento Aprile 4, 2026Aprile 12, 2026

mieibrani

Il disegno delle carezze

Sulla pagina bianca di un tempo sospeso,ritrovo il passo, non più difeso.L’equilibrio è un’onda che ha perso il…

sceneinmovimento Marzo 29, 2026Marzo 29, 2026

mieibrani

Il Riflesso dell’Anima

🌹Tra i petali sfumati di una rosa,dove il ricordo si fa polvere d’oro,ti cerchi come un’eco silenziosache custodisce…

sceneinmovimento Marzo 26, 2026Marzo 26, 2026

mieibrani

🌿 La pace

🌿 La pace è un respiro che torna, una mano che cerca un’altra senza paura. È il cielo…

sceneinmovimento Marzo 3, 2026Marzo 3, 2026

mieibrani

🌿 Lo spazio dei pensieri

Lo spazio dei tuoi pensieri è il cuore. Lì, dove nel silenzio arriva un colore preciso, che disegna…

sceneinmovimento Febbraio 24, 2026Aprile 12, 2026

mieibrani

Orizzonti che chiamo per nome ✨

Ci sono orizzonti che non si attraversano: si ascoltano. Restano lì, immobili e lontani, eppure capaci di muovere…

sceneinmovimento Febbraio 22, 2026Febbraio 22, 2026

Ciao a tutti! Sono Anna e sono qui per condividere con voi la mia passione per l'arte .Ho 25 anni e studio arte da quando sono piccola. Questo spazio è il mio rifugio, dove posso esprimere liberamente le mie emozioni e cercare il coraggio di affrontare le sfide che la vita mi presenta. Sono anche un'appassionata di recitazione, e spero di riuscire a regalarvi qualche emozione attraverso i miei scritti e le mie interpretazioni. . Qui troverete riflessioni sincere, sorrisi spontanei e un po' di poesia, sempre con l'intento di trasmettere positività e speranza. Seguitemi sui social per restare in contatto!

import React, { useState, useEffect } from 'react'; import { MessageCircle, X, Send, Star, Sparkles } from 'lucide-react'; export default function MessageBoard() { const [isOpen, setIsOpen] = useState(false); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(''); const [authorName, setAuthorName] = useState(''); const [showForm, setShowForm] = useState(false); // Carica messaggi da storage al mount useEffect(() => { loadMessages(); }, []); const loadMessages = async () => { try { const result = await window.storage.list('board-msg:', false); if (result && result.keys) { const msgPromises = result.keys.map(async (key) => { const data = await window.storage.get(key, false); return data ? JSON.parse(data.value) : null; }); const msgs = (await Promise.all(msgPromises)).filter(m => m !== null); setMessages(msgs.sort((a, b) => b.timestamp - a.timestamp)); } } catch (error) { console.log('Caricamento messaggi:', error); setMessages([]); } }; const addMessage = async () => { if (!newMessage.trim()) return; const message = { id: Date.now(), text: newMessage.trim(), author: authorName.trim() || 'Anonimo', timestamp: Date.now(), emoji: ['🎭', '🎬', '🎨', '🎵', '⭐', '✨', '💫'][Math.floor(Math.random() * 7)] }; try { await window.storage.set(board-msg:${message.id}, JSON.stringify(message), false); setMessages([message, ...messages]); setNewMessage(''); setAuthorName(''); setShowForm(false); } catch (error) { console.error('Errore salvataggio:', error); alert('Errore nel salvare il messaggio. Riprova!'); } }; const deleteMessage = async (id) => { try { await window.storage.delete(board-msg:${id}, false); setMessages(messages.filter(m => m.id !== id)); } catch (error) { console.error('Errore eliminazione:', error); } }; const formatDate = (timestamp) => { const date = new Date(timestamp); return date.toLocaleDateString('it-IT', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }); }; return ( <> {/* Pulsante fluttuante bacheca */}

setIsOpen(true)} >

{/* Bagliore */}

{/* Pulsante */}

{/* Badge contatore */} {messages.length > 0 && (

{messages.length}

)}

{/* Stelle decorative */}

⭐

✨

BACHECA

{/* Modal Bacheca */} {isOpen && (

{/* Decorazione legno superiore */}

{/* Chiodi decorativi */}

{/* Header */}

🎭 Bacheca delle Scene 🎬

Lascia il tuo messaggio artistico!

{/* Contenuto */}

{/* Pulsante aggiungi messaggio */} {!showForm && ( )} {/* Form nuovo messaggio */} {showForm && (

✨ Nuovo Messaggio

setAuthorName(e.target.value)} className="w-full mb-3 px-4 py-3 border-3 border-purple-300 rounded-xl focus:outline-none focus:border-purple-500 text-lg" maxLength={30} />

setNewMessage(e.target.value)}
                    className="w-full mb-4 px-4 py-3 border-3 border-purple-300 rounded-xl focus:outline-none focus:border-purple-500 resize-none text-lg"
                    rows="4"
                    maxLength={200}
                  />
                  
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-gray-600">
                      {newMessage.length}/200 caratteri
                    </span>
                    <button
                      onClick={addMessage}
                      disabled={!newMessage.trim()}
                      className="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 disabled:from-gray-400 disabled:to-gray-500 text-white rounded-xl font-bold shadow-lg transition-all flex items-center gap-2 disabled:cursor-not-allowed"
                    >
                      <Send className="w-5 h-5" />
                      PUBBLICA
                    </button>
                  </div>
                </div>
              )}

{/* Messaggi */}
              <div className="space-y-4">
                {messages.length === 0 && !showForm && (
                  <div className="text-center py-12">
                    <div className="text-6xl mb-4">📝</div>
                    <p className="text-2xl text-amber-800 font-bold mb-2">
                      La bacheca è vuota!
                    </p>
                    <p className="text-amber-600">
                      Sii il primo a lasciare un messaggio artistico
                    </p>
                  </div>
                )}

{messages.map((msg, index) => (
                  <div
                    key={msg.id}
                    className="message-card relative group"
                    style={{animationDelay: ${index * 0.1}s}}
                  >
                    {/* Post-it colorati casuali */}
                    <div className={`relative p-5 rounded-2xl shadow-lg border-l-8 transform hover:scale-105 transition-all ${
                      index % 5 === 0 ? 'bg-yellow-100 border-yellow-500' :
                      index % 5 === 1 ? 'bg-pink-100 border-pink-500' :
                      index % 5 === 2 ? 'bg-blue-100 border-blue-500' :
                      index % 5 === 3 ? 'bg-green-100 border-green-500' :
                      'bg-purple-100 border-purple-500'
                    }`}>
                      
                      {/* Puntina decorativa */}
                      <div className="pin-icon absolute -top-3 -left-3 text-3xl">
                        📌
                      </div>
                      
                      {/* Emoji casuale */}
                      <div className="absolute top-2 right-2 text-3xl">
                        {msg.emoji}
                      </div>
                      
                      {/* Contenuto */}
                      <div className="pr-12">
                        <p className="text-lg text-gray-800 mb-3 leading-relaxed font-medium">
                          {msg.text}
                        </p>
                        
                        <div className="flex items-center justify-between text-sm">
                          <div className="flex items-center gap-2">
                            <span className="font-bold text-gray-700">
                              {msg.author}
                            </span>
                            <span className="text-gray-500">•</span>
                            <span className="text-gray-600">
                              {formatDate(msg.timestamp)}
                            </span>
                          </div>
                        </div>
                      </div>
                      
                      {/* Pulsante elimina (visibile al hover) */}
                      <button
                        onClick={() => {
                          if (window.confirm('Vuoi eliminare questo messaggio?')) {
                            deleteMessage(msg.id);
                          }
                        }}
                        className="absolute bottom-3 right-3 opacity-0 group-hover:opacity-100 w-8 h-8 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center transition-all shadow-lg"
                      >
                        <X className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}</div>	</div>
</aside>
			</div>		</div>
		<footer class="av-site-footer">
			<div class="footer-content">
				<div class="av-container">
					
<div class="site-info">
				<a class="site-name" href="https://sceneinmovimento.altervista.org/"
		   rel="home">Blog di sceneinmovimento</a>
	</div>

<p class="av-credit-link seamless-credits"><a href="https://blog.altervista.org/it/temi-grafici-seamless-il-vestito-perfetto-per-il-tuo-blog/" target="_blank" rel="nofollow">Tema Seamless</a> <span>Frida</span>, sviluppato da Altervista</p><p class="av-credit-link" style="position:relative;font-size:12px;clear:both;text-align:center;padding:8px !important;margin:0 !important;"><a rel="nofollow" href="https://it.altervista.org/" title="Crea un sito gratis e guadagna">Apri un sito e guadagna con Altervista</a> - <a rel="nofollow" href="https://it.altervista.org/disclaimer.php">Disclaimer</a> - <a rel="nofollow" href="https://it.altervista.org/contatti.php#abuse">Segnala abuso</a> - <a href="https://www.iubenda.com/privacy-policy/34183784" rel="noreferrer nofollow" target="_blank">Privacy Policy</a> - <a href="#" role="button" class="iubenda-cs-preferences-link">Gestisci preferenze di tracciamento</a></p>				</div>
			</div>
		</footer>

</div>
	<av-adv-slot data-avadv-config="{"type":"altervista","lazy":false,"unit":"2X2"}" class="" data-av-adv-slot-height-mode="fixed" style="--av-adv-slot-height: 0px"></av-adv-slot><script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/_av_share/master/wp_themes/desktop/av-seamless-frida/*","/_av_share/master/wp_themes/seamless-base/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<noscript class="av-unwrap-on-dcl"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/av-seamless-frida/blocks.min.css?1773744645"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/base/mobile-menu.min.css?1658234072"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/av-seamless-frida/widget.min.css?1697464321"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/av-seamless-frida/footer.min.css?1774532830"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/base/blocks-desktop.min.css?1773744645"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/av-seamless-frida/footer-desktop.min.css?1588844450"></noscript><noscript class="av-unwrap-on-idle"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/base/reading-list.min.css?1765877939"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/affiliation-banner.min.css?1763631614"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/seamless/base/print.min.css?1768209583"><link rel="stylesheet" href="https://sceneinmovimento.altervista.org/_av_share/master/static/wordpress/dist/css/legacy/legacy-widgets.min.css?1775058100"></noscript><script>document.addEventListener("DOMContentLoaded",function(){var u=function(c){document.querySelectorAll("noscript."+c).forEach(function(e){e.outerHTML=e.textContent})};u("av-unwrap-on-dcl"),self.requestIdleCallback?requestIdleCallback(u.bind(null,"av-unwrap-on-idle"),{timeout:3000}):u("av-unwrap-on-idle")})</script><script id="av-script-data-common" type="application/json">{"accountId":"sceneinmovimento","platform":"altervista"}</script><script id="av-script-data-adsense" type="application/json">{"host":"ca-host-pub-3881938158959979","client":"ca-pub-9178407597172855","units":[],"advGroupHostChannelId":"2891735766"}</script><script id="av-script-data-affiliation-banner" type="application/json">{"refreshPriceEndpoint":"https:\/\/d50c3qvj5bugz.cloudfront.net\/affiliation\/api\/db\/lookup\/"}</script><script id="av-script-data-nielsen" type="application/json">{"appId":"P5A34E9BF-99AC-4210-AF7C-DBA206735C61","section":"altervista_BRW","assetId":"sceneinmovimento-ec49d6716a133d8f9b1e3d46761ad991"}</script><script id="av-script-data-tracking" type="application/json">{"postId":null,"postType":null,"course":null,"wellness":null,"device":"computer","theme":"desktop: av-seamless-frida","branch":"master","autopilotSettings":"auto","advGroup":"AllSilver","advTag":null,"wpVersion":"6.9.4","phpVersion":"8.0.30","specialSponsorship":null}</script><script id="av-script-data-permutive" type="application/json">{"platform":"sceneinmovimento-web-desktop","site_name":"sceneinmovimento","page":{"type":"Categoria"},"publisher":"Mondadori","classifications_watson":{"categories":"$alchemy_taxonomy","keywords":"$alchemy_keywords"}}</script>
	<div class="av-mobile-menu av-unrender-before-loading-styles" id="av-mobile-menu">
	<div class="av-hide-before-loading-styles av-menu-backdrop" on="tap:av-body.toggleClass(class='sidebar-open')"></div>
	<nav class="av-elem menu-inner">
		<div class="menu-overflow">
			<ul id="av-mobile-menu" class="main-menu"><li id="av-mobile-menu-item-522" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-522"><a href="https://sceneinmovimento.altervista.org/category/approfondimento/">APPROFONDIMENTO</a></li>
<li id="av-mobile-menu-item-815" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-815"><a href="https://sceneinmovimento.altervista.org/category/mieibrani/" aria-current="page">mieibrani</a></li>
<li id="av-mobile-menu-item-733" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-733"><a href="https://sceneinmovimento.altervista.org/category/tratto-da-una-lezione-di-recitazione/">tratto da una lezione di recitazione</a></li>
<li id="av-mobile-menu-item-816" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-816"><a href="https://sceneinmovimento.altervista.org/tag/teatro/">#Teatro</a></li>
<li id="av-mobile-menu-item-2209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2209"><a href="https://sceneinmovimento.altervista.org/nessun-indietro-%e2%9d%a4%e2%9c%a8/">NESSUN INDIETRO ❤✨</a></li>
<li id="av-mobile-menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-2297"><a href="https://sceneinmovimento.altervista.org/teatro-2024-2025%f0%9f%8e%ad%e2%99%a5%ef%b8%8f/">LEZIONI DI..</a></li>
<li id="av-mobile-menu-item-738" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-738"><a href="https://sceneinmovimento.altervista.org/category/citazioni/">CITAZIONI</a></li>
<li id="av-mobile-menu-item-3307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3307"><a href="https://sceneinmovimento.altervista.org/in-scena-e-in-azione/">” In Scena e in Azione” 🎬🎭🎤</a></li>
<li id="av-mobile-menu-item-4201" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4201"><a href="https://sceneinmovimento.altervista.org/fiori-di-teatro%f0%9f%8c%bb%e2%99%a5/">FIORI DI TEATRO🌻♥</a></li>
<li id="av-mobile-menu-item-4488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-4488"><a href="https://sceneinmovimento.altervista.org/">✨ Cuore di scena.🎭💛</a></li>
<li id="av-mobile-menu-item-4887" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4887"><a href="https://sceneinmovimento.altervista.org/a-lezione-di/">A LEZIONE DI ….</a></li>
</ul>			<div class="social-icons">
			<a href="https://facebook.com/profile.php?id=61559292634530&mibextid=ZbWKwL" title="Facebook" target="_blank" rel="noreferrer">
			<span class="av-svg-icon av-svg-icon-facebook"></span>
		</a>
	
			<a href="https://instagram.com/scene_in_movimento90?igsh=MXJwZmlkaWZiYzRxcA==" title="Instagram" target="_blank" rel="noreferrer">
			<span class="av-svg-icon av-svg-icon-instagram"></span>
		</a>
	
	
	
	
	
	
	
	
	
	
	
	
	
</div>
								</div>
		<div class="sidebar-close" on="tap:av-body.toggleClass(class='sidebar-open')">
			<span class="av-svg-icon av-svg-icon-cross"></span>
		</div>
	</nav>
</div>

</body>
</html>

Categoria: mieibrani

Dipingere un volto

ANATOMIA DI UNA ROSA

Oltre la superficie:

Monologo: Il Colore dei Passi

Equilibrio

Il disegno delle carezze

Il Riflesso dell’Anima

🌿 La pace

🌿 Lo spazio dei pensieri

Orizzonti che chiamo per nome ✨

Dipingere un volto

✨ DAL MOVIMENTO NASCE UNA VITA:

ANATOMIA DI UNA ROSA

🧩 Ricomporsi come un Puzzle: il risveglio del corpo nella danza

✨ Nuovo Messaggio