Spaces:

luigi12345
/

autoslides

Running

App Files Files Community

luigi12345 commited on Feb 12

Commit

49f9cf6

verified ·

1 Parent(s): 94641b3

Create videolike1.html

Browse files

Files changed (1) hide show

videolike1.html +409 -0

videolike1.html ADDED Viewed

	@@ -0,0 +1,409 @@

+<!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, color text, etc. */
+      .highlight {
+        color: #0cf;
+        font-weight: bold;
+      }
+      .quote {
+        font-style: italic;
+        font-size: 1.2em;
+      }
+      /* For slides with color backgrounds, ensure text is visible */
+      .dark-text {
+        color: #f8f9fa;
+      }
+      .light-text {
+        color: #212529;
+      }
+    </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="zoom"
+                 data-background-color="#0d1117">
+          <h1 class="dark-text">How to Make Money with AI:<br>The Ultimate Guide (2025)</h1>
+          <h3 class="dark-text"><i class="fa-solid fa-graduation-cap"></i> Educational Course / Tutorial</h3>
+        </section>
+        <!-- Slide 2: Introduction (Hook) -->
+        <section data-transition="fade"
+                 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="slide"
+                 data-background-color="#212529">
+          <h2 class="dark-text">Who Is This For?</h2>
+          <ul class="dark-text">
+            <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="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?automation,digital">
+          <h2>What to Expect</h2>
+          <p><i class="fa-solid fa-money-bill-wave"></i> Passive Income</p>
+          <p><i class="fa-solid fa-briefcase"></i> Freelancing</p>
+          <p><i class="fa-solid fa-microchip"></i> AI Tools</p>
+          <p><i class="fa-solid fa-gear"></i> Automation</p>
+          <p>Fast-paced clips of AI projects and success stories!</p>
+        </section>
+        <!-- Slide 5: Introduction (Quick Shots) -->
+        <section data-transition="concave"
+                 data-background-color="#e9ecef">
+          <h2 class="light-text">Get Ready...</h2>
+          <p class="light-text">Your AI-powered journey to new income streams starts <strong>now!</strong></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-color="#1f2937">
+          <h2 class="dark-text">Explosive Growth</h2>
+          <p class="dark-text">AI-driven businesses are growing <strong>300%</strong> 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>Exponential growth in AI applications worldwide—shown in animated infographics.</p>
+        </section>
+        <!-- Slide 9: The Power of AI (Benefits) -->
+        <section data-transition="concave"
+                 data-background-color="#f3f4f6">
+          <h2 class="light-text">Why Embrace AI?</h2>
+          <ul class="light-text">
+            <li><i class="fa-solid fa-rocket"></i> Boost efficiency</li>
+            <li><i class="fa-solid fa-chart-line"></i> Scale operations</li>
+            <li><i class="fa-solid fa-dollar-sign"></i> Unlock new revenue streams</li>
+          </ul>
+        </section>
+        <!-- Slide 10: Top Ways (Overview) -->
+        <section data-transition="slide"
+                 data-background-image="https://source.unsplash.com/1600x900/?money,finance">
+          <h2><i class="fa-solid fa-arrow-trend-up"></i> 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="fade"
+                 data-background-color="#2d3748">
+          <h2 class="dark-text">AI Content Creation</h2>
+          <p class="dark-text">Use <strong>ChatGPT</strong>, <strong>Jasper</strong>, <strong>Writesonic</strong> to generate blogs & social posts.</p>
+          <p class="dark-text">Sell AI-written content on Fiverr, Upwork, Gumroad.</p>
+        </section>
+        <!-- Slide 12: AI Content Demo -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?blog,typing">
+          <h2>Live Writing Demo</h2>
+          <p>Watch AI craft a full blog post in minutes!</p>
+        </section>
+        <!-- Slide 13: AI Video Creation -->
+        <section data-transition="zoom"
+                 data-background-image="https://source.unsplash.com/1600x900/?video,editing">
+          <h2>AI Video Creation & Editing</h2>
+          <p>InVideo, Pictory, Runway AI for pro-level editing—no experience required!</p>
+        </section>
+        <!-- Slide 14: AI Video Demo -->
+        <section data-transition="slide"
+                 data-background-color="#0d6efd">
+          <h2 class="dark-text">Automated Video Production</h2>
+          <p class="dark-text"><i class="fa-solid fa-film"></i> See how AI auto-generates scripts, visuals, transitions for YouTube or ads.</p>
+        </section>
+        <!-- Slide 15: AI Voice Cloning -->
+        <section data-transition="fade"
+                 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="convex"
+                 data-background-color="#6610f2">
+          <h2 class="dark-text">Voice Cloning Demo</h2>
+          <p class="dark-text"><i class="fa-solid fa-headphones"></i> Listen as AI transforms text into a natural-sounding voice.</p>
+        </section>
+        <!-- Slide 17: AI Automation (No-Code) -->
+        <section data-transition="concave"
+                 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 advanced workflows easily.</p>
+          <p>Offer services to businesses to streamline tasks and operations.</p>
+        </section>
+        <!-- Slide 18: Automation Demo -->
+        <section data-transition="slide"
+                 data-background-color="#198754">
+          <h2 class="dark-text">AI-Driven Email Automation</h2>
+          <p class="dark-text">Step-by-step tutorial on setting up an AI-based workflow for customer inquiries.</p>
+        </section>
+        <!-- Slide 19: AI-Generated Art & Designs -->
+        <section data-transition="fade"
+                 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, Redbubble.</p>
+        </section>
+        <!-- Slide 20: Art Demo -->
+        <section data-transition="convex"
+                 data-background-color="#dc3545">
+          <h2 class="dark-text">Art Creation Demo</h2>
+          <p class="dark-text">Watch AI generate unique artwork for merchandise in real time.</p>
+        </section>
+        <!-- Slide 21: AI-Powered Chatbots -->
+        <section data-transition="concave"
+                 data-background-image="https://source.unsplash.com/1600x900/?chatbot,customer">
+          <h2>AI-Powered Chatbots</h2>
+          <p>ChatGPT, BotPress, ManyChat—automate customer support 24/7.</p>
+        </section>
+        <!-- Slide 22: Chatbot Demo -->
+        <section data-transition="zoom"
+                 data-background-color="#6f42c1">
+          <h2 class="dark-text">Chatbot in Action</h2>
+          <p class="dark-text">Explore a bot seamlessly handling FAQs & product inquiries.</p>
+        </section>
+        <!-- Slide 23: Real Examples (Success Stories) -->
+        <section data-transition="slide"
+                 data-background-color="#adb5bd">
+          <h2 class="light-text">Real Examples</h2>
+          <p class="light-text">Entrepreneurs & freelancers share how AI boosted their earnings dramatically.</p>
+        </section>
+        <!-- Slide 24: Case Study 1 -->
+        <section data-transition="fade"
+                 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="convex"
+                 data-background-color="#f8f9fa">
+          <h2 class="light-text">Case Study: John</h2>
+          <p class="light-text">John’s small startup embraced AI for automation, skyrocketing productivity & revenue.</p>
+        </section>
+        <!-- Slide 26: Tools & Platforms (Overview) -->
+        <section data-transition="concave"
+                 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> ChatGPT, Jasper, Writesonic</li>
+            <li><i class="fa-solid fa-video"></i> InVideo, Pictory, Runway AI</li>
+            <li><i class="fa-solid fa-microphone"></i> ElevenLabs, Coqui AI</li>
+            <li><i class="fa-solid fa-robot"></i> Zapier, Make, AutoGPT</li>
+            <li><i class="fa-solid fa-paintbrush"></i> Midjourney, DALL·E, Stable Diffusion</li>
+            <li><i class="fa-solid fa-comments"></i> ChatGPT, BotPress, ManyChat</li>
+          </ul>
+        </section>
+        <!-- Slide 27: Tools & Platforms (Pricing) -->
+        <section data-transition="zoom"
+                 data-background-color="#343a40">
+          <h2 class="dark-text">Pricing & Comparisons</h2>
+          <p class="dark-text">Free vs. paid plans—choose wisely based on your budget & goals.</p>
+        </section>
+        <!-- Slide 28: How to Start (Step 1) -->
+        <section data-transition="slide"
+                 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="fade"
+                 data-background-color="#ffb703">
+          <h2 class="light-text">Hands-On Exploration</h2>
+          <p class="light-text"><strong>Step 2:</strong> Learn & experiment with AI tools—try demos, small test projects.</p>
+        </section>
+        <!-- Slide 30: How to Start (Step 3) -->
+        <section data-transition="convex"
+                 data-background-image="https://source.unsplash.com/1600x900/?marketplace,freelance">
+          <h2>Monetize Your Skills</h2>
+          <p><strong>Step 3:</strong> Start selling or automating on Fiverr & Gumroad to earn quickly.</p>
+        </section>
+        <!-- Slide 31: SEO & Discoverability -->
+        <section data-transition="concave"
+                 data-background-color="#232946">
+          <h2 class="dark-text">SEO & Discoverability</h2>
+          <ul class="dark-text">
+            <li><i class="fa-solid fa-search"></i> Use AI for keyword research</li>
+            <li><i class="fa-solid fa-tags"></i> Add timestamps & relevant tags to your content</li>
+          </ul>
+        </section>
+        <!-- Slide 32: Additional Tips -->
+        <section data-transition="zoom"
+                 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-group"></i> Collaborate with others for joint ventures.</p>
+        </section>
+        <!-- Slide 33: Overcoming Challenges -->
+        <section data-transition="slide"
+                 data-background-color="#fb8500">
+          <h2 class="dark-text">Overcoming Challenges</h2>
+          <p class="dark-text">AI evolves quickly—stay <em>agile</em> and <em>adapt</em>.</p>
+        </section>
+        <!-- Slide 34: Call to Action (Part 1) -->
+        <section data-transition="fade"
+                 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="concave"
+                 data-background-color="#16161a">
+          <h2 class="dark-text">Subscribe & Explore</h2>
+          <p class="dark-text highlight">Now that you know how to make money with AI, it’s time to <strong>act!</strong></p>
+          <p class="dark-text">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, looping, and a default transition
+      Reveal.initialize({
+        autoSlide: 5000, // 5 seconds per slide
+        loop: true,
+        transition: 'slide', // fallback transition if a slide doesn't specify data-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>