Retro Chalkboard - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retro Chalkboard</title> <style> body { margin: 0; padding: 0; background: #3a3a3a; font-family: 'Courier New', Courier, monospace; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .chalkboard { background: #1e1e1e; border: 15px solid #5c5c5c; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); border-radius: 15px; width: 70%; height: 70%; position: relative; overflow: hidden; padding: 20px; color: #fff; font-size: 1.5em; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .chalkboard:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url('https://www.transparenttextures.com/patterns/black-felt.png'); opacity: 0.5; } .chalkboard-content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; overflow: hidden; } .chalkboard-header, .chalkboard-footer { z-index: 2; padding: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 10px; } .chalkboard-body { flex: 1; overflow-y: auto; padding-right: 10px; margin: 10px 0; } .chalkboard-body::-webkit-scrollbar { width: 10px; } .chalkboard-body::-webkit-scrollbar-track { background: #1e1e1e; } .chalkboard-body::-webkit-scrollbar-thumb { background: #ffcc00; border-radius: 10px; } .chalkboard input[type="text"] { background: transparent; border: none; border-bottom: 2px solid #ffcc00; color: #ffcc00; font-size: 1.2em; margin-bottom: 20px; outline: none; width: 80%; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); padding: 5px; } .chalkboard input[type="text"]::placeholder { color: #bbb; } .chalkboard button { background: #ffcc00; border: none; border-radius: 5px; color: #1e1e1e; cursor: pointer; font-size: 1.2em; margin-top: 20px; padding: 10px 20px; transition: background 0.3s ease-in-out; } .chalkboard button:hover { background: #ffbf00; } .chalkboard ul { list-style: none; padding: 0; margin: 0; } .chalkboard li { margin: 10px 0; animation: slideIn 1s ease-in-out; } @keyframes slideIn { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .chalkboard li::before { content: '✅'; margin-right: 10px; } .emoji { font-size: 2em; } .icon { font-size: 1.5em; margin: 0 5px; } </style> </head> <body> <div class="chalkboard"> <div class="chalkboard-content"> <div class="chalkboard-header"> <h1>Welcome to My Retro Chalkboard</h1> </div> <div class="chalkboard-body"> <input type="text" id="chalkboard-input" placeholder="Write your text here..."> <button type="button" onclick="addText()">Add to Chalkboard</button> <ul id="chalkboard-list"></ul> </div> <div class="chalkboard-footer"> <div class="emoji">🎉✨👍</div> <div class="icons"> <i class="icon">🌟</i> <i class="icon">📚</i> <i class="icon">✏️</i> </div> </div> </div> </div> <script> function addText() { const input = document.getElementById('chalkboard-input'); const text = input.value.trim(); if (text) { const list = document.getElementById('chalkboard-list'); const li = document.createElement('li'); li.textContent = text; list.appendChild(li); input.value = ''; input.focus(); } } </script> </body> </html>