A cosmic-themed interactive directory of 56 Kazakhstani universities — catalog, interactive map, side-by-side comparison, AI-powered ENT/GPA filter, and 360° virtual tours. All static frontend, zero frameworks.
UniViGate is a visual portal for prospective students exploring universities in Kazakhstan. Browse a full catalog, find universities on an interactive Leaflet map, compare institutions side-by-side, filter by exam scores and subjects, or take 360° virtual tours — all wrapped in a custom CSS-animated black hole and starfield theme.
Built as a team academic project (team GIT) with vanilla HTML/CSS/JS — no frameworks, no build step, no backend.
| Page | What it does |
|---|---|
Landing (index.html) |
Hero with stats counter, circular radial menu (7 buttons), animated search bar with autocomplete, news feed, Chart.js statistics |
Catalog (pages/unilist.html) |
Searchable grid of all 56 universities — logos, city, type, founding year, tag-based filtering |
Detail (pages/university.html) |
Full university profile: QS rank, contacts, ENT/GPA requirements, faculties, programs by degree, scholarships, accreditations |
Map (pages/map.html) |
Leaflet map of Kazakhstan with 19 region clusters + individual university markers; info panel with detail cards |
Compare (pages/compare.html) |
Pick 2 universities + discipline, see 7-category side-by-side comparison with color-coded highlights |
AI Searcher (pages/ai-searcher.html) |
Filter by ENT score + subject combination + GPA; shows matching programs with grant/paid probability |
3D Tours (pages/3d-tours.html) |
Glassmorphism cards linking to external 360° virtual tours of Kazakhstani universities |
Cosmic space with a CSS-only animated black hole (7 concentric layers: corona → glow → accretion disks → photon ring → event horizon → gravitational lensing), two-layer twinkling starfield, 6 shooting stars with staggered delays, and a drifting nebula gradient mesh. UI surfaces use glassmorphism (backdrop-filter: blur()). Headings are set in Orbitron, body text in Roboto.
No build step required. Just open any HTML file in a browser:
start index.html # Windows
open index.html # macOS
xdg-open index.html # LinuxAll pages work statically. The AI chat widget in the landing page is UI-only (backend planned but not built).
A Node.js proxy server to Google Gemini (gemini-2.0-flash) is planned for the AI chat and calculator widgets:
# Not yet implemented — future:
# data/.env → GEMINI_KEY=your_key
# npm install
# npm start → http://localhost:3001| Core | Vanilla HTML5, CSS3, JavaScript |
| Map | Leaflet.js 1.9.4 + OpenStreetMap tiles |
| Charts | Chart.js |
| Icons | Font Awesome 6 |
| Fonts | Orbitron (headings), Roboto (body) |
| Data | 56 universities across 19 regions, ~5300 lines of JS data |
├── index.html # Landing page
├── pages/ # 6 sub-pages
│ ├── unilist.html # University catalog
│ ├── university.html # Dynamic detail page (?id=XXX)
│ ├── map.html # Interactive map
│ ├── compare.html # Comparison tool
│ ├── ai-searcher.html # ENT/GPA filter
│ └── 3d-tours.html # Virtual tour links
├── styles/
│ ├── core.css # Design tokens, black hole, starfield
│ ├── components.css # Reusable UI components
│ ├── pages.css # Page-specific layouts
│ └── map.css # Map overrides, info panel
├── js/
│ ├── main.js # Landing: radial menu, search
│ ├── map.js # Leaflet map logic
│ ├── compare.js # Comparison engine
│ ├── ai-searcher.js # ENT/GPA filter
│ ├── university-page.js # Detail page renderer
│ ├── generalDB.js # Data access layer
│ └── universities/ # Master dataset (~5300 lines)
├── images/ # University logos
└── data/ # JSON dumps
Three languages — English, Russian, Kazakh — toggled via .lang-switch__btn buttons on every page. Selection is stored in localStorage (ui-lang).
Team academic project — no license specified.