|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>AI Project Chat - Modern</title> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background-color: #f0f2f5; |
|
|
display: flex; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 250px; |
|
|
background-color: #2c3e50; |
|
|
color: white; |
|
|
padding: 20px; |
|
|
box-shadow: 2px 0 5px rgba(0,0,0,0.1); |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sidebar h2 { |
|
|
font-size: 18px; |
|
|
margin-bottom: 10px; |
|
|
border-bottom: 1px solid #444; |
|
|
padding-bottom: 5px; |
|
|
} |
|
|
|
|
|
.sidebar ul { |
|
|
list-style-type: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.sidebar li { |
|
|
margin: 5px 0; |
|
|
padding: 8px; |
|
|
background-color: #34495e; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.sidebar li:hover { |
|
|
background-color: #3d566e; |
|
|
} |
|
|
|
|
|
.main { |
|
|
flex-grow: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.chat-box { |
|
|
flex-grow: 1; |
|
|
background-color: white; |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
|
|
overflow-y: auto; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.chat-entry { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.chat-entry b { |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.chat-entry pre { |
|
|
background-color: #f7f7f7; |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.input-box { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.input-box textarea { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
border-radius: 4px; |
|
|
border: 1px solid #ccc; |
|
|
font-size: 14px; |
|
|
resize: vertical; |
|
|
min-height: 80px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.input-box input[type="submit"] { |
|
|
padding: 12px; |
|
|
background-color: #3498db; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 4px; |
|
|
font-size: 16px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.input-box input[type="submit"]:hover { |
|
|
background-color: #2980b9; |
|
|
} |
|
|
|
|
|
.top-bar { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.top-bar h1 { |
|
|
font-size: 24px; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.top-bar a { |
|
|
text-decoration: none; |
|
|
color: #3498db; |
|
|
font-weight: bold; |
|
|
transition: color 0.2s; |
|
|
} |
|
|
|
|
|
.top-bar a:hover { |
|
|
color: #2980b9; |
|
|
} |
|
|
|
|
|
#loading { |
|
|
margin-top: 10px; |
|
|
font-style: italic; |
|
|
color: #555; |
|
|
} |
|
|
</style> |
|
|
<script> |
|
|
function showLoading() { |
|
|
document.getElementById("loading").style.display = "block"; |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="sidebar"> |
|
|
<h2>📂 Project Files</h2> |
|
|
<ul> |
|
|
{% for file in project_tree %} |
|
|
<li>{{ file }}</li> |
|
|
{% endfor %} |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="main"> |
|
|
<div class="top-bar"> |
|
|
<h1>🤖 AI Project Chat</h1> |
|
|
<a href="/download_project">⬇️ Download Project ZIP</a> |
|
|
</div> |
|
|
|
|
|
<div class="chat-box"> |
|
|
{% for chat in chat_history %} |
|
|
<div class="chat-entry"> |
|
|
<b>User:</b> {{ chat.user }}<br> |
|
|
<b>AI:</b> |
|
|
<pre>{{ chat.ai }}</pre> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
|
|
|
<form method="POST" onsubmit="showLoading()" class="input-box"> |
|
|
<textarea name="user_message" placeholder="Example: Refactor app.py or Create new file called utils.py"></textarea> |
|
|
<input type="submit" value="Send to AI"> |
|
|
</form> |
|
|
|
|
|
<div id="loading" style="display:none;"> |
|
|
Loading... Please wait while AI is generating response. |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
