ai故事prompt生成器表单代码
代码语言:html
所属分类:表单美化
代码描述:ai故事prompt生成器表单代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* Resetting some default styles */ body, h2, button { margin: 0; font-family: 'Arial', sans-serif; color: #333; } body { background-color: #f5f5f5; font-size: 16px; } .container { width: 90%; max-width: 700px; margin: 50px auto; padding: 30px; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 4px 15px rgba(0,0,0,0.1); overflow: hidden; } h2 { text-align: center; margin-bottom: 20px; color: #4a90e2; } label { display: block; margin: 15px 0 5px; font-weight: 600; } input { width: 100%; padding: 10px 15px; margin-top: 5px; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 5px; transition: border-color 0.3s; } input:focus { outline: none; border-color: #4a90e2; } button { display: block; width: 100%; padding: 12px; background-color: #4a90e2; border: none; border-radius: 5px; color: #fff; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #357abD; } #output { margin-top: 30px; padding: 20px; background-color: #eef5fc; border: 1px solid #dce6f1; border-radius: 5px; font-style: italic; } </style> </head> <body> <div class="container"> <h2>AI Story Prompt Generator</h2> <label for="title">Title:</label> <input type="text" id="title" placeholder="Enter story title..."> <label for="setting">Setting:</label> <input type="text" id="setting" placeholder="Enter story setting..."> <label for="mc">Main Character:</label> <input type="text" id="mc" placeholder="Describe the main character..."> <label for="sc">Supporting Character:</label> <input type="text" id="sc" placeholder="Describe the supporting character..."> <label for="antagonist">Antagonist:</label> <input type="text" id="antagonist" placeholder="Describe the antagonist..."> <label for="incitingIncident">Inciting Incident:</label> <input type="text" id="incitingIncident" placeholder="Describe the inciting incident..."> <label for=&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0