<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta charset="utf-8">
<title>
OAS | Home
</title>
<meta content="Bootply" name="generator">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<!-- Bootstrap core CSS -->
<link href="https://oas.iae.ac.tz/media/css/bootstrap.min.css" rel="stylesheet">
<!-- Animation CSS -->
<link href="https://oas.iae.ac.tz/media/css/animate.css" rel="stylesheet">
<link href="https://oas.iae.ac.tz/media/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="https://oas.iae.ac.tz/media/css/login.css" rel="stylesheet">
<link href="https://oas.iae.ac.tz/media/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
<link href="https://oas.iae.ac.tz/media/css/plugins/select2/select2.min.css" rel="stylesheet">
<link href="https://oas.iae.ac.tz/media/css/select2-bootstrap.css" rel="stylesheet">
<!-- Mainly scripts -->
<script src="https://oas.iae.ac.tz/media/js/jquery-3.7.0.js">
</script>
<script src="https://oas.iae.ac.tz/media/js/bootstrap.min.js">
</script>
<script src="https://oas.iae.ac.tz/media/js/plugins/metisMenu/jquery.metisMenu.js">
</script>
<script src="https://oas.iae.ac.tz/media/js/plugins/slimscroll/jquery.slimscroll.min.js">
</script>
<!-- Data picker -->
<script src="https://oas.iae.ac.tz/media/js/jquery-confirm.min.js">
</script>
<link href="https://oas.iae.ac.tz/media/css/jquery-confirm.min.css" rel="stylesheet">
<script src="https://oas.iae.ac.tz/media/js/plugins/datapicker/bootstrap-datepicker.js">
</script>
<script src="https://oas.iae.ac.tz/media/js/plugins/select2/select2.full.min.js">
</script>
<!-- Custom styles for this template -->
<link href="https://oas.iae.ac.tz/media/css/style.css" rel="stylesheet">
<link href="https://oas.iae.ac.tz/media/css/procedure.css" rel="stylesheet">
<script src="https://oas.iae.ac.tz/media/js/script1.js">
</script>
<style>
body {
color : #333;
font-size : 14px;
}
</style>
</head>
<body class="white-bg">
<div class="header-div" style="background-color: #FFFFFF; border-bottom: 5px solid #f4a024;">
<div class="container">
<div class="row">
<div style="background: transparent; height: 80px; margin-left: 10px; overflow: hidden;">
<div style="float: left; width: 150px; height: 80px; margin: 0px 0px 0px 20px; border: 0px solid red;">
<img src="https://oas.iae.ac.tz/images/logo.png" style=" margin: 0px 0px 0px 0px;">
</div>
<div style="float: left; margin: 0px 0px 0px 10px;">
<div style="color: #49628e; font-size: 20px; margin: 13px 0px 0px 10px; font-weight: bold;">
INSTITUTE OF ADULT EDUCATION
</div>
<div style="color: #49628e; font-size: 15px; margin: 0px 0px 0px 10px;">
SARIS ONLINE APPLICATION SYSTEM
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
</div>
</div>
<div class="block white">
<div class="row">
<div class="wrapper wrapper-content animate fadeInUpBig">
<style>
.oas-login-shell {
--ink : #16324f;
--ink-soft : #5b7084;
--surface : #ffffff;
--surface-soft : #f5f8fb;
--line : rgba(22, 50, 79, 0.12);
--accent : #d8891c;
--accent-deep : #b96f10;
--hero : linear-gradient(135deg, #0f3554 0%, #1f5a77 55%, #f0a53a 100%);
margin : 28px auto 48px;
max-width : 1180px;
padding : 0 18px;
}
.oas-login-grid {
display : grid;
gap : 24px;
grid-template-columns: 1.15fr 0.9fr;
align-items : stretch;
}
.oas-login-hero,
.oas-login-card {
border-radius : 28px;
overflow : hidden;
box-shadow : 0 28px 70px rgba(15, 53, 84, 0.12);
}
.oas-login-hero {
background : var(--hero);
color : #fff8ef;
padding : 42px;
position : relative;
min-height : 540px;
}
.oas-login-hero:before,
.oas-login-hero:after {
content : "";
position : absolute;
border-radius : 999px;
background : rgba(255, 255, 255, 0.1);
}
.oas-login-hero:before {
width : 260px;
height : 260px;
top : -90px;
right : -70px;
}
.oas-login-hero:after {
width : 180px;
height : 180px;
bottom : 36px;
right : 72px;
}
.oas-login-badge {
display : inline-flex;
align-items : center;
gap : 10px;
background : rgba(255, 255, 255, 0.14);
border : 1px solid rgba(255, 255, 255, 0.22);
border-radius : 999px;
font-size : 12px;
font-weight : 700;
letter-spacing : 0.12em;
padding : 10px 16px;
text-transform : uppercase;
}
.oas-login-hero h1 {
color : #fff;
font-size : 42px;
font-weight : 800;
letter-spacing : -0.04em;
line-height : 1.05;
margin : 26px 0 18px;
max-width : 520px;
}
.oas-login-hero p {
color : rgba(255, 248, 239, 0.88);
font-size : 16px;
line-height : 1.75;
margin : 0 0 26px;
max-width : 560px;
}
.oas-login-actions {
display : flex;
flex-wrap : wrap;
gap : 12px;
margin-bottom : 34px;
}
.oas-login-link {
border-radius : 999px;
display : inline-flex;
align-items : center;
gap : 10px;
font-weight : 700;
padding : 12px 18px;
text-decoration : none !important;
transition : transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.oas-login-link:hover {
transform : translateY(-1px);
}
.oas-login-link.primary {
background : #fff4df;
box-shadow : 0 14px 28px rgba(6, 22, 35, 0.18);
color : #7a4707;
}
.oas-login-link.secondary {
background : rgba(255, 255, 255, 0.12);
border : 1px solid rgba(255, 255, 255, 0.18);
color : #fffef8;
}
.oas-login-points {
display : grid;
gap : 14px;
margin : 0;
padding : 0;
}
.oas-login-point {
backdrop-filter : blur(10px);
background : rgba(8, 28, 44, 0.18);
border : 1px solid rgba(255, 255, 255, 0.14);
border-radius : 18px;
list-style : none;
padding : 16px 18px;
}
.oas-login-point strong {
color : #fff;
display : block;
font-size : 15px;
margin-bottom : 6px;
}
.oas-login-point span {
color : rgba(255, 248, 239, 0.85);
display : block;
font-size : 14px;
line-height : 1.6;
}
.oas-login-card {
background : var(--surface);
border : 1px solid rgba(15, 53, 84, 0.08);
padding : 34px 32px 28px;
position : relative;
}
.oas-login-card:before {
background : linear-gradient(90deg, #0f3554 0%, #f0a53a 100%);
content : "";
height : 6px;
left : 0;
position : absolute;
top : 0;
width : 100%;
}
.oas-login-card h2 {
color : var(--ink);
font-size : 30px;
font-weight : 800;
letter-spacing : -0.03em;
margin : 0 0 8px;
}
.oas-login-card p {
color : var(--ink-soft);
font-size : 15px;
line-height : 1.7;
margin : 0 0 24px;
}
.oas-login-message {
background : #fff8ef;
border : 1px solid rgba(216, 137, 28, 0.2);
border-radius : 16px;
color : #8b5a13;
font-size : 13px;
margin-bottom : 18px;
padding : 12px 14px;
}
.oas-login-form {
display : grid;
gap : 16px;
}
.oas-field {
display : grid;
gap : 8px;
}
.oas-field label {
color : var(--ink);
font-size : 13px;
font-weight : 700;
letter-spacing : 0.04em;
margin : 0;
text-transform : uppercase;
}
.oas-field input {
background : var(--surface-soft);
border : 1px solid var(--line);
border-radius : 16px;
box-shadow : none;
color : var(--ink);
font-size : 15px;
height : 54px;
padding : 0 16px;
transition : border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
width : 100%;
}
.oas-field input:focus {
background : #fff;
border-color : rgba(15, 53, 84, 0.4);
box-shadow : 0 0 0 4px rgba(15, 53, 84, 0.08);
outline : none;
}
.oas-password-wrap {
position : relative;
}
.oas-password-wrap input {
padding-right : 58px;
}
.oas-password-toggle {
background : transparent;
border : 0;
color : var(--ink-soft);
font-size : 18px;
position : absolute;
right : 14px;
top : 50%;
transform : translateY(-50%);
}
.oas-field .required {
color : #c0392b;
font-size : 12px;
margin : -2px 2px 0;
}
.oas-login-meta {
align-items : center;
display : flex;
flex-wrap : wrap;
gap : 12px;
justify-content : space-between;
}
.oas-remember {
align-items : center;
color : var(--ink-soft);
display : inline-flex;
font-size : 14px;
gap : 10px;
margin : 0;
}
.oas-remember input {
accent-color : #0f3554;
height : 16px;
margin : 0;
width : 16px;
}
.oas-forgot {
color : var(--ink);
font-size : 14px;
font-weight : 700;
text-decoration : none;
}
.oas-login-submit {
background : linear-gradient(135deg, #0f3554 0%, #1e5674 100%);
border : 0;
border-radius : 18px;
box-shadow : 0 18px 32px rgba(15, 53, 84, 0.18);
color : #fff;
font-size : 15px;
font-weight : 800;
letter-spacing : 0.04em;
padding : 15px 20px;
text-transform : uppercase;
transition : transform 0.2s ease, box-shadow 0.2s ease;
width : 100%;
}
.oas-login-submit:hover {
box-shadow : 0 22px 36px rgba(15, 53, 84, 0.22);
transform : translateY(-1px);
}
.oas-login-footer {
border-top : 1px solid var(--line);
color : var(--ink-soft);
font-size : 13px;
margin-top : 22px;
padding-top : 18px;
text-align : center;
}
.oas-login-footer a {
color : var(--ink);
font-weight : 700;
text-decoration : none;
}
@media (max-width: 991px) {
.oas-login-grid {
grid-template-columns: 1fr;
}
.oas-login-hero,
.oas-login-card {
border-radius : 24px;
}
.oas-login-hero {
min-height : auto;
padding : 34px 24px;
}
.oas-login-card {
padding : 30px 22px 24px;
}
.oas-login-hero h1 {
font-size : 34px;
}
}
@media (max-width: 575px) {
.oas-login-shell {
margin-top : 16px;
padding : 0 10px;
}
.oas-login-hero h1 {
font-size : 29px;
}
.oas-login-card h2 {
font-size : 25px;
}
.oas-login-meta {
align-items : flex-start;
flex-direction : column;
}
}
</style>
<section class="oas-login-shell">
<div class="oas-login-grid">
<div class="oas-login-hero">
<span class="oas-login-badge">
<i class="fa fa-shield">
</i>
Applicant Portal
</span>
<h1>
Continue your application with a cleaner, faster login experience.
</h1>
<p>
SARIS Online Application System gives applicants one place to start an application,
track progress, upload required documents, and receive updates without the usual back-and-forth.
</p>
<div class="oas-login-actions">
<a class="oas-login-link primary" href="https://oas.iae.ac.tz/index.php/registration_start">
<i class="fa fa-arrow-right">
</i>
Start Application
</a>
<a class="oas-login-link secondary" data-content="1. <a target='_blank' href='http://oas.iae.ac.tz/uploads/docs/certificate_diploma_programme.pdf'>Entry Qualifications</a> <br/><br/><br/>" data-html="true" data-original-title="Admission Requirement <a style='float:right;' href='javascript:void(0);' class='close_popover'>X</a>" data-placement="bottom" data-toggle="popover" href="javascript:void(0);" role="button">
<i class="fa fa-book">
</i>
Admission Requirements
</a>
</div>
<ul class="oas-login-points">
<li class="oas-login-point">
<strong>
Simple guided flow
</strong>
<span>
Create an account, complete your profile, attach documents, and submit from one streamlined dashboard.
</span>
</li>
<li class="oas-login-point">
<strong>
Real-time status updates
</strong>
<span>
Receive payment, application, and admission progress updates as your application moves forward.
</span>
</li>
<li class="oas-login-point">
<strong>
Built for returning applicants
</strong>
<span>
Log back in at any time to continue where you left off without restarting the process.
</span>
</li>
</ul>
</div>
<div class="oas-login-card">
<h2>
Sign in
</h2>
<p>
Use your SARIS account credentials to continue your application or review your applicant dashboard.
</p>
<form accept-charset="utf-8" action="https://oas.iae.ac.tz/index.php/login" autocomplete="on" class="oas-login-form" method="post">
<div class="oas-field">
<label for="identity">
Username
</label>
<input autocomplete="username" id="identity" name="identity" placeholder="Enter your username" type="text" value="">
</div>
<div class="oas-field">
<label for="password">
Password
</label>
<div class="oas-password-wrap">
<input autocomplete="current-password" id="password" name="password" placeholder="Enter your password" type="password">
<button aria-label="Show password" class="oas-password-toggle" id="togglePassword" type="button">
<i class="fa fa-eye">
</i>
</button>
</div>
</div>
<div class="oas-login-meta">
<label class="oas-remember" for="remember">
<input id="remember" name="remember" type="checkbox" value="1">
Keep me signed in
</label>
<a class="oas-forgot" href="https://oas.iae.ac.tz/index.php/forgot_password">
Forgot password?
</a>
</div>
<button class="oas-login-submit" type="submit">
Log In Securely
</button>
</form>
<div class="oas-login-footer">
New here?
<a href="https://oas.iae.ac.tz/index.php/registration_start">
Create an application account
</a>
</div>
</div>
</div>
</section>
<script>
$(function() {
$('#togglePassword').on('click', function() {
var $password = $('#password');
var isPassword = $password.attr('type') === 'password';
$password.attr('type', isPassword ? 'text' : 'password');
$(this).find('i').toggleClass('fa-eye fa-eye-slash');
});
});
</script>
</div>
<div class="footer fixed" style="margin-left:0px !important; font-size: 10px; border-top: 2px solid #ccc;">
<div class="pull-right">
Design and Developed by
<strong>
<a href="http://www.zalongwa.com" target="_blank">
Zalongwa Technologies
</a>
</strong>
</div>
<strong>
<div>
<strong>
© 2026
<a href="http://www.iae.ac.tz/" rel="noopener noreferrer" target="_blank">
INSTITUTE OF ADULT EDUCATION
</a>
</strong>
</div>
</strong>
</div>
<strong>
</strong>
</div>
<strong>
</strong>
</div>
<strong>
<!-- Custom and plugin javascript -->
<script src="https://oas.iae.ac.tz/media/js/inspinia.js">
</script>
<script src="https://oas.iae.ac.tz/media/js/plugins/pace/pace.min.js">
</script>
<!-- ******************************POP UP************************************ -->
<div aria-hidden="true" aria-labelledby="myModal" class="modal fade" data-backdrop="dynamic" data-keyboard="false" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id="model_header" style="display: none;">
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body" id="modal_body">
<div style="height: 100px; line-height: 100px; text-align: center;">
<img src="https://oas.iae.ac.tz/icon/loader.gif">
Loading....
</div>
</div>
<div class="modal-footer" id="model_footer" style="display: none;">
<button class="btn btn-default" data-dismiss="modal" type="button">
Close
</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('body').on('hidden.bs.popover', function(e) {
$(e.target).data("bs.popover").inState.click = false;
});
$('body').on("click", '.close_popover', function(e) {
$('[data-toggle="popover"]').each(function(e) {
$(this).popover('hide');
});
});
});
function numbersonly(e, value) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode != 8 && unicode != 46 && unicode != 9) {
if (unicode < 48 || unicode > 57) return false;
}
}
</script>
</strong>
</body>
</html>