Spaces:

samihalawa
/

autoslides

Running

App Files Files Community

Luigi commited on Feb 12

Commit

c8f52dc

verified ·

1 Parent(s): 3e05822

Create aicourse.html

Browse files

Files changed (1) hide show

aicourse.html +397 -0

aicourse.html ADDED Viewed

	@@ -0,0 +1,397 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>How to Make Money with AI: The Ultimate Guide (2025)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Reveal.js CSS from CDN -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reveal.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/theme/black.min.css">
+    <!-- Font Awesome for icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6l8Y1myyRAUNVMd2D0d05TAZYcIDY3WSS7G7N5xOWShy6kZkGwl6h5B9QoBi8mZ5pSRn92JRvRiE7R9RQ29Q=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <style>
+      /* Full-screen canvas for the animated background */
+      canvas#canvas-bg {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+      }
+      /* Base styling for slides */
+      .reveal section {
+        padding: 2em;
+        font-size: 1.1em;
+      }
+      /* Some highlights, quotes, etc. */
+      .highlight {
+        color: #0cf;
+        font-weight: bold;
+      }
+      .quote {
+        font-style: italic;
+        font-size: 1.2em;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Canvas for animated background -->
+    <canvas id="canvas-bg"></canvas>
+    <!-- Optional background music (replace src with your preferred track) -->
+    <audio id="bg-music" loop autoplay>
+      <source src="https://cdn.jsdelivr.net/gh/your_username/your_repo/sample-music.mp3" type="audio/mpeg">
+      Your browser does not support the audio element.
+    </audio>
+    <div class="reveal">
+      <div class="slides">
+        <!-- SLIDE 1: Title / Cover -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?technology,ai">
+          <h1>How to Make Money with AI: The Ultimate Guide (2025)</h1>
+          <h3><i class="fa-solid fa-graduation-cap"></i> Educational Course / Tutorial</h3>
+        </section>
+        <!-- SLIDE 2: Introduction (Hook) -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?future,innovation">
+          <h2>Introduction</h2>
+          <p><strong>Hook:</strong> AI is changing the world—and <em>it can change your bank account too!</em></p>
+        </section>
+        <!-- SLIDE 3: Introduction (Who Is This For?) -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?entrepreneur,freelancer">
+          <h2>Who Is This For?</h2>
+          <ul>
+            <li><i class="fa-solid fa-user-tie"></i> Freelancers</li>
+            <li><i class="fa-solid fa-shop"></i> Entrepreneurs</li>
+            <li><i class="fa-solid fa-pen"></i> Content Creators</li>
+            <li><i class="fa-solid fa-building"></i> Business Owners</li>
+          </ul>
+        </section>
+        <!-- SLIDE 4: Introduction (Teaser) -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?automation,digital">
+          <h2>What to Expect</h2>
+          <p>Passive Income, Freelancing, AI Tools, Automation.</p>
+          <p>Fast-paced clips of AI projects and success stories!</p>
+        </section>
+        <!-- SLIDE 5: Introduction (Quick Shots) -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?robotics,success">
+          <h2>Get Ready...</h2>
+          <p>Your AI-powered journey to new income streams starts now!</p>
+        </section>
+        <!-- SLIDE 6: The Power of AI (Opportunities) -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?opportunities,tech">
+          <h2>The Power of AI</h2>
+          <p>Discover how <em>AI</em> is unlocking <strong>massive potential</strong> in every industry.</p>
+        </section>
+        <!-- SLIDE 7: The Power of AI (Explosive Growth) -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?growth,chart">
+          <h2>Explosive Growth</h2>
+          <p>AI-driven businesses are growing 300% faster than traditional enterprises.</p>
+        </section>
+        <!-- SLIDE 8: The Power of AI (Stats & Infographics) -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?infographic,ai">
+          <h2>Market Trends</h2>
+          <p>Animated infographics show exponential growth in AI applications worldwide.</p>
+        </section>
+        <!-- SLIDE 9: The Power of AI (Benefits) -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?benefits,technology">
+          <h2>Why Embrace AI?</h2>
+          <p>Boost efficiency, scale operations, and unlock new revenue streams.</p>
+        </section>
+        <!-- SLIDE 10: Top Ways (Overview) -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?money,finance">
+          <h2>Top Ways to Make Money with AI</h2>
+          <ul>
+            <li>AI Content Creation</li>
+            <li>AI Video Creation & Editing</li>
+            <li>AI Voice Cloning & Audiobooks</li>
+            <li>AI Automation & No-Code Development</li>
+            <li>AI-Generated Art & Designs</li>
+            <li>AI-Powered Chatbots</li>
+          </ul>
+        </section>
+        <!-- SLIDE 11: AI Content Creation -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?content,writing">
+          <h2>AI Content Creation</h2>
+          <p>Use tools like <strong>ChatGPT</strong>, <strong>Jasper</strong>, <strong>Writesonic</strong> to generate blogs and social media posts.</p>
+          <p>Sell AI-written content on Fiverr, Upwork, Gumroad.</p>
+        </section>
+        <!-- SLIDE 12: AI Content Demo -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?blog,typing">
+          <h2>Live Writing Demo</h2>
+          <p>Watch as AI crafts a full blog post in minutes!</p>
+        </section>
+        <!-- SLIDE 13: AI Video Creation -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?video,editing">
+          <h2>AI Video Creation & Editing</h2>
+          <p>InVideo, Pictory, and Runway AI simplify pro-level editing—no experience required!</p>
+        </section>
+        <!-- SLIDE 14: AI Video Demo -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?video,screen">
+          <h2>Automated Video Production</h2>
+          <p>See how AI can auto-generate scripts, visuals, and transitions for YouTube channels or ads.</p>
+        </section>
+        <!-- SLIDE 15: AI Voice Cloning -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?voice,microphone">
+          <h2>AI Voice Cloning & Audiobooks</h2>
+          <p>Tools like <strong>ElevenLabs</strong> or <strong>Coqui AI</strong> create realistic voiceovers.</p>
+          <p>Sell narrations, audiobooks, or commercial voiceovers.</p>
+        </section>
+        <!-- SLIDE 16: AI Voice Demo -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?audiobook,voice">
+          <h2>Voice Cloning Demo</h2>
+          <p>Listen as AI transforms text into a natural-sounding voice.</p>
+        </section>
+        <!-- SLIDE 17: AI Automation (No-Code) -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?automation,code">
+          <h2>AI Automation & No-Code Development</h2>
+          <p>Platforms like Zapier, Make, and AutoGPT let you build complex workflows with ease.</p>
+          <p>Offer services to businesses to streamline tasks and operations.</p>
+        </section>
+        <!-- SLIDE 18: Automation Demo -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?email,automation">
+          <h2>AI-Driven Email Automation</h2>
+          <p>Step-by-step tutorial on setting up an AI-based workflow to handle customer inquiries.</p>
+        </section>
+        <!-- SLIDE 19: AI-Generated Art & Designs -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?art,creation">
+          <h2>AI-Generated Art & Designs</h2>
+          <p>Use Midjourney, DALL·E, Stable Diffusion to create stunning visuals.</p>
+          <p>Sell prints, NFTs, or custom designs on Etsy and Redbubble.</p>
+        </section>
+        <!-- SLIDE 20: Art Demo -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?creative,drawing">
+          <h2>Art Creation Demo</h2>
+          <p>Watch AI generate unique artwork for merchandise in real time.</p>
+        </section>
+        <!-- SLIDE 21: AI-Powered Chatbots -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?chatbot,customer">
+          <h2>AI-Powered Chatbots</h2>
+          <p>ChatGPT, BotPress, ManyChat—automate customer support to save time & costs.</p>
+        </section>
+        <!-- SLIDE 22: Chatbot Demo -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?chatting,robot">
+          <h2>Chatbot in Action</h2>
+          <p>Explore a chatbot seamlessly handling FAQs and product inquiries.</p>
+        </section>
+        <!-- SLIDE 23: Real Examples (Success Stories) -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?success,people">
+          <h2>Real Examples</h2>
+          <p>Entrepreneurs and freelancers share how AI boosted their earnings dramatically.</p>
+        </section>
+        <!-- SLIDE 24: Case Study 1 -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?woman,success">
+          <h2>Case Study: Jane</h2>
+          <p>How a freelance writer scaled her income 3X with AI content generation.</p>
+        </section>
+        <!-- SLIDE 25: Case Study 2 -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?man,achievement">
+          <h2>Case Study: John</h2>
+          <p>John’s small startup embraced AI for automation, skyrocketing productivity and revenue.</p>
+        </section>
+        <!-- SLIDE 26: Tools & Platforms (Overview) -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?tools,tech">
+          <h2>Tools & Platforms You Need</h2>
+          <ul>
+            <li><i class="fa-solid fa-pen"></i> Writing: ChatGPT, Jasper, Writesonic</li>
+            <li><i class="fa-solid fa-video"></i> Video: InVideo, Pictory, Runway AI</li>
+            <li><i class="fa-solid fa-microphone"></i> Voice: ElevenLabs, Coqui AI</li>
+            <li><i class="fa-solid fa-robot"></i> Automation: Zapier, Make, AutoGPT</li>
+            <li><i class="fa-solid fa-palette"></i> Art: Midjourney, DALL·E, Stable Diffusion</li>
+            <li><i class="fa-solid fa-comments"></i> Chatbots: ChatGPT, BotPress, ManyChat</li>
+          </ul>
+        </section>
+        <!-- SLIDE 27: Tools & Platforms (Pricing) -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?pricing,comparison">
+          <h2>Pricing & Comparisons</h2>
+          <p>Free vs. paid plans—pick the right tools based on your budget and goals.</p>
+        </section>
+        <!-- SLIDE 28: How to Start (Step 1) -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?start,launch">
+          <h2>How to Start Today</h2>
+          <p><strong>Step 1:</strong> Pick an AI money-making method (content, video, art, etc.).</p>
+        </section>
+        <!-- SLIDE 29: How to Start (Step 2) -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?learning,tech">
+          <h2>Hands-On Exploration</h2>
+          <p><strong>Step 2:</strong> Learn and experiment with AI tools—try demos, small test projects.</p>
+        </section>
+        <!-- SLIDE 30: How to Start (Step 3) -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?marketplace,freelance">
+          <h2>Monetize Your Skills</h2>
+          <p><strong>Step 3:</strong> Start selling or automating. Use marketplaces like Fiverr and Gumroad to earn.</p>
+        </section>
+        <!-- SLIDE 31: SEO & Discoverability -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?seo,search">
+          <h2>SEO & Discoverability</h2>
+          <ul>
+            <li>Optimize your listings with AI-driven keyword research</li>
+            <li>Add timestamps and relevant tags to all your content</li>
+          </ul>
+        </section>
+        <!-- SLIDE 32: Additional Tips -->
+        <section data-transition="fade"
+                 data-background-image="https://source.unsplash.com/1600x900/?tips,ideas">
+          <h2>Extra Tips</h2>
+          <p>
+            <i class="fa-solid fa-lightbulb"></i> Keep learning new AI features.<br>
+            <i class="fa-solid fa-people-arrows-left-right"></i> Collaborate with others for joint ventures.
+          </p>
+        </section>
+        <!-- SLIDE 33: Overcoming Challenges -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?challenge,success">
+          <h2>Overcoming Challenges</h2>
+          <p>Embrace iteration. AI evolves quickly, so stay agile and adapt.</p>
+        </section>
+        <!-- SLIDE 34: Call to Action (Part 1) -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?action,success">
+          <h2>Take Action Now</h2>
+          <p>Nothing happens until you start—pick your first AI method today.</p>
+        </section>
+        <!-- SLIDE 35: Final Call to Action -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?calltoaction,motivation">
+          <h2>Subscribe & Explore</h2>
+          <p class="highlight">Now that you know how to make money with AI, it’s time to <strong>act!</strong></p>
+          <p>Subscribe, like, and check out more resources for your AI-powered journey.</p>
+        </section>
+      </div>
+    </div>
+    <!-- Reveal.js from CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reveal.min.js"></script>
+    <script>
+      // Initialize Reveal.js with auto-play and looping
+      Reveal.initialize({
+        autoSlide: 5000, // 5 seconds per slide
+        loop: true,
+        transition: 'slide', // overall fallback transition
+        backgroundTransition: 'fade'
+      });
+      // Canvas animation: moving circles
+      const canvas = document.getElementById('canvas-bg');
+      const ctx = canvas.getContext('2d');
+      function resizeCanvas() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      }
+      window.addEventListener('resize', resizeCanvas);
+      resizeCanvas();
+      // Create random circles
+      const circles = [];
+      for (let i = 0; i < 60; i++) {
+        circles.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          radius: Math.random() * 3 + 1,
+          dx: (Math.random() - 0.5) * 2,
+          dy: (Math.random() - 0.5) * 2,
+          color: 'rgba(0, 150, 255, 0.5)'
+        });
+      }
+      // Animate the circles
+      function animate() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        circles.forEach(circle => {
+          circle.x += circle.dx;
+          circle.y += circle.dy;
+          // bounce horizontally
+          if (circle.x < 0 || circle.x > canvas.width) circle.dx *= -1;
+          // bounce vertically
+          if (circle.y < 0 || circle.y > canvas.height) circle.dy *= -1;
+          // draw circle
+          ctx.beginPath();
+          ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+          ctx.fillStyle = circle.color;
+          ctx.fill();
+        });
+        requestAnimationFrame(animate);
+      }
+      animate();
+    </script>
+  </body>
+</html>