Tool Request: call_VNPMTI6uUR3saOgiMc2L5sPX - create_file
{"content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Rotating Hexagon with Bouncing Balls</title>\n <style>\n body {\n background-color: #222;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n overflow: hidden;\n }\n .hexagon {\n position: relative;\n width: 300px;\n height: 260px;\n background-color: #444;\n clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);\n animation: rotateHexagon 10s linear infinite;\n overflow: hidden;\n }\n\n /* Bouncing ball style */\n .ball {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #ff4757;\n position: absolute;\n animation: bounce 2s ease-in-out infinite;\n }\n\n /* Hexagon rotation animation */\n @keyframes rotateHexagon {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Bouncing animation */\n @keyframes bounce {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(30px, -50px);\n }\n 50% {\n transform: translate(0, -100px);\n }\n 75% {\n transform: translate(-30px, -50px);\n }\n }\n </style>\n</head>\n<body>\n <div class=\"hexagon\">\n <div class=\"ball\" style=\"left: 25%; top: 70%; animation-delay: 0s;\"></div>\n <div class=\"ball\" style=\"left: 50%; top: 70%; animation-delay: 0.5s;\"></div>\n <div class=\"ball\" style=\"left: 75%; top: 70%; animation-delay: 1s;\"></div>\n </div>\n</body>\n</html>\n","file_name": "index.html"}