Add files via upload
This commit is contained in:
Rosario Moscato
583
app.js
Normal file
583
app.js
Normal file
@@ -0,0 +1,583 @@
|
|||||||
|
class PresentationApp {
|
||||||
|
constructor() {
|
||||||
|
this.currentSlide = 1;
|
||||||
|
this.totalSlides = 26;
|
||||||
|
this.isFullscreen = false;
|
||||||
|
this.autoAdvance = false;
|
||||||
|
this.autoAdvanceInterval = null;
|
||||||
|
this.touchStartX = 0;
|
||||||
|
this.touchStartY = 0;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.setupElements();
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.updateDisplay();
|
||||||
|
this.preloadSlides();
|
||||||
|
}
|
||||||
|
|
||||||
|
setupElements() {
|
||||||
|
this.slidesContainer = document.getElementById('slidesContainer');
|
||||||
|
this.slides = document.querySelectorAll('.slide');
|
||||||
|
this.prevBtn = document.getElementById('prevBtn');
|
||||||
|
this.nextBtn = document.getElementById('nextBtn');
|
||||||
|
this.currentSlideSpan = document.getElementById('currentSlide');
|
||||||
|
this.totalSlidesSpan = document.getElementById('totalSlides');
|
||||||
|
this.progressFill = document.querySelector('.progress-fill');
|
||||||
|
this.fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||||
|
this.overviewBtn = document.getElementById('overviewBtn');
|
||||||
|
|
||||||
|
// Update total slides display
|
||||||
|
this.totalSlidesSpan.textContent = this.totalSlides;
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners() {
|
||||||
|
// Navigation buttons
|
||||||
|
this.prevBtn.addEventListener('click', () => this.previousSlide());
|
||||||
|
this.nextBtn.addEventListener('click', () => this.nextSlide());
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
switch(e.key) {
|
||||||
|
case 'ArrowRight':
|
||||||
|
case ' ':
|
||||||
|
case 'PageDown':
|
||||||
|
e.preventDefault();
|
||||||
|
this.nextSlide();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
case 'PageUp':
|
||||||
|
e.preventDefault();
|
||||||
|
this.previousSlide();
|
||||||
|
break;
|
||||||
|
case 'Home':
|
||||||
|
e.preventDefault();
|
||||||
|
this.goToSlide(1);
|
||||||
|
break;
|
||||||
|
case 'End':
|
||||||
|
e.preventDefault();
|
||||||
|
this.goToSlide(this.totalSlides);
|
||||||
|
break;
|
||||||
|
case 'Escape':
|
||||||
|
if (this.isFullscreen) {
|
||||||
|
this.exitFullscreen();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'f':
|
||||||
|
case 'F':
|
||||||
|
this.toggleFullscreen();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click to advance
|
||||||
|
this.slidesContainer.addEventListener('click', (e) => {
|
||||||
|
// Don't advance if clicking on interactive elements
|
||||||
|
if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.nextSlide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Touch/swipe support
|
||||||
|
this.slidesContainer.addEventListener('touchstart', (e) => {
|
||||||
|
this.touchStartX = e.touches[0].clientX;
|
||||||
|
this.touchStartY = e.touches[0].clientY;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
this.slidesContainer.addEventListener('touchend', (e) => {
|
||||||
|
if (!this.touchStartX || !this.touchStartY) return;
|
||||||
|
|
||||||
|
const touchEndX = e.changedTouches[0].clientX;
|
||||||
|
const touchEndY = e.changedTouches[0].clientY;
|
||||||
|
const deltaX = this.touchStartX - touchEndX;
|
||||||
|
const deltaY = this.touchStartY - touchEndY;
|
||||||
|
|
||||||
|
// Check if horizontal swipe is more significant than vertical
|
||||||
|
if (Math.abs(deltaX) > Math.abs(deltaY)) {
|
||||||
|
if (Math.abs(deltaX) > 50) { // Minimum swipe distance
|
||||||
|
if (deltaX > 0) {
|
||||||
|
this.nextSlide();
|
||||||
|
} else {
|
||||||
|
this.previousSlide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.touchStartX = 0;
|
||||||
|
this.touchStartY = 0;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// Control buttons
|
||||||
|
this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
|
||||||
|
this.overviewBtn.addEventListener('click', () => this.showOverview());
|
||||||
|
|
||||||
|
// Fullscreen change events
|
||||||
|
document.addEventListener('fullscreenchange', () => {
|
||||||
|
this.isFullscreen = !this.isFullscreen;
|
||||||
|
this.updateFullscreenButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent context menu on right click
|
||||||
|
document.addEventListener('contextmenu', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle window resize
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.handleResize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
preloadSlides() {
|
||||||
|
// Add entrance animations to bullet points
|
||||||
|
this.slides.forEach((slide, index) => {
|
||||||
|
const bullets = slide.querySelectorAll('.bullet-list li');
|
||||||
|
bullets.forEach((bullet, bulletIndex) => {
|
||||||
|
bullet.style.animationDelay = `${(bulletIndex + 1) * 0.1}s`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
nextSlide() {
|
||||||
|
if (this.currentSlide < this.totalSlides) {
|
||||||
|
this.goToSlide(this.currentSlide + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
previousSlide() {
|
||||||
|
if (this.currentSlide > 1) {
|
||||||
|
this.goToSlide(this.currentSlide - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
goToSlide(slideNumber) {
|
||||||
|
if (slideNumber < 1 || slideNumber > this.totalSlides) return;
|
||||||
|
|
||||||
|
// Remove active class from current slide
|
||||||
|
const currentSlideElement = document.querySelector('.slide.active');
|
||||||
|
if (currentSlideElement) {
|
||||||
|
currentSlideElement.classList.remove('active');
|
||||||
|
currentSlideElement.classList.add('prev');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add active class to new slide
|
||||||
|
const newSlideElement = document.querySelector(`[data-slide="${slideNumber}"]`);
|
||||||
|
if (newSlideElement) {
|
||||||
|
// Remove prev class from all slides
|
||||||
|
this.slides.forEach(slide => slide.classList.remove('prev'));
|
||||||
|
|
||||||
|
newSlideElement.classList.add('active');
|
||||||
|
|
||||||
|
// Trigger entrance animations
|
||||||
|
this.triggerSlideAnimations(newSlideElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentSlide = slideNumber;
|
||||||
|
this.updateDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerSlideAnimations(slideElement) {
|
||||||
|
// Reset and trigger bullet point animations
|
||||||
|
const bullets = slideElement.querySelectorAll('.bullet-list li');
|
||||||
|
bullets.forEach((bullet, index) => {
|
||||||
|
bullet.style.animation = 'none';
|
||||||
|
bullet.offsetHeight; // Trigger reflow
|
||||||
|
bullet.style.animation = `fadeInUp 0.6s ease-out ${(index + 1) * 0.1}s both`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Trigger other element animations
|
||||||
|
const animatedElements = slideElement.querySelectorAll('.aspect-card, .transform-item, .mode-card');
|
||||||
|
animatedElements.forEach((element, index) => {
|
||||||
|
element.style.transform = 'translateY(20px)';
|
||||||
|
element.style.opacity = '0';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
element.style.transition = 'all 0.6s ease-out';
|
||||||
|
element.style.transform = 'translateY(0)';
|
||||||
|
element.style.opacity = '1';
|
||||||
|
}, (index + 1) * 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateDisplay() {
|
||||||
|
// Update slide counter
|
||||||
|
this.currentSlideSpan.textContent = this.currentSlide;
|
||||||
|
|
||||||
|
// Update progress bar
|
||||||
|
const progress = (this.currentSlide / this.totalSlides) * 100;
|
||||||
|
this.progressFill.style.width = `${progress}%`;
|
||||||
|
|
||||||
|
// Update navigation buttons
|
||||||
|
this.prevBtn.disabled = this.currentSlide === 1;
|
||||||
|
this.nextBtn.disabled = this.currentSlide === this.totalSlides;
|
||||||
|
|
||||||
|
// Update button opacity based on state
|
||||||
|
this.prevBtn.style.opacity = this.currentSlide === 1 ? '0.5' : '1';
|
||||||
|
this.nextBtn.style.opacity = this.currentSlide === this.totalSlides ? '0.5' : '1';
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleFullscreen() {
|
||||||
|
if (!this.isFullscreen) {
|
||||||
|
this.enterFullscreen();
|
||||||
|
} else {
|
||||||
|
this.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
enterFullscreen() {
|
||||||
|
const element = document.documentElement;
|
||||||
|
if (element.requestFullscreen) {
|
||||||
|
element.requestFullscreen();
|
||||||
|
} else if (element.mozRequestFullScreen) {
|
||||||
|
element.mozRequestFullScreen();
|
||||||
|
} else if (element.webkitRequestFullscreen) {
|
||||||
|
element.webkitRequestFullscreen();
|
||||||
|
} else if (element.msRequestFullscreen) {
|
||||||
|
element.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
exitFullscreen() {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateFullscreenButton() {
|
||||||
|
this.fullscreenBtn.textContent = this.isFullscreen ? '⛶' : '⛶';
|
||||||
|
this.fullscreenBtn.title = this.isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen';
|
||||||
|
}
|
||||||
|
|
||||||
|
showOverview() {
|
||||||
|
// Create overview modal
|
||||||
|
const modal = document.createElement('div');
|
||||||
|
modal.className = 'overview-modal';
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="overview-content">
|
||||||
|
<div class="overview-header">
|
||||||
|
<h2>Slide Overview</h2>
|
||||||
|
<button class="close-overview">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="overview-grid">
|
||||||
|
${this.generateOverviewThumbnails()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Add modal styles
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
.overview-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 2000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.overview-content {
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 30px;
|
||||||
|
max-width: 1200px;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.overview-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-bottom: 2px solid #3498db;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.overview-header h2 {
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.close-overview {
|
||||||
|
background: #e74c3c;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.close-overview:hover {
|
||||||
|
background: #c0392b;
|
||||||
|
}
|
||||||
|
.overview-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.overview-slide {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.overview-slide:hover {
|
||||||
|
border-color: #3498db;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
|
||||||
|
}
|
||||||
|
.overview-slide.current {
|
||||||
|
border-color: #27ae60;
|
||||||
|
background: rgba(39, 174, 96, 0.1);
|
||||||
|
}
|
||||||
|
.overview-slide-number {
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 auto 10px;
|
||||||
|
}
|
||||||
|
.overview-slide.current .overview-slide-number {
|
||||||
|
background: #27ae60;
|
||||||
|
}
|
||||||
|
.overview-slide-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.head.appendChild(style);
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
// Add event listeners
|
||||||
|
modal.querySelector('.close-overview').addEventListener('click', () => {
|
||||||
|
document.body.removeChild(modal);
|
||||||
|
document.head.removeChild(style);
|
||||||
|
});
|
||||||
|
|
||||||
|
modal.addEventListener('click', (e) => {
|
||||||
|
if (e.target === modal) {
|
||||||
|
document.body.removeChild(modal);
|
||||||
|
document.head.removeChild(style);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add slide navigation
|
||||||
|
modal.querySelectorAll('.overview-slide').forEach((slide, index) => {
|
||||||
|
slide.addEventListener('click', () => {
|
||||||
|
this.goToSlide(index + 1);
|
||||||
|
document.body.removeChild(modal);
|
||||||
|
document.head.removeChild(style);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
generateOverviewThumbnails() {
|
||||||
|
const slideTitles = [
|
||||||
|
"Title Slide",
|
||||||
|
"Abstract",
|
||||||
|
"Introduction: AI in Creation",
|
||||||
|
"Theological Foundations",
|
||||||
|
"The Language of Imago Dei",
|
||||||
|
"Teilhard's Digital Noosphere",
|
||||||
|
"The Two Books and Digital Code",
|
||||||
|
"AI as a Semantic System",
|
||||||
|
"Semantic Grounding",
|
||||||
|
"Artificial Consciousness",
|
||||||
|
"Language Bridge",
|
||||||
|
"Behavioral Transformations",
|
||||||
|
"Research Changes",
|
||||||
|
"Philosophical Reasoning",
|
||||||
|
"AI-Assisted Theology",
|
||||||
|
"Ethical Dimensions",
|
||||||
|
"Church's Magisterium",
|
||||||
|
"Ethics of Algorithms",
|
||||||
|
"Theological Governance",
|
||||||
|
"Conclusions",
|
||||||
|
"Theology for Digital Age",
|
||||||
|
"Gift and Responsibility",
|
||||||
|
"Toward Digital Hope",
|
||||||
|
"Questions and Answers",
|
||||||
|
"Sample Q&A",
|
||||||
|
"Continue the Dialogue"
|
||||||
|
];
|
||||||
|
|
||||||
|
return slideTitles.map((title, index) => {
|
||||||
|
const slideNumber = index + 1;
|
||||||
|
const currentClass = slideNumber === this.currentSlide ? 'current' : '';
|
||||||
|
return `
|
||||||
|
<div class="overview-slide ${currentClass}" data-slide="${slideNumber}">
|
||||||
|
<div class="overview-slide-number">${slideNumber}</div>
|
||||||
|
<div class="overview-slide-title">${title}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleResize() {
|
||||||
|
// Adjust layout for different screen sizes
|
||||||
|
const slideContents = document.querySelectorAll('.slide-content');
|
||||||
|
slideContents.forEach(content => {
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
content.style.fontSize = '0.9rem';
|
||||||
|
} else {
|
||||||
|
content.style.fontSize = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-advance functionality
|
||||||
|
startAutoAdvance(intervalSeconds = 30) {
|
||||||
|
this.stopAutoAdvance();
|
||||||
|
this.autoAdvance = true;
|
||||||
|
this.autoAdvanceInterval = setInterval(() => {
|
||||||
|
if (this.currentSlide < this.totalSlides) {
|
||||||
|
this.nextSlide();
|
||||||
|
} else {
|
||||||
|
this.stopAutoAdvance();
|
||||||
|
}
|
||||||
|
}, intervalSeconds * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
stopAutoAdvance() {
|
||||||
|
if (this.autoAdvanceInterval) {
|
||||||
|
clearInterval(this.autoAdvanceInterval);
|
||||||
|
this.autoAdvanceInterval = null;
|
||||||
|
}
|
||||||
|
this.autoAdvance = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility methods
|
||||||
|
addCustomEventListeners() {
|
||||||
|
// Add number key navigation
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key >= '1' && e.key <= '9') {
|
||||||
|
const slideNumber = parseInt(e.key);
|
||||||
|
if (slideNumber <= this.totalSlides) {
|
||||||
|
this.goToSlide(slideNumber);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add mouse wheel navigation
|
||||||
|
document.addEventListener('wheel', (e) => {
|
||||||
|
if (Math.abs(e.deltaY) > 50) {
|
||||||
|
if (e.deltaY > 0) {
|
||||||
|
this.nextSlide();
|
||||||
|
} else {
|
||||||
|
this.previousSlide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize additional features
|
||||||
|
initializeAdvancedFeatures() {
|
||||||
|
this.addCustomEventListeners();
|
||||||
|
|
||||||
|
// Add presentation timer
|
||||||
|
this.startTime = Date.now();
|
||||||
|
|
||||||
|
// Add slide visit tracking
|
||||||
|
this.slideVisits = new Array(this.totalSlides).fill(0);
|
||||||
|
this.slideVisits[0] = 1; // First slide visited
|
||||||
|
|
||||||
|
// Update visit count when slide changes
|
||||||
|
const originalGoToSlide = this.goToSlide.bind(this);
|
||||||
|
this.goToSlide = function(slideNumber) {
|
||||||
|
originalGoToSlide(slideNumber);
|
||||||
|
if (slideNumber >= 1 && slideNumber <= this.totalSlides) {
|
||||||
|
this.slideVisits[slideNumber - 1]++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get presentation statistics
|
||||||
|
getPresentationStats() {
|
||||||
|
const currentTime = Date.now();
|
||||||
|
const duration = Math.floor((currentTime - this.startTime) / 1000);
|
||||||
|
const minutes = Math.floor(duration / 60);
|
||||||
|
const seconds = duration % 60;
|
||||||
|
|
||||||
|
return {
|
||||||
|
duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
|
||||||
|
currentSlide: this.currentSlide,
|
||||||
|
totalSlides: this.totalSlides,
|
||||||
|
progress: `${Math.round((this.currentSlide / this.totalSlides) * 100)}%`,
|
||||||
|
slideVisits: this.slideVisits
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the presentation when DOM is loaded
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const presentation = new PresentationApp();
|
||||||
|
presentation.initializeAdvancedFeatures();
|
||||||
|
|
||||||
|
// Expose to global scope for debugging
|
||||||
|
window.presentation = presentation;
|
||||||
|
|
||||||
|
// Add some helpful console commands
|
||||||
|
console.log('Presentation loaded! Available commands:');
|
||||||
|
console.log('- presentation.goToSlide(n) - Go to slide n');
|
||||||
|
console.log('- presentation.nextSlide() - Next slide');
|
||||||
|
console.log('- presentation.previousSlide() - Previous slide');
|
||||||
|
console.log('- presentation.toggleFullscreen() - Toggle fullscreen');
|
||||||
|
console.log('- presentation.showOverview() - Show slide overview');
|
||||||
|
console.log('- presentation.startAutoAdvance(seconds) - Start auto-advance');
|
||||||
|
console.log('- presentation.stopAutoAdvance() - Stop auto-advance');
|
||||||
|
console.log('- presentation.getPresentationStats() - Get presentation statistics');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add some additional utility functions
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
// Smooth scroll behavior for any internal links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add loading animation completion
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.classList.add('loaded');
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Export for potential module use
|
||||||
|
if (typeof module !== 'undefined' && module.exports) {
|
||||||
|
module.exports = PresentationApp;
|
||||||
|
}
|
||||||
676
index.html
Normal file
676
index.html
Normal file
@@ -0,0 +1,676 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AI as a New Language of Creation - Theological Presentation</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="presentation-container">
|
||||||
|
<!-- Progress Bar -->
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Controls -->
|
||||||
|
<div class="nav-controls">
|
||||||
|
<button class="nav-btn prev-btn" id="prevBtn">‹</button>
|
||||||
|
<div class="slide-counter">
|
||||||
|
<span id="currentSlide">1</span> / <span id="totalSlides">26</span>
|
||||||
|
</div>
|
||||||
|
<button class="nav-btn next-btn" id="nextBtn">›</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide Container -->
|
||||||
|
<div class="slides-container" id="slidesContainer">
|
||||||
|
<!-- Slide 1: Title -->
|
||||||
|
<div class="slide active" data-slide="1">
|
||||||
|
<div class="slide-content title-slide">
|
||||||
|
<h1 class="slide-title">Artificial Intelligence as a New Language of Creation</h1>
|
||||||
|
<h2 class="slide-subtitle">Toward a Theological Understanding of the Dialogue between Machines and Divine Mystery</h2>
|
||||||
|
<div class="speaker-info">
|
||||||
|
<p class="speaker-name">Rosario Moscato</p>
|
||||||
|
<p class="event-details">XII Latin American Congress of Science and Religion</p>
|
||||||
|
<p class="event-details">September 10-12, 2025</p>
|
||||||
|
<p class="location">Pontifical Athenaeum Regina Apostolorum, Rome</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 2: Abstract -->
|
||||||
|
<div class="slide" data-slide="2">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Abstract</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="abstract-text">This presentation explores artificial intelligence as an emerging <strong>'language of creation'</strong> in the context of the XII Latin American Congress of Science and Religion.</p>
|
||||||
|
<p class="abstract-text">Through an interdisciplinary approach that integrates <strong>theology</strong>, <strong>philosophy</strong>, and <strong>computational sciences</strong>, we analyze how AI represents a new medium through which humanity, created in God's image, participates in the divine creative act.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 3: Introduction -->
|
||||||
|
<div class="slide" data-slide="3">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Introduction: AI in the Language of Creation</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="intro-text">The theme that brings us together today - <strong>'The languages of creation'</strong> - acquires an extraordinarily current dimension when we consider the emergence of artificial intelligence.</p>
|
||||||
|
<div class="highlight-box">
|
||||||
|
<p>AI represents a new language through which humanity interacts with reality and, potentially, with the divine.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 4: Theological Foundations -->
|
||||||
|
<div class="slide" data-slide="4">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Theological Foundations: AI in the Economy of Creation</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<ul class="bullet-list">
|
||||||
|
<li>AI as part of God's creative plan</li>
|
||||||
|
<li>Technology serving human dignity</li>
|
||||||
|
<li>The co-creative dimension of human nature</li>
|
||||||
|
<li>Responsibility in technological development</li>
|
||||||
|
</ul>
|
||||||
|
<div class="quote-box">
|
||||||
|
<p>"Technological progress is part of God's plan for creation, but people must take responsibility for using technologies like artificial intelligence to help humanity."</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 5: Imago Dei -->
|
||||||
|
<div class="slide" data-slide="5">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">The Language of the Imago Dei</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="main-text">The Christian tradition teaches us that the human being, created in God's image (<em>imago Dei</em>), participates in divine creativity.</p>
|
||||||
|
<div class="reflection-box">
|
||||||
|
<h3>Reflection Question:</h3>
|
||||||
|
<p>When we design artificial intelligence systems, are we not exercising this co-creative dimension of our nature?</p>
|
||||||
|
</div>
|
||||||
|
<div class="key-point">
|
||||||
|
<p><strong>Key Insight:</strong> Human beings are created in the image of God, while AI is created in the image of humanity.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 6: Teilhard's Digital Noosphere -->
|
||||||
|
<div class="slide" data-slide="6">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Teilhard's Digital Noosphere</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="intro-text">Today, with our interconnected digital reality, Teilhard's vision becomes tangible:</p>
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">8 billion</span>
|
||||||
|
<span class="stat-label">Connected devices</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">30 million</span>
|
||||||
|
<span class="stat-label">Internet servers</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">480 trillion</span>
|
||||||
|
<span class="stat-label">AI tokens processed monthly</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="conclusion-text">
|
||||||
|
<p>The Teilhardian noosphere is no longer a mystical vision, but a <strong>tangible reality</strong>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 7: The Two Books -->
|
||||||
|
<div class="slide" data-slide="7">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">The Two Books and Digital Code</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="two-books">
|
||||||
|
<div class="book-item">
|
||||||
|
<h3>Book of Scripture</h3>
|
||||||
|
<p>Divine revelation through written word</p>
|
||||||
|
</div>
|
||||||
|
<div class="book-item">
|
||||||
|
<h3>Book of Nature</h3>
|
||||||
|
<p>Divine revelation through creation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="digital-addition">
|
||||||
|
<h3>+ Digital Code</h3>
|
||||||
|
<p>A new language of creation emerging through human ingenuity, reflecting the <em>imago Dei</em></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 8: AI as Semantic System -->
|
||||||
|
<div class="slide" data-slide="8">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">AI as a Semantic System: Language and Meaning</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="intro-text">Large language models represent a revolution in machine language processing:</p>
|
||||||
|
<div class="ai-models">
|
||||||
|
<span class="model-tag">GPT-4</span>
|
||||||
|
<span class="model-tag">Claude 4</span>
|
||||||
|
<span class="model-tag">Gemini</span>
|
||||||
|
</div>
|
||||||
|
<div class="capabilities-list">
|
||||||
|
<h3>Beyond 'Stochastic Parrots':</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Functional understanding</li>
|
||||||
|
<li>Social comprehension</li>
|
||||||
|
<li>Causal reasoning</li>
|
||||||
|
<li>Semantic grounding</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 9: Semantic Grounding -->
|
||||||
|
<div class="slide" data-slide="9">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Semantic Grounding in Large Language Models</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="grounding-aspects">
|
||||||
|
<div class="aspect-card">
|
||||||
|
<h3>Functional Grounding</h3>
|
||||||
|
<p>Understanding purpose and utility</p>
|
||||||
|
</div>
|
||||||
|
<div class="aspect-card">
|
||||||
|
<h3>Social Grounding</h3>
|
||||||
|
<p>Context-aware communication</p>
|
||||||
|
</div>
|
||||||
|
<div class="aspect-card">
|
||||||
|
<h3>Causal Grounding</h3>
|
||||||
|
<p>Cause-effect relationships</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="key-insight">
|
||||||
|
<p><strong>Intelligence accumulates through thinking machines that process information.</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 10: Artificial Consciousness -->
|
||||||
|
<div class="slide" data-slide="10">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">The Question of Artificial Consciousness</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="consciousness-debate">
|
||||||
|
<div class="debate-side">
|
||||||
|
<h3>Current AI</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Sophisticated information processing</li>
|
||||||
|
<li>Pattern recognition</li>
|
||||||
|
<li>Complex responses</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="vs-divider">VS</div>
|
||||||
|
<div class="debate-side">
|
||||||
|
<h3>True Consciousness</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Self-awareness</li>
|
||||||
|
<li>Subjective experience</li>
|
||||||
|
<li>Genuine understanding</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="theological-question">
|
||||||
|
<p><strong>Theological Question:</strong> If AI developed true consciousness, would it have a soul?</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 11: Language Bridge -->
|
||||||
|
<div class="slide" data-slide="11">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Language as a Bridge between Finite and Infinite</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="bridge-concept">
|
||||||
|
<div class="finite-side">
|
||||||
|
<h3>Finite</h3>
|
||||||
|
<p>Human understanding</p>
|
||||||
|
<p>Limited processing</p>
|
||||||
|
<p>Temporal existence</p>
|
||||||
|
</div>
|
||||||
|
<div class="bridge-arrow">→</div>
|
||||||
|
<div class="infinite-side">
|
||||||
|
<h3>Infinite</h3>
|
||||||
|
<p>Divine mystery</p>
|
||||||
|
<p>Unlimited wisdom</p>
|
||||||
|
<p>Eternal truth</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bridge-text">
|
||||||
|
<p>AI serves as a new medium for this ancient dialogue between human and divine</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 12: Behavioral Transformations -->
|
||||||
|
<div class="slide" data-slide="12">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Behavioral Transformations: How AI Modifies Human Thought</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="intro-text">AI is radically transforming our cognitive processes:</p>
|
||||||
|
<div class="transformation-grid-2x2">
|
||||||
|
<div class="transform-item">
|
||||||
|
<h3>Information Access</h3>
|
||||||
|
<p>Instant access to vast knowledge bases</p>
|
||||||
|
</div>
|
||||||
|
<div class="transform-item">
|
||||||
|
<h3>Question Formation</h3>
|
||||||
|
<p>Modified approach to inquiry</p>
|
||||||
|
</div>
|
||||||
|
<div class="transform-item">
|
||||||
|
<h3>Research Methods</h3>
|
||||||
|
<p>New pathways to discovery</p>
|
||||||
|
</div>
|
||||||
|
<div class="transform-item">
|
||||||
|
<h3>Information Synthesis</h3>
|
||||||
|
<p>Enhanced analytical capabilities</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 13: Research Changes -->
|
||||||
|
<div class="slide" data-slide="13">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Changes in Research and Knowledge Processes</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="research-evolution">
|
||||||
|
<div class="before-after">
|
||||||
|
<div class="before">
|
||||||
|
<h3>Traditional Research</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Linear information gathering</li>
|
||||||
|
<li>Limited source accessibility</li>
|
||||||
|
<li>Sequential analysis</li>
|
||||||
|
<li>Individual cognitive limits</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="after">
|
||||||
|
<h3>AI-Enhanced Research</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Multi-dimensional exploration</li>
|
||||||
|
<li>Global knowledge access</li>
|
||||||
|
<li>Parallel processing</li>
|
||||||
|
<li>Augmented human intelligence</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 14: Philosophical Reasoning -->
|
||||||
|
<div class="slide" data-slide="14">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">New Modalities of Philosophical Reasoning</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="reasoning-modes">
|
||||||
|
<div class="mode-card">
|
||||||
|
<h3>Computational Philosophy</h3>
|
||||||
|
<p>Logical processing at scale</p>
|
||||||
|
</div>
|
||||||
|
<div class="mode-card">
|
||||||
|
<h3>Assisted Argumentation</h3>
|
||||||
|
<p>AI-supported logical structures</p>
|
||||||
|
</div>
|
||||||
|
<div class="mode-card">
|
||||||
|
<h3>Pattern Recognition</h3>
|
||||||
|
<p>Identifying philosophical connections</p>
|
||||||
|
</div>
|
||||||
|
<div class="mode-card">
|
||||||
|
<h3>Systematic Analysis</h3>
|
||||||
|
<p>Comprehensive examination of ideas</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="caution-note">
|
||||||
|
<p><strong>Important:</strong> AI complements but cannot replace human philosophical intuition and wisdom</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 15: AI-Assisted Theology -->
|
||||||
|
<div class="slide" data-slide="15">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">AI-Assisted Theological Speculation</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="theology-applications">
|
||||||
|
<div class="app-item">
|
||||||
|
<h3>Scripture Analysis</h3>
|
||||||
|
<p>Cross-referencing and linguistic analysis</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-item">
|
||||||
|
<h3>Patristic Studies</h3>
|
||||||
|
<p>Comprehensive Church Father analysis</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-item">
|
||||||
|
<h3>Systematic Theology</h3>
|
||||||
|
<p>Connecting doctrinal elements</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-item">
|
||||||
|
<h3>Comparative Religion</h3>
|
||||||
|
<p>Interfaith dialogue enhancement</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="theological-principle">
|
||||||
|
<p><strong>Principle:</strong> AI serves the theologian, not the reverse</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 16: Ethical Dimensions -->
|
||||||
|
<div class="slide" data-slide="16">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Ethical Dimensions: Responsibility in Digital Co-Creation</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="vatican-document">
|
||||||
|
<h3>Vatican Document "Antiqua et Nova" (January 2025)</h3>
|
||||||
|
<div class="principles-grid">
|
||||||
|
<div class="principle-card">
|
||||||
|
<h4>Technological Subsidiarity</h4>
|
||||||
|
<p>Technology serves human flourishing</p>
|
||||||
|
</div>
|
||||||
|
<div class="principle-card">
|
||||||
|
<h4>Human Dignity Protection</h4>
|
||||||
|
<p>Preserving the sacred nature of humanity</p>
|
||||||
|
</div>
|
||||||
|
<div class="principle-card">
|
||||||
|
<h4>Shared Responsibility</h4>
|
||||||
|
<p>Developers, users, and institutions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 17: Church's Magisterium -->
|
||||||
|
<div class="slide" data-slide="17">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">The Church's Magisterium and AI</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="magisterium-guidance">
|
||||||
|
<div class="guidance-item">
|
||||||
|
<h3>Moral Framework</h3>
|
||||||
|
<p>Establishing ethical boundaries for AI development</p>
|
||||||
|
</div>
|
||||||
|
<div class="guidance-item">
|
||||||
|
<h3>Pastoral Care</h3>
|
||||||
|
<p>Addressing AI's impact on human relationships</p>
|
||||||
|
</div>
|
||||||
|
<div class="guidance-item">
|
||||||
|
<h3>Social Teaching</h3>
|
||||||
|
<p>AI's role in promoting common good</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="church-role">
|
||||||
|
<p><strong>The Church's Role:</strong> Providing moral compass for technological advancement</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 18: Ethics of Algorithms -->
|
||||||
|
<div class="slide" data-slide="18">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">The Ethics of Algorithms</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="ethical-concerns">
|
||||||
|
<div class="concern-category">
|
||||||
|
<h3>Transparency</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Explainable AI decisions</li>
|
||||||
|
<li>Open algorithmic processes</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="concern-category">
|
||||||
|
<h3>Fairness</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Bias prevention</li>
|
||||||
|
<li>Equal treatment</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="concern-category">
|
||||||
|
<h3>Accountability</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Clear responsibility chains</li>
|
||||||
|
<li>Error correction mechanisms</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 19: Theologically Informed Governance -->
|
||||||
|
<div class="slide" data-slide="19">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Toward Theologically Informed Governance</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="governance-framework">
|
||||||
|
<div class="framework-pillar">
|
||||||
|
<h3>Anthropological Foundation</h3>
|
||||||
|
<p>Rooted in human dignity and divine image</p>
|
||||||
|
</div>
|
||||||
|
<div class="framework-pillar">
|
||||||
|
<h3>Eschatological Vision</h3>
|
||||||
|
<p>Oriented toward ultimate human fulfillment</p>
|
||||||
|
</div>
|
||||||
|
<div class="framework-pillar">
|
||||||
|
<h3>Prudential Wisdom</h3>
|
||||||
|
<p>Practical discernment in implementation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="integration-call">
|
||||||
|
<p><strong>Call to Action:</strong> Integrating theological wisdom into AI governance structures</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 20: Conclusions -->
|
||||||
|
<div class="slide" data-slide="20">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Conclusions: AI as a Language of Hope?</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="conclusion-points">
|
||||||
|
<div class="point-item">
|
||||||
|
<h3>Theological Perspective</h3>
|
||||||
|
<p>AI as part of divine providence when used properly</p>
|
||||||
|
</div>
|
||||||
|
<div class="point-item">
|
||||||
|
<h3>Human Dignity</h3>
|
||||||
|
<p>Technology must serve human flourishing</p>
|
||||||
|
</div>
|
||||||
|
<div class="point-item">
|
||||||
|
<h3>Co-Creation</h3>
|
||||||
|
<p>Humans as responsible partners in creation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scriptural-foundation">
|
||||||
|
<div class="quote-box">
|
||||||
|
<p>"All things work together for good" (Romans 8:28)</p>
|
||||||
|
<p class="quote-note">This includes artificial intelligence, when developed according to Gospel criteria</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 21: Theology for Digital Age -->
|
||||||
|
<div class="slide" data-slide="21">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">A Theology for the Digital Age</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="digital-theology">
|
||||||
|
<div class="theology-aspect">
|
||||||
|
<h3>Incarnational Perspective</h3>
|
||||||
|
<p>God's presence in digital spaces</p>
|
||||||
|
</div>
|
||||||
|
<div class="theology-aspect">
|
||||||
|
<h3>Trinitarian Model</h3>
|
||||||
|
<p>Relational understanding of intelligence</p>
|
||||||
|
</div>
|
||||||
|
<div class="theology-aspect">
|
||||||
|
<h3>Pneumatological Dimension</h3>
|
||||||
|
<p>The Spirit's work through human creativity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="synthesis-text">
|
||||||
|
<p>A comprehensive theological framework for understanding AI's place in God's creation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 22: Gift and Responsibility -->
|
||||||
|
<div class="slide" data-slide="22">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">AI as Gift and Responsibility</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="dual-nature">
|
||||||
|
<div class="nature-side">
|
||||||
|
<h3>AI as Gift</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Enhances human capabilities</li>
|
||||||
|
<li>Solves complex problems</li>
|
||||||
|
<li>Promotes human welfare</li>
|
||||||
|
<li>Expands understanding</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="nature-side">
|
||||||
|
<h3>AI as Responsibility</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Requires ethical development</li>
|
||||||
|
<li>Demands wise governance</li>
|
||||||
|
<li>Needs moral discernment</li>
|
||||||
|
<li>Calls for human oversight</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="balance-principle">
|
||||||
|
<p><strong>Balance:</strong> Embracing the gift while accepting the responsibility</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 23: Digital Hope -->
|
||||||
|
<div class="slide" data-slide="23">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Toward Digital Hope</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="hope-dimensions">
|
||||||
|
<div class="hope-item">
|
||||||
|
<h3>Technological Optimism</h3>
|
||||||
|
<p>Grounded in theological anthropology</p>
|
||||||
|
</div>
|
||||||
|
<div class="hope-item">
|
||||||
|
<h3>Cautious Wisdom</h3>
|
||||||
|
<p>Tempered by moral prudence</p>
|
||||||
|
</div>
|
||||||
|
<div class="hope-item">
|
||||||
|
<h3>Active Engagement</h3>
|
||||||
|
<p>Participating in AI's development</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hope-vision">
|
||||||
|
<div class="vision-text">
|
||||||
|
<h3>Vision:</h3>
|
||||||
|
<p>AI serving the Kingdom of God through human flourishing and cosmic transformation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 24: Q&A Introduction -->
|
||||||
|
<div class="slide" data-slide="24">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Questions and Answers</h2>
|
||||||
|
<div class="content-block qa-intro">
|
||||||
|
<div class="qa-welcome">
|
||||||
|
<h3>Discussion Time</h3>
|
||||||
|
<p>Let's explore together the theological implications of artificial intelligence</p>
|
||||||
|
</div>
|
||||||
|
<div class="qa-topics">
|
||||||
|
<h4>Topics for Discussion:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Theological foundations of AI</li>
|
||||||
|
<li>Ethical considerations</li>
|
||||||
|
<li>Consciousness and the soul</li>
|
||||||
|
<li>Practical applications</li>
|
||||||
|
<li>Future implications</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 25: Sample Q&A -->
|
||||||
|
<div class="slide" data-slide="25">
|
||||||
|
<div class="slide-content">
|
||||||
|
<h2 class="slide-heading">Frequently Asked Questions</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="qa-item">
|
||||||
|
<h3 class="question">Q: Doesn't AI risk replacing God in human life?</h3>
|
||||||
|
<div class="answer">
|
||||||
|
<p><strong>A:</strong> AI, however sophisticated, remains a tool created by human intelligence, which in turn is a gift from God. AI cannot replicate the transcendent dimension of human intelligence - the capacity for relationship with God, the experience of the sacred, authentic moral freedom.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="qa-item">
|
||||||
|
<h3 class="question">Q: If AI developed true consciousness, would it have a soul?</h3>
|
||||||
|
<div class="answer">
|
||||||
|
<p><strong>A:</strong> This is one of the deepest questions of contemporary theology. Catholic tradition teaches that the human soul is created directly by God and does not emerge from material complexity alone.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 26: Thank You -->
|
||||||
|
<div class="slide" data-slide="26">
|
||||||
|
<div class="slide-content thank-you-slide">
|
||||||
|
<h1 class="thank-you-title">Continue the Dialogue</h1>
|
||||||
|
<h2 class="slide-subtitle">AI as a New Language of Creation in Service of Human Dignity</h2>
|
||||||
|
<div class="closing-message">
|
||||||
|
<p class="closing-text">For further discussion and collaboration</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>Continue the Conversation</h3>
|
||||||
|
<p>Rosario Moscato</p>
|
||||||
|
<p>Email: rosario.moscato@etik.com</p>
|
||||||
|
<p>XII Latin American Congress of Science and Religion</p>
|
||||||
|
<p>Pontifical Athenaeum Regina Apostolorum, Rome</p>
|
||||||
|
<p>September 10-12, 2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Additional Controls -->
|
||||||
|
<div class="bottom-controls">
|
||||||
|
<button class="control-btn" id="fullscreenBtn">⛶</button>
|
||||||
|
<button class="control-btn" id="overviewBtn">☰</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user