presentation-reveal/editor.html at main · Princeddn/presentation-reveal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Présentation Builder</title>
  <link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/reveal.css">
  <link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/theme/white.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="toolbar">
    <span>● Présentation Builder</span>
    <button onclick="addSlide()">➕ Slide</button>
  </div>

  <div class="container">
    <div class="main-view">
      <div class="slide-canvas" id="canvas">
        <!-- Éléments glissables -->
      </div>
    </div>

    <div class="sidebar">
      <h3>Widgets</h3>
      <div class="widget-button" onclick="addWidget('Texte')">🅣 Texte</div>
      <div class="widget-button" onclick="addWidget('Vidéo')">▶️ Vidéo</div>
      <div class="widget-button" onclick="addWidget('Boite')">⬛ Boite</div>
      <div class="widget-button purple" onclick="addWidget('Podcast')">
        <div><strong>🎧 À écouter</strong><br><small>Reprenez votre écoute</small></div>
      </div>
      <div class="widget-button" onclick="addWidget('Image')">🖼️ Arrière-plan</div>
      <div class="widget-button" onclick="addCustomWidget()">⚙️ Widget personnalisé</div>
      <button class="footer-button" onclick="saveCanvas()">💾 Sauvegarder</button>
    </div>
  </div>

  <!-- Panneau widget personnalisé (avec onglets) -->
  <div id="custom-widget-panel">
    <h2>⚙️ Créer un widget personnalisé</h2>
    <div class="tabs">
      <button onclick="showTab('html')">HTML</button>
      <button onclick="showTab('css')">CSS</button>
      <button onclick="showTab('js')">JS</button>
    </div>

    <div class="tab-content">
      <textarea id="tab-html" class="tab-area" placeholder="<h1>Hello widget</h1>"></textarea>
      <textarea id="tab-css" class="tab-area" style="display:none;" placeholder="h1 { color: red; }"></textarea>
      <textarea id="tab-js" class="tab-area" style="display:none;" placeholder="console.log('Widget actif')"></textarea>
    </div>

    <button onclick="previewCustomWidget()">🎯 Prévisualiser</button>
    <iframe id="custom-preview"></iframe>

    <div class="actions">
      <button onclick="insertCustomWidget()">➕ Insérer</button>
      <button onclick="toggleCustomWidgetPanel()">❌ Fermer</button>
    </div>
  </div>

  <script src="js/editor.js"></script>
</body>
</html>