Download index.html from artificialguybr/InclusiveDiffusion: direct link, hf CLI and curl.
- Browser
- Download file 30 kB
-
https://huggingface.co/spaces/artificialguybr/InclusiveDiffusion/resolve/main/index.html
- Command line
-
hf download hf://spaces/artificialguybr/InclusiveDiffusion/index.html
-
curl -L -o index.html https://huggingface.co/spaces/artificialguybr/InclusiveDiffusion/resolve/main/index.html
30 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Inclusive Diffusion</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="icon" href="favicon.png" type="image/png"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> | |
| <script type="module" src="script.js"></script> | |
| <script type="module" src="emojiMapping.js"></script> | |
| </head> | |
| <body> | |
| <section class="flex flex-col items-center justify-center space-y-10 p-5"> | |
| <div class="logo-container my-5"> | |
| <img | |
| alt="InclusiveDiffusion Logo" | |
| class="logo" | |
| height="150" | |
| src="/logo.png" | |
| width="350" | |
| /> | |
| </div> | |
| <div class="info-container text-center mt-5"> | |
| <h1>FOR COMPLETE ACESSIBILITY. ACESS https://inclusivediffusion.artificialguy.com</h1> | |
| <p>This is an amateur project that I created to refresh my CSS, HTML, and JS skills after spending years focusing on Python. It was entirely developed using GPT-4, and the logo was generated with Dall-e 3 (text in Canva). Using fal.ai API!</p> | |
| <p>Created by <a href="https://twitter.com/artificialguybr" target="_blank">@artificialguybr</a></p> | |
| </div> | |
| <div id="emoji-grid" class="categories-container my-5"> | |
| <!-- Categoria 1: Rostos e Emoรงรตes --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" aria-label="Faces and Emotions Category" data-category="1"> | |
| <span class="text-2xl">๐</span> | |
| </div> | |
| <!-- Categoria 2: Animais e Natureza --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="2" aria-label="Animals and Nature Category"> | |
| <span class="text-2xl">๐ฟ</span> | |
| </div> | |
| <!-- Categoria 3: Comida e Bebida --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="3" aria-label="Food and Drink Category"> | |
| <span class="text-2xl">๐</span> | |
| </div> | |
| <!-- Categoria 4: Atividades e Hobbies --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="4" aria-label="Activities and Hobbies Category"> | |
| <span class="text-2xl">โฝ</span> | |
| </div> | |
| <!-- Categoria 5: Viagens e Lugares --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="5" aria-label="Travel and Places Category"> | |
| <span class="text-2xl">โ๏ธ</span> | |
| </div> | |
| <!-- Categoria 6: Objetos e Tecnologia --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="6" aria-label="Objects and Technology Category"> | |
| <span class="text-2xl">๐ฑ</span> | |
| </div> | |
| <!-- Categoria 7: Sรญmbolos e Sinais --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="7" aria-label="Symbols and Signs Category"> | |
| <span class="text-2xl">๐ก</span> | |
| </div> | |
| <!-- Categoria 8: Bandeiras --> | |
| <div class="emoji-thumbnail flex justify-center items-center h-16 w-16 border rounded-lg bg-gray-200 cursor-pointer" data-category="8" aria-label="Flags Category"> | |
| <span class="text-2xl">๐</span> | |
| </div> | |
| </div> | |
| <div id="emoji-all-categories" class="emoji-line-container my-5"> | |
| <div id="emoji-category-1" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Grinning Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Face with Tears of Joy">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Smiling Face with Tear">๐ฅฒ</span> | |
| <span class="emoji" role="listitem" aria-label="Smiling Face with Heart-Eyes">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Unamused Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Pensive Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Pouting Face">๐ก</span> | |
| <span class="emoji" role="listitem" aria-label="Exploding Head">๐คฏ</span> | |
| <span class="emoji" role="listitem" aria-label="Sleeping Face">๐ด</span> | |
| <span class="emoji" role="listitem" aria-label="Partying Face">๐ฅณ</span> | |
| <span class="emoji" role="listitem" aria-label="Grinning Face with Big Eyes">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Grinning Face with Smiling Eyes">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Beaming Face with Smiling Eyes">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Grinning Squinting Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Grinning Face with Sweat">๐ </span> | |
| <span class="emoji" role="listitem" aria-label="Rolling on the Floor Laughing">๐คฃ</span> | |
| <span class="emoji" role="listitem" aria-label="Slightly Smiling Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Upside-Down Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Winking Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Smiling Face with Smiling Eyes">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Smiling Face with Halo">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Smiling Face with Hearts">๐ฅฐ</span> | |
| <span class="emoji" role="listitem" aria-label="Star-Struck">๐คฉ</span> | |
| <span class="emoji" role="listitem" aria-label="Face Blowing a Kiss">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Kissing Face">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Kissing Face with Closed Eyes">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Face Savoring Food">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Face with Tongue">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Winking Face with Tongue">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Zany Face">๐คช</span> | |
| <span class="emoji" role="listitem" aria-label="Squinting Face with Tongue">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Money-Mouth Face">๐ค</span> | |
| <span class="emoji" role="listitem" aria-label="Hugging Face">๐ค</span> | |
| <span class="emoji" role="listitem" aria-label="Face with Hand Over Mouth">๐คญ</span> | |
| <span class="emoji" role="listitem" aria-label="Shushing Face">๐คซ</span> | |
| <span class="emoji" role="listitem" aria-label="Thinking Face">๐ค</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="emoji-category-2" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Dog Face">๐ถ</span> | |
| <span class="emoji" role="listitem" aria-label="Cat Face">๐ฑ</span> | |
| <span class="emoji" role="listitem" aria-label="Mouse Face">๐ญ</span> | |
| <span class="emoji" role="listitem" aria-label="Hamster Face">๐น</span> | |
| <span class="emoji" role="listitem" aria-label="Rabbit Face">๐ฐ</span> | |
| <span class="emoji" role="listitem" aria-label="Fox Face">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Bear Face">๐ป</span> | |
| <span class="emoji" role="listitem" aria-label="Panda Face">๐ผ</span> | |
| <span class="emoji" role="listitem" aria-label="Koala">๐จ</span> | |
| <span class="emoji" role="listitem" aria-label="Tiger Face">๐ฏ</span> | |
| <span class="emoji" role="listitem" aria-label="Lion Face">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Cow Face">๐ฎ</span> | |
| <span class="emoji" role="listitem" aria-label="Pig Face">๐ท</span> | |
| <span class="emoji" role="listitem" aria-label="Pig Nose">๐ฝ</span> | |
| <span class="emoji" role="listitem" aria-label="Frog Face">๐ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Monkey Face">๐ต</span> | |
| <span class="emoji" role="listitem" aria-label="See-No-Evil Monkey">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Hear-No-Evil Monkey">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Speak-No-Evil Monkey">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Monkey">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Chicken">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Penguin">๐ง</span> | |
| <span class="emoji" role="listitem" aria-label="Bird">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Baby Chick">๐ค</span> | |
| <span class="emoji" role="listitem" aria-label="Hatching Chick">๐ฃ</span> | |
| <span class="emoji" role="listitem" aria-label="Front-Facing Baby Chick">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Duck">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Eagle">๐ฆ </span> | |
| <span class="emoji" role="listitem" aria-label="Owl">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Bat">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Wolf">๐บ</span> | |
| <span class="emoji" role="listitem" aria-label="Boar">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Horse">๐ด</span> | |
| <span class="emoji" role="listitem" aria-label="Unicorn">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Honeybee">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Bug">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Butterfly">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Snail">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Lady Beetle">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Ant">๐</span> | |
| </div> | |
| </div> | |
| <div id="emoji-category-3" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Hamburger">๐</span> | |
| <span class="emoji" role="listitem" aria-label="French Fries">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Hot Dog">๐ญ</span> | |
| <span class="emoji" role="listitem" aria-label="Pizza">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Taco">๐ฎ</span> | |
| <span class="emoji" role="listitem" aria-label="Burrito">๐ฏ</span> | |
| <span class="emoji" role="listitem" aria-label="Falafel Wrap">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Falafel">๐ง</span> | |
| <span class="emoji" role="listitem" aria-label="Soup">๐ฒ</span> | |
| <span class="emoji" role="listitem" aria-label="Salad">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Sushi">๐ฃ</span> | |
| <span class="emoji" role="listitem" aria-label="Bento Box">๐ฑ</span> | |
| <span class="emoji" role="listitem" aria-label="Curry Rice">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Ramen">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Spaghetti">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Roasted Sweet Potato">๐ </span> | |
| <span class="emoji" role="listitem" aria-label="Shrimp">๐ค</span> | |
| <span class="emoji" role="listitem" aria-label="Chicken Leg">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Meat on Bone">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Steak">๐ฅฉ</span> | |
| <span class="emoji" role="listitem" aria-label="Bacon">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Sandwich">๐ฅช</span> | |
| </div> | |
| </div> | |
| <div id="emoji-category-4" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Soccer Ball">โฝ</span> | |
| <span class="emoji" role="listitem" aria-label="Basketball">๐</span> | |
| <span class="emoji" role="listitem" aria-label="American Football">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Baseball">โพ</span> | |
| <span class="emoji" role="listitem" aria-label="Softball">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Tennis">๐พ</span> | |
| <span class="emoji" role="listitem" aria-label="Volleyball">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Rugby Football">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Billiards">๐ฑ</span> | |
| <span class="emoji" role="listitem" aria-label="Table Tennis">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Badminton">๐ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Flying Disc">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Field Hockey">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Ice Hockey">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Cricket">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Lacrosse">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Archery">๐น</span> | |
| <span class="emoji" role="listitem" aria-label="Fishing Pole">๐ฃ</span> | |
| <span class="emoji" role="listitem" aria-label="Golf">โณ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Boxing Glove">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Martial Arts Uniform">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Running Shirt">๐ฝ</span> | |
| <span class="emoji" role="listitem" aria-label="Ice Skate">โธ</span> | |
| <span class="emoji" role="listitem" aria-label="Curling Stone">๐ฅ</span> | |
| <span class="emoji" role="listitem" aria-label="Sled">๐ท</span> | |
| <span class="emoji" role="listitem" aria-label="Skateboard">๐น</span> | |
| <span class="emoji" role="listitem" aria-label="Ski">๐ฟ</span> | |
| <span class="emoji" role="listitem" aria-label="Skiing">โท</span> | |
| <span class="emoji" role="listitem" aria-label="Snowboarder">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Parachute">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Weightlifting - Woman">๐๏ธโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Weightlifting - Man">๐๏ธโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Wrestling - Woman">๐คผโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Wrestling - Man">๐คผโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Cartwheel - Woman">๐คธโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Cartwheel - Man">๐คธโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Basketball - Woman">โน๏ธโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Basketball - Man">โน๏ธโโ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Fencing">๐คบ</span> | |
| <span class="emoji" role="listitem" aria-label="Handball - Woman">๐คพโโ๏ธ</span> | |
| </div> | |
| </div> | |
| <div id="emoji-category-5" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Airplane">โ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Rocket">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Helicopter">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Flying Saucer">๐ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Bicycle">๐ฒ</span> | |
| <span class="emoji" role="listitem" aria-label="Scooter">๐ด</span> | |
| <span class="emoji" role="listitem" aria-label="Skateboard">๐น</span> | |
| <span class="emoji" role="listitem" aria-label="Motor Scooter">๐ต</span> | |
| <span class="emoji" role="listitem" aria-label="Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Taxi">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Sports Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Bus">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Trolleybus">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Racing Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Police Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Ambulance">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Fire Engine">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Minibus">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Delivery Truck">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Articulated Lorry">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Tractor">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Auto Rickshaw">๐บ</span> | |
| <span class="emoji" role="listitem" aria-label="Oncoming Bus">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Oncoming Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Taxi">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Pickup Truck">๐ป</span> | |
| <span class="emoji" role="listitem" aria-label="Police Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Aerial Tramway">๐ก</span> | |
| <span class="emoji" role="listitem" aria-label="Mountain Cableway">๐ </span> | |
| <span class="emoji" role="listitem" aria-label="Railway Car">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Locomotive">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Train">๐</span> | |
| <span class="emoji" role="listitem" aria-label="High-Speed Train">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Bullet Train">๐ </span> | |
| <span class="emoji" role="listitem" aria-label="Light Rail">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Monorail">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Mountain Railway">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Tram">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Light Rail">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Train Station">๐</span> | |
| </div> | |
| </div> | |
| <div id="emoji-category-6" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Lightbulb">๐ก</span> | |
| <span class="emoji" role="listitem" aria-label="Flashlight">๐ฆ</span> | |
| <span class="emoji" role="listitem" aria-label="Candle">๐ฏ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Lamp">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Fire Extinguisher">๐งฏ</span> | |
| <span class="emoji" role="listitem" aria-label="Oil Drum">๐ข๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Bomb">๐ฃ</span> | |
| <span class="emoji" role="listitem" aria-label="Firecracker">๐งจ</span> | |
| <span class="emoji" role="listitem" aria-label="Axe">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Knife">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Dagger">๐ก๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Crossed Swords">โ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Shield">๐ก๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Door">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Couch">๐๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Bed">๐๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Chair">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Toilet">๐ฝ</span> | |
| <span class="emoji" role="listitem" aria-label="Shower">๐ฟ</span> | |
| <span class="emoji" role="listitem" aria-label="Bathtub">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Soap">๐งผ</span> | |
| <span class="emoji" role="listitem" aria-label="Sponge">๐งฝ</span> | |
| <span class="emoji" role="listitem" aria-label="Lotion Bottle">๐งด</span> | |
| <span class="emoji" role="listitem" aria-label="Razor">๐ช</span> | |
| <span class="emoji" role="listitem" aria-label="Broom">๐งน</span> | |
| <span class="emoji" role="listitem" aria-label="Basket">๐งบ</span> | |
| </div> | |
| </div> | |
| <div id="emoji-category-7" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="Infinity">โพ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Dice">๐ฒ</span> | |
| <span class="emoji" role="listitem" aria-label="Bullseye">๐ฏ</span> | |
| <span class="emoji" role="listitem" aria-label="Bowling">๐ณ</span> | |
| <span class="emoji" role="listitem" aria-label="Video Game">๐ฎ</span> | |
| <span class="emoji" role="listitem" aria-label="Slot Machine">๐ฐ</span> | |
| <span class="emoji" role="listitem" aria-label="Puzzle Piece">๐งฉ</span> | |
| <span class="emoji" role="listitem" aria-label="Artist Palette">๐จ</span> | |
| <span class="emoji" role="listitem" aria-label="Thread">๐งต</span> | |
| <span class="emoji" role="listitem" aria-label="Yarn">๐งถ</span> | |
| <span class="emoji" role="listitem" aria-label="Books">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Open Book">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Notebook with Decorative Cover">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Ledger">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Bookmark Tabs">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Notebook">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Page with Curl">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Scroll">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Page Facing Up">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Newspaper">๐ฐ</span> | |
| <span class="emoji" role="listitem" aria-label="Rolled-Up Newspaper">๐๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Bookmark">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Label">๐ท๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Money Bag">๐ฐ</span> | |
| <span class="emoji" role="listitem" aria-label="Yen Banknote">๐ด</span> | |
| <span class="emoji" role="listitem" aria-label="Dollar Banknote">๐ต</span> | |
| <span class="emoji" role="listitem" aria-label="Euro Banknote">๐ถ</span> | |
| <span class="emoji" role="listitem" aria-label="Pound Banknote">๐ท</span> | |
| <span class="emoji" role="listitem" aria-label="Money with Wings">๐ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Credit Card">๐ณ</span> | |
| <span class="emoji" role="listitem" aria-label="Gem Stone">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Balance Scale">โ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Toolbox">๐งฐ</span> | |
| <span class="emoji" role="listitem" aria-label="Hammer">๐จ</span> | |
| <span class="emoji" role="listitem" aria-label="Pick">โ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Hammer and Pick">โ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Hammer and Wrench">๐ ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Dagger">๐ก๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Crossed Swords">โ๏ธ</span> | |
| </div> | |
| </div> | |
| <div id="emoji-category-8" class="emoji-category hidden" role="list"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"> | |
| <span class="emoji" role="listitem" aria-label="White Flag">๐ณ๏ธ</span> | |
| <span class="emoji" role="listitem" aria-label="Black Flag">๐ด</span> | |
| <span class="emoji" role="listitem" aria-label="Chequered Flag">๐</span> | |
| <span class="emoji" role="listitem" aria-label="Triangular Flag">๐ฉ</span> | |
| <span class="emoji" role="listitem" aria-label="Rainbow Flag">๐ณ๏ธโ๐</span> | |
| <span class="emoji" role="listitem" aria-label="Pirate Flag">๐ดโโ ๏ธ</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <input | |
| id="selected-emojis" | |
| class="w-full h-10 px-3 py-2 text-base text-gray-700 placeholder-gray-600 border rounded-lg focus:shadow-outline" | |
| placeholder="Selected emojis will appear here..." | |
| type="text" | |
| aria-label="Selected Emojis" | |
| /> | |
| <button id="start-speech-recognition" class="bg-blue-500 text-white p-2 rounded-lg text-lg font-semibold" aria-label="Start Speech Recognition"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <div class="w-1/2"> | |
| <button id="generate-btn" class="bg-orange-500 text-white w-full py-2 rounded-lg text-lg font-semibold" aria-label="Generate Image">GENERATE IMAGE</button> | |
| </div> | |
| <div class="flex justify-center mt-10"> | |
| <img | |
| alt="Generated Image" | |
| class="aspect-[1/1] overflow-hidden rounded-lg object-contain object-center generated-image" | |
| height="500" | |
| src="/placeholder.svg" | |
| width="500" | |
| style="display: none;" | |
| </div> | |
| </div> | |
| <div class="loading-container hidden"> | |
| <img src="/loading.gif" alt="Loading" class="loading-gif"/> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |