Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OneNote Clone</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="dark-theme"> | |
| <div id="app"> | |
| <!-- Ribbon --> | |
| <div class="ribbon"> | |
| <div class="ribbon-tabs"> | |
| <button class="tab-btn active" data-tab="home" onclick="showRibbonTab('home')">🏠 Accueil</button> | |
| <button class="tab-btn" data-tab="insert" onclick="showRibbonTab('insert')">📎 Insertion</button> | |
| <button class="tab-btn" data-tab="draw" onclick="showRibbonTab('draw')">✏️ Dessin</button> | |
| <button class="tab-btn" data-tab="view" onclick="showRibbonTab('view')">👁️ Affichage</button> | |
| </div> | |
| <div id="home-tab" class="ribbon-content active"> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Presse-papiers</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn" onclick="pasteContent()">📋 Coller</button> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Police</div> | |
| <div class="group-content"> | |
| <select id="font-family" onchange="formatText('fontName', this.value)"> | |
| <option value="Arial">Arial</option> | |
| <option value="Calibri">Calibri</option> | |
| </select> | |
| <button class="ribbon-btn sm" onclick="formatText('bold')"><b>B</b></button> | |
| <button class="ribbon-btn sm" onclick="formatText('italic')"><i>I</i></button> | |
| <button class="ribbon-btn sm" onclick="formatText('underline')"><u>S</u></button> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Paragraphe</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn sm" onclick="formatText('insertUnorderedList')">•</button> | |
| <button class="ribbon-btn sm" onclick="formatText('justifyLeft')">⬅</button> | |
| <button class="ribbon-btn sm" onclick="formatText('justifyCenter')">⬌</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="insert-tab" class="ribbon-content"> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Tableau</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn" onclick="insertTable()">📊 Tableau</button> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Image</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn" onclick="document.getElementById('img-input').click()">🖼️ Image</button> | |
| <input type="file" id="img-input" accept="image/*" style="display:none" onchange="handleImage(this)"> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Lien</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn" onclick="insertLink()">🔗 Lien</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="draw-tab" class="ribbon-content"> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Outils</div> | |
| <div class="group-content tools-row"> | |
| <button class="ribbon-btn sm tool-btn active" id="tool-pen" onclick="setDrawTool('pen')">✏️</button> | |
| <button class="ribbon-btn sm tool-btn" id="tool-highlighter" onclick="setDrawTool('highlighter')">🖍️</button> | |
| <button class="ribbon-btn sm tool-btn" id="tool-eraser" onclick="setDrawTool('eraser')">🧽</button> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Couleur</div> | |
| <div class="group-content"> | |
| <input type="color" id="pen-color" value="#000000"> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Taille</div> | |
| <div class="group-content"> | |
| <input type="range" id="pen-width" min="1" max="30" value="3"> | |
| </div> | |
| </div> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Actions</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn" onclick="clearDrawing()">🗑️ Effacer</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="view-tab" class="ribbon-content"> | |
| <div class="ribbon-group"> | |
| <div class="group-title">Zoom</div> | |
| <div class="group-content"> | |
| <button class="ribbon-btn sm" onclick="changeZoom(-10)">−</button> | |
| <span id="zoom-level">100%</span> | |
| <button class="ribbon-btn sm" onclick="changeZoom(10)">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Area --> | |
| <div class="main-container"> | |
| <nav class="sidebar" id="sidebar"> | |
| <div class="sidebar-section"> | |
| <h3>📒 Notebooks</h3> | |
| <ul id="notebook-list"></ul> | |
| <button class="add-btn" onclick="addNotebook()">+ Nouveau</button> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>📑 Sections</h3> | |
| <ul id="section-list"></ul> | |
| <button class="add-btn" onclick="addSection()">+ Nouvelle</button> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>📄 Pages</h3> | |
| <ul id="page-list"></ul> | |
| <button class="add-btn" onclick="addPage()">+ Nouvelle</button> | |
| </div> | |
| </nav> | |
| <main class="editor"> | |
| <input type="text" id="page-title" placeholder="Titre de la page"> | |
| <!-- Editor mode toggle --> | |
| <div class="editor-toggle"> | |
| <button class="toggle-btn active" id="btn-text" onclick="showEditor('text')">Texte</button> | |
| <button class="toggle-btn" id="btn-draw" onclick="showEditor('draw')">Dessin</button> | |
| </div> | |
| <div id="text-editor" class="editor-panel active"> | |
| <div id="rich-editor" contenteditable="true" placeholder="Écrivez ici..."></div> | |
| </div> | |
| <div id="draw-editor" class="editor-panel"> | |
| <div class="canvas-scroll-container"> | |
| <canvas id="drawing-canvas"></canvas> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="status-bar"> | |
| <span id="status-text">Prêt</span> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |