Hugging Face's logo

Spaces:
deedrop1140
/
machinelearningalgorithms
Running

App Files Community
machinelearningalgorithms / templates /frontpage.html
deedrop1140's picture
deedrop1140
Upload 182 files
d0a6b4f verified
Raw History Blame Contribute Delete
18.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ML Learning Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
margin: 0;
overflow: hidden; /* Prevent scrolling to keep the canvas in place */
height: 100vh;
color: grey; /* Changed all text to grey */
position: relative;
background-color: #ffffff; /* Solid white background */
}
/* Styles for the canvas background */
#canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1; /* Puts the canvas behind other content */
display: block;
background-color: transparent;
}
.button-hover {
transition: all 0.3s ease;
}
.button-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.stats-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.content-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.modal {
background: rgba(0, 0, 0, 0.75);
}
.modal-content {
background: #1f2937;
border: 1px solid #374151;
}
/* Ensure main content is visible on top of the canvas */
main, footer, .content-container {
position: relative;
z-index: 1;
}
</style>
</head>
<body class="min-h-screen text-white">
<!-- The Bouncing Canvas is now the background -->
<canvas id="canvas"></canvas>
<!-- Main content container -->
<div class="container mx-auto px-4 py-8">
<div class="text-center mt-8">
<h1 class="text-4xl sm:text-5xl font-bold text-gray-800 mb-4">Machine Learning Platform</h1>
<p class="text-gray-600 text-sm sm:text-base">Explore the world of artificial intelligence and machine learning</p>
</div>
<!-- Main Content - Desktop Cards (visible on medium and up) -->
<div class="hidden md:grid grid-cols-1 md:grid-cols-2 gap-8 mb-12 mt-20">
<!-- Left Side - Test Assessment Card -->
<div class="content-card rounded-2xl p-6">
<h3 class="text-xl sm:text-2xl font-bold mb-3 text-green-600">Test Your Knowledge</h3>
<p class="text-sm mb-4 text-gray-600">"Test yourself and see what you know about ML"</p>
<p class="mb-4 text-xs sm:text-sm text-gray-500">Assess your current machine learning knowledge and identify areas for improvement</p>
<button onclick="takeQuiz()" class="button-hover bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white px-6 py-3 rounded-full font-semibold text-base shadow-lg w-full">
<i class="fas fa-graduation-cap mr-2"></i>Take Assessment
</button>
</div>
<!-- Right Side - Start Learning Card -->
<div class="content-card rounded-2xl p-6">
<h3 class="text-xl sm:text-2xl font-bold mb-3 text-blue-600">Start Your ML Journey</h3>
<p class="text-sm mb-4 text-gray-600">"Start your ML learning with start button"</p>
<p class="mb-4 text-xs sm:text-sm text-gray-500">Build foundational skills and progress to advanced machine learning concepts</p>
<button onclick="startLearning()" class="button-hover bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-full font-semibold text-base shadow-lg w-full">
<i class="fas fa-rocket mr-2"></i>Start Learning
</button>
</div>
</div>
<!-- Mobile Buttons (visible on small screens) -->
<div class="block md:hidden mb-12 flex flex-col gap-4 mt-20">
<button onclick="takeQuiz()" class="button-hover bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white px-6 py-3 rounded-full font-semibold text-sm shadow-lg w-full">
<i class="fas fa-graduation-cap mr-2"></i>Test Your Knowledge
</button>
<button onclick="startLearning()" class="button-hover bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-full font-semibold text-sm shadow-lg w-full">
<i class="fas fa-rocket mr-2"></i>Start Learning
</button>
</div>
</div>
<!-- Modal Message Box -->
<div id="messageModal" class="fixed inset-0 z-50 flex items-center justify-center modal hidden">
<div class="modal-content p-8 rounded-2xl shadow-lg max-w-sm w-full mx-4 transform transition-all scale-95 duration-300">
<h3 id="modalTitle" class="text-2xl font-bold mb-4 text-center"></h3>
<p id="modalMessage" class="text-gray-300 mb-6 text-center"></p>
<div class="flex justify-center">
<button onclick="hideMessage()" class="button-hover bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-full font-semibold shadow-lg">
OK
</button>
</div>
</div>
</div>
<script>
/**
* Shows a custom message box as a modal.
* @param {string} title The title of the message box.
* @param {string} message The message to display.
*/
function showMessage(title, message) {
const modal = document.getElementById('messageModal');
const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage');
modalTitle.textContent = title;
modalMessage.textContent = message;
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden'; // Prevents scrolling
}
/**
* Hides the custom message box.
*/
function hideMessage() {
const modal = document.getElementById('messageModal');
modal.classList.add('hidden');
document.body.style.overflow = ''; // Restores scrolling
}
/**
* Function to handle the start learning button click.
*/
function startLearning() {
// Redirects to home.html when the button is clicked
window.location.href = '/home';
}
/**
* Function to handle the take quiz button click.
*/
function takeQuiz() {
window.location.href = '/Test-home';
// Here you would typically redirect to the quiz page, e.g.,
// window.location.href = '/assessment';
}
// --- Bouncing balls canvas code ---
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Ball class with improved physics and dynamic color
class Ball {
constructor(name, x, y, dx, dy) {
this.name = name;
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.isControlled = false;
this.isHovered = false;
// Set the font size based on screen width
const fontSize = window.innerWidth < 768 ? '12px' : '16px';
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCtx.font = `bold ${fontSize} Arial`;
const metrics = tempCtx.measureText(this.name);
this.width = metrics.width;
this.height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
this.radius = Math.max(this.width, this.height) / 2;
this.mass = this.radius * 0.1;
}
draw() {
// Glow effect for hover and control
if (this.isHovered || this.isControlled) {
ctx.fillStyle = 'rgba(0, 153, 255, 0.3)';
ctx.beginPath();
ctx.roundRect(this.x - this.width/2 - 3, this.y - this.height/2 - 3, this.width + 6, this.height + 6, 5);
ctx.fill();
}
// Draw the machine learning algorithm's name
ctx.fillStyle = this.isControlled ? '#3498db' : '#555555';
const fontSize = window.innerWidth < 768 ? '12px' : '16px';
ctx.font = `bold ${fontSize} Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(this.name, this.x, this.y);
}
update() {
if (!this.isControlled) {
this.x += this.dx;
this.y += this.dy;
if (this.x + this.width / 2 > canvas.width) {
this.dx *= -1;
this.x = canvas.width - this.width / 2;
}
if (this.x - this.width / 2 < 0) {
this.dx *= -1;
this.x = this.width / 2;
}
if (this.y + this.height / 2 > canvas.height) {
this.dy *= -1;
this.y = canvas.height - this.height / 2;
}
if (this.y - this.height / 2 < 0) {
this.dy *= -1;
this.y = this.height / 2;
}
}
}
}
function rotate(dx, dy, angle) {
const rotatedVelocities = {
x: dx * Math.cos(angle) - dy * Math.sin(angle),
y: dx * Math.sin(angle) + dy * Math.cos(angle)
};
return rotatedVelocities;
}
function resolveCollision(ball1, ball2) {
const dx = ball1.x - ball2.x;
const dy = ball1.y - ball2.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const sumOfRadii = ball1.radius + ball2.radius;
if (distance < sumOfRadii) {
const overlap = sumOfRadii - distance;
const pushBackVectorX = dx / distance * overlap * 0.5;
const pushBackVectorY = dy / distance * overlap * 0.5;
ball1.x += pushBackVectorX;
ball1.y += pushBackVectorY;
ball2.x -= pushBackVectorX;
ball2.y -= pushBackVectorY;
const angle = -Math.atan2(dy, dx);
const m1 = ball1.mass;
const m2 = ball2.mass;
const u1 = rotate(ball1.dx, ball1.dy, angle);
const u2 = rotate(ball2.dx, ball2.dy, angle);
const v1 = {
x: ((u1.x * (m1 - m2)) / (m1 + m2)) + ((u2.x * 2 * m2) / (m1 + m2)),
y: u1.y
};
const v2 = {
x: ((u2.x * (m2 - m1)) / (m1 + m2)) + ((u1.x * 2 * m1) / (m1 + m2)),
y: u2.y
};
const vFinal1 = rotate(v1.x, v1.y, -angle);
const vFinal2 = rotate(v2.x, v2.y, -angle);
ball1.dx = vFinal1.x;
ball1.dy = vFinal1.y;
ball2.dx = vFinal2.x;
ball2.dy = vFinal2.y;
}
}
const algorithmNames = [
'Supervised', 'Unsupervised', 'Python', 'LLM', 'RAG', 'Agentic AI',
'Reinforcement Learning', 'Deep Learning', 'Computer Vision',
'Generative AI', 'Natural Language Processing', 'Vector Embeddings',
'Transformers', 'Prompt Engineering', 'Data Science', 'Machine Learning'
];
const mobileAlgorithmNames = [
'Supervised', 'Unsupervised', 'LLM', 'RAG','Deep Learning', 'Computer Vision',
'Generative AI', 'NLP', 'Vector Embeddings'
];
let balls = [];
function getRandomPosition() {
return {
x: Math.random() * (canvas.width * 0.8) + (canvas.width * 0.1),
y: Math.random() * (canvas.height * 0.8) + (canvas.height * 0.1)
};
}
function getRandomVelocity() {
const speed = 2;
const angle = Math.random() * 2 * Math.PI;
return {
dx: Math.cos(angle) * speed,
dy: Math.sin(angle) * speed
};
}
function initializeBalls() {
const names = window.innerWidth < 768 ? mobileAlgorithmNames : algorithmNames;
balls = names.map(name => {
const pos = getRandomPosition();
const vel = getRandomVelocity();
return new Ball(name, pos.x, pos.y, vel.dx, vel.dy);
});
}
let controlledBall = null;
let startX, startY;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < balls.length; i++) {
balls[i].update();
balls[i].draw();
}
for (let i = 0; i < balls.length; i++) {
for (let j = i + 1; j < balls.length; j++) {
resolveCollision(balls[i], balls[j]);
}
}
requestAnimationFrame(animate);
}
canvas.addEventListener('mousedown', (event) => {
const mouseX = event.clientX;
const mouseY = event.clientY;
for (let i = 0; i < balls.length; i++) {
const ball = balls[i];
const distance = Math.sqrt((mouseX - ball.x) ** 2 + (mouseY - ball.y) ** 2);
if (distance < ball.radius) {
controlledBall = ball;
controlledBall.isControlled = true;
startX = controlledBall.x;
startY = controlledBall.y;
break;
}
}
});
canvas.addEventListener('mousemove', (event) => {
const mouseX = event.clientX;
const mouseY = event.clientY;
let isHovering = false;
balls.forEach(ball => {
const distance = Math.sqrt((mouseX - ball.x) ** 2 + (mouseY - ball.y) ** 2);
if (distance < ball.radius) {
ball.isHovered = true;
isHovering = true;
} else {
ball.isHovered = false;
}
});
if (isHovering || controlledBall) {
canvas.style.cursor = 'pointer';
} else {
canvas.style.cursor = 'default';
}
if (controlledBall) {
controlledBall.x = mouseX;
controlledBall.y = mouseY;
}
});
canvas.addEventListener('mouseup', () => {
if (controlledBall) {
const speedFactor = 0.1;
let dx = (controlledBall.x - startX) * speedFactor;
let dy = (controlledBall.y - startY) * speedFactor;
const maxSpeed = 10;
if (Math.sqrt(dx*dx + dy*dy) > maxSpeed) {
const angle = Math.atan2(dy, dx);
dx = Math.cos(angle) * maxSpeed;
dy = Math.sin(angle) * maxSpeed;
}
controlledBall.dx = dx;
controlledBall.dy = dy;
controlledBall.isControlled = false;
controlledBall = null;
}
});
// Functions for the modal message box
function showMessage(title, message) {
const modal = document.getElementById('messageModal');
const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage');
modalTitle.textContent = title;
modalMessage.textContent = message;
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden'; // Prevents scrolling
}
function hideMessage() {
const modal = document.getElementById('messageModal');
modal.classList.add('hidden');
document.body.style.overflow = ''; // Restores scrolling
}
function startLearning() {
window.location.href = '/home';
}
function takeQuiz() {
window.location.href = '/Test-home';
// Here you would typically redirect to the quiz page, e.g.,
// window.location.href = '/assessment';
}
// Adjust canvas size dynamically on screen resize
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Re-initialize the balls to adjust the number of names
initializeBalls();
}
window.addEventListener('resize', resizeCanvas);
// Start the animation and initialize balls on page load
initializeBalls();
animate();
</script>
</body>
</html>