|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Excel Mastery - The Future of Spreadsheets</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
.slide { |
|
|
display: none; |
|
|
opacity: 0; |
|
|
transition: opacity 0.5s ease; |
|
|
} |
|
|
.slide.active { |
|
|
display: block; |
|
|
opacity: 1; |
|
|
} |
|
|
.cell-highlight { |
|
|
background-color: rgba(100, 255, 100, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.robot-eye { |
|
|
box-shadow: 0 0 15px 5px rgba(0, 150, 255, 0.7); |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
.excel-icon { |
|
|
text-shadow: 0 0 10px rgba(0, 150, 255, 0.7); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden"> |
|
|
|
|
|
<div class="fixed bottom-8 right-8 z-50 floating"> |
|
|
<div class="relative"> |
|
|
<div class="w-24 h-32 bg-blue-600 rounded-full relative"> |
|
|
|
|
|
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-16 h-16 bg-blue-500 rounded-full flex justify-center items-center"> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<div class="robot-eye w-4 h-4 bg-white rounded-full"></div> |
|
|
<div class="robot-eye w-4 h-4 bg-white rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 px-2"> |
|
|
<div class="text-center text-xs font-bold">EXCEL-BOT 3000</div> |
|
|
<div class="text-center text-xxs mt-1">Your spreadsheet assistant</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-700 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-6xl relative"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<div class="flex justify-center items-center mb-4"> |
|
|
<i class="fas fa-file-excel text-6xl text-green-500 excel-icon mr-4"></i> |
|
|
<h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400"> |
|
|
Excel Mastery |
|
|
</h1> |
|
|
</div> |
|
|
<p class="text-xl text-blue-300">The complete guide to spreadsheet domination</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex justify-between items-center mb-8 bg-gray-800 rounded-lg p-2"> |
|
|
<button id="prev-btn" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-500 transition"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Previous |
|
|
</button> |
|
|
<div class="flex-1 mx-4"> |
|
|
<div class="w-full bg-gray-700 rounded-full h-4"> |
|
|
<div id="progress-bar" class="progress-bar h-4 bg-gradient-to-r from-blue-500 to-green-500 rounded-full" style="width: 10%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="next-btn" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-500 transition"> |
|
|
Next <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slides-container bg-gray-800 rounded-xl p-8 min-h-96 shadow-xl border border-gray-700"> |
|
|
|
|
|
<div class="slide active" data-slide="1"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-3xl font-bold mb-4 text-blue-400">Welcome to Excel Mastery</h2> |
|
|
<p class="mb-4 text-lg">Microsoft Excel is the most powerful spreadsheet software used by over 750 million people worldwide.</p> |
|
|
<p class="mb-6">This presentation will transform you from beginner to spreadsheet expert with the help of our AI assistant.</p> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500"> |
|
|
<p class="font-bold text-blue-300">Did you know?</p> |
|
|
<p>Excel was first released in 1985 and has since become the industry standard for data analysis.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-900 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="grid grid-cols-5 gap-1 mb-2"> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">A</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">B</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">C</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">D</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">E</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-5 gap-1"> |
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">1</div> |
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">Data</div> |
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">Analysis</div> |
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">Made</div> |
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">Easy</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="2"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-blue-400">When to Use Excel</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-700 p-6 rounded-lg border-l-4 border-green-500"> |
|
|
<h3 class="text-xl font-bold mb-3 text-green-300"><i class="fas fa-check-circle mr-2"></i> Perfect For</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Financial calculations and budgeting</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Data organization and sorting</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Creating charts and visualizations</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Simple databases and lists</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Quick calculations and formulas</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-6 rounded-lg border-l-4 border-red-500"> |
|
|
<h3 class="text-xl font-bold mb-3 text-red-300"><i class="fas fa-times-circle mr-2"></i> Not Ideal For</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Large-scale database management</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Complex relational data</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Collaborative real-time editing</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> High-performance computing</li> |
|
|
<li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Advanced statistical analysis</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="3"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-blue-400">Excel Interface Breakdown</h2> |
|
|
<div class="bg-gray-900 p-6 rounded-lg border border-gray-700 mb-6"> |
|
|
<div class="flex flex-wrap gap-4 justify-center"> |
|
|
<div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="ribbon"> |
|
|
<i class="fas fa-bars mr-2"></i> Ribbon |
|
|
</div> |
|
|
<div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="formula-bar"> |
|
|
<i class="fas fa-square-root-alt mr-2"></i> Formula Bar |
|
|
</div> |
|
|
<div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="worksheet"> |
|
|
<i class="fas fa-table mr-2"></i> Worksheet |
|
|
</div> |
|
|
<div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="status-bar"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Status Bar |
|
|
</div> |
|
|
<div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="quick-access"> |
|
|
<i class="fas fa-bolt mr-2"></i> Quick Access |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700 relative min-h-64"> |
|
|
<div id="excel-interface-demo" class="relative"> |
|
|
|
|
|
<div id="ribbon" class="bg-blue-800 text-white p-2 mb-2 rounded-t-lg flex justify-between items-center"> |
|
|
<div class="flex space-x-4"> |
|
|
<span>Home</span> |
|
|
<span>Insert</span> |
|
|
<span>Page Layout</span> |
|
|
<span>Formulas</span> |
|
|
<span>Data</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="formula-bar" class="bg-gray-700 p-1 mb-2 flex items-center"> |
|
|
<span class="bg-gray-600 px-2 py-1 mr-2 rounded">A1</span> |
|
|
<div class="flex-1 bg-white text-black p-1 rounded">=SUM(B2:B5)</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="worksheet" class="grid grid-cols-8 gap-px bg-gray-600"> |
|
|
|
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">A</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">B</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">C</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">D</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">E</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">F</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">G</div> |
|
|
<div class="bg-blue-900 p-1 text-center font-bold text-xs">H</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-1 text-center border border-gray-600">1</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Sales</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Q1</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Q2</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Q3</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Q4</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Total</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">Avg</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-1 text-center border border-gray-600">2</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">North</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">$12,345</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">$15,678</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">$18,901</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">$21,234</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600 font-bold">=SUM(B2:E2)</div> |
|
|
<div class="bg-gray-700 p-1 border border-gray-600">=AVERAGE(B2:E2)</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="status-bar" class="bg-gray-700 p-1 mt-2 rounded-b-lg flex justify-between text-xs"> |
|
|
<div>Ready</div> |
|
|
<div class="flex space-x-4"> |
|
|
<span>Sum: $68,158.00</span> |
|
|
<span>Average: $17,039.50</span> |
|
|
<span>Count: 4</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="4"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-blue-400">Basic Navigation & Selection</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Selection Techniques</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Single Cell</div> |
|
|
<p>Click on any cell to select it</p> |
|
|
<div class="mt-2 bg-gray-800 p-2 rounded text-xs font-mono">A1</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Range of Cells</div> |
|
|
<p>Click and drag to select multiple cells</p> |
|
|
<div class="mt-2 bg-gray-800 p-2 rounded text-xs font-mono">A1:D10</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Entire Row/Column</div> |
|
|
<p>Click on row number or column letter</p> |
|
|
<div class="mt-2 bg-gray-800 p-2 rounded text-xs font-mono">1:1 (Row 1)<br>A:A (Column A)</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Keyboard Shortcuts</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Navigation</div> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div><span class="font-bold">Arrow keys:</span> Move cell</div> |
|
|
<div><span class="font-bold">Ctrl+Arrow:</span> Jump to edge</div> |
|
|
<div><span class="font-bold">Home:</span> Row start</div> |
|
|
<div><span class="font-bold">Ctrl+Home:</span> A1</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Selection</div> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div><span class="font-bold">Shift+Arrow:</span> Extend selection</div> |
|
|
<div><span class="font-bold">Ctrl+Shift+Arrow:</span> Select to edge</div> |
|
|
<div><span class="font-bold">Ctrl+A:</span> Select all</div> |
|
|
<div><span class="font-bold">Ctrl+Space:</span> Select column</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Special</div> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div><span class="font-bold">F2:</span> Edit cell</div> |
|
|
<div><span class="font-bold">Ctrl+Enter:</span> Fill selection</div> |
|
|
<div><span class="font-bold">Alt+Enter:</span> New line in cell</div> |
|
|
<div><span class="font-bold">Ctrl+D:</span> Fill down</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="5"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-blue-400">Essential Excel Formulas</h2> |
|
|
<div class="grid md:grid-cols-3 gap-4 mb-8"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-t-4 border-blue-500"> |
|
|
<div class="font-bold text-lg mb-2">SUM</div> |
|
|
<div class="text-sm mb-3">Adds all numbers in a range</div> |
|
|
<div class="bg-gray-800 p-2 rounded font-mono text-sm">=SUM(A1:A10)</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-t-4 border-green-500"> |
|
|
<div class="font-bold text-lg mb-2">AVERAGE</div> |
|
|
<div class="text-sm mb-3">Calculates the average</div> |
|
|
<div class="bg-gray-800 p-2 rounded font-mono text-sm">=AVERAGE(B2:B20)</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-t-4 border-yellow-500"> |
|
|
<div class="font-bold text-lg mb-2">IF</div> |
|
|
<div class="text-sm mb-3">Conditional logic</div> |
|
|
<div class="bg-gray-800 p-2 rounded font-mono text-sm">=IF(A1>100,"High","Low")</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-t-4 border-purple-500"> |
|
|
<div class="font-bold text-lg mb-2">VLOOKUP</div> |
|
|
<div class="text-sm mb-3">Vertical lookup</div> |
|
|
<div class="bg-gray-800 p-2 rounded font-mono text-sm">=VLOOKUP(A1,B:C,2,FALSE)</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-t-4 border-red-500"> |
|
|
<div class="font-bold text-lg mb-2">COUNTIF</div> |
|
|
<div class="text-sm mb-3">Conditional counting</div> |
|
|
<div class="bg-gray-800 p-2 rounded font-mono text-sm">=COUNTIF(A:A,">100")</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg border-t-4 border-pink-500"> |
|
|
<div class="font-bold text-lg mb-2">CONCATENATE</div> |
|
|
<div class="text-sm mb-3">Combine text</div> |
|
|
<div class="bg-gray-800 p-2 rounded font-mono text-sm">=CONCAT(A1," ",B1)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 p-6 rounded-lg border border-gray-700"> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Formula Demo</h3> |
|
|
<div class="grid grid-cols-5 gap-1 mb-4"> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">A</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">B</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">C</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">D</div> |
|
|
<div class="bg-blue-900 p-2 text-center font-bold text-xs">E</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-5 gap-1"> |
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">1</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Item</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Price</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Qty</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Total</div> |
|
|
|
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">2</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Widget</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">$19.99</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">5</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600 font-bold">=B2*C2</div> |
|
|
|
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">3</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Gadget</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">$29.99</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">3</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600 font-bold">=B3*C3</div> |
|
|
|
|
|
<div class="bg-gray-700 p-2 text-center border border-gray-600">4</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">Total</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600"></div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600">=SUM(C2:C3)</div> |
|
|
<div class="bg-gray-700 p-2 border border-gray-600 font-bold">=SUM(D2:D3)</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="6"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-blue-400">Data Visualization</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Chart Types</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Column/Bar Charts</div> |
|
|
<p>Compare values across categories</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Line Charts</div> |
|
|
<p>Show trends over time</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Pie Charts</div> |
|
|
<p>Display parts of a whole</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Scatter Plots</div> |
|
|
<p>Show relationships between variables</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Conditional Formatting</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Data Bars</div> |
|
|
<p>Visualize values as proportional bars</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Color Scales</div> |
|
|
<p>Gradient colors based on value</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Icon Sets</div> |
|
|
<p>Use icons to represent data ranges</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="font-bold text-blue-300 mb-2">Custom Rules</div> |
|
|
<p>Highlight cells based on your criteria</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 p-6 rounded-lg border border-gray-700"> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Chart Example</h3> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-6 md:mb-0"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="h-64 flex items-end space-x-4"> |
|
|
<div class="flex-1 bg-blue-500 h-3/4 rounded-t flex items-end justify-center"> |
|
|
<div class="text-xs -mb-6 transform rotate-90 origin-left">Q1 $12,345</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-green-500 h-full rounded-t flex items-end justify-center"> |
|
|
<div class="text-xs -mb-6 transform rotate-90 origin-left">Q2 $15,678</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-yellow-500 h-5/6 rounded-t flex items-end justify-center"> |
|
|
<div class="text-xs -mb-6 transform rotate-90 origin-left">Q3 $18,901</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-red-500 h-4/5 rounded-t flex items-end justify-center"> |
|
|
<div class="text-xs -mb-6 transform rotate-90 origin-left">Q4 $21,234</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 text-xs"> |
|
|
<span>Q1</span> |
|
|
<span>Q2</span> |
|
|
<span>Q3</span> |
|
|
<span>Q4</span> |
|
|
</div> |
|
|
<div class="text-center mt-2 font-bold">Quarterly Sales</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="h-64 flex items-center justify-center"> |
|
|
<div class="relative w-48 h-48"> |
|
|
<div class="absolute inset-0 rounded-full border-8 border-blue-500" style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%)"></div> |
|
|
<div class="absolute inset-0 rounded-full border-8 border-green-500" style="clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 0% 100%, 50% 50%)"></div> |
|
|
<div class="absolute inset-0 rounded-full border-8 border-yellow-500" style="clip-path: polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 50% 50%)"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-4 mt-2 text-xs"> |
|
|
<div class="flex items-center"><div class="w-3 h-3 bg-blue-500 mr-1"></div> Q1</div> |
|
|
<div class="flex items-center"><div class="w-3 h-3 bg-green-500 mr-1"></div> Q2</div> |
|
|
<div class="flex items-center"><div class="w-3 h-3 bg-yellow-500 mr-1"></div> Q3</div> |
|
|
</div> |
|
|
<div class="text-center mt-1 font-bold">Sales Distribution</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="7"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-blue-400">Advanced Excel Features</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">PivotTables</h3> |
|
|
<div class="bg-gray-700 p-4 rounded-lg mb-6"> |
|
|
<p class="mb-3">PivotTables summarize large datasets quickly and allow for interactive data exploration.</p> |
|
|
<div class="bg-gray-800 p-3 rounded"> |
|
|
<div class="text-sm font-bold mb-1">How to create:</div> |
|
|
<ol class="list-decimal list-inside text-sm space-y-1"> |
|
|
<li>Select your data range</li> |
|
|
<li>Go to Insert > PivotTable</li> |
|
|
<li>Choose where to place it</li> |
|
|
<li>Drag fields to areas</li> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Data Validation</h3> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<p class="mb-3">Control what data can be entered into cells to prevent errors.</p> |
|
|
<div class="bg-gray-800 p-3 rounded"> |
|
|
<div class="text-sm font-bold mb-1">Options include:</div> |
|
|
<ul class="list-disc list-inside text-sm space-y-1"> |
|
|
<li>Whole numbers within a range</li> |
|
|
<li>Decimal numbers</li> |
|
|
<li>List of allowed values</li> |
|
|
<li>Custom formulas</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Macros & VBA</h3> |
|
|
<div class="bg-gray-700 p-4 rounded-lg mb-6"> |
|
|
<p class="mb-3">Automate repetitive tasks by recording macros or writing VBA code.</p> |
|
|
<div class="bg-gray-800 p-3 rounded"> |
|
|
<div class="text-sm font-bold mb-1">Example Macro Uses:</div> |
|
|
<ul class="list-disc list-inside text-sm space-y-1"> |
|
|
<li>Format reports automatically</li> |
|
|
<li>Import and clean data</li> |
|
|
<li>Create custom functions</li> |
|
|
<li>Build user forms</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-xl font-bold mb-4 text-green-300">Power Query</h3> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<p class="mb-3">Import, transform, and combine data from multiple sources with ease.</p> |
|
|
<div class="bg-gray-800 p-3 rounded"> |
|
|
<div class="text-sm font-bold mb-1">Key Features:</div> |
|
|
<ul class="list-disc list-inside text-sm space-y-1"> |
|
|
<li>Connect to databases, web, files</li> |
|
|
<li>Clean and reshape data</li> |
|
|
<li>Create reusable queries</li> |
|
|
<li>Automatically refresh</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide" data-slide="8"> |
|
|
<div class="text-center py-12"> |
|
|
<i class="fas fa-file-excel text-8xl text-green-500 excel-icon mb-6"></i> |
|
|
<h2 class="text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400"> |
|
|
Excel Mastery Achieved! |
|
|
</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
You've now learned the essential skills to work efficiently with Excel. |
|
|
Remember, practice is key to becoming truly proficient! |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-10"> |
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<div class="text-4xl text-blue-400 mb-3"> |
|
|
<i class="fas fa-book"></i> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Keep Learning</h3> |
|
|
<p class="text-sm">Explore advanced functions and features as you grow more comfortable.</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<div class="text-4xl text-green-400 mb-3"> |
|
|
<i class="fas fa-keyboard"></i> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Use Shortcuts</h3> |
|
|
<p class="text-sm">Keyboard shortcuts will dramatically increase your productivity.</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<div class="text-4xl text-yellow-400 mb-3"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Apply Knowledge</h3> |
|
|
<p class="text-sm">Start using Excel for your own projects to reinforce what you've learned.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg max-w-2xl mx-auto border border-gray-700"> |
|
|
<h3 class="font-bold text-lg mb-3">Next Steps</h3> |
|
|
<ul class="space-y-2 text-left"> |
|
|
<li class="flex items-start"><i class="fas fa-robot mt-1 mr-2 text-blue-300"></i> Try our AI-powered Excel assistant for personalized tips</li> |
|
|
<li class="flex items-start"><i class="fas fa-certificate mt-1 mr-2 text-green-300"></i> Consider Microsoft Office certification</li> |
|
|
<li class="flex items-start"><i class="fas fa-users mt-1 mr-2 text-yellow-300"></i> Join Excel communities to learn from others</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const slides = document.querySelectorAll('.slide'); |
|
|
const prevBtn = document.getElementById('prev-btn'); |
|
|
const nextBtn = document.getElementById('next-btn'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
let currentSlide = 0; |
|
|
const totalSlides = slides.length; |
|
|
|
|
|
|
|
|
slides[currentSlide].classList.add('active'); |
|
|
updateProgress(); |
|
|
|
|
|
|
|
|
nextBtn.addEventListener('click', function() { |
|
|
if (currentSlide < totalSlides - 1) { |
|
|
slides[currentSlide].classList.remove('active'); |
|
|
currentSlide++; |
|
|
slides[currentSlide].classList.add('active'); |
|
|
updateProgress(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
prevBtn.addEventListener('click', function() { |
|
|
if (currentSlide > 0) { |
|
|
slides[currentSlide].classList.remove('active'); |
|
|
currentSlide--; |
|
|
slides[currentSlide].classList.add('active'); |
|
|
updateProgress(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateProgress() { |
|
|
const progress = ((currentSlide + 1) / totalSlides) * 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
|
|
|
|
|
|
prevBtn.disabled = currentSlide === 0; |
|
|
nextBtn.disabled = currentSlide === totalSlides - 1; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'ArrowRight') { |
|
|
nextBtn.click(); |
|
|
} else if (e.key === 'ArrowLeft') { |
|
|
prevBtn.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const interfaceItems = document.querySelectorAll('.interface-item'); |
|
|
interfaceItems.forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
const target = this.getAttribute('data-highlight'); |
|
|
const element = document.getElementById(target); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.cell-highlight').forEach(el => { |
|
|
el.classList.remove('cell-highlight'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (element) { |
|
|
element.classList.add('cell-highlight'); |
|
|
|
|
|
|
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const eyes = document.querySelectorAll('.robot-eye'); |
|
|
eyes.forEach(eye => { |
|
|
eye.style.boxShadow = `0 0 ${5 + Math.random() * 10}px ${3 + Math.random() * 7}px rgba(0, ${150 + Math.random() * 105}, 255, 0.7)`; |
|
|
}); |
|
|
}, 1000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boody123/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
