FreeOfficeSuite/presentation.html at main · Timessless01/FreeOfficeSuite · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FreeOfficeSuite - Presentation Editor</title>

  <!-- Reveal.js CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
  <!-- Theme (Black) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/black.min.css">

  <!-- Syntax Highlighting (Highlight.js) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">

  <!-- jsPDF -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

  <!-- Custom CSS for Export Button -->
  <style>
    #export-pdf {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      padding: 10px 20px;
      background: #6200ea;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    #export-pdf:hover {
      background: #3700b3;
    }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <!-- Slide 1: Welcome -->
      <section>
        <h1>FreeOfficeSuite</h1>
        <p>Create stunning presentations for free!</p>
        <p><small>Powered by Reveal.js</small></p>
        <!-- Local Image -->
        <img src="/images/logo.png" alt="FreeOfficeSuite Logo" style="width: 200px; height: auto;">
      </section>

      <!-- Slide 2: Features -->
      <section>
        <h2>Key Features</h2>
        <ul>
          <li>Real-time collaboration</li>
          <li>PDF/PPTX export</li>
          <li>Code syntax highlighting</li>
          <li>100% free & open-source</li>
        </ul>
      </section>

      <!-- Slide 3: Code Example -->
      <section>
        <h2>Code Demo</h2>
        <pre><code data-trim data-noescape class="javascript">
          // Hello World in JavaScript
          function greet() {
            console.log("Hello, World!");
            return "Welcome to FreeOfficeSuite!";
          }
          greet();
        </code></pre>
      </section>

      <!-- Slide 4: Get Started -->
      <section>
        <h2>Get Started</h2>
        <p>Use the arrow keys or spacebar to navigate!</p>
        <p>🖨️ Export as PDF | 💾 Save to Cloud</p>
      </section>
    </div>
  </div>

  <!-- PDF Export Button -->
  <button id="export-pdf">Export as PDF</button>

  <!-- Reveal.js Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
  <!-- Syntax Highlighting Plugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

  <script>
    // Initialize Reveal.js with Plugins
    Reveal.initialize({
      controls: true,
      progress: true,
      hash: true,
      center: true,
      transition: 'slide',
      dependencies: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.js', async: true }
      ]
    });

    // Initialize Highlight.js
    hljs.initHighlightingOnLoad();

    // PDF Export Functionality
    document.getElementById('export-pdf').addEventListener('click', () => {
      const { jsPDF } = window.jspdf;
      const pdf = new jsPDF('p', 'mm', 'a4');
      const slides = document.querySelectorAll('.slides section');

      slides.forEach((slide, index) => {
        if (index > 0) pdf.addPage();

        // Add Title
        const title = slide.querySelector('h1, h2')?.innerText || `Slide ${index + 1}`;
        pdf.setFontSize(22);
        pdf.setTextColor(40, 40, 40);
        pdf.text(title, 20, 20);

        // Add Content
        const content = slide.innerText.replace(title, '').trim();
        pdf.setFontSize(14);
        pdf.setTextColor(80, 80, 80);
        pdf.text(content, 20, 40, { maxWidth: 170 });

        // Add Images
        const images = slide.querySelectorAll('img');
        images.forEach((img, imgIndex) => {
          const imgData = img.src;
          if (imgData.startsWith('http')) {
            // Handle external images
            pdf.addImage(imgData, 'JPEG', 20, 80 + (imgIndex * 50), 100, 50);
          } else {
            // Handle local images
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            ctx.drawImage(img, 0, 0);
            const dataURL = canvas.toDataURL('image/jpeg');
            pdf.addImage(dataURL, 'JPEG', 20, 80 + (imgIndex * 50), 100, 50);
          }
        });
      });

      pdf.save('presentation.pdf');
    });
  </script>
</body>
</html>