Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
db16e5c9d3 |
95
assets/css/custom.css
Normal file
95
assets/css/custom.css
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@700&family=Poppins:wght@600&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #0D0D0D;
|
||||||
|
--neon-blue: #00A8FF;
|
||||||
|
--neon-purple: #A55BFF;
|
||||||
|
--red: #FF4B4B;
|
||||||
|
--text: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--neon-blue);
|
||||||
|
text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--text);
|
||||||
|
text-shadow: 0 0 8px var(--neon-purple);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workshop-box {
|
||||||
|
border: 1px solid var(--neon-purple);
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 2rem auto;
|
||||||
|
max-width: 450px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: rgba(13, 13, 13, 0.8);
|
||||||
|
box-shadow: 0 0 15px var(--neon-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workshop-box p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
background: var(--neon-blue);
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 12px 30px;
|
||||||
|
color: var(--background);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--neon-purple);
|
||||||
|
color: var(--text);
|
||||||
|
box-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
border: 1px solid var(--neon-purple);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
border-color: var(--neon-blue);
|
||||||
|
color: var(--text);
|
||||||
|
box-shadow: 0 0 8px var(--neon-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
color: var(--neon-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
28
db/migrations/001_create_users_table.php
Normal file
28
db/migrations/001_create_users_table.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
require_once __DIR__ . '/../config.php';
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
CREATE TABLE IF NOT EXISTS users (
|
||||||
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
name VARCHAR(255) NOT NULL,
|
||||||
|
usn VARCHAR(255) NOT NULL UNIQUE,
|
||||||
|
mobile VARCHAR(20) NOT NULL,
|
||||||
|
referralCount INT DEFAULT 0,
|
||||||
|
hasWonReward VARCHAR(3) DEFAULT 'no',
|
||||||
|
rewardClaimed VARCHAR(3) DEFAULT 'no',
|
||||||
|
referralLink VARCHAR(255) NULL,
|
||||||
|
gameLevel INT DEFAULT 0,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
|
";
|
||||||
|
|
||||||
|
$pdo->exec($sql);
|
||||||
|
|
||||||
|
echo "Table 'users' created successfully (if it didn't exist)." . PHP_EOL;
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
die("DB ERROR: " . $e->getMessage());
|
||||||
|
}
|
||||||
190
index.php
190
index.php
@ -1,150 +1,52 @@
|
|||||||
<?php
|
|
||||||
declare(strict_types=1);
|
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>New Style</title>
|
<title>Studio RIT - Play & Win</title>
|
||||||
<?php
|
|
||||||
// Read project preview data from environment
|
<?php
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
// Read project preview data from environment
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Studio RIT presents a workshop promotion game. Play and win rewards!';
|
||||||
?>
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
<?php if ($projectDescription): ?>
|
?>
|
||||||
<!-- Meta description -->
|
<?php if ($projectDescription): ?>
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<!-- Meta description -->
|
||||||
<!-- Open Graph meta tags -->
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<!-- Open Graph meta tags -->
|
||||||
<!-- Twitter meta tags -->
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<!-- Twitter meta tags -->
|
||||||
<?php endif; ?>
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<?php if ($projectImageUrl): ?>
|
<?php endif; ?>
|
||||||
<!-- Open Graph image -->
|
<?php if ($projectImageUrl): ?>
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<!-- Open Graph image -->
|
||||||
<!-- Twitter image -->
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<!-- Twitter image -->
|
||||||
<?php endif; ?>
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<?php endif; ?>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<style>
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main class="container">
|
||||||
<div class="card">
|
<div class="logo">Studio RIT</div>
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<h1>
|
||||||
<span class="sr-only">Loading…</span>
|
STUDIO RIT PRESENTS<br>
|
||||||
</div>
|
PLAY & WIN REWARD
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
</h1>
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
<div class="workshop-box">
|
||||||
</div>
|
<p>12th December – Illustrator</p>
|
||||||
</main>
|
<p>13th & 16th December – Premiere Pro</p>
|
||||||
<footer>
|
<p>17th, 18th, & 19th December – Blender</p>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<p><strong>Time:</strong> 4:30 PM – 5:30 PM</p>
|
||||||
</footer>
|
</div>
|
||||||
|
|
||||||
|
<a href="register.php" class="btn btn-primary btn-lg">Play Game → Win Reward!</a>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
50
level1.php
Normal file
50
level1.php
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Level 1 - Studio RIT</title>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<div class="logo">Studio RIT</div>
|
||||||
|
<h2>Level 1: Draw a Logo</h2>
|
||||||
|
<p class="instructions mb-4">Draw any simple logo using the pen tool.</p>
|
||||||
|
|
||||||
|
<div class="canvas-container">
|
||||||
|
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<button id="clear" class="btn btn-secondary">Clear</button>
|
||||||
|
<button id="done" class="btn btn-primary">Done</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
var canvas = document.getElementById('signature-pad');
|
||||||
|
var signaturePad = new SignaturePad(canvas, {
|
||||||
|
backgroundColor: 'rgb(255, 255, 255)'
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('clear').addEventListener('click', function () {
|
||||||
|
signaturePad.clear();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('done').addEventListener('click', function () {
|
||||||
|
// Here we will handle the completion logic
|
||||||
|
window.location.href = 'update_level.php';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
level1_complete.php
Normal file
51
level1_complete.php
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Level 1 Complete - Studio RIT</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
<style>
|
||||||
|
/* Simple modal-like styles */
|
||||||
|
.popup-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.popup-content {
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 500px;
|
||||||
|
border: 1px solid #00A8FF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="popup-container">
|
||||||
|
<div class="popup-content">
|
||||||
|
<h2 class="mb-3">Great!</h2>
|
||||||
|
<p class="mb-4">You learned the first step of graphic designing. Attend the workshop to get hands-on experience.</p>
|
||||||
|
<a href="level2.php" class="btn btn-primary">Go to Level 2</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
94
level2.php
Normal file
94
level2.php
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Level 2 - Studio RIT</title>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
<style>
|
||||||
|
.timeline {
|
||||||
|
display: flex;
|
||||||
|
padding: 20px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
border-radius: 10px;
|
||||||
|
min-height: 150px;
|
||||||
|
border: 1px solid #00A8FF;
|
||||||
|
}
|
||||||
|
.clip {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 10px;
|
||||||
|
background: #A55BFF;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: grab;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.clip.sortable-ghost {
|
||||||
|
opacity: 0.4;
|
||||||
|
background: #00A8FF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<div class="logo">Studio RIT</div>
|
||||||
|
<h2>Level 2: Video Timeline Puzzle</h2>
|
||||||
|
<p class="mt-4">Arrange the clips in the correct order (1-2-3-4) by dragging them.</p>
|
||||||
|
|
||||||
|
<div id="timeline" class="timeline">
|
||||||
|
<div class="clip" id="clip3">3</div>
|
||||||
|
<div class="clip" id="clip1">1</div>
|
||||||
|
<div class="clip" id="clip4">4</div>
|
||||||
|
<div class="clip" id="clip2">2</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="checkOrderBtn" class="btn btn-primary mt-4">Check Order</button>
|
||||||
|
<p id="feedback" class="mt-3"></p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
||||||
|
<script>
|
||||||
|
const timeline = document.getElementById('timeline');
|
||||||
|
new Sortable(timeline, {
|
||||||
|
animation: 150,
|
||||||
|
ghostClass: 'sortable-ghost'
|
||||||
|
});
|
||||||
|
|
||||||
|
const checkOrderBtn = document.getElementById('checkOrderBtn');
|
||||||
|
const feedback = document.getElementById('feedback');
|
||||||
|
const correctOrder = ['clip1', 'clip2', 'clip3', 'clip4'];
|
||||||
|
|
||||||
|
checkOrderBtn.addEventListener('click', () => {
|
||||||
|
const clips = timeline.getElementsByClassName('clip');
|
||||||
|
const currentOrder = Array.from(clips).map(clip => clip.id);
|
||||||
|
|
||||||
|
if (JSON.stringify(currentOrder) === JSON.stringify(correctOrder)) {
|
||||||
|
feedback.textContent = 'Correct! Proceeding to the next level...';
|
||||||
|
feedback.style.color = '#28a745';
|
||||||
|
window.location.href = 'update_level2.php';
|
||||||
|
} else {
|
||||||
|
feedback.textContent = 'Incorrect order. Try again!';
|
||||||
|
feedback.style.color = '#FF4B4B';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
level2_complete.php
Normal file
50
level2_complete.php
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Level 2 Complete - Studio RIT</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
<style>
|
||||||
|
.popup-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.popup-content {
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 500px;
|
||||||
|
border: 1px solid #00A8FF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="popup-container">
|
||||||
|
<div class="popup-content">
|
||||||
|
<h2 class="mb-3">Awesome!</h2>
|
||||||
|
<p class="mb-4">You've mastered the timeline. Video editing is all about sequence. Come to the workshop to learn more!</p>
|
||||||
|
<a href="level3.php" class="btn btn-primary">Go to Level 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
146
level3.php
Normal file
146
level3.php
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Level 3 - The Spin Wheel</title>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
<style>
|
||||||
|
.wheel-container {
|
||||||
|
position: relative;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ffc107;
|
||||||
|
border: 4px solid #fff;
|
||||||
|
color: #212529;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-center">
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
<div class="logo">Studio RIT</div>
|
||||||
|
<h2>Level 3: The Spin Wheel</h2>
|
||||||
|
<p>Spin the wheel and land on the 'Logo' segment to win!</p>
|
||||||
|
|
||||||
|
<div class="wheel-container">
|
||||||
|
<canvas id="canvas" width="400" height="400"></canvas>
|
||||||
|
<div class="spin-btn" id="spin_button">SPIN</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/winwheeljs@2.8.0/dist/Winwheel.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Create new wheel object specifying the parameters at creation time.
|
||||||
|
let theWheel = new Winwheel({
|
||||||
|
'numSegments' : 8, // Specify number of segments.
|
||||||
|
'outerRadius' : 200, // Set outer radius so wheel fits inside the background.
|
||||||
|
'textFontSize' : 28, // Set font size as desired.
|
||||||
|
'segments' : // Define segments including colour and text.
|
||||||
|
[
|
||||||
|
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
|
||||||
|
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
|
||||||
|
{'fillStyle' : '#7de6ef', 'text' : 'Logo'},
|
||||||
|
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
|
||||||
|
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
|
||||||
|
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
|
||||||
|
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
|
||||||
|
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
|
||||||
|
],
|
||||||
|
'animation' : // Specify the animation to use.
|
||||||
|
{
|
||||||
|
'type' : 'spinToStop',
|
||||||
|
'duration' : 5, // Duration in seconds.
|
||||||
|
'spins' : 8, // Number of complete spins.
|
||||||
|
'callbackFinished' : alertPrize,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Vars used by the code in this page to do power controls.
|
||||||
|
let wheelSpinning = false;
|
||||||
|
|
||||||
|
// -------------------------------------------------------
|
||||||
|
// Function to handle the onClick on the power buttons.
|
||||||
|
// -------------------------------------------------------
|
||||||
|
function startSpin()
|
||||||
|
{
|
||||||
|
// Ensure that spinning can't be clicked again while already running.
|
||||||
|
if (wheelSpinning == false) {
|
||||||
|
// Begin the spin animation by calling startAnimation on the wheel object.
|
||||||
|
theWheel.startAnimation();
|
||||||
|
|
||||||
|
// Set to true so that power can't be changed and spin button re-enabled during
|
||||||
|
// the animation. The user will have to reset before spinning again.
|
||||||
|
wheelSpinning = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------------------
|
||||||
|
// Function for reset button.
|
||||||
|
// -------------------------------------------------------
|
||||||
|
function resetWheel()
|
||||||
|
{
|
||||||
|
theWheel.stopAnimation(false); // Stop the animation, false as parameter so does not call callback function.
|
||||||
|
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
|
||||||
|
theWheel.draw(); // Call draw to render changes to the wheel.
|
||||||
|
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------------------
|
||||||
|
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
|
||||||
|
// note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this.
|
||||||
|
// -------------------------------------------------------
|
||||||
|
function alertPrize(indicatedSegment)
|
||||||
|
{
|
||||||
|
// Do basic alert of the prize Descriptions.
|
||||||
|
if (indicatedSegment.text == 'Logo') {
|
||||||
|
alert("You won! Proceeding to the next level.");
|
||||||
|
window.location.href = 'update_level3.php';
|
||||||
|
} else {
|
||||||
|
alert("You didn't land on the Logo. Try again!");
|
||||||
|
resetWheel();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('spin_button').addEventListener('click', startSpin);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
level3_complete.php
Normal file
50
level3_complete.php
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Game Complete - Studio RIT</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
<style>
|
||||||
|
.popup-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.popup-content {
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 500px;
|
||||||
|
border: 1px solid #00A8FF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="popup-container">
|
||||||
|
<div class="popup-content">
|
||||||
|
<h2 class="mb-3">Congratulations!</h2>
|
||||||
|
<p class="mb-4">You have completed all the levels. You are a true RITian!</p>
|
||||||
|
<a href="/" class="btn btn-primary">Back to Home</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
register.php
Normal file
36
register.php
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Register - Studio RIT</title>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<div class="logo">Studio RIT</div>
|
||||||
|
<h2>Create Your Account</h2>
|
||||||
|
|
||||||
|
<form action="start_game.php" method="POST" class="mt-4">
|
||||||
|
<div class="mb-3 text-start">
|
||||||
|
<label for="name" class="form-label">Name</label>
|
||||||
|
<input type="text" class="form-control" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 text-start">
|
||||||
|
<label for="usn" class="form-label">USN</label>
|
||||||
|
<input type="text" class="form-control" id="usn" name="usn" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 text-start">
|
||||||
|
<label for="mobile" class="form-label">Mobile Number</label>
|
||||||
|
<input type="tel" class="form-control" id="mobile" name="mobile" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg mt-3">Start Game</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
start_game.php
Normal file
68
start_game.php
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
require_once __DIR__ . '/db/config.php';
|
||||||
|
|
||||||
|
// --- Input Validation ---
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] !== "POST") {
|
||||||
|
header('Location: register.php');
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
$name = trim($_POST['name'] ?? '');
|
||||||
|
$usn = trim($_POST['usn'] ?? '');
|
||||||
|
$mobile = trim($_POST['mobile'] ?? '');
|
||||||
|
|
||||||
|
if (empty($name) || empty($usn) || empty($mobile)) {
|
||||||
|
// In a real app, show a proper error message
|
||||||
|
die('All fields are required.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Database Interaction ---
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
|
||||||
|
// Check if USN already exists
|
||||||
|
$stmt = $pdo->prepare("SELECT id FROM users WHERE usn = ?");
|
||||||
|
$stmt->execute([$usn]);
|
||||||
|
if ($stmt->fetch()) {
|
||||||
|
// For simplicity, we'll just log them in and send to the game.
|
||||||
|
// A real app might show an error "USN already registered".
|
||||||
|
$stmt = $pdo->prepare("SELECT id FROM users WHERE usn = ?");
|
||||||
|
$stmt->execute([$usn]);
|
||||||
|
$user = $stmt->fetch();
|
||||||
|
$_SESSION['user_id'] = $user['id'];
|
||||||
|
header('Location: level1.php'); // Redirect to level 1
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Create a new User (without referral link first)
|
||||||
|
$sql = "INSERT INTO users (name, usn, mobile, referralCount, hasWonReward, rewardClaimed, gameLevel) VALUES (?, ?, ?, 0, 'no', 'no', 0)";
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
$stmt->execute([$name, $usn, $mobile]);
|
||||||
|
|
||||||
|
// 2. Get the new User's ID
|
||||||
|
$userId = $pdo->lastInsertId();
|
||||||
|
|
||||||
|
// 3. Generate and update the referralLink
|
||||||
|
// Note: This assumes the domain is http:// and uses the current host.
|
||||||
|
// In a production app, this should be a configurable value.
|
||||||
|
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https" : "http";
|
||||||
|
$host = $_SERVER['HTTP_HOST'] ?? 'localhost';
|
||||||
|
$referralLink = $protocol . '://' . $host . '?ref=' . $userId;
|
||||||
|
|
||||||
|
$updateSql = "UPDATE users SET referralLink = ? WHERE id = ?";
|
||||||
|
$updateStmt = $pdo->prepare($updateSql);
|
||||||
|
$updateStmt->execute([$referralLink, $userId]);
|
||||||
|
|
||||||
|
// 4. Log this user in by storing their ID in the session
|
||||||
|
$_SESSION['user_id'] = $userId;
|
||||||
|
|
||||||
|
// 5. Navigate to Level 1 (placeholder)
|
||||||
|
// We will create level1.php in a future step.
|
||||||
|
header('Location: level1.php');
|
||||||
|
exit();
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
// In a real app, log this error and show a generic error page.
|
||||||
|
die("Database error: " . $e->getMessage());
|
||||||
|
}
|
||||||
28
update_level.php
Normal file
28
update_level.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
require_once 'db/config.php';
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
$userId = $_SESSION['user_id'];
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
$stmt = $pdo->prepare("UPDATE users SET gameLevel = 1 WHERE id = :id");
|
||||||
|
$stmt->bindParam(':id', $userId, PDO::PARAM_INT);
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
|
// Redirect to a success page
|
||||||
|
header("Location: level1_complete.php");
|
||||||
|
exit();
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
// In a real app, log this error instead of displaying it
|
||||||
|
die("Database error: " . $e->getMessage());
|
||||||
|
}
|
||||||
|
?>
|
||||||
28
update_level2.php
Normal file
28
update_level2.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
require_once 'db/config.php';
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
$userId = $_SESSION['user_id'];
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
$stmt = $pdo->prepare("UPDATE users SET gameLevel = 2 WHERE id = :id");
|
||||||
|
$stmt->bindParam(':id', $userId, PDO::PARAM_INT);
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
|
// Redirect to a success page
|
||||||
|
header("Location: level2_complete.php");
|
||||||
|
exit();
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
// In a real app, log this error instead of displaying it
|
||||||
|
die("Database error: " . $e->getMessage());
|
||||||
|
}
|
||||||
|
?>
|
||||||
28
update_level3.php
Normal file
28
update_level3.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
require_once 'db/config.php';
|
||||||
|
|
||||||
|
// Check if user is logged in
|
||||||
|
if (!isset($_SESSION['user_id'])) {
|
||||||
|
header("Location: register.php");
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
$userId = $_SESSION['user_id'];
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
$stmt = $pdo->prepare("UPDATE users SET gameLevel = 3 WHERE id = :id");
|
||||||
|
$stmt->bindParam(':id', $userId, PDO::PARAM_INT);
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
|
// Redirect to a success page
|
||||||
|
header("Location: level3_complete.php");
|
||||||
|
exit();
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
// In a real app, log this error instead of displaying it
|
||||||
|
die("Database error: " . $e->getMessage());
|
||||||
|
}
|
||||||
|
?>
|
||||||
Loading…
x
Reference in New Issue
Block a user