1070 lines
36 KiB
HTML
1070 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260205_164e30.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>School Scheduling System: AI-Enabled Database Upgrade</title>
|
||
<style>
|
||
/* === MINIMALIST PROFESSIONAL STYLES === */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
color: #1a1a1a;
|
||
line-height: 1.5;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
background: white;
|
||
}
|
||
|
||
.presentation-container {
|
||
max-width: 900px;
|
||
height: 100vh;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 30px;
|
||
}
|
||
|
||
.slide {
|
||
display: none;
|
||
flex: 1;
|
||
padding: 40px 0;
|
||
background: white;
|
||
overflow-y: auto;
|
||
max-height: calc(100vh - 100px);
|
||
}
|
||
|
||
.active {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* === TITLE SLIDE STYLES === */
|
||
.title-slide {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.thesis-title {
|
||
font-weight: 700;
|
||
font-size: 2.4rem;
|
||
color: #1a1a1a;
|
||
margin-bottom: 15px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.thesis-subtitle {
|
||
font-size: 1.2rem;
|
||
color: #4a5568;
|
||
margin-bottom: 40px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.author-info {
|
||
margin-top: 50px;
|
||
padding-top: 30px;
|
||
border-top: 1px solid #e2e8f0;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.institution {
|
||
font-size: 1rem;
|
||
color: #4a5568;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.team-info {
|
||
font-size: 0.95rem;
|
||
color: #2c3e50;
|
||
margin: 10px 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.date {
|
||
font-size: 0.9rem;
|
||
color: #718096;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* === OPTIMIZED TYPOGRAPHY === */
|
||
h1 {
|
||
font-weight: 600;
|
||
font-size: 2rem;
|
||
color: #1a1a1a;
|
||
margin-bottom: 20px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
font-size: 1.6rem;
|
||
color: #1a1a1a;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
|
||
h3 {
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
color: #2c3e50;
|
||
margin-bottom: 12px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
p {
|
||
font-size: 1rem;
|
||
color: #4a5568;
|
||
margin-bottom: 15px;
|
||
max-width: 800px;
|
||
}
|
||
|
||
.lead {
|
||
font-size: 1.1rem;
|
||
color: #2c3e50;
|
||
font-weight: 500;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* === CLEAN LAYOUT COMPONENTS === */
|
||
.section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.info-block {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
/* === CLEAN LISTS - FIXED === */
|
||
.simple-list {
|
||
margin: 20px 0;
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.simple-list li {
|
||
padding: 8px 0;
|
||
padding-left: 24px;
|
||
position: relative;
|
||
font-size: 0.95rem;
|
||
color: #4a5568;
|
||
}
|
||
|
||
.simple-list li:before {
|
||
content: "•";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #3498db;
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.problem-list li:before {
|
||
content: "❌";
|
||
color: #e74c3c;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.solution-list li:before {
|
||
content: "✅";
|
||
color: #27ae60;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* === CLEAN COMPONENTS === */
|
||
.feature-group {
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #edf2f7;
|
||
}
|
||
|
||
.feature-item:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.feature-icon {
|
||
color: #3498db;
|
||
margin-right: 15px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.feature-content {
|
||
flex: 1;
|
||
color: #4a5568;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* === CLEAN NAVIGATION === */
|
||
.navigation {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px 0;
|
||
height: 70px;
|
||
flex-shrink: 0;
|
||
border-top: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 8px 20px;
|
||
background: #2c3e50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-btn:hover:not(:disabled) {
|
||
background: #1a252f;
|
||
}
|
||
|
||
.nav-btn:disabled {
|
||
background: #cbd5e0;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.slide-counter {
|
||
font-weight: 500;
|
||
color: #4a5568;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* === RESPONSIVE DESIGN === */
|
||
@media (max-width: 768px) {
|
||
.presentation-container {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.slide {
|
||
padding: 30px 0;
|
||
max-height: calc(100vh - 70px);
|
||
}
|
||
|
||
.thesis-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.thesis-subtitle {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.7rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.4rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1rem;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 6px 16px;
|
||
font-size: 0.85rem;
|
||
}
|
||
}
|
||
|
||
/* === HIGHLIGHT BOX === */
|
||
.highlight {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-left: 3px solid #3498db;
|
||
}
|
||
|
||
.highlight-ai {
|
||
background: #f0f7ff;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-left: 3px solid #6c63ff;
|
||
}
|
||
|
||
/* === TECH STACK === */
|
||
.tech-stack {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.tech-tag {
|
||
background: #f1f5f9;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 0.85rem;
|
||
color: #475569;
|
||
}
|
||
|
||
.ai-tag {
|
||
background: #e6f0ff;
|
||
color: #1a56db;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* === VISUAL PLACEHOLDERS === */
|
||
.visual-placeholder {
|
||
background: #f8fafc;
|
||
border: 2px dashed #cbd5e0;
|
||
border-radius: 8px;
|
||
padding: 40px 20px;
|
||
margin: 25px 0;
|
||
text-align: center;
|
||
color: #4a5568;
|
||
}
|
||
|
||
.visual-placeholder img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.placeholder-label {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 10px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* === DATA ANALYSIS VISUAL === */
|
||
.data-analysis {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.complexity-item {
|
||
margin: 15px 0;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.complexity-item:before {
|
||
content: "→";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #3498db;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* === DATABASE SCHEMA VISUAL === */
|
||
.schema-simple {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.8;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.table-name {
|
||
color: #1a56db;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.key-tables {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.table-card {
|
||
background: white;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
border: 1px solid #e2e8f0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.table-card-title {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
/* === NEW STYLES FOR DIAGRAMS === */
|
||
.diagram-container {
|
||
background: #f8fafc;
|
||
padding: 25px;
|
||
margin: 25px 0;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.diagram-title {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
font-size: 1.1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.diagram-placeholder {
|
||
background: white;
|
||
border: 1px solid #cbd5e0;
|
||
border-radius: 6px;
|
||
padding: 30px;
|
||
margin: 15px 0;
|
||
text-align: center;
|
||
color: #4a5568;
|
||
font-style: italic;
|
||
}
|
||
|
||
.system-flow {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.flow-step {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px;
|
||
background: #f8fafc;
|
||
border-radius: 6px;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.flow-number {
|
||
background: #3498db;
|
||
color: white;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 15px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* === BOT DEMO STYLES === */
|
||
.bot-demo {
|
||
background: #f0f7ff;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-radius: 8px;
|
||
border: 1px solid #c3dafe;
|
||
}
|
||
|
||
.message {
|
||
background: white;
|
||
padding: 12px 15px;
|
||
margin: 10px 0;
|
||
border-radius: 18px;
|
||
border: 1px solid #e2e8f0;
|
||
max-width: 80%;
|
||
}
|
||
|
||
.user-message {
|
||
background: #3498db;
|
||
color: white;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.bot-message {
|
||
background: #f8fafc;
|
||
}
|
||
|
||
/* === BENEFITS GRID === */
|
||
.benefits-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.benefit-card {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.benefit-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.benefit-title {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 10px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* === DATABASE SCHEMA VISUALIZATION === */
|
||
.schema-visual {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-radius: 8px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.schema-row {
|
||
padding: 3px 0;
|
||
margin: 2px 0;
|
||
}
|
||
|
||
.pk {
|
||
color: #e74c3c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.fk {
|
||
color: #3498db;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.table-header {
|
||
background: #2c3e50;
|
||
color: white;
|
||
padding: 8px 12px;
|
||
margin: 10px 0 5px 0;
|
||
border-radius: 4px;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="presentation-container">
|
||
<!-- Slide 1: Introduction -->
|
||
<div class="slide" id="slide1">
|
||
<div class="title-slide">
|
||
<div>
|
||
<h1 class="thesis-title">School Scheduling System Upgrade</h1>
|
||
<p class="thesis-subtitle">From Spreadsheets to AI-Ready Database</p>
|
||
</div>
|
||
|
||
<div class="author-info">
|
||
<div class="institution">
|
||
AI Technology Project Presentation
|
||
</div>
|
||
|
||
<div class="team-info">
|
||
Student Researcher: Березуцкий Григорий Алексеевич
|
||
</div>
|
||
|
||
<div class="team-info">
|
||
Supervisor: Bob Santos
|
||
</div>
|
||
|
||
<div class="date">
|
||
January 2026
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2: The Core Problem -->
|
||
<div class="slide" id="slide2">
|
||
<h1>The Core Problem: Spreadsheet Limitations</h1>
|
||
<p class="lead">School schedules maintained in spreadsheet formats present challenges for efficient management and querying.</p>
|
||
|
||
<div class="highlight">
|
||
<h3>Current System Limitations</h3>
|
||
<ul class="simple-list problem-list">
|
||
<li><strong>Data Duplication:</strong> Student information, teacher details, and class schedules repeated across multiple spreadsheets</li>
|
||
<li><strong>Inefficient Queries:</strong> Finding specific schedule information requires manual searching and complex formula calculations</li>
|
||
<li><strong>Data Inconsistency:</strong> Updates in one spreadsheet often don't propagate to related schedules, leading to conflicting information</li>
|
||
<li><strong>Limited Accessibility:</strong> Spreadsheets cannot provide real-time, personalized schedule information to students</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<h3>Operational Impact</h3>
|
||
<ul class="simple-list">
|
||
<li>Administrative staff spend significant time reconciling schedule information</li>
|
||
<li>A room change requires updates in multiple spreadsheet files</li>
|
||
<li>Parents and students lack access to real-time schedule information</li>
|
||
<li>Manual searching for student locations takes 5-10 minutes</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3: Project Goals -->
|
||
<div class="slide" id="slide3">
|
||
<h1>Project Goals</h1>
|
||
<p class="lead">Transform spreadsheet-based scheduling into database solutions.</p>
|
||
|
||
<div class="benefits-grid">
|
||
<div class="benefit-card">
|
||
<div class="benefit-title">Eliminate Data Duplication</div>
|
||
<p>Create single source of truth for all scheduling data</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-title">Enable Efficient Queries</div>
|
||
<p>Answer "Where is student X?" in less than 1 second</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-title">Ensure Data Consistency</div>
|
||
<p>Automated validation and synchronization across all data</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-title">Provide Mobile Access</div>
|
||
<p>Real-time schedule information for students, parents, and staff</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="highlight-ai">
|
||
<h3>Performance Objectives</h3>
|
||
<ul class="simple-list solution-list">
|
||
<li>90% reduction in data entry time</li>
|
||
<li>100% elimination of duplicate data entry</li>
|
||
<li>Real-time query response: < 1 second</li>
|
||
<li>Support for 1,000+ concurrent users</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 4: Method -->
|
||
<div class="slide active" id="slide4">
|
||
<h1>Method: Systematic Approach</h1>
|
||
<p class="lead">Structured methodology to address spreadsheet limitations.</p>
|
||
|
||
<div class="system-flow">
|
||
<div class="flow-step">
|
||
<div class="flow-number">1</div>
|
||
<div>
|
||
<strong>Analyze Current System</strong><br>
|
||
Map data duplication and inconsistency points across existing spreadsheets
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">2</div>
|
||
<div>
|
||
<strong>Design Database Structure</strong><br>
|
||
Create normalized schema to eliminate redundancy and ensure data integrity
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">3</div>
|
||
<div>
|
||
<strong>Develop Migration Tools</strong><br>
|
||
Build Python scripts to extract and transform spreadsheet data into database format
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">4</div>
|
||
<div>
|
||
<strong>Create Query Interface</strong><br>
|
||
Develop Telegram bot and API for real-time schedule queries
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">5</div>
|
||
<div>
|
||
<strong>Implement Validation</strong><br>
|
||
Add data consistency checks and audit logging to prevent future issues
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 5: School Schedule Complexity -->
|
||
<div class="slide" id="slide5">
|
||
<h1>School Schedule Complexity Analysis</h1>
|
||
<p class="lead">School timetables involve overlapping systems that challenge spreadsheet management.</p>
|
||
|
||
<div class="data-analysis">
|
||
<h3>Key Structural Elements</h3>
|
||
|
||
<div class="complexity-item">
|
||
<strong>Complex Groupings:</strong> Students in multiple groups simultaneously
|
||
</div>
|
||
|
||
<div class="complexity-item">
|
||
<strong>Temporal Structure:</strong> Two modules with different schedules
|
||
</div>
|
||
|
||
<div class="complexity-item">
|
||
<strong>Multiple Dimensions:</strong> 5+ simultaneous student affiliations
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<h3>Student Group Types</h3>
|
||
<ul class="simple-list">
|
||
<li>Primary class groups (e.g. 4A, 4B, 4C) - Maintained in separate files</li>
|
||
<li>English proficiency groups (E1-E6) - Separate spreadsheet for each level</li>
|
||
<li>Technology track groups - Additional spreadsheet file</li>
|
||
<li>Olympiad groups - Separate tracking spreadsheet</li>
|
||
<li>Extracurricular activities - Additional schedule files</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="highlight">
|
||
<p><strong>Current Process:</strong> A single student's schedule requires checking multiple spreadsheets. Our database solution consolidates everything into unified queries.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 6: System Architecture Diagrams -->
|
||
<div class="slide" id="slide6">
|
||
<h1>System Architecture: DFD & ERD</h1>
|
||
<p class="lead">Complete diagrams showing database system design.</p>
|
||
|
||
<div class="diagram-container">
|
||
<div class="diagram-title">Data Flow Diagram (DFD)</div>
|
||
<div class="diagram-placeholder" style="cursor: pointer;">
|
||
<div class="placeholder-label">DFD: System Workflow</div>
|
||
<p>Interactive workflow showing data flow from spreadsheets into unified database</p>
|
||
</div>
|
||
<div class="highlight">
|
||
<h3>DFD System Features</h3>
|
||
<ul class="simple-list solution-list">
|
||
<li><strong>Centralized data flow</strong> - Consolidated data management</li>
|
||
<li><strong>Automated synchronization</strong> - Updates propagate instantly</li>
|
||
<li><strong>Single source of truth</strong> - Eliminates duplicate entries</li>
|
||
<li><strong>Real-time validation</strong> - Data integrity checks</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram-container">
|
||
<div class="diagram-title">Entity Relationship Diagram (ERD)</div>
|
||
<div class="diagram-placeholder" style="cursor: pointer;">
|
||
<div class="placeholder-label">ERD: Database Structure</div>
|
||
<p>Database structure designed to address spreadsheet limitations</p>
|
||
</div>
|
||
<div class="info-block">
|
||
<h3>Core Database Tables</h3>
|
||
<ul class="simple-list solution-list">
|
||
<li><strong>students, teachers, subjects</strong> - Centralized entity management</li>
|
||
<li><strong>schedule_entries</strong> - Unified scheduling table</li>
|
||
<li><strong>relationship tables</strong> - Structured data relationships</li>
|
||
<li><strong>audit_log</strong> - Comprehensive change tracking</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 7: Database Schema Details -->
|
||
<div class="slide" id="slide7">
|
||
<h1>Database Design: 17 Tables</h1>
|
||
<p class="lead">Normalized structure designed to handle scheduling complexity.</p>
|
||
|
||
<div class="schema-visual">
|
||
<div class="table-header">Security Layer</div>
|
||
<div class="schema-row"><span class="pk">users</span> – Controlled access system</div>
|
||
<div class="schema-row"><span class="fk">audit_log</span> – Comprehensive change tracking</div>
|
||
|
||
<div class="table-header">Core Data</div>
|
||
<div class="schema-row"><span class="pk">people</span> – Students & Teachers</div>
|
||
<div class="schema-row"><span class="pk">places</span> – Rooms & Equipment</div>
|
||
<div class="schema-row"><span class="pk">groups</span> – Classes & Activities</div>
|
||
|
||
<div class="table-header">Connection Hub</div>
|
||
<div class="schema-row"><span class="pk">schedule_entries</span> – Central connection point</div>
|
||
<div class="schema-row"><span class="fk">time_management</span> – Timeslots & scheduling</div>
|
||
<div class="schema-row"><span class="pk">special_groups</span> – Tech tracks & English levels</div>
|
||
</div>
|
||
|
||
<div class="highlight">
|
||
<h3>Database Design Approach</h3>
|
||
<p><strong>Current System:</strong> Multiple spreadsheet files with duplicated data</p>
|
||
<p><strong>Proposed System:</strong> 17 connected database tables with normalized structure</p>
|
||
<p>All data connects through the <strong>Schedule Entries</strong> table, replacing manual spreadsheet cross-referencing.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 8: Functional Prototype -->
|
||
<div class="slide" id="slide8">
|
||
<h1>Functional Prototype</h1>
|
||
<p class="lead">Telegram bot demonstrating query efficiency improvements.</p>
|
||
|
||
<div class="bot-demo">
|
||
<h3>Query Demonstration</h3>
|
||
<div class="message user-message">
|
||
/whereis
|
||
</div>
|
||
<div class="message bot-message">
|
||
Please enter student name:
|
||
</div>
|
||
<div class="message user-message">
|
||
Гаттарова София
|
||
</div>
|
||
<div class="message bot-message">
|
||
София: Room 204, Design & Creativity, Ms. Smith (10:30-11:15)
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-flow">
|
||
<div class="flow-step">
|
||
<div class="flow-number">1</div>
|
||
<div>
|
||
<strong>/whereis Command</strong><br>
|
||
Checks student location by time and group memberships
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">2</div>
|
||
<div>
|
||
<strong>/schedule Command</strong><br>
|
||
Shows complete daily schedule
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">3</div>
|
||
<div>
|
||
<strong>/tomorrow Command</strong><br>
|
||
Displays tomorrow's schedule
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="highlight">
|
||
<h3>Query Efficiency Comparison</h3>
|
||
<ul class="simple-list solution-list">
|
||
<li><strong>Manual Spreadsheet Method:</strong> 5-10 minutes across multiple files</li>
|
||
<li><strong>Database System:</strong> Less than 1 second response time</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 9: Technology Stack -->
|
||
<div class="slide" id="slide9">
|
||
<h1>Technology Stack</h1>
|
||
<p class="lead">Tools selected for system implementation.</p>
|
||
|
||
<div class="tech-stack">
|
||
<div class="tech-tag">Python Programming</div>
|
||
<div class="tech-tag">Telegram Bot Platform</div>
|
||
<div class="tech-tag ai-tag">SQLite Database</div>
|
||
<div class="tech-tag">Pandas Library</div>
|
||
<div class="tech-tag ai-tag">Flask Framework</div>
|
||
</div>
|
||
|
||
<div class="highlight">
|
||
<h3>Technical Implementation</h3>
|
||
<ul class="simple-list solution-list">
|
||
<li><strong>Structured design</strong> - Prevents data duplication</li>
|
||
<li><strong>API layer</strong> - Provides real-time access</li>
|
||
<li><strong>Data migration</strong> - Transforms spreadsheets to database format</li>
|
||
<li><strong>Query optimization</strong> - Sub-second response times</li>
|
||
<li><strong>Real-time updates</strong> - Instant data synchronization</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 10: Future Development -->
|
||
<div class="slide" id="slide10">
|
||
<h1>Future Development</h1>
|
||
<p class="lead">Building on the database foundation.</p>
|
||
|
||
<div class="feature-group">
|
||
<div class="feature-item">
|
||
<div class="feature-icon">1</div>
|
||
<div class="feature-content">
|
||
<strong>System Deployment</strong><br>
|
||
Implement database system to replace current spreadsheets
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<div class="feature-icon">2</div>
|
||
<div class="feature-content">
|
||
<strong>Parent/Student Portal</strong><br>
|
||
Web access to real-time schedules
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<div class="feature-icon">3</div>
|
||
<div class="feature-content">
|
||
<strong>AI Scheduling Optimization</strong><br>
|
||
Intelligent schedule suggestions
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<div class="feature-icon">4</div>
|
||
<div class="feature-content">
|
||
<strong>Analytics Dashboard</strong><br>
|
||
Data-driven insights and reporting
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="highlight-ai">
|
||
<h3>Implementation Timeline</h3>
|
||
<ul class="simple-list">
|
||
<li><strong>Month 1:</strong> Data migration and system setup</li>
|
||
<li><strong>Month 2:</strong> Portal development and staff training</li>
|
||
<li><strong>Month 3:</strong> Full implementation and optimization</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 11: Conclusion -->
|
||
<div class="slide" id="slide11">
|
||
<h1>Conclusion</h1>
|
||
|
||
<div class="info-block">
|
||
<p>This project demonstrates how database systems can address school scheduling challenges by providing:</p>
|
||
|
||
<ul class="simple-list solution-list">
|
||
<li><strong>Data consolidation</strong> from multiple spreadsheets into unified structure</li>
|
||
<li><strong>Efficient querying</strong> with sub-second response times</li>
|
||
<li><strong>Data integrity</strong> through automated validation</li>
|
||
<li><strong>Enhanced accessibility</strong> through mobile-friendly interfaces</li>
|
||
</ul>
|
||
|
||
<p style="margin-top: 20px;">The proposed relational database with API integration provides a foundation for future development while addressing current administrative requirements.</p>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
|
||
<h3>Thank You</h3>
|
||
<p style="color: #4a5568; max-width: 600px; margin: 0 auto;">Questions about the database scheduling system?</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="navigation">
|
||
<button class="nav-btn" id="prev-btn">← Previous</button>
|
||
|
||
<div class="slide-counter">
|
||
Slide <span id="current-slide">4</span> of <span id="total-slides">11</span>
|
||
</div>
|
||
|
||
<button class="nav-btn" id="next-btn">Next →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentSlide = 1;
|
||
const totalSlides = 11;
|
||
|
||
function showSlide(slideNumber) {
|
||
// Hide all slides
|
||
document.querySelectorAll('.slide').forEach(slide => {
|
||
slide.classList.remove('active');
|
||
});
|
||
|
||
// Show selected slide
|
||
document.getElementById(`slide${slideNumber}`).classList.add('active');
|
||
|
||
// Scroll to top of slide
|
||
document.getElementById(`slide${slideNumber}`).scrollTop = 0;
|
||
|
||
// Update slide counter
|
||
document.getElementById('current-slide').textContent = slideNumber;
|
||
document.getElementById('total-slides').textContent = totalSlides;
|
||
|
||
// Update button states
|
||
document.getElementById('prev-btn').disabled = slideNumber === 1;
|
||
|
||
// Update button text on last slide
|
||
if (slideNumber === totalSlides) {
|
||
document.getElementById('next-btn').textContent = 'Finish';
|
||
} else {
|
||
document.getElementById('next-btn').textContent = 'Next →';
|
||
}
|
||
}
|
||
|
||
function nextSlide() {
|
||
if (currentSlide < totalSlides) {
|
||
currentSlide++;
|
||
showSlide(currentSlide);
|
||
}
|
||
}
|
||
|
||
function prevSlide() {
|
||
if (currentSlide > 1) {
|
||
currentSlide--;
|
||
showSlide(currentSlide);
|
||
}
|
||
}
|
||
|
||
// Initialize
|
||
showSlide(1);
|
||
|
||
// Button event listeners
|
||
document.getElementById('next-btn').addEventListener('click', nextSlide);
|
||
document.getElementById('prev-btn').addEventListener('click', prevSlide);
|
||
|
||
// Keyboard navigation
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') {
|
||
nextSlide();
|
||
} else if (e.key === 'ArrowLeft') {
|
||
prevSlide();
|
||
}
|
||
});
|
||
|
||
// Touch swipe for mobile
|
||
let touchStartY = 0;
|
||
let touchEndY = 0;
|
||
|
||
document.addEventListener('touchstart', (e) => {
|
||
touchStartY = e.changedTouches[0].screenY;
|
||
});
|
||
|
||
document.addEventListener('touchend', (e) => {
|
||
touchEndY = e.changedTouches[0].screenY;
|
||
handleSwipe();
|
||
});
|
||
|
||
function handleSwipe() {
|
||
const swipeThreshold = 100;
|
||
|
||
if (touchEndY < touchStartY - swipeThreshold) {
|
||
nextSlide();
|
||
}
|
||
|
||
if (touchEndY > touchStartY + swipeThreshold) {
|
||
prevSlide();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body></html> |