我已经培训了一名法学硕士,然后使用 Python 创建了一个 Flask 应用程序,并将其托管在 Heroku 上。它在我的笔记本电脑上看起来很棒(见下文),但我希望它在移动设备上也看起来不错。
这是我的
templates/index.html
文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with DanteGPT</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background: url('{{ url_for('static', filename='dante_robot.png') }}') no-repeat center center fixed;
background-size: cover;
margin: 0;
}
.chat-container {
text-align: center;
max-width: 100%;
flex: 1;
padding: 0 10px;
}
#chatbox {
max-width: 500px;
width: 100%;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: scroll;
margin: 10px auto;
background-color: #212121;
box-sizing: border-box;
}
#user-input {
width: 380px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #212121;
color: #fff;
font-family: 'Times New Roman', Times, serif;
}
#send-button {
padding: 10px 20px;
margin-left: 10px;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
font-family: 'Times New Roman', Times, serif;
}
#send-button:hover {
background-color: #45a049;
}
.message {
margin: 5px 0;
background-color: #212121
}
.user-message {
text-align: right;
color: green;
}
.bot-message {
text-align: left;
color: #E94F37;
}
.dante-image {
max-width: 150px;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
width: 100%;
}
footer a {
color: #4CAF50;
margin: 0 10px;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.fa {
margin: 0 5px;
}
</style>
</head>
<body>
<div class="chat-container">
<!--<img src="{{ url_for('static', filename='dante_robot.png') }}" alt="Dante Robot" class="dante-image">-->
<!--<h1>Chat with DanteGPT</h1>-->
<div id="chatbox"></div>
<input type="text" id="user-input" placeholder="Type your message here">
<button id="send-button">Send</button>
</div>
<script>
document.getElementById('send-button').addEventListener('click', function() {
let userInput = document.getElementById('user-input').value;
if (userInput.trim() === '') return;
let chatbox = document.getElementById('chatbox');
chatbox.innerHTML += `<p class="message user-message"><strong>You:</strong> ${userInput}</p>`;
fetch('/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({initial_string: userInput}),
})
.then(response => response.json())
.then(data => {
chatbox.innerHTML += `<p class="message bot-message"><strong>DanteGPT:</strong> ${data.response}</p>`;
chatbox.scrollTop = chatbox.scrollHeight;
});
document.getElementById('user-input').value = '';
});
document.getElementById('user-input').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
document.getElementById('send-button').click();
}
});
</script>
<footer>
<div class="social-links">
<a class="github-link" href="https://github.com/MauroCE/DanteGPT"><i class="fab fa-github"></i></a>
<a href="https://twitter.com/MauroCamaraE"><i class="fab fa-twitter"></i></a>
</div>
<p class="copyright" styles="margin-top: 20px;">© 2024 www.maurocamaraescudero.netlify.app</p>
</footer>
</body>
</html>
有没有一种简单的方法可以让它在移动设备上看起来不错?类似于消息传递应用程序或聊天 gpt 应用程序的东西。
为了使您的 Web 应用程序在移动设备上看起来不错,您需要实施响应式设计原则。您可以对
index.html
进行以下一些修改,以确保它在移动设备上看起来不错:
vw
/vh
单位或 CSS Grid/Flexbox 进行布局,而不是固定像素值。