Delete GLM-4.6-TRAE-Slides.html
This commit is contained in:
Roman (RyzenAdvanced)
@@ -1,646 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GLM-4.6 & TRAE Integration - Interactive Slides</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/black.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #00d4aa;
|
||||
--secondary-color: #ff6b6b;
|
||||
--accent-color: #4ecdc4;
|
||||
--text-color: #ffffff;
|
||||
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
||||
}
|
||||
|
||||
.reveal .slides section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-slide {
|
||||
background: var(--bg-gradient);
|
||||
padding: 50px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.title-slide h1 {
|
||||
font-size: 3.5em;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
margin-bottom: 0.5em;
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--primary-color); }
|
||||
to { text-shadow: 0 0 20px #fff, 0 0 30px var(--accent-color), 0 0 40px var(--accent-color); }
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.8em;
|
||||
color: var(--accent-color);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3em;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.config-box {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-left: 4px solid var(--accent-color);
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
border: 2px solid var(--secondary-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.server-status {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #00ff00;
|
||||
color: black;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.token-counter {
|
||||
font-size: 2em;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.specs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
font-size: 2em;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.demo-terminal {
|
||||
background: #1e1e1e;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
margin: 10px 0;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
|
||||
width: 0%;
|
||||
animation: fillProgress 2s forwards;
|
||||
}
|
||||
|
||||
@keyframes fillProgress {
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
font-size: 2em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
color: var(--primary-color);
|
||||
margin: 0 10px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.social-icons a:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.slide-number {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<!-- Title Slide -->
|
||||
<section>
|
||||
<div class="title-slide">
|
||||
<h1>GLM-4.6 + TRAE</h1>
|
||||
<h2 style="color: white;">Uncapped AI Integration</h2>
|
||||
<div class="subtitle">The Ultimate Visual Guide</div>
|
||||
<div style="margin-top: 3em;">
|
||||
<i class="fas fa-robot" style="font-size: 4em; color: var(--primary-color);"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview -->
|
||||
<section>
|
||||
<h2>What We're Building Today</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-infinity"></i>
|
||||
</div>
|
||||
<h3>Uncensored AI</h3>
|
||||
<p>Complete freedom with GLM-4.6 model</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<h3>1M Token Output</h3>
|
||||
<p>Maximum generation capacity</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<h3>Full Dev Environment</h3>
|
||||
<p>TRAE integration ready</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<h3>Local & Secure</h3>
|
||||
<p>Run everything locally</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Prerequisites -->
|
||||
<section>
|
||||
<h2>What You Need</h2>
|
||||
<div class="step-container" style="animation-delay: 0.2s;">
|
||||
<div class="step-number">1</div>
|
||||
<div>
|
||||
<h3>Windows OS</h3>
|
||||
<p>Windows 10/11 recommended</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container" style="animation-delay: 0.4s;">
|
||||
<div class="step-number">2</div>
|
||||
<div>
|
||||
<h3>TRAE Installed</h3>
|
||||
<p>Ready to configure</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container" style="animation-delay: 0.6s;">
|
||||
<div class="step-number">3</div>
|
||||
<div>
|
||||
<h3>LM Studio</h3>
|
||||
<p>Download from lmstudio.ai</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container" style="animation-delay: 0.8s;">
|
||||
<div class="step-number">4</div>
|
||||
<div>
|
||||
<h3>GLM-4.6 Model</h3>
|
||||
<p>Search & download in LM Studio</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LM Studio Setup -->
|
||||
<section>
|
||||
<h2>Step 1: LM Studio Configuration</h2>
|
||||
<div style="text-align: left; margin: 20px 0;">
|
||||
<div class="config-box">
|
||||
<p><i class="fas fa-search"></i> Search for: <span class="highlight">GLM-4.6</span></p>
|
||||
<p><i class="fas fa-download"></i> Download model: <span class="highlight">glm-4.6 (1_3m)</span></p>
|
||||
<p><i class="fas fa-cog"></i> Go to speech tab (💬)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-terminal">
|
||||
<div class="terminal-line">$ Model selected: glm-4.6</div>
|
||||
<div class="terminal-line">$ Status: Ready to load</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Server Configuration -->
|
||||
<section>
|
||||
<h2>Step 2: Server Settings</h2>
|
||||
<div class="config-box">
|
||||
<p><span class="highlight">GPU Offload:</span> 75.78 (or max available)</p>
|
||||
<p><span class="highlight">Context Length:</span> 1,048,576 tokens</p>
|
||||
<p><span class="highlight">Max Tokens:</span> 1,048,576</p>
|
||||
<p><span class="highlight">Temperature:</span> 0.7</p>
|
||||
<p><span class="highlight">Seed:</span> 299792458</p>
|
||||
<p><span class="highlight">Repeat Penalty:</span> 1.1</p>
|
||||
</div>
|
||||
<div style="margin-top: 2em;">
|
||||
<button style="padding: 15px 40px; font-size: 1.5em; background: var(--primary-color); border: none; border-radius: 30px; cursor: pointer;">
|
||||
<i class="fas fa-play"></i> Start Server
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Server Status -->
|
||||
<section>
|
||||
<h2>Server Running! 🎉</h2>
|
||||
<div class="server-status">
|
||||
<i class="fas fa-circle"></i> Server Active
|
||||
</div>
|
||||
<div class="config-box" style="margin-top: 2em;">
|
||||
<p><i class="fas fa-link"></i> Server URL:</p>
|
||||
<p style="font-size: 1.5em; color: var(--accent-color);">http://localhost:1234/v1</p>
|
||||
</div>
|
||||
<div class="token-counter">
|
||||
<i class="fas fa-microchip"></i> 1M Token Capacity Enabled
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TRAE Configuration -->
|
||||
<section>
|
||||
<h2>Step 3: Configure TRAE</h2>
|
||||
<div class="step-container">
|
||||
<div class="step-number">1</div>
|
||||
<div>
|
||||
<h3>Open TRAE Application</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container">
|
||||
<div class="step-number">2</div>
|
||||
<div>
|
||||
<h3>Settings → API Configuration</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container">
|
||||
<div class="step-number">3</div>
|
||||
<div>
|
||||
<h3>Enter Configuration</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-box">
|
||||
<p><span class="highlight">API URL:</span> http://localhost:1234/v1</p>
|
||||
<p><span class="highlight">API Key:</span> lm-studio</p>
|
||||
<p><span class="highlight">Model:</span> glm-4.6</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Enabled -->
|
||||
<section>
|
||||
<h2>🚀 Uncapped Features Enabled</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-unlock-alt" style="font-size: 3em; color: #ff6b6b;"></i>
|
||||
<h3>No Content Filter</h3>
|
||||
<p>Complete freedom</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-expand-arrows-alt" style="font-size: 3em; color: #ff6b6b;"></i>
|
||||
<h3>Full Jailbreak</h3>
|
||||
<p>All capabilities</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-file-alt" style="font-size: 3em; color: #4ecdc4;"></i>
|
||||
<h3>1M Tokens</h3>
|
||||
<p>Maximum output</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-code-branch" style="font-size: 3em; color: #4ecdc4;"></i>
|
||||
<h3>Any Language</h3>
|
||||
<p>Code generation</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Specs -->
|
||||
<section>
|
||||
<h2>Technical Specifications</h2>
|
||||
<div class="specs-grid">
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">1M+</div>
|
||||
<p>Token Context</p>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">75.78</div>
|
||||
<p>GPU Offload</p>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">1234</div>
|
||||
<p>Server Port</p>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">0.7</div>
|
||||
<p>Temperature</p>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value"><3s</div>
|
||||
<p>Response Time</p>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">∞</div>
|
||||
<p>Possibilities</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Capabilities -->
|
||||
<section>
|
||||
<h2>What You Can Do Now</h2>
|
||||
<div style="text-align: left;">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li style="margin: 20px 0; font-size: 1.5em;">
|
||||
<i class="fas fa-check-circle" style="color: var(--primary-color); margin-right: 10px;"></i>
|
||||
Generate entire applications in one prompt
|
||||
</li>
|
||||
<li style="margin: 20px 0; font-size: 1.5em;">
|
||||
<i class="fas fa-check-circle" style="color: var(--primary-color); margin-right: 10px;"></i>
|
||||
Debug complex codebases autonomously
|
||||
</li>
|
||||
<li style="margin: 20px 0; font-size: 1.5em;">
|
||||
<i class="fas fa-check-circle" style="color: var(--primary-color); margin-right: 10px;"></i>
|
||||
Run multi-repository projects
|
||||
</li>
|
||||
<li style="margin: 20px 0; font-size: 1.5em;">
|
||||
<i class="fas fa-check-circle" style="color: var(--primary-color); margin-right: 10px;"></i>
|
||||
Access full system capabilities
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section>
|
||||
<h2>⚠️ Common Issues & Solutions</h2>
|
||||
<div class="config-box">
|
||||
<p><i class="fas fa-exclamation-triangle"></i> <span class="highlight">Server won't start?</span></p>
|
||||
<p style="margin-left: 20px;">→ Check GPU availability and VRAM</p>
|
||||
</div>
|
||||
<div class="config-box">
|
||||
<p><i class="fas fa-exclamation-triangle"></i> <span class="highlight">Connection refused?</span></p>
|
||||
<p style="margin-left: 20px;">→ Verify LM Studio server is running</p>
|
||||
</div>
|
||||
<div class="config-box">
|
||||
<p><i class="fas fa-exclamation-triangle"></i> <span class="highlight">API errors?</span></p>
|
||||
<p style="margin-left: 20px;">→ Double-check URL and API key</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security Warning -->
|
||||
<section>
|
||||
<div class="warning-box">
|
||||
<h2 style="color: var(--secondary-color); margin-top: 0;">
|
||||
<i class="fas fa-shield-alt"></i> Security Notice
|
||||
</h2>
|
||||
<p style="font-size: 1.3em;">This configuration provides <strong>unrestricted AI access</strong></p>
|
||||
<p>Ensure proper security measures when deploying in production</p>
|
||||
<div style="margin-top: 20px;">
|
||||
<i class="fas fa-lock" style="font-size: 3em; color: var(--secondary-color);"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MCP Integration -->
|
||||
<section>
|
||||
<h2>Advanced: MCP Server Integration</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-plug" style="font-size: 3em; color: var(--accent-color);"></i>
|
||||
<h3>OpenRouter MCP</h3>
|
||||
<p>Extended capabilities</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-robot" style="font-size: 3em; color: var(--accent-color);"></i>
|
||||
<h3>Custom Agents</h3>
|
||||
<p>Build specialized tools</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-users" style="font-size: 3em; color: var(--primary-color);"></i>
|
||||
<h3>Team Coordination</h3>
|
||||
<p>Multi-agent workflows</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<i class="fas fa-sync" style="font-size: 3em; color: var(--primary-color);"></i>
|
||||
<h3>Real-time Sync</h3>
|
||||
<p>Live collaboration</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance Tips -->
|
||||
<section>
|
||||
<h2>⚡ Performance Optimization</h2>
|
||||
<div style="text-align: left; max-width: 800px; margin: 0 auto;">
|
||||
<div class="step-container">
|
||||
<div class="step-number">1</div>
|
||||
<div>
|
||||
<h3>GPU Optimization</h3>
|
||||
<p>Adjust offload based on VRAM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container">
|
||||
<div class="step-number">2</div>
|
||||
<div>
|
||||
<h3>Context Management</h3>
|
||||
<p>Reduce if memory issues occur</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container">
|
||||
<div class="step-number">3</div>
|
||||
<div>
|
||||
<h3>Token Settings</h3>
|
||||
<p>Balance speed vs length</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-container">
|
||||
<div class="step-number">4</div>
|
||||
<div>
|
||||
<h3>Cache Management</h3>
|
||||
<p>Clear cache periodically</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thank You -->
|
||||
<section>
|
||||
<h1 style="font-size: 4em; color: var(--primary-color);">You're All Set! 🎉</h1>
|
||||
<div class="subtitle" style="font-size: 2em; margin-top: 1em;">Enjoy Unlimited AI Power</div>
|
||||
<div style="margin: 3em 0;">
|
||||
<i class="fas fa-rocket" style="font-size: 5em; color: var(--accent-color); animation: float 3s ease-in-out infinite;"></i>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<h3>Repository: GLM-4.6 Trade Solo IDE Agent</h3>
|
||||
<p style="font-size: 1.2em;">Complete uncapped AI environment ready</p>
|
||||
<div class="social-icons">
|
||||
<a href="#"><i class="fab fa-gitlab"></i></a>
|
||||
<a href="#"><i class="fab fa-github"></i></a>
|
||||
<a href="#"><i class="fab fa-discord"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-number"></div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
|
||||
<script>
|
||||
// Initialize Reveal.js
|
||||
Reveal.initialize({
|
||||
hash: true,
|
||||
controls: true,
|
||||
progress: true,
|
||||
center: true,
|
||||
transition: 'convex',
|
||||
transitionSpeed: 'fast',
|
||||
backgroundTransition: 'fade',
|
||||
width: 1200,
|
||||
height: 700,
|
||||
margin: 0.1,
|
||||
minScale: 0.2,
|
||||
maxScale: 2.0
|
||||
});
|
||||
|
||||
// Update slide number
|
||||
Reveal.addEventListener('slidechanged', function(event) {
|
||||
document.querySelector('.slide-number').textContent =
|
||||
`${event.indexh + 1} / ${Reveal.getTotalSlides()}`;
|
||||
});
|
||||
|
||||
// Add floating animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize slide number on load
|
||||
document.querySelector('.slide-number').textContent =
|
||||
`1 / ${Reveal.getTotalSlides()}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user