Skip to content

Instantly share code, notes, and snippets.

@theIYD

theIYD/index.html

Created July 21, 2018 10:54
Show Gist options
  • Save theIYD/a3d0b60648fb86f2f0922d277f79e9f1 to your computer and use it in GitHub Desktop.
Save theIYD/a3d0b60648fb86f2f0922d277f79e9f1 to your computer and use it in GitHub Desktop.
Download ZIP
SDC - Basic Profile
Raw
index.html
<div class="card mx-auto mt-4 shadow p-3 mb-5 bg-white rounded">
<div class="container mt-4 mb-4">
<ul class="nav nav-pills flex-column flex-sm-row mb-3 text-center" id="pills-tab" role="tablist">
<li class="nav-item flex-sm-fill">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Basic Eligibility</a>
</li>
<li class="nav-item flex-sm-fill">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Personal Information</a>
</li>
<li class="nav-item flex-sm-fill">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
Compliance Information</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<form action="">
<br>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Name of Higher Education Institution</label>
<input type="text" id="txtinst_hei_name" value=" " class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Date of establishment of the Institution</label>
<input type="date" id="txtinst_hei_doe" class="form-control">
</div>
<div class="form-group">
<label>Type</label>
<div class="radio">
<label><input type="radio" name="Type" id="optradioaccr" value="Accreditation" checked="checked"> Accreditation </label>
</div>
<div class="radio">
<label><input type="radio" name="Type" id="optradioreaccess"> Reassessment </label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Cycle of Accreditation</label>
<select id="ddinstaccrcycle" class="form-control">
<option name="Select" value="S">Select</option>
<option name="Cycle1" value="1">1</option>
<option name="Cycle2" value="2">2</option>
<option name="Cycle3" value="3">3</option>
<option name="Cycle4" value="4">4</option>
<option name="Cycle5" value="5">5</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<form action="">
<br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Address Line 1 </label>
<input type="text" id="txtinst_ad1" value="" class="form-control" placeholder="36, John St">
</div>
<div class="form-group">
<label>Address Line 2 </label>
<input type="text" id="txtinst_ad2" value="" class="form-control" placeholder="Nr Westland, OH">
</div>
<!-- <div class="form-group">
<label>Address Line3 </label>
<input type="text" id="txtinst_ad3" value="" class="form-control" style="margin-bottom: 0px;" >
</div>-->
<div class="form-group">
<label>Phone </label>
<input type="number" id="txtinstcity" value="" class="form-control" placeholder="Landline no">
</div>
<div class="form-group">
<label>Fax No </label>
<input type="number" id="txtinstpincode" value="" class="form-control">
</div>
<div class="form-group">
<label>State </label>
<select id="ddunivstate" class="form-control">
<option name="Select" value="S">Select</option>
<option name="Maharashtra" value="Maharashtra">Maharashtra</option>
<option name="Goa" value="Goa">Goa</option>
<option name="Panjab" value="Panjab">Punjab</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>City</label>
<input type="text" id="txtinst_phone" value="" class="form-control">
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="number" id="txtinst_fax" value="" class="form-control">
</div>
<div class="form-group">
<label>Registered Mobile No. </label>
<input type="number" id="txtinst_regmobile" value="" class="form-control">
</div>
<div class="form-group">
<label>Registered email</label>
<input type="email" id="txtinst_regemail" value="" class="form-control">
</div>
<div class="form-group">
<label>Alternate email</label>
<input type="email" id="txtinst_altemail" value="" class="form-control">
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<form action="">
<div class="row">
<div class="col-sm-6">
<div class="row">
<label for="">Years of graduation of the last two batches</label>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="" id="">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="" id="">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="">Whether the College is Affiliated</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Name of the Affiliating University</label>
<select name="" id="" class="form-control">
<option value="yes">Mumbai University</option>
<option value="no">Pune University</option>
<option value="no">Marathwada University</option>
</select>
</div>
<div class="form-group">
<label for="">State in which the University is located.</label>
<select name="" id="" class="form-control">
<option value="yes">Maharashtra</option>
<option value="no">Goa</option>
<option value="no">Punjab</option>
</select>
</div>
<div class="form-group">
<label for="">Is the College offering programmes recognized by Statutory Regulatory Authorities (SRA) other than UGC?</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Is offering programmes recognized by any Statutory Regulatory Authorities (SRA) are the programmes recognized by Association of Indian Universities (AIU) or other appropriate Government authorities as equivalent To UG/ PG Programmes</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Does the University function from own campus</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Nature of the College</label>
<select name="" id="" class="form-control">
<option value="yes">Government</option>
<option value="no">Private</option>
<option value="no">Grant-in-aid</option>
<option value="no">Self-financing</option>
<option value="no">Consultant</option>
</select>
</div>
<div class="form-group">
<label for="">Is the Institution recognized under section 2(f) of the UGC Act? If yes, date of the recognition by UGC under section 2(f) (Upload document)</label>
<div class="d-flex justify-content-center">
<select name="" id="" class="form-control p-2 mr-2">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<input type="file" class="p-2 file-upload-input">
<button class="btn p-2 ml-2 upload"><span class="small">Upload Document</span></button>
</div>
</div>
<div class="form-group">
<label for="">(If yes)Date of recognition by UGC</label>
<input type="date" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="">Date of recognition by UGC 12B</label>
<input type="date" class="form-control">
</div>
<div class="form-group">
<label for="">Remark 12B</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Is the institution recognized as an Autonomous College by the UGC?</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Is the institution recognized as a ‘College with Potential for Excellence (CPE)’ by the UGC? (if yes, upload document)</label>
<div class="d-flex justify-content-center p-2 mr-2">
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<input type="file" class="p-2 file-upload-input">
<button class="btn upload p-2 ml-2"><span class="small">Upload Document</span></button>
</div>
</div>
<div class="form-group">
<label for="">Is the institution recognized as a ‘College of Excellence’ by the UGC?</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Date of the uploading data on MHRD website for All India Survey on Higher Education (AISHE).</label>
<input type="date" class="form-control">
</div>
<div class="form-group">
<label for="">Has the institution made statutory declaration on the institution website under Section 4 (1)(b) of the RTI act 2005 as issued and amended from time to time</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<label for="">Does the institution have Statutory Cells/ Committees ?</label>
<select name="" id="" class="form-control">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group">
<div><label for=""><input type="checkbox"> Committee for SC/ ST</label></div>
<div><label for=""><input type="checkbox"> Internal Compliant Committee</label></div>
<div><label for=""><input type="checkbox"> Minority Cell</label></div>
<div><label for=""><input type="checkbox"> Anti-ragging Committee</label></div>
<div><label for=""><input type="checkbox"> Grievance Redressal Committee</label></div>
<div><label for=""><input type="checkbox"> OBC Cell</label></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Raw
script.js
$('.container').append('<div class="d-flex justify-content-end"><button class="p-2 next btn">Save & Next</button></div>');
$('.next').click(function(){
$('.nav-pills li .active').next('li').find('a').trigger('click');
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
Raw
style.css
.card {
width: 80%;
}
/* not active */
.nav-pills .nav-link:not(.active) {
background-color: transparent;
color: #00446b !important;
}
/* active (faded) */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: #00446b !important;
color: white;
}
.next, .upload {
background-color: #00446b;
color: #fff;
}
.tab-pane .form-group > label {
font-weight: bold;
}
.file-upload-input {
width: 100%;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment