Uppercopy
Mini tools
Zenit Malter's tools
-
# The Healer's Moonlit Journey In the silvery glow of the full moon, an ancient figure emerged from the crystalline waters of a secluded forest pool. Droplets cascaded down his weathered face, tracing the deep lines etched by time and wisdom. This was Tane, a renowned Maori healer, his long grey hair bound tightly in a traditional topknot. Tane's movements were slow but purposeful as he climbed from the pool. His fingers, gnarled like ancient tree roots, gripped the smooth stones at the water's edge. The elaborate tattoos adorning his face and body seemed to dance in the moonlight, telling stories of his people's rich history. Draped across his shoulders was a cloak of exquisite craftsmanship - a tapestry of woven hemp interlaced with vibrant feathers. Each plume caught the moon's rays, creating a shimmering aura around the old healer. The cloak, heavy with water, clung to his frame as he rose to his full height. With careful steps, Tane made his way to the pool's edge. His eyes, dark and knowing, scanned the forest around him. The trees stood as silent sentinels, their leaves whispering secrets in the gentle night breeze. As he reached for his walking staff, leaning against a nearby boulder, a twig snapped in the underbrush. Tane paused, his hand hovering mid-air. He tilted his head, listening intently to the forest's nocturnal symphony. Another snap, closer this time. Tane's lips curled into a knowing smile. "Come, little one," he called softly, his voice rich and deep like the earth itself. "There is no need to hide." From behind a curtain of ferns, a young girl emerged. Her eyes were wide with wonder and a touch of fear. "Are you... are you the forest spirit?" she asked timidly. Tane's laughter rumbled through the clearing. "No, child. I am but a simple healer, though some might say the forest speaks to me." He gestured for her to come closer. "What brings you to this sacred pool so late at night?" The girl stepped forward, moonlight illuminating her tear-stained cheeks. "My brother... he's very sick. Our village healer couldn't help him. I... I came to pray to the spirits for guidance." Tane's expression softened. He reached out, gently placing a hand on the girl's shoulder. "Sometimes, little one, the spirits work through people. Take me to your brother. Perhaps together, we can find a way to help him." As they turned to leave the clearing, the moonlight seemed to intensify, bathing Tane in an otherworldly glow. The old healer and the young girl disappeared into the forest, their silhouettes merging with the shadows of the ancient trees. In that moment, it was hard to tell where the wisdom of the ages ended and the magic of the forest began.
-
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Navigation Bar</title> <style> /* Reset default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Basic styling */ body { font-family: Arial, sans-serif; } /* Navigation bar styles */ .navbar { background-color: #333; padding: 1rem; } .navbar-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } .navbar-logo { color: white; font-size: 1.5rem; text-decoration: none; } .navbar-menu { display: flex; list-style-type: none; } .navbar-item { margin-left: 1rem; } .navbar-link { color: white; text-decoration: none; padding: 0.5rem; } .navbar-link:hover, .navbar-link:focus { background-color: #555; } .navbar-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } /* Responsive styles */ @media screen and (max-width: 768px) { .navbar-menu { display: none; flex-direction: column; width: 100%; position: absolute; top: 60px; left: 0; background-color: #333; } .navbar-menu.active { display: flex; } .navbar-item { margin: 0; text-align: center; } .navbar-link { display: block; padding: 1rem; } .navbar-toggle { display: block; } } </style> </head> <body> <nav class="navbar" role="navigation"> <div class="navbar-container"> <a href="#" class="navbar-logo">Logo</a> <button class="navbar-toggle" aria-label="Toggle navigation menu"> ☰ </button> <ul class="navbar-menu"> <li class="navbar-item"><a href="#" class="navbar-link">Home</a></li> <li class="navbar-item"><a href="#" class="navbar-link">About</a></li> <li class="navbar-item"><a href="#" class="navbar-link">Services</a></li> <li class="navbar-item"><a href="#" class="navbar-link">Contact</a></li> </ul> </div> </nav> <script> // Toggle mobile menu const navbarToggle = document.querySelector('.navbar-toggle'); const navbarMenu = document.querySelector('.navbar-menu'); navbarToggle.addEventListener('click', () => { navbarMenu.classList.toggle('active'); }); // Close mobile menu when clicking outside document.addEventListener('click', (event) => { const isClickInsideMenu = navbarMenu.contains(event.target); const isClickOnToggle = navbarToggle.contains(event.target); if (!isClickInsideMenu && !isClickOnToggle && navbarMenu.classList.contains('active')) { navbarMenu.classList.remove('active'); } }); // Enable keyboard navigation navbarMenu.addEventListener('keydown', (event) => { if (event.key === 'Escape' && navbarMenu.classList.contains('active')) { navbarMenu.classList.remove('active'); navbarToggle.focus(); } }); </script> </body> </html> ``` This code creates a responsive navigation bar that collapses into a hamburger menu on smaller screens (max-width: 768px). It includes links to Home, About, Services, and Contact, and is accessible with keyboard navigation. Here's a breakdown of the key features: 1. The navigation bar is semantically structured using the `<nav>` element with appropriate ARIA roles. 2. The menu items are contained in an unordered list for proper semantics and accessibility. 3. The hamburger menu toggle button is hidden on larger screens and appears on smaller screens. 4. CSS media queries are used to change the layout and display of the menu on smaller screens. 5. JavaScript is used to toggle the mobile menu and handle click events outside the menu to close it. 6. Keyboard navigation is supported, allowing users to close the mobile menu using the Escape key. To use this code, simply copy and paste it into an HTML file, and it will work as a standalone example. You can then customize the styles, colors, and content to match your specific project requirements.
