Code a inserer:
============ HTML / Javascript ======
<!--
PROJET : Collection d'Emojis Chic
SIGNATURE : Sorcière Corbeau en collaboration avec l'IA
-->
<!doctype html>
<style>
:root {
--lavande-fond: #f3f0ff;
--lavande-claire: #E6E6FA;
--lavande-pro: #d8d1ff;
--violet-texte: #5a4fcf;
--rose-favori: #fff0f6;
}
/* CONTENEUR */
#emoji-container-wrapper {
position: fixed; bottom: 30px; right: 30px;
z-index: 10000;
}
/* BOUTON */
#emoji-master-btn {
width: 100px; height: 100px;
background: var(--lavande-claire);
border: 4px solid var(--lavande-pro);
border-radius: 50%;
box-shadow: 0 10px 30px rgba(90, 79, 207, 0.3);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin-left: auto;
}
.main-icon {
font-size: 80px; /* Fleur très grosse */
transition: 0.3s;
}
/* SURVOL */
#emoji-master-btn:hover {
transform: scale(1.1);
background: white;
border-color: #ffb7d5;
}
#emoji-master-btn:hover .main-icon {
animation: heartBeat 1.2s infinite;
}
@keyframes heartBeat {
0% { transform: scale(1); }
15% { transform: scale(1.2); }
30% { transform: scale(1); }
45% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* FENÊTRE */
#emoji-app-window {
width: 350px; background: white;
border-radius: 25px; border: 3px solid var(--lavande-pro);
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
display: none; flex-direction: column;
overflow: hidden; font-family: 'Segoe UI', sans-serif;
margin-bottom: 15px;
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.app-header { background: var(--lavande-pro); padding: 15px; text-align: center; }
.app-title { font-weight: 800; color: var(--violet-texte); font-size: 16px; }
.fav-section {
padding: 10px; background: var(--rose-favori);
border-bottom: 1px solid var(--lavande-pro);
display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px;
}
.fav-label { font-size: 10px; color: #d63384; font-weight: bold; width: 100%; margin-bottom: 5px; text-transform: uppercase; }
#emoji-scroll-area {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 8px; padding: 15px; max-height: 350px; overflow-y: auto;
}
.emoji-unit {
font-size: 26px; height: 50px; cursor: pointer;
border-radius: 12px; display: flex; align-items: center;
justify-content: center; transition: 0.2s; position: relative;
}
.emoji-unit:hover { background: var(--lavande-fond); transform: scale(1.2); }
.copy-badge {
position: absolute; top: -10px; background: var(--violet-texte);
color: white; font-size: 10px; padding: 3px 8px; border-radius: 10px;
pointer-events: none; animation: fadeUp 0.8s forwards;
}
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 0; transform: translateY(-15px); } }
.app-footer {
text-align: center; padding: 8px; font-size: 10px;
color: #bbb; background: #fafafa; border-top: 1px solid #eee;
letter-spacing: 1px; font-weight: bold;
}
/* Scrollbar */
#emoji-scroll-area::-webkit-scrollbar { width: 6px; }
#emoji-scroll-area::-webkit-scrollbar-thumb { background: var(--lavande-pro); border-radius: 10px; }
</style>
<audio id="emoji-sound" src="https://www.soundjay.com" preload="auto"></audio>
<div id="emoji-container-wrapper" onmouseenter="showApp()" onmouseleave="hideApp()">
<div id="emoji-app-window">
<div class="app-header">
<span class="app-title">Collection Emojis</span>
</div>
<div class="fav-section" id="fav-area">
<div class="fav-label">✨ Cliquez et le copier (Ctrl+V) dans vos commentaires✨</div>
</div>
<div id="emoji-scroll-area">
😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😛😚😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😶😵😴😳😲😱😰😯😮😭😷😸😹😺😻😼😽😾😿🙀🙅🙆🙇🙈🙉🙊💓💔💕💖💗💘💙💚💛💜🙋🙌🙍🙎🙏☝✊✋✌❤👀👂👃👄👎👍👌👋👊👉👈👇👆👅👏👐👤👥👦👧👨👩👪👫👵👴👳👲👱👰👯👮👭👬👶👷👸👹👺👻👽👾👿💑💏💋💇💆💅💃💂💁💀🍇🍈🍉🍊🍋🍌🍍🍗🍖🍕🍔🍓🍒🍑🍐🍏🍎🍚🍛🍜🍝面包🍟🍠🍡🍫🍪 DONUT🍨🍧🍦🍥🍤🍣🍢🍬🍭🍮🍯🍰🍱🍲🍳🍴🍵🐁🐀🎂🍼🍻🍺🍹🍸🍷🍶🐂🐃🐄🐅🐆🐇🐈🐉🐊🐋🐌🐍🐎🐏🐐🐑🐒🐓🐔🐕🐖🐗象🐙🐚🐛🐜🐝🐞🐟🐠🐡🐢🐣🐤🐥🐦🐧🐨🐩🐪🐫🐬🐭🐮🐯🐰🐱🐲🐳🐴🐵🐶🐷🐸🐹🐺🐻🐼🐽🐾☕🌰💧💦🌈☀️☁️⚡💬💭🌱🌲🌳🌴🌵🌷🌸🌹🍃🍂🍁🍀🌿🌾🌽🌼🌻🌺🍄🍅🍆💡💎🚀🎈🎁🎀📍📌🖍️📝💻📱📸🔔💨💥💤💣💢💟💞💝💩💪💫⌚⌛⏰⏳☎⚓✂👑👒👓👔👕👖👗👘👙👚👛👜👝👞👟👠👡BOOTS👣💄💉💊💌💍💐💠💡💰💱💲💳💴💵💶💷💸💹💺💻💼💽💾💿📀📁📂📃📄📅📆📇📈📉📊📋📌📍📎📏📐📑📒📓📔📕📖📗📘📙📚📛📜📝📞📟📠📡📢📣📤📥📦📧📨📩📪📫📬📭📮📯📰📱📲📳📴📵📶📷📹📺📻📼🔋🔌🔍🔎🔏🔐🔑🔒🔓🔔🔕🔖🔗🔦🔧🔨🔩🔪🔫🔬🔭🔭🔮🕐🕑🕚🕙🎃🎄🎅🎆🎇🎈🎉🎊🎋🎌🎍🎎🎏🎐🎑🎒🎓🎠🎡🎢🎣🎤🎥🎦🎧🎨🎩🎪🎫🎬🎭🎮🎯🎰🎱🎲碗🎳🎴🎵🎶🎷🎸🎹🎺🎻🎼🎽🎾🎿🏀🏁🏂🏃SURF🏆🏈🏊💒♨♻♿⚠⚡⛓⛔⛲⛳⛴帆⛵⛹⛺⛻⛼⛽⛾⛿✈🏠🏡🏢🏤🏥ATM🏨🏩🏪🏫🏬🏭🏮🏯🏰💈🗻🗼🗼🗽🗾🗿🚀🚁🚂🚃🚄🚅🚆🚇🚈🚉🚊🚋🚌🚍🚎🚏🚐🚑🚒🚓🚔🚕🚖🚗🚘🚚🚙🚛🚜🚝🚞🚟🚠🚡🚢🚣🚤🚥🚦🚧🚨🚩 DOOR🚫🚬🚭🚮🚯🚰🚱🚲🚳🚴🚵🚶🚷🚸🚹🚺🚻🚼🚽🚿🛀🛁☔⛄⛅⛆✨🌀🌁🌂🌃🌄🌅🌆🌇🌈🌉🌊🌋🌌🌍🌎🌏🌐🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜🌝🌞🌟🌠🔥✅❌❓❗➕➖➗➰💯🔅🔆🔋🔌🔍🔎🔏🔐🔑🔒🔓🔔🔕🔖🔗🔘🔙🔚🔛🔜🔝🔞
</div>
<div class="app-footer"> Cree par Sorciere Corbeau× Collaboration AI </div>
</div>
<div id="emoji-master-btn">
<span class="main-icon">🌸</span>
</div>
</div>
<script>
const scrollArea = document.getElementById('emoji-scroll-area');
const favArea = document.getElementById('fav-area');
const win = document.getElementById('emoji-app-window');
const sound = document.getElementById('emoji-sound');
let favorites = JSON.parse(localStorage.getItem('myRecentFavs')) || [];
let closeTimeout;
function showApp() {
clearTimeout(closeTimeout);
win.style.display = 'flex';
}
function hideApp() {
closeTimeout = setTimeout(() => {
win.style.display = 'none';
}, 300);
}
function renderFavs() {
favArea.innerHTML = '<div class="fav-label">✨ Cliquez et copier (Ctrl+V) dans vos commentaires ✨ </div>';
favorites.forEach(emoji => {
favArea.appendChild(createEmojiElement(emoji));
});
}
function createEmojiElement(emoji) {
const div = document.createElement('div');
div.className = 'emoji-unit';
div.innerText = emoji;
div.onclick = () => {
try { sound.currentTime = 0; sound.play(); } catch(e){}
const input = document.createElement('textarea');
input.value = emoji;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
favorites = [emoji, ...favorites.filter(f => f !== emoji)].slice(0, 12);
localStorage.setItem('myRecentFavs', JSON.stringify(favorites));
renderFavs();
const badge = document.createElement('span');
badge.className = 'copy-badge';
badge.innerText = 'Copié !';
div.appendChild(badge);
setTimeout(() => badge.remove(), 700);
};
return div;
}
const rawContent = scrollArea.innerText;
const allEmojis = Array.from(rawContent).filter(char => char.trim().length > 0 && char.match(/[^\w\s]/u));
scrollArea.innerHTML = '';
allEmojis.forEach(emoji => scrollArea.appendChild(createEmojiElement(emoji)));
renderFavs();
</script>
</!doctype>
Aucun commentaire:
Publier un commentaire