Bootstrap
Bootstrap5
Ai
Deepseek
Chat
Html
Template Bootstrap 5 d'interface conversationnelle inspiree de DeepSeek avec panneau lateral et espace d'echange.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template AI DeepSeek Bootstrap 5 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
background: #fafbfc;
height: 100vh;
overflow: hidden;
color: #1e293b;
}
/* Layout principal - DeepSeek utilise une sidebar à gauche */
.app-container {
display: flex;
height: 100vh;
}
/* Sidebar - Style DeepSeek */
.sidebar {
width: 280px;
background: #ffffff;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 20px 16px;
border-bottom: 1px solid #e2e8f0;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
}
.logo i {
color: #3b82f6;
font-size: 1.5rem;
}
.new-chat-btn {
background: #3b82f6;
color: white;
border: none;
border-radius: 12px;
padding: 12px 16px;
font-size: 0.95rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin-top: 16px;
transition: all 0.2s;
cursor: pointer;
}
.new-chat-btn:hover {
background: #2563eb;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.chat-history {
flex: 1;
overflow-y: auto;
padding: 12px 8px;
}
.history-section {
margin-bottom: 20px;
}
.history-section h6 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
padding: 8px 12px;
margin: 0;
}
.history-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
color: #475569;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s;
}
.history-item:hover {
background: #f1f5f9;
color: #1e293b;
}
.history-item.active {
background: #eff6ff;
color: #3b82f6;
}
.history-item i {
font-size: 1rem;
width: 20px;
}
/* Zone principale */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
background: #fafbfc;
}
/* Header - DeepSeek minimaliste */
.chat-header {
padding: 16px 24px;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-title {
display: flex;
align-items: center;
gap: 12px;
}
.chat-title h2 {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
color: #1e293b;
}
.deepseek-badge {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
padding: 2px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
}
.header-actions {
display: flex;
gap: 12px;
}
.header-actions button {
background: none;
border: none;
color: #64748b;
padding: 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.header-actions button:hover {
background: #f1f5f9;
color: #1e293b;
}
/* Zone des messages */
.messages-container {
flex: 1;
overflow-y: auto;
padding: 32px 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.message {
display: flex;
gap: 16px;
max-width: 850px;
margin: 0 auto;
width: 100%;
}
.message-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 500;
}
.message.user .message-avatar {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
}
.message.assistant .message-avatar {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
}
.message-content {
flex: 1;
line-height: 1.7;
color: #334155;
}
.message-bubble {
background: #ffffff;
padding: 16px 20px;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
}
.message.user .message-bubble {
background: #eff6ff;
border-color: #bfdbfe;
}
/* Zone de saisie - Style DeepSeek */
.input-container {
padding: 20px 24px 28px;
background: #ffffff;
border-top: 1px solid #e2e8f0;
}
.input-wrapper {
max-width: 850px;
margin: 0 auto;
display: flex;
align-items: flex-end;
gap: 12px;
background: #f8fafc;
border-radius: 20px;
padding: 12px 16px;
border: 1px solid #e2e8f0;
transition: all 0.2s;
}
.input-wrapper:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
background: #ffffff;
}
.input-wrapper textarea {
flex: 1;
border: none;
background: transparent;
resize: none;
padding: 4px 0;
font-size: 0.95rem;
line-height: 1.5;
max-height: 200px;
outline: none;
}
.input-actions {
display: flex;
gap: 4px;
}
.input-actions button {
background: none;
border: none;
color: #64748b;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s;
}
.input-actions button:hover {
background: #e2e8f0;
color: #1e293b;
}
.deep-search-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-right: 8px;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 20px;
font-size: 0.8rem;
color: #475569;
cursor: pointer;
}
.deep-search-toggle.active {
background: #3b82f6;
color: white;
}
/* Welcome screen */
.welcome-screen {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
}
.welcome-logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}
.welcome-logo i {
font-size: 2.5rem;
color: white;
}
.welcome-screen h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 12px;
color: #1e293b;
}
.welcome-screen p {
color: #64748b;
margin-bottom: 32px;
}
.features {
display: flex;
gap: 24px;
max-width: 600px;
}
.feature-item {
text-align: center;
padding: 16px;
}
.feature-item i {
font-size: 1.5rem;
color: #3b82f6;
margin-bottom: 8px;
}
.feature-item h6 {
font-weight: 600;
margin-bottom: 4px;
}
.feature-item p {
font-size: 0.8rem;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
</style>
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<div class="logo">
<i class="bi bi-search"></i>
<span>DeepSeek</span>
</div>
<button class="new-chat-btn" onclick="newChat()">
<i class="bi bi-plus-circle"></i> Nouvelle conversation
</button>
</div>
<div class="chat-history">
<div class="history-section">
<h6>Aujourd'hui</h6>
<div class="history-item active" onclick="loadChat('Analyse de données')">
<i class="bi bi-bar-chart"></i>
<span>Analyse de données</span>
</div>
<div class="history-item" onclick="loadChat('Recherche DeepSeek')">
<i class="bi bi-globe"></i>
<span>Recherche DeepSeek</span>
</div>
</div>
<div class="history-section">
<h6>Hier</h6>
<div class="history-item" onclick="loadChat('Code Review')">
<i class="bi bi-code-slash"></i>
<span>Code Review</span>
</div>
<div class="history-item" onclick="loadChat('Documentation API')">
<i class="bi bi-file-text"></i>
<span>Documentation API</span>
</div>
</div>
</div>
</div>
<!-- Zone principale -->
<div class="main-content">
<div class="chat-header">
<div class="chat-title">
<h2>DeepSeek Assistant</h2>
<span class="deepseek-badge">DeepSeek-V3</span>
</div>
<div class="header-actions">
<button onclick="shareChat()"><i class="bi bi-share"></i></button>
<button onclick="showSettings()"><i class="bi bi-gear"></i></button>
</div>
</div>
<!-- Welcome Screen -->
<div class="welcome-screen" id="welcomeScreen">
<div class="welcome-logo">
<i class="bi bi-search"></i>
</div>
<h1>DeepSeek</h1>
<p>Recherche profonde · Analyse intelligente</p>
<div class="features">
<div class="feature-item" onclick="sendSuggestion('Recherche web approfondie')">
<i class="bi bi-globe2"></i>
<h6>Recherche web</h6>
<p>Analyse en temps réel</p>
</div>
<div class="feature-item" onclick="sendSuggestion('Analyse de document')">
<i class="bi bi-file-pdf"></i>
<h6>Analyse PDF</h6>
<p>Extraction intelligente</p>
</div>
<div class="feature-item" onclick="sendSuggestion('Aide au code')">
<i class="bi bi-braces"></i>
<h6>Assistant code</h6>
<p>Debug & optimisation</p>
</div>
</div>
</div>
<!-- Messages container -->
<div class="messages-container" id="messagesContainer" style="display: none;"></div>
<!-- Zone de saisie -->
<div class="input-container">
<div class="input-wrapper">
<div class="deep-search-toggle" id="deepSearchToggle" onclick="toggleDeepSearch()">
<i class="bi bi-search"></i>
<span>Deep Search</span>
</div>
<textarea placeholder="Posez votre question..." rows="1" id="messageInput"></textarea>
<div class="input-actions">
<button onclick="attachFile()"><i class="bi bi-paperclip"></i></button>
<button onclick="sendMessage()" style="background: #3b82f6; color: white;">
<i class="bi bi-send"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
let isFirstMessage = true;
let deepSearchActive = false;
function newChat() {
isFirstMessage = true;
document.getElementById('welcomeScreen').style.display = 'flex';
document.getElementById('messagesContainer').style.display = 'none';
document.getElementById('messageInput').value = '';
}
function loadChat(name) {
console.log('Chargement:', name);
}
function shareChat() {
alert('Partager la conversation');
}
function showSettings() {
alert('Paramètres DeepSeek');
}
function toggleDeepSearch() {
deepSearchActive = !deepSearchActive;
const toggle = document.getElementById('deepSearchToggle');
if (deepSearchActive) {
toggle.classList.add('active');
} else {
toggle.classList.remove('active');
}
}
function attachFile() {
alert('Joindre un fichier (PDF, DOC, TXT)');
}
function sendSuggestion(text) {
document.getElementById('messageInput').value = text;
sendMessage();
}
function sendMessage() {
const input = document.getElementById('messageInput');
const text = input.value.trim();
if (!text) return;
if (isFirstMessage) {
document.getElementById('welcomeScreen').style.display = 'none';
document.getElementById('messagesContainer').style.display = 'flex';
isFirstMessage = false;
}
addMessage(text, 'user');
input.value = '';
setTimeout(() => {
const searchPrefix = deepSearchActive ? '🔍 [Deep Search activé] ' : '';
addMessage(searchPrefix + "Je traite votre demande avec une analyse approfondie. (Démonstration de l'interface DeepSeek)", 'assistant');
}, 1200);
}
function addMessage(text, sender) {
const container = document.getElementById('messagesContainer');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
messageDiv.innerHTML = `
<div class="message-avatar">
${sender === 'user' ? 'M' : '<i class="bi bi-search"></i>'}
</div>
<div class="message-content">
<div class="message-bubble">${text}</div>
</div>
`;
container.appendChild(messageDiv);
container.scrollTop = container.scrollHeight;
}
document.getElementById('messageInput').addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = Math.min(this.scrollHeight, 200) + 'px';
});
document.getElementById('messageInput').addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
console.log('✅ Interface style DeepSeek - Prête !');
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur