js+css模拟ai根据文本生成日程安排事项ui代码
代码语言:html
所属分类:布局界面
代码描述:js+css模拟ai根据文本生成日程安排事项ui代码
代码标签: js css 模拟 ai 根据 文本 生成 日程 安排 事项 ui 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css"> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tailwindcss@2.2.3/dist/tailwind.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap'> <style> :root { --author: "Matt Cannon"; --contact: "mc@mattcannon.design"; --description: "A conceputal version of an AI-powered to-do list generator that helps you plan your day efficiently in a simple format."; --keywords: "codepenchallenge, cpc-todo-list, AI, to-do generator, task planner, todo-list, productivity"; --last-modified: "2024-09-23"; --content-language: "en"; --generator: "HTML5, CSS3, JavaScript, Tailwind CSS"; --title: "AI To-Do Generator"; } body { font-family: "Rubik", sans-serif; min-height: 100vh; margin: 0; position: relative; } .task-item { display: flex; align-items: center; padding: 10px; background-color: #f9fafb; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; cursor: grab; text-align: left; width: 100%; } .task-item.dragging { opacity: 0.5; } .checkbox { margin-right: 10px; } .header-bar { background-color: #385263; padding: 8px 15px; color: white; text-align: center; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; border-radius: 5px; width: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .header-bar i { margin-right: 10px; } .pill-button { display: block; width: auto; margin: 0 auto; padding: 12px 24px; background-color: #385263; color: white; font-size: 1rem; border: 2px solid white; border-radius: 9999px; cursor: pointer; transition: background-color 0.3s ease; } .pill-button:hover { background-color: #4a6b81; } .pill-button i { margin-right: 8px; } #titleBar { display: none; } textarea { width: 100%; max-width: 80%; margin-left: 65px; font-size: 12px; resize: none; height: 175px; } #scheduleContainer { width: 100%; max-width: 75%; margin: 0 auto; } #messageInput { font-size: 16px; } .fa, .fas { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body class="min-h-screen relative"> <video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover z-0"> <source src="//repo.bfw.wiki/bfwrepo/video/66f3301542601.png" type="video/mp4" /> Your browser does not support the video tag. </video> <div class="relative z-10 container mx-auto p-4"> <p class="text-l text-center text-white mb-5" style="padding-top: 50px; margin-bottom: -10px; color: #385263;"> Enter today's plan in paragraph format and generate a to-do list. </p> </div> <div class="relative z-10 flex justify-center"> <div class="px-2 w-full max-w-2xl"> <div class="flex flex-col items-start rounded p-5"> <textarea class="shadow flex-grow rounded p-2 mr-2 bg-white text-black w-full" id="messageInput" placeholder="Enter your plan for the day in paragraph format" style="min-height: 150px; padding: 15px;">Today I need to wake up at 7 AM and I'll go for a run, at 8 AM eat breakfast then at 9 AM head to a meeting. At 11:30 AM, I'll spend some time working on my project until 1 PM and then take a lunch break. At 1:30 In the afternoon, another meeting and at 5pm wrap up work. Later in the evening at 7pm, Binge that new Netflix show.</textarea><br> <button class="pill-button bg-gray-900 text-white mt-5" id="generateButton"> <i class="fas fa-list-check mr-2"></i> Generate Schedule </button> </div> <div id="scheduleContainer" class="mt-5 p-5 bg-white rounded text-black"> <div id="titleBar" class="header-bar text-white" style="font-size: 16px;"> <i class="fas fa-calendar-check"></i> Your Schedule for Today </div> <div id="scheduleOutput"></div> </div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0