generated from technolyceum/g11-m3
1270 lines
50 KiB
HTML
1270 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20260115_5c6447%20(1).html -->
|
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Building a Social Media Platform with Tailwind CSS</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: #f8fafc;
|
|
color: #1a202c;
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.presentation-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.slide {
|
|
display: none;
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 40px;
|
|
margin: 20px auto;
|
|
max-width: 1000px;
|
|
width: 90%;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.slide.active {
|
|
display: block;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
color: #2d3748;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
color: #2d3748;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
color: #4f46e5;
|
|
margin-top: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
color: #4a5568;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
ul, ol {
|
|
margin-left: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.code-block {
|
|
background: #1a202c;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #4f46e5;
|
|
font-family: 'Courier New', monospace;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-block code {
|
|
color: #e2e8f0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.code-to-type {
|
|
background-color: #f7fafc;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
color: #2d3748;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.instruction-box {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #4f46e5;
|
|
}
|
|
|
|
.instruction-box h4 {
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.test-box {
|
|
background: #f0fff4;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #48bb78;
|
|
}
|
|
|
|
.test-box h4 {
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.test-box h4::before {
|
|
content: "💻";
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.emoji-instructions {
|
|
background: #fef3c7;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #f59e0b;
|
|
}
|
|
|
|
.quiz-question {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.quiz-options {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.quiz-option {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 12px 15px;
|
|
margin: 10px 0;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid #e2e8f0;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.quiz-option:hover {
|
|
background: #edf2f7;
|
|
border-color: #cbd5e0;
|
|
}
|
|
|
|
.quiz-option.selected {
|
|
background: #e6fffa;
|
|
border-color: #38b2ac;
|
|
}
|
|
|
|
.quiz-option.correct {
|
|
background: #f0fff4;
|
|
border-color: #48bb78;
|
|
}
|
|
|
|
.quiz-option.incorrect {
|
|
background: #fff5f5;
|
|
border-color: #fc8181;
|
|
}
|
|
|
|
.quiz-feedback {
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin-top: 15px;
|
|
display: none;
|
|
background: #f7fafc;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.quiz-feedback.correct {
|
|
border-left-color: #48bb78;
|
|
display: none;
|
|
}
|
|
|
|
.quiz-feedback.incorrect {
|
|
border-left-color: #fc8181;
|
|
display: none;
|
|
}
|
|
|
|
.challenge-item {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.challenge-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 15px;
|
|
border-radius: 4px;
|
|
border: 2px solid #4f46e5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background: white;
|
|
}
|
|
|
|
.challenge-checkbox.checked {
|
|
background: #4f46e5;
|
|
}
|
|
|
|
.challenge-checkbox.checked::after {
|
|
content: "✓";
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.nav-button {
|
|
background: white;
|
|
color: #4f46e5;
|
|
border: 1px solid #4f46e5;
|
|
padding: 12px 25px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
background: #4f46e5;
|
|
color: white;
|
|
}
|
|
|
|
.nav-button:disabled {
|
|
background: #e2e8f0;
|
|
border-color: #cbd5e0;
|
|
color: #a0aec0;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slide-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.indicator-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #cbd5e0;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.indicator-dot.active {
|
|
background: #4f46e5;
|
|
}
|
|
|
|
.slide-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.slide-number {
|
|
color: #718096;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.project-preview {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.big-emoji {
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.focus-point {
|
|
background: #e6fffa;
|
|
border-left: 4px solid #38b2ac;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.terminal {
|
|
background: #1a202c;
|
|
color: #48bb78;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 15px 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.terminal-command {
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.terminal-comment {
|
|
color: #718096;
|
|
}
|
|
|
|
.before-after {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.before, .after {
|
|
flex: 1;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.before {
|
|
background: #fff5f5;
|
|
border: 1px solid #fed7d7;
|
|
}
|
|
|
|
.after {
|
|
background: #f0fff4;
|
|
border: 1px solid #c6f6d5;
|
|
}
|
|
|
|
.code-comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.code-before, .code-after {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-before {
|
|
border: 1px solid #fed7d7;
|
|
}
|
|
|
|
.code-after {
|
|
border: 1px solid #c6f6d5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slide {
|
|
padding: 25px;
|
|
width: 95%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.big-emoji {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.before-after {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.code-comparison {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="presentation-container">
|
|
<!-- Slide 0: Title Slide -->
|
|
<div class="slide" id="slide0">
|
|
<div class="slide-header">
|
|
<h1>Build a Social Media Platform with Tailwind CSS</h1>
|
|
<div class="slide-number">Slide 1 of 15</div>
|
|
</div>
|
|
|
|
<div class="project-preview">
|
|
<div class="big-emoji">🌐</div>
|
|
<h2>Maxy - Modern Social Platform</h2>
|
|
<p>Transform basic HTML into a beautiful animated social media website</p>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>What You'll Build</h4>
|
|
<p>A responsive social media platform with:</p>
|
|
<ul>
|
|
<li>Animated navigation with floating effects</li>
|
|
<li>Responsive three-column layout</li>
|
|
<li>Interactive comment threads</li>
|
|
<li>Custom CSS animations</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 1: What is Tailwind CSS? -->
|
|
<div class="slide" id="slide1">
|
|
<div class="slide-header">
|
|
<h2>What is Tailwind CSS?</h2>
|
|
<div class="slide-number">Slide 2 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🎨</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Tailwind CSS is a Utility-First Framework</h4>
|
|
<p>Instead of writing traditional CSS in separate files, you use utility classes directly in your HTML.</p>
|
|
</div>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h4>Traditional CSS Approach:</h4>
|
|
<div class="code-to-type">/* In a CSS file */
|
|
.button {
|
|
background: blue;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
}</div>
|
|
<div class="code-to-type"><!-- In HTML -->
|
|
<button class="button">Click me</button></div>
|
|
</div>
|
|
<div class="after">
|
|
<h4>Tailwind CSS Approach:</h4>
|
|
<div class="code-to-type"><!-- Everything in HTML -->
|
|
<button class="bg-blue-500 text-white px-5 py-2 rounded-lg">
|
|
Click me
|
|
</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Benefits of Tailwind CSS:</h4>
|
|
<ul>
|
|
<li><strong>Faster development</strong> - No context switching between files</li>
|
|
<li><strong>Consistent design</strong> - Built-in spacing and color systems</li>
|
|
<li><strong>Highly customizable</strong> - Configure your design system</li>
|
|
<li><strong>Responsive by default</strong> - Mobile-first approach</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Setup Instructions -->
|
|
<div class="slide" id="slide2">
|
|
<div class="slide-header">
|
|
<h2>Step-by-Step Setup Guide</h2>
|
|
<div class="slide-number">Slide 3 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🔧</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before We Start - Install Git</h4>
|
|
<p>We'll use Git to download our starter template. Follow these steps:</p>
|
|
</div>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h4>For Windows:</h4>
|
|
<ol>
|
|
<li>Go to <a href="https://git-scm.com/download/win" target="_blank">git-scm.com/download/win</a></li>
|
|
<li>Download and run the installer</li>
|
|
<li>Click "Next" through all the options (defaults are fine)</li>
|
|
<li>When finished, open PowerShell</li>
|
|
</ol>
|
|
</div>
|
|
<div class="after">
|
|
<h4>For Mac:</h4>
|
|
<ol>
|
|
<li>Open Terminal (search in Spotlight)</li>
|
|
<li>Type: <span class="code-to-type">git --version</span></li>
|
|
<li>If Git is not installed, it will prompt you to install it</li>
|
|
<li>Follow the installation instructions</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Let's Test Git Installation:</h4>
|
|
<div class="terminal">
|
|
<span class="terminal-command">git --version</span><br>
|
|
<span class="terminal-comment"># If installed correctly, you'll see something like: git version 2.45.0</span>
|
|
</div>
|
|
<p><strong>Important:</strong> If you just installed Git on Windows, close and reopen PowerShell before continuing.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Create Project Folder -->
|
|
<div class="slide" id="slide3">
|
|
<div class="slide-header">
|
|
<h2>Create Your Project Folder</h2>
|
|
<div class="slide-number">Slide 4 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📁</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Step 1: Open PowerShell/Terminal</h4>
|
|
<p>Let's create a folder for our Tailwind CSS project:</p>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># First, go to your Documents folder</span><br>
|
|
<span class="terminal-command">cd documents</span><br><br>
|
|
|
|
<span class="terminal-comment"># Create a new folder with YOUR name (replace with your actual name)</span><br>
|
|
<span class="terminal-command">mkdir yourname-tailwind-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># Go into your new folder</span><br>
|
|
<span class="terminal-command">cd yourname-tailwind-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># Check where you are</span><br>
|
|
<span class="terminal-command">pwd</span><br>
|
|
<span class="terminal-comment"># (Windows: use 'dir' to see files)</span>
|
|
</div>
|
|
|
|
<div class="focus-point">
|
|
<p>Always use <strong>YOUR ACTUAL NAME</strong> in the folder name! This helps your teacher identify your work.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Gitea Setup -->
|
|
<div class="slide" id="slide4">
|
|
<div class="slide-header">
|
|
<h2>Get the Starter Template</h2>
|
|
<div class="slide-number">Slide 5 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🚀</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Step 2: Go to Gitea</h4>
|
|
<p>Now we'll get our starter code from Gitea:</p>
|
|
<ol>
|
|
<li>Open your web browser</li>
|
|
<li>Go to: <a href="https://gitea.techshare.cc/technolyceum/g11-m3" target="_blank">https://gitea.techshare.cc/technolyceum/g11-m3</a></li>
|
|
<li><strong>Login with your username</strong> (ask your teacher if you don't have one)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Step 3: Use the Template</h4>
|
|
<ol>
|
|
<li>Click "Use this template" button</li>
|
|
<li>Name it: <span class="code-to-type">yourname-tailwind-project</span></li>
|
|
<li>Choose <strong>"Tailwind CSS Project"</strong> from the dropdown</li>
|
|
<li>Click "Create repository"</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="focus-point">
|
|
<p>Make sure to choose the <strong>"Tailwind CSS Project"</strong> template, not the Bulma one!</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: Clone the Repository -->
|
|
<div class="slide" id="slide5">
|
|
<div class="slide-header">
|
|
<h2>Clone Your Template</h2>
|
|
<div class="slide-number">Slide 6 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📋</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Step 4: Copy the Clone URL</h4>
|
|
<p>After creating your repository:</p>
|
|
<ol>
|
|
<li>Look for a green button that says "Code" or "Clone"</li>
|
|
<li>Click it and copy the URL (should look like: <span class="code-to-type">https://gitea.techshare.cc/yourname/yourname-tailwind-project.git</span>)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Step 5: Go Back to PowerShell/Terminal</h4>
|
|
<p>Make sure you're in your project folder, then:</p>
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># Clone your repository (replace URL with your actual URL)</span><br>
|
|
<span class="terminal-command">git clone https://gitea.techshare.cc/yourname/yourname-tailwind-project.git</span><br><br>
|
|
|
|
<span class="terminal-comment"># Go into the cloned folder</span><br>
|
|
<span class="terminal-command">cd yourname-tailwind-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># See what files you have</span><br>
|
|
<span class="terminal-command">ls</span><br>
|
|
<span class="terminal-comment"># (Windows: use 'dir' instead of 'ls')</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: Understanding the Files -->
|
|
<div class="slide" id="slide6">
|
|
<div class="slide-header">
|
|
<h2>Understanding Your Project Files</h2>
|
|
<div class="slide-number">Slide 7 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📄</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Two Key HTML Files:</h4>
|
|
</div>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h4>starter_index.html</h4>
|
|
<p><strong>The "Before" file</strong></p>
|
|
<ul>
|
|
<li>Basic HTML structure only</li>
|
|
<li>No styling classes</li>
|
|
<li>Plain text and elements</li>
|
|
<li>Think of this as the "skeleton"</li>
|
|
</ul>
|
|
</div>
|
|
<div class="after">
|
|
<h4>index.html</h4>
|
|
<p><strong>The "After" file</strong></p>
|
|
<ul>
|
|
<li>Fully styled with Tailwind CSS</li>
|
|
<li>Beautiful animations</li>
|
|
<li>Responsive design</li>
|
|
<li>Interactive elements</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Open Both Files:</h4>
|
|
<p>Open both HTML files in your text editor. You'll see:</p>
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># starter_index.html has NO Tailwind classes</span><br>
|
|
<span class="terminal-command"><nav><br> <div>...</div><br></nav></span><br><br>
|
|
|
|
<span class="terminal-comment"># index.html has MANY Tailwind classes</span><br>
|
|
<span class="terminal-command"><nav class="bg-white shadow-md fixed top-0 left-0 w-full z-10"><br> ...<br></nav></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Add Tailwind CSS -->
|
|
<div class="slide active" id="slide7">
|
|
<div class="slide-header">
|
|
<h2>Step 1: Add Tailwind CSS to Your Project</h2>
|
|
<div class="slide-number">Slide 8 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🔗</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Using CDN (Content Delivery Network)</h4>
|
|
<p>Open starter_index.html and add these lines in the <head> section:</p>
|
|
</div>
|
|
|
|
<div class="code-comparison">
|
|
<div class="code-before">
|
|
<h4>Before (starter_index.html):</h4>
|
|
<code><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Maxy - Social Platform</title><br></head></code>
|
|
</div>
|
|
<div class="code-after">
|
|
<h4>After (add these lines):</h4>
|
|
<code><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Maxy - Social Platform</title><br> <br> <strong><!-- TAILWIND CSS CDN --></strong><br> <strong><script src="https://cdn.tailwindcss.com"></script></strong><br></head></code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>What is a CDN?</h4>
|
|
<p>A CDN (Content Delivery Network) hosts files and delivers them quickly from locations near users.</p>
|
|
<p><strong>Advantages:</strong></p>
|
|
<ul>
|
|
<li>No need to download files</li>
|
|
<li>Fast loading from local servers</li>
|
|
<li>Always get the latest version</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: Transform Navigation -->
|
|
<div class="slide" id="slide8">
|
|
<div class="slide-header">
|
|
<h2>Step 2: Transform the Navigation</h2>
|
|
<div class="slide-number">Slide 9 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🧭</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Basic Navigation</h4>
|
|
<p>Your starter navigation looks like this:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><nav><br> <div><br> <div><br> <a href="#"><br> <div>M</div><br> <span>Maxy</span><br> </a><br> </div><br> </div><br></nav></code>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Tailwind Styled Navigation</h4>
|
|
<p>Replace your <nav> with this (copy from index.html):</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><nav class="bg-white shadow-md fixed top-0 left-0 w-full z-10"><br> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><br> <div class="flex justify-between h-16"><br> <div class="flex items-center"><br> <a href="#" class="flex items-center"><br> <div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float"><br> M<br> </div><br> <span class="text-xl font-bold text-gray-800">Maxy</span><br> </a><br> </div><br> <!-- Mobile menu and desktop navigation --><br> </div><br> </div><br></nav></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Key Tailwind Classes Explained:</h4>
|
|
<ul>
|
|
<li><span class="code-to-type">bg-white</span> - White background</li>
|
|
<li><span class="code-to-type">shadow-md</span> - Medium shadow for depth</li>
|
|
<li><span class="code-to-type">fixed top-0 left-0 w-full</span> - Sticks to top of screen</li>
|
|
<li><span class="code-to-type">flex justify-between</span> - Space items at edges</li>
|
|
<li><span class="code-to-type">animate-float</span> - Custom floating animation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 9: Create Responsive Layout -->
|
|
<div class="slide" id="slide9">
|
|
<div class="slide-header">
|
|
<h2>Step 3: Create Responsive Layout</h2>
|
|
<div class="slide-number">Slide 10 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📱</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Basic Layout</h4>
|
|
<p>Simple section without responsive classes:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><section><br> <div><br> <div><br> <!-- Left Sidebar --><br> <div>...</div><br> </div><br> </div><br></section></code>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Tailwind Responsive Layout</h4>
|
|
<p>Replace with this responsive structure:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><main class="pt-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"><br> <div class="flex flex-col lg:flex-row gap-6"><br> <!-- Left Sidebar --><br> <div class="lg:w-1/4 w-full"><br> <!-- Profile Card --><br> </div><br> <br> <!-- Main Feed --><br> <div class="lg:w-3/4 w-full"><br> <!-- Posts --><br> </div><br> </div><br></main></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Responsive Classes Explained:</h4>
|
|
<ul>
|
|
<li><span class="code-to-type">flex flex-col lg:flex-row</span> - Stack vertically on small screens, horizontal on large</li>
|
|
<li><span class="code-to-type">lg:w-1/4</span> - Takes 25% width on large screens</li>
|
|
<li><span class="code-to-type">lg:w-3/4</span> - Takes 75% width on large screens</li>
|
|
<li><span class="code-to-type">w-full</span> - Full width on small screens</li>
|
|
<li><span class="code-to-type">gap-6</span> - Space between elements</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: Style Cards -->
|
|
<div class="slide" id="slide10">
|
|
<div class="slide-header">
|
|
<h2>Step 4: Style Profile Cards</h2>
|
|
<div class="slide-number">Slide 11 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🎴</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Plain Profile Card</h4>
|
|
<p>Basic div structure without styling:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><div><br> <div><br> <div>JS</div><br> <h2>John Smith</h2><br> <p>@johnsmith</p><br> </div><br></div></code>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Beautiful Tailwind Card</h4>
|
|
<p>Replace with this styled card (from index.html):</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><div class="bg-white rounded-xl shadow p-5 mb-6 animate-fadeIn"><br> <div class="flex flex-col items-center"><br> <div class="bg-indigo-100 text-indigo-800 font-bold text-xl w-24 h-24 rounded-full flex items-center justify-center mb-4 animate-float"><br> JS<br> </div><br> <h2 class="text-xl font-bold text-gray-800">John Smith</h2><br> <p class="text-gray-500">@johnsmith</p><br> <br> <div class="flex justify-between w-full mt-6"><br> <div class="text-center"><br> <p class="text-gray-600">Posts</p><br> <p class="font-bold">245</p><br> </div><br> <!-- More stats --><br> </div><br> </div><br></div></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Card Styling Explained:</h4>
|
|
<ul>
|
|
<li><span class="code-to-type">rounded-xl</span> - Extra large rounded corners</li>
|
|
<li><span class="code-to-type">shadow</span> - Subtle shadow effect</li>
|
|
<li><span class="code-to-type">animate-fadeIn</span> - Custom fade-in animation</li>
|
|
<li><span class="code-to-type">rounded-full</span> - Perfect circle for avatar</li>
|
|
<li><span class="code-to-type">flex justify-between</span> - Space items evenly</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 11: Add Custom Animations -->
|
|
<div class="slide" id="slide11">
|
|
<div class="slide-header">
|
|
<h2>Step 5: Add Custom Animations</h2>
|
|
<div class="slide-number">Slide 12 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">✨</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Custom CSS Animations</h4>
|
|
<p>Add this <style> section inside your <head> (from index.html):</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><style><br> .comment-reply { transition: all 0.3s ease; }<br> .comment-reply:hover { margin-left: 10px; }<br> <br> /* Animation keyframes */<br> .animate-fadeIn {<br> animation: fadeIn 1s ease-out;<br> }<br> <br> .animate-slideUp {<br> animation: slideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1);<br> }<br> <br> .animate-float {<br> animation: float 3s ease-in-out infinite;<br> }<br> <br> .animate-pulse-slow {<br> animation: pulse-slow 1.5s ease-in-out infinite alternate;<br> }<br> <br> @keyframes fadeIn {<br> 0% { opacity: 0; transform: scale(0.8); }<br> 100% { opacity: 1; transform: scale(1); }<br> }<br> <br> @keyframes slideUp {<br> 0% { <br> opacity: 0;<br> transform: translateY(50px) rotate(5deg);<br> }<br> 100% { <br> opacity: 1;<br> transform: translateY(0) rotate(0);<br> }<br> }<br> <br> @keyframes float {<br> 0% { transform: translateY(0px); }<br> 50% { transform: translateY(-10px); }<br> 100% { transform: translateY(0px); }<br> }<br> <br> @keyframes pulse-slow {<br> 0% {<br> transform: scale(1);<br> box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);<br> }<br> 100% {<br> transform: scale(1.1);<br> box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);<br> }<br> }<br></style></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Animations Explained:</h4>
|
|
<ul>
|
|
<li><strong>Fade In:</strong> Elements appear smoothly</li>
|
|
<li><strong>Slide Up:</strong> Elements slide up with rotation</li>
|
|
<li><strong>Float:</strong> Gentle up-down movement</li>
|
|
<li><strong>Pulse Slow:</strong> Gentle pulsing for buttons</li>
|
|
</ul>
|
|
<p>Apply animations with classes: <span class="code-to-type">animate-fadeIn</span>, <span class="code-to-type">animate-slideUp</span>, etc.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 12: Style Buttons -->
|
|
<div class="slide" id="slide12">
|
|
<div class="slide-header">
|
|
<h2>Step 6: Style Buttons and Interactive Elements</h2>
|
|
<div class="slide-number">Slide 13 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🔘</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Plain Button</h4>
|
|
<div class="code-to-type"><button>Message</button></div>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Tailwind Styled Button</h4>
|
|
<p>Beautiful animated button (from index.html):</p>
|
|
<div class="code-to-type"><button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg animate-pulse-slow">Message</button></div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Button Classes Explained:</h4>
|
|
<ul>
|
|
<li><span class="code-to-type">bg-indigo-600</span> - Indigo background color</li>
|
|
<li><span class="code-to-type">hover:bg-indigo-700</span> - Darker on hover</li>
|
|
<li><span class="code-to-type">text-white</span> - White text</li>
|
|
<li><span class="code-to-type">px-4 py-2</span> - Horizontal and vertical padding</li>
|
|
<li><span class="code-to-type">rounded-lg</span> - Large rounded corners</li>
|
|
<li><span class="code-to-type">animate-pulse-slow</span> - Gentle pulsing animation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="emoji-instructions">
|
|
<h4>Try Different Button Styles:</h4>
|
|
<p>Tailwind has many color variants:</p>
|
|
<ul>
|
|
<li><span class="code-to-type">bg-blue-500 hover:bg-blue-600</span> - Blue button</li>
|
|
<li><span class="code-to-type">bg-green-500 hover:bg-green-600</span> - Green button</li>
|
|
<li><span class="code-to-type">bg-red-500 hover:bg-red-600</span> - Red button</li>
|
|
<li><span class="code-to-type">rounded-full</span> - Fully rounded (pill shape)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 13: Save and Push -->
|
|
<div class="slide" id="slide13">
|
|
<div class="slide-header">
|
|
<h2>Step 7: Save Your Work to Gitea</h2>
|
|
<div class="slide-number">Slide 14 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">💾</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Once You're Done Customizing</h4>
|
|
<p>Go back to PowerShell/Terminal and save your work:</p>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># Make sure you're in your project folder</span><br>
|
|
<span class="terminal-command">cd yourname-tailwind-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># Check what files you changed</span><br>
|
|
<span class="terminal-command">git status</span><br><br>
|
|
|
|
<span class="terminal-comment"># Add all your changes</span><br>
|
|
<span class="terminal-command">git add .</span><br><br>
|
|
|
|
<span class="terminal-comment"># Commit with a message (describe what you did)</span><br>
|
|
<span class="terminal-command">git commit -m "Added Tailwind CSS and styled the navigation"</span><br><br>
|
|
|
|
<span class="terminal-comment"># Push to Gitea</span><br>
|
|
<span class="terminal-command">git push origin main</span>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Check Your Work on Gitea</h4>
|
|
<p>Go back to your browser and refresh your Gitea repository page. You should see your updated files!</p>
|
|
<p><strong>Remember:</strong> Your teacher can see your beautiful social media platform on Gitea.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 14: Challenges -->
|
|
<div class="slide" id="slide14">
|
|
<div class="slide-header">
|
|
<h2>Your Challenges</h2>
|
|
<div class="slide-number">Slide 15 of 15</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🏆</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Customize Your Platform</h4>
|
|
<p>Now that you have the basics, make it your own!</p>
|
|
</div>
|
|
|
|
<div id="challengeList">
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Change the color scheme from indigo to blue, green, or purple</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Add a dark mode toggle button</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Create custom animations for hover effects</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Add a notification badge with a red dot</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Make the mobile menu actually work with JavaScript</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="focus-point">
|
|
<p><strong>Remember to git add, git commit, and git push after each change!</strong></p>
|
|
<p>This saves your work and lets your teacher see your progress. Every time you make a change:</p>
|
|
<div class="code-to-type">git add .<br>git commit -m "Description of what you changed"<br>git push origin main</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide Indicator -->
|
|
<div class="slide-indicator">
|
|
<div class="indicator-dot" onclick="goToSlide(0)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(1)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(2)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(3)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(4)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(5)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(6)"></div>
|
|
<div class="indicator-dot active" onclick="goToSlide(7)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(8)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(9)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(10)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(11)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(12)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(13)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(14)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Presentation state
|
|
let currentSlide = 0;
|
|
const totalSlides = 15;
|
|
|
|
// Initialize presentation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateSlideNavigation();
|
|
});
|
|
|
|
// Change slide
|
|
function changeSlide(direction) {
|
|
const newSlide = currentSlide + direction;
|
|
|
|
if (newSlide >= 0 && newSlide < totalSlides) {
|
|
// Hide current slide
|
|
document.getElementById(`slide${currentSlide}`).classList.remove('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.remove('active');
|
|
|
|
// Show new slide
|
|
currentSlide = newSlide;
|
|
document.getElementById(`slide${currentSlide}`).classList.add('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.add('active');
|
|
|
|
// Update navigation buttons
|
|
updateSlideNavigation();
|
|
|
|
// Update slide numbers
|
|
updateSlideNumbers();
|
|
}
|
|
}
|
|
|
|
// Go to specific slide
|
|
function goToSlide(slideIndex) {
|
|
if (slideIndex >= 0 && slideIndex < totalSlides) {
|
|
// Hide current slide
|
|
document.getElementById(`slide${currentSlide}`).classList.remove('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.remove('active');
|
|
|
|
// Show new slide
|
|
currentSlide = slideIndex;
|
|
document.getElementById(`slide${currentSlide}`).classList.add('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.add('active');
|
|
|
|
// Update navigation buttons
|
|
updateSlideNavigation();
|
|
|
|
// Update slide numbers
|
|
updateSlideNumbers();
|
|
}
|
|
}
|
|
|
|
// Update navigation buttons
|
|
function updateSlideNavigation() {
|
|
const prevButtons = document.querySelectorAll('.nav-button');
|
|
prevButtons.forEach(button => {
|
|
if (button.textContent.includes('Previous')) {
|
|
button.disabled = currentSlide === 0;
|
|
} else if (button.textContent.includes('Next')) {
|
|
button.disabled = currentSlide === totalSlides - 1;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update slide numbers
|
|
function updateSlideNumbers() {
|
|
const slideNumbers = document.querySelectorAll('.slide-number');
|
|
slideNumbers.forEach((number, index) => {
|
|
if (index === currentSlide) {
|
|
number.textContent = `Slide ${currentSlide + 1} of ${totalSlides}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Challenge checklist
|
|
function toggleChallenge(checkbox) {
|
|
checkbox.classList.toggle('checked');
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'ArrowRight' || event.key === ' ') {
|
|
changeSlide(1);
|
|
} else if (event.key === 'ArrowLeft') {
|
|
changeSlide(-1);
|
|
} else if (event.key >= '1' && event.key <= '9') {
|
|
const slideNum = parseInt(event.key) - 1;
|
|
if (slideNum < totalSlides) {
|
|
goToSlide(slideNum);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body></html> |