Skip to content

Commit

Permalink
created application form for primary & secondary
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nightburnn
Nightburnn committed Nov 8, 2024
1 parent c49611b commit 41175da
Show file tree
Hide file tree
Showing 13 changed files with 1,989 additions and 1,625 deletions.
33 changes: 9 additions & 24 deletions Alumni.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@

<div class="container position-relative d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename" style="color: red;"><span style="color: green;">Juli</span>tola</h1>
</a>
Expand All @@ -56,15 +55,15 @@ <h1 class="sitename" style="color: red;"><span style="color: green;">Juli</span>
<ul>
<li><a href="index.html#hero" class="active">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#why">Academics</a></li>
<li><a href="index.html#specials">Activities</a></li>
<li><a href="index.html#events">News</a></li>
<li><a href="index.html#academics">Academics</a></li>
<li><a href="index.html#activities">Activities</a></li>
<li><a href="index.html#news">News</a></li>
<li><a href="index.html#gallery">Gallery</a></li>
<li class="dropdown"><a href="#discover"><span>Discover</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Career</a></li>
<li><a href="#">Alumni</a></li>

<li><a href="Alumni.html#discover">Alumni</a></li>
<li><a href="ApplicationPri.html">Application Form Primary</a></li>
<li><a href="ApplicationSec.html">Application Form Secondary</a></li>
</ul>
</li>
<li><a href="index.html#contact">Contact</a></li>
Expand Down Expand Up @@ -230,19 +229,17 @@ <h2>Alumni</h2>
<div><span>Check Our</span> <span class="description-title">Yearbook</span></div>
</div><!-- End Section Title -->
<div class="yearbook-description">
<p>Here’s a trip down memory lane! Celebrate the graduating classes and relive the moments from the Class of '09, '10, and more.</p>
<p>Here’s a trip down memory lane! Celebrate the graduating classes and relive the moments.</p>
</div>
<div class="yearbook">
<div id="yearbook-container"></div>

</div>
<script type="module">
// Import Firebase modules
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-storage.js";
import { getFirestore, collection, addDoc, getDocs, deleteDoc, doc, updateDoc, arrayUnion, getDoc, setDoc } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";

// Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDKHZ1viqinUqJcs4He9QGnq2Ld82jSt-M",
authDomain: "juli-tola.firebaseapp.com",
Expand All @@ -253,31 +250,26 @@ <h2>Alumni</h2>
measurementId: "G-FVNPXHKQLJ"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Function to load current classes and students dynamically
async function loadClasses() {
const classList = document.getElementById('yearbook-container');
classList.innerHTML = ''; // Clear previous content
classList.innerHTML = '';

try {
const classesSnapshot = await getDocs(collection(db, 'classes'));
classesSnapshot.forEach(doc => {
const className = doc.id;
const students = doc.data().students || [];

// Create the yearbook set for each class
const yearbookSet = document.createElement('div');
yearbookSet.classList.add('yearbook-set');

// Create the header for the class
const classHeader = document.createElement('h3');
classHeader.textContent = `Class of '${className}`;
yearbookSet.appendChild(classHeader);

// Create yearbook items for each student
students.forEach(student => {
const yearbookItem = document.createElement('div');
yearbookItem.classList.add('yearbook-item');
Expand All @@ -301,7 +293,6 @@ <h2>Alumni</h2>
}
}

// Load classes on page load
window.onload = loadClasses;
</script>
</section>
Expand Down Expand Up @@ -386,37 +377,31 @@ <h4>Call:</h4>

<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
event.preventDefault();

// Reset the visibility of all messages before sending
document.querySelector('.loading').style.display = 'block';
document.querySelector('.err-message').style.display = 'none';
document.querySelector('.sent-message').style.display = 'none';

// Collect form data
var formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
subject: document.getElementById('subject').value,
message: document.getElementById('message').value,
};

// Send the email using Email.js
emailjs.send("service_nescwfd", "template_9pjxwwb", formData)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);

// Hide loading and error messages, show success message
document.querySelector('.loading').style.display = 'none';
document.querySelector('.err-message').style.display = 'none';
document.querySelector('.sent-message').style.display = 'block';

// Reset the form
document.getElementById('contact-form').reset();
}, function(error) {
console.log('FAILED...', error);

// Hide loading and success messages, show error message
document.querySelector('.loading').style.display = 'none';
document.querySelector('.sent-message').style.display = 'none';
document.querySelector('.err-message').style.display = 'block';
Expand Down
264 changes: 264 additions & 0 deletions ApplicationPri.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>JULI-TOLA INTERNATIONAL SCHOOL</title>
<meta name="description" content="">
<meta name="keywords" content="">

<!-- Favicons -->
<link href="assets/img/book.png" rel="icon">
<link href="assets/img/book.png" rel="apple-touch-icon">

<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Satisfy:wght@400&display=swap" rel="stylesheet">

<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">


</head>

<style>
.index-page header{
background-color: rgba(21, 17, 13, 0.85) ;
}
</style>

<body class="index-page">

<header id="header" class="header fixed-top">


<div class="branding d-flex align-items-cente">

<div class="container position-relative d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename" style="color: red;"><span style="color: green;">Juli</span>tola</h1>
</a>

<nav id="navmenu" class="navmenu">
<ul>
<li><a href="index.html#hero">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#academics">Academics</a></li>
<li><a href="index.html#activities">Activities</a></li>
<li><a href="index.html#news">News</a></li>
<li><a href="index.html#gallery">Gallery</a></li>
<li class="dropdown"><a href="#discover" class="active"><span>Discover</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="Alumni.html#discover">Alumni</a></li>
<li><a href="ApplicationPri.html">Application Form Primary</a></li>
<li><a href="ApplicationSec.html">Application Form Secondary</a></li>
</ul>
</li>
<li><a href="index.html#contact">Contact</a></li>
<li><a href="Login.html">Login</a></li>

</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>

</div>

</div>

</header>

<main class="main mt-5">

<section id="sec" class="sec section py-5" style="background-color: #f9f9f9;">
<!-- Section Title -->

<div class="container section-title" data-aos="fade-up">
<h2>Application</h2>
<div><span>Download the Application Form for</span> <span class="description-title">Primary Admission</span></div>
</div>


<!-- Download and Upload Form -->
<div class="container">
<!-- Download Button -->
<div class="text-center my-4 download">
<a href="assets/form/Application Form Primary.pdf" download="Application Form Primary.pdf" class="btn btn-primary btn-lg px-4">
<i class="bi bi-download"></i> Download Application Form
</a>
</div>

<!-- Upload Form -->
<div class="card shadow p-4 mx-auto">
<h5 class="card-title text-center">Upload Completed Form</h5>

<form id="uploadForm">
<div class="mb-3">
<label for="formFile" class="form-label">Choose File</label>
<input class="form-control" type="file" id="formFile" accept=".pdf,.doc,.docx">
</div>
<button type="submit" class="btn btn-success w-100">Upload Form</button>
</form>
<!-- Success/Error Message -->
<div id="statusMessage" class="mt-3 text-center"></div>
</div>

<!-- Embedded Viewer for Uploaded Form -->
<div id="formViewer" class="mt-4" style="display: none;">
<h5>View Uploaded Form</h5>
<iframe id="uploadedFormIframe" src="" style="width:100%; height:500px; border:none;"></iframe>
</div>
</div>
</section>


</main>

<footer id="footer" class="footer dark-background">

<div class="container">
<div class="row gy-3">
<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-geo-alt icon"></i>
<div class="address">
<h4>Address</h4>
<p>TPS 62, Block 21 Plot 1 Crusher (Gada-Shagari),</p>
<p> Along Okene Road, Lokoja, Kogi State</p>
<p></p>
</div>

</div>

<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-telephone icon"></i>
<div>
<h4>Contact</h4>
<p>
<strong>Phone:</strong> <span>+ 234 80 85773372</span><br>
<strong>Email:</strong> <span>Info@julitolaschools.com</span><br>
</p>
</div>
</div>

<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-clock icon"></i>
<div>
<h4>Opening Hours</h4>
<p>
<span>8:00 a.m. – 4:00 p.m.</span><br>
<strong>Sunday</strong>: <span>Closed</span>
</p>
</div>
</div>

<div class="col-lg-3 col-md-6">
<h4>Follow Us</h4>
<div class="social-links d-flex">
<a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>

</div>
</div>

<div class="container copyright text-center mt-4">
<p><span>Copyright © 2024</span> <strong class="px-1 sitename"> Julitola International Schools |
</strong> <span>Powered by Julitola International Schools.</span></p>
</div>

</footer>

<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

<!-- Preloader -->
<div id="preloader"></div>

<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

<!-- Main JS File -->
<script src="assets/js/main.js"></script>
<script type="module">
// Import Firebase modules
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-storage.js";
import { getFirestore, collection, addDoc, getDocs, deleteDoc, doc, updateDoc, arrayUnion, getDoc, setDoc } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";

// Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDKHZ1viqinUqJcs4He9QGnq2Ld82jSt-M",
authDomain: "juli-tola.firebaseapp.com",
projectId: "juli-tola",
storageBucket: "juli-tola.appspot.com",
messagingSenderId: "452807393853",
appId: "1:452807393853:web:2c58c3ca257ea605f6e054",
measurementId: "G-FVNPXHKQLJ"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);



// Upload Form Submission
document.getElementById("uploadForm").onsubmit = async function(e) {
e.preventDefault();
const fileInput = document.getElementById('formFile');
const file = fileInput.files[0];
const statusMessage = document.getElementById('statusMessage');

if (file) {
const storageRef = ref(storage, `application_forms/${file.name}`);
try {
await uploadBytes(storageRef, file);
const downloadURL = await getDownloadURL(storageRef);

// Display success message
statusMessage.className = "alert alert-success";
statusMessage.innerHTML = "Form uploaded successfully! You can view it below.";
statusMessage.style.display = "block";

// Set the iframe src to the uploaded file URL and show the iframe
const formViewer = document.getElementById('formViewer');
const iframe = document.getElementById('uploadedFormIframe');
iframe.src = downloadURL;
formViewer.style.display = "block"; // Display the viewer

} catch (error) {
statusMessage.className = "alert alert-danger";
statusMessage.innerHTML = `Error uploading form: ${error.message}`;
statusMessage.style.display = "block";
}
} else {
statusMessage.className = "alert alert-warning";
statusMessage.innerHTML = "Please select a file to upload.";
statusMessage.style.display = "block";
}
};


</script>

</body>

</html>
Loading

0 comments on commit 41175da

Please sign in to comment.