admin/TNCSC_Odoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tncsc_deployment module with custom website header, footer, and page overrides
Some checks failed
CI / Brand-leak check (push) Has been cancelled
Details
CI / flake8 / pylint-odoo / manifest completeness (push) Has been cancelled
Details
CI / Install all modules with --test-enable (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Alaguraj0361 2026-09-28 23:02:34 +05:30
parent f8fc4edcb7
commit 276e1e227b
5 changed files with 1223 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/tncsc_deployment/__manifest__.py
View File

@ -1,6 +1,6 @@
{
'name': 'TNCSC Deployment',
'version': '19.0.1.3.0',
'version': '19.0.1.3.3',
'category': 'Hidden',
'summary': 'Tamil Nadu Cultural Society of Canada - client configuration for the Community OS suite',
'description': """

101
addons/tncsc_deployment/data/events_data.xml
View File

@ -37,10 +37,36 @@
<record id="event_summer_picnic_2026" model="event.event">
<field name="name">TNCSC's Summer Picnic 2026</field>
<field name="stage_id" ref="event.event_stage_new"/>
<field name="subtitle">Community | Games | Family Fun</field>
<field name="date_begin" eval="'2026-10-11 14:00:00'"/>
<field name="date_end" eval="'2026-10-12 14:00:00'"/>
<field name="address_id" ref="partner_summer_picnic_venue"/>
<field name="website_published">True</field>
<field name="description" type="html">
<div class="event-story">
<h4 class="fw-bold mb-3" style="color: #120735;">Annual Community Summer Picnic</h4>
<p class="lead" style="color: #475569; font-size: 1.1rem; line-height: 1.75;">
Join Tamil families and friends from across Ontario for a sun-filled day of sports, outdoor games, delicious food, and community bonding.
</p>
<p style="color: #475569; font-size: 1.02rem; line-height: 1.8;">
Our annual Summer Picnic is one of TNCSC's most popular gatherings. Enjoy cricket and volleyball tournaments, children's games, potluck-style South Indian delicacies, and an opportunity to meet and connect with community members old and new.
</p>
<div class="row g-3 my-3">
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #e5a93c;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-futbol-o me-2" style="color: #e5a93c;"/>Sports &amp; Fun Games</h6>
<small class="text-muted">Cricket, volleyball, tug-of-war, and fun family activities for all ages.</small>
</div>
</div>
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #120735;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-cutlery me-2" style="color: #120735;"/>Picnic Lunch &amp; BBQ</h6>
<small class="text-muted">Authentic homemade South Indian treats, refreshing drinks, and BBQ.</small>
</div>
</div>
</div>
</div>
</field>
</record>
<!-- 2. Diwali Celebration (Booked) -->
@ -52,6 +78,31 @@
<field name="date_end" eval="'2026-11-05 16:30:00'"/>
<field name="address_id" ref="partner_diwali_venue"/>
<field name="website_published">True</field>
<field name="description" type="html">
<div class="event-story">
<h4 class="fw-bold mb-3" style="color: #120735;">Grand Diwali Celebration 2026</h4>
<p class="lead" style="color: #475569; font-size: 1.1rem; line-height: 1.75;">
Celebrate the Festival of Lights with TNCSC — a joyous evening celebrating the triumph of light over darkness and good over evil.
</p>
<p style="color: #475569; font-size: 1.02rem; line-height: 1.8;">
Featuring vibrant dance performances by local talents, melodious musical presentations, distribution of traditional Diwali sweets (Mithai), sparklers for children, and an exquisite festive banquet.
</p>
<div class="row g-3 my-3">
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #e5a93c;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-star me-2" style="color: #e5a93c;"/>Musical &amp; Dance Night</h6>
<small class="text-muted">Live orchestral music, classical and cinematic fusion dance by youth.</small>
</div>
</div>
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #120735;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-gift me-2" style="color: #120735;"/>Festive Dinner &amp; Sweets</h6>
<small class="text-muted">Traditional Diwali sweets, savory snacks, and festive multi-course dinner.</small>
</div>
</div>
</div>
</div>
</field>
</record>
<!-- 3. Tamil New Year Festival (Announced) -->
@ -63,6 +114,31 @@
<field name="date_end" eval="'2026-04-14 15:30:00'"/>
<field name="address_id" ref="partner_tamil_new_year_venue"/>
<field name="website_published">True</field>
<field name="description" type="html">
<div class="event-story">
<h4 class="fw-bold mb-3" style="color: #120735;">Tamil New Year (Chithirai Thirunaal) 2026</h4>
<p class="lead" style="color: #475569; font-size: 1.1rem; line-height: 1.75;">
Ring in the Tamil New Year (Puthandu) with joy, cultural pride, and festive community celebrations.
</p>
<p style="color: #475569; font-size: 1.02rem; line-height: 1.8;">
A landmark celebration featuring traditional Tamil greetings, Pattimandram (debate show), literary talks, youth talent shows, and a traditional festive lunch celebrating the spirit of renewal and unity.
</p>
<div class="row g-3 my-3">
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #e5a93c;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-microphone me-2" style="color: #e5a93c;"/>Pattimandram &amp; Literary Show</h6>
<small class="text-muted">Thought-provoking debate and speech showcases honoring Tamil literature.</small>
</div>
</div>
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #120735;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-leaf me-2" style="color: #120735;"/>New Year Feast</h6>
<small class="text-muted">Manga Pachadi, Payasam, and traditional New Year festive delicacies.</small>
</div>
</div>
</div>
</div>
</field>
</record>
<!-- 4. Pongal Celebration (Ended) -->
@ -74,5 +150,30 @@
<field name="date_end" eval="'2026-01-18 09:30:00'"/>
<field name="address_id" ref="partner_pongal_venue"/>
<field name="website_published">True</field>
<field name="description" type="html">
<div class="event-story">
<h4 class="fw-bold mb-3" style="color: #120735;">Celebrating Heritage, Harvest &amp; Community</h4>
<p class="lead" style="color: #475569; font-size: 1.1rem; line-height: 1.75;">
Pongal is the signature harvest festival of the Tamil people, expressing gratitude to the Sun God, nature, and the farm cattle for a bountiful year.
</p>
<p style="color: #475569; font-size: 1.02rem; line-height: 1.8;">
The Tamil Nadu Cultural Society of Canada invites all Tamil families and friends across the Greater Toronto Area to celebrate our rich traditions together. Experience the joy of traditional sweet Pongal cooking, soulful folk music (Nadaswaram &amp; Thavil), vibrant Bharatanatyam dance performances, traditional village games, and a grand festive feast (Vazhaillai Sappadu).
</p>
<div class="row g-3 my-3">
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #e5a93c;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-music me-2" style="color: #e5a93c;"/>Cultural Performances</h6>
<small class="text-muted">Classical Bharatanatyam, Tamil folk dance, and music recitals by community youth.</small>
</div>
</div>
<div class="col-md-6">
<div class="p-3 rounded-3" style="background-color: #f8fafc; border-left: 4px solid #120735;">
<h6 class="fw-bold mb-1" style="color: #120735;"><i class="fa fa-cutlery me-2" style="color: #120735;"/>Authentic Feast</h6>
<small class="text-muted">Freshly prepared Sakkarai Pongal, Ven Pongal, and traditional festive meal.</small>
</div>
</div>
</div>
</div>
</field>
</record>
</odoo>

15
addons/tncsc_deployment/migrations/19.0.1.3.3/pre-migrate.py Normal file
View File

@ -0,0 +1,15 @@
"""Reload the seeded website pages from views/website_pages.xml.
That file is noupdate="1" so edits made in the website editor survive
upgrades, but it also means upgrades never deliver template fixes.
Loading it once in 'init' mode rewrites the existing page views.
Runs before the module's data is loaded.
"""
from odoo import SUPERUSER_ID, api
from odoo.tools import convert_file
def migrate(cr, version):
env = api.Environment(cr, SUPERUSER_ID, {})
convert_file(env, 'tncsc_deployment', 'views/website_pages.xml', {}, mode='init', noupdate=True)

806
addons/tncsc_deployment/views/website_header_overrides.xml
View File

@ -103,6 +103,9 @@
<xpath expr="//t[@t-call='website.layout']" position="inside">
<t t-set="no_header" t-value="True"/>
</xpath>
<xpath expr="//div[hasclass('tncsc-hero-nav')]//a[@href='/contact']" position="after">
<t t-call="tncsc_deployment.website_member_login_button"/>
</xpath>
</template>
<template id="view_page_tamil_school_custom_header_only"
@ -127,29 +130,346 @@
</xpath>
</template>
<!-- Shared Custom Temple Footer for Overridden Pages -->
<template id="tncsc_custom_footer" name="TNCSC Custom Temple Footer">
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
<div class="container position-relative">
<!-- Emblem Logo -->
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
<!-- Description Copy -->
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
</p>
<!-- Footer Navigation Links -->
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
<span class="text-white-50">|</span>
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
<span class="text-white-50">|</span>
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
<span class="text-white-50">|</span>
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
</div>
<!-- Horizontal Divider -->
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
<!-- Social Icons -->
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
<a href="https://www.facebook.com/TNCSCCanada/" target="_blank" rel="noopener" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
<i class="fa fa-facebook"></i>
</a>
<a href="https://www.youtube.com/@tamilnaduculturalsocietyof5866" target="_blank" rel="noopener" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
<i class="fa fa-youtube-play"></i>
</a>
<a href="https://www.instagram.com/tncsc_canada" target="_blank" rel="noopener" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
<i class="fa fa-instagram"></i>
</a>
</div>
<!-- Floating Back to Top Button -->
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
<i class="fa fa-arrow-up fs-5"></i>
</a>
</div>
</footer>
</template>
<!-- School Registration Navigation & Branding -->
<template id="tncsc_school_reg_header_nav" name="TNCSC School Registration Navigation">
<div class="tncsc-top-header" style="background-color: #120735; padding: 14px 20px; text-align: center;">
<h1 style="font-size: 1.55rem; font-weight: 700; color: #ffffff; margin: 0; line-height: 1.2;">தமிழ்நாடு கலாச்சார சங்கம்</h1>
<p style="font-size: 1.1rem; font-weight: 400; color: #B8B2E6; margin: 2px 0 0 0;">Tamil Nadu Cultural Society of Canada</p>
</div>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1c0d48; border-bottom: 2px solid #e5a93c; padding: 8px 24px;">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center gap-2" href="/">
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 38px; width: auto;"/>
<span class="fw-bold text-white small d-none d-sm-inline">TNCSC</span>
</a>
<div class="d-flex align-items-center gap-2 ms-auto">
<a href="/tamil-school" class="btn btn-outline-light btn-sm rounded-pill px-3">
<i class="fa fa-graduation-cap me-1"></i> Tamil School
</a>
<a href="/membership/registration" class="btn btn-outline-warning btn-sm rounded-pill px-3">
<i class="fa fa-id-card me-1"></i> Membership
</a>
<t t-call="tncsc_deployment.website_member_login_button"/>
<style>
.tncsc-top-header {
background-color: #120735;
padding: 14px 20px;
text-align: center;
}
.tncsc-top-header .brand-title-ta {
font-size: 1.55rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.2;
font-family: var(--community-heading-font, sans-serif);
}
.tncsc-top-header .brand-subtitle-en {
font-size: 1.1rem;
font-weight: 400;
color: #B8B2E6;
margin: 2px 0 0 0;
}
.tncsc-hero-container {
position: relative;
}
.tncsc-hero-nav {
background: transparent !important;
padding: 16px 0;
border: none !important;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
.tncsc-hero-nav .nav-link {
color: #ffffff !important;
font-weight: 500;
font-size: 0.95rem;
padding: 6px 16px !important;
opacity: 0.92;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: opacity 0.2s;
}
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
opacity: 1;
color: #F5A623 !important;
}
.tncsc-dropdown {
position: relative;
display: inline-block;
}
.tncsc-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
background-color: #ffffff;
min-width: 230px;
padding: 12px 0;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
z-index: 1000;
text-align: left;
}
.tncsc-dropdown-menu::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tncsc-dropdown:hover .tncsc-dropdown-menu {
display: block !important;
}
.tncsc-dropdown-item {
display: block;
padding: 10px 24px;
color: #5B6C8F !important;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
text-shadow: none !important;
white-space: nowrap;
}
.tncsc-dropdown-item:hover {
color: #D89C43 !important;
background-color: #F8FAFC;
}
.tncsc-hero-nav .nav-link.active {
border-bottom: 2px solid #F5A623;
font-weight: 600;
}
.btn-tncsc-gold {
background-color: #D89C43;
color: #ffffff !important;
font-weight: 600;
font-size: 0.92rem;
padding: 10px 24px;
position: relative;
border: none;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.btn-tncsc-gold::before {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.btn-tncsc-gold::after {
content: '';
position: absolute;
bottom: -5px;
left: -5px;
width: 14px;
height: 14px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
.btn-tncsc-gold:hover {
background-color: #c48a35;
transform: translateY(-1px);
}
.tncsc-inner-hero {
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/tamil_class/tamil-class-banner.webp') center/cover no-repeat;
padding: 140px 0 90px 0;
text-align: center;
position: relative;
}
.school-reg-card {
margin-top: 60px !important;
margin-bottom: 80px !important;
box-shadow: 0 15px 40px rgba(18, 7, 53, 0.08) !important;
border-radius: 18px !important;
}
#footer:not(.tncsc-custom-footer),
footer#bottom:not(.tncsc-custom-footer),
.o_footer,
.o_footer_copyright,
.s_footer,
#o_footer,
footer:not(.tncsc-custom-footer) {
display: none !important;
}
@media (max-width: 991px) {
.tncsc-hero-nav {
position: relative !important;
background: #120735 !important;
}
.tncsc-hero-nav .collapse {
background: #120735;
padding: 20px;
border-radius: 8px;
margin-top: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.tncsc-hero-nav nav {
flex-direction: column;
align-items: flex-start !important;
gap: 15px !important;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tncsc-top-header {
padding: 10px;
}
.tncsc-top-header .brand-title-ta {
font-size: 1.15rem;
}
.tncsc-top-header .brand-subtitle-en {
font-size: 0.85rem;
}
.tncsc-top-header img {
height: 44px !important;
margin-right: 12px !important;
}
.tncsc-hero-nav .nav-link {
padding: 6px 10px !important;
font-size: 0.9rem;
}
.btn-tncsc-gold {
padding: 8px 16px;
font-size: 0.85rem;
}
.tncsc-custom-footer {
padding: 40px 15px 30px 15px !important;
}
.tncsc-custom-footer img {
height: 60px !important;
}
.tncsc-custom-footer .gap-3 {
flex-wrap: wrap;
gap: 10px !important;
}
.tncsc-inner-hero {
padding: 120px 0 50px 0 !important;
}
.tncsc-inner-hero h1.display-3 {
font-size: 2.2rem !important;
}
.school-reg-card {
margin-top: 30px !important;
padding: 24px 18px !important;
}
}
</style>
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
<div class="tncsc-top-header">
<div class="container d-flex align-items-center justify-content-center">
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
<div class="text-start">
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
</div>
</div>
</nav>
</div>
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
<div class="tncsc-hero-container">
<!-- Transparent Floating Navbar -->
<div class="tncsc-hero-nav">
<div class="container d-flex flex-wrap align-items-center justify-content-between">
<!-- Mobile Toggle Button -->
<div class="w-100 d-flex justify-content-end d-lg-none">
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuSchoolReg" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collapsible Menu -->
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuSchoolReg">
<nav class="d-flex align-items-center gap-1">
<a href="/" class="nav-link">Home</a>
<div class="tncsc-dropdown">
<a href="/about" class="nav-link">About +</a>
<div class="tncsc-dropdown-menu">
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
</div>
</div>
<a href="/event" class="nav-link">Events</a>
<div class="tncsc-dropdown">
<a href="/membership" class="nav-link">Membership +</a>
<div class="tncsc-dropdown-menu">
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
</div>
</div>
<a href="/tamil-school" class="nav-link active">Tamil Class</a>
<a href="/contact" class="nav-link">Contact</a>
</nav>
<div class="d-flex align-items-center gap-2 mt-3 mt-lg-0">
<t t-call="tncsc_deployment.website_member_login_button"/>
<a href="/event" class="btn-tncsc-gold py-2 px-3 align-self-start align-self-lg-center">
<i class="fa fa-ticket"></i> View Event
</a>
</div>
</div>
</div>
</div>
<!-- Inner Hero Title & Breadcrumb -->
<div class="tncsc-inner-hero">
<div class="container">
<h1 class="display-3 fw-bold text-white mb-3" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Tamil School Registration</h1>
<div class="fs-5 text-white-50 fw-medium">
<a href="/" class="text-white-50 text-decoration-none">Home</a>
<span class="mx-2 text-white-50">|</span>
<a href="/tamil-school" class="text-white-50 text-decoration-none">Tamil Class</a>
<span class="mx-2 text-white-50">|</span>
<span class="text-white">Registration</span>
</div>
</div>
</div>
</div>
</template>
<template id="view_school_reg_step_parent_header" inherit_id="community_school.registration_step_parent" name="TNCSC School Reg Header Parent">
@ -159,6 +479,10 @@
<xpath expr="//div[@id='wrap']" position="before">
<t t-call="tncsc_deployment.tncsc_school_reg_header_nav"/>
</xpath>
<xpath expr="//div[hasclass('school-reg-hero')]" position="replace"/>
<xpath expr="//div[@id='wrap']" position="after">
<t t-call="tncsc_deployment.tncsc_custom_footer"/>
</xpath>
</template>
<template id="view_school_reg_step_student_header" inherit_id="community_school.registration_step_student" name="TNCSC School Reg Header Student">
@ -168,6 +492,10 @@
<xpath expr="//div[@id='wrap']" position="before">
<t t-call="tncsc_deployment.tncsc_school_reg_header_nav"/>
</xpath>
<xpath expr="//div[hasclass('school-reg-hero')]" position="replace"/>
<xpath expr="//div[@id='wrap']" position="after">
<t t-call="tncsc_deployment.tncsc_custom_footer"/>
</xpath>
</template>
<template id="view_school_reg_step_class_header" inherit_id="community_school.registration_step_class" name="TNCSC School Reg Header Class">
@ -177,6 +505,10 @@
<xpath expr="//div[@id='wrap']" position="before">
<t t-call="tncsc_deployment.tncsc_school_reg_header_nav"/>
</xpath>
<xpath expr="//div[hasclass('school-reg-hero')]" position="replace"/>
<xpath expr="//div[@id='wrap']" position="after">
<t t-call="tncsc_deployment.tncsc_custom_footer"/>
</xpath>
</template>
<template id="view_school_reg_done_header" inherit_id="community_school.registration_done" name="TNCSC School Reg Header Done">
@ -186,6 +518,442 @@
<xpath expr="//div[@id='wrap']" position="before">
<t t-call="tncsc_deployment.tncsc_school_reg_header_nav"/>
</xpath>
<xpath expr="//div[@id='wrap']" position="after">
<t t-call="tncsc_deployment.tncsc_custom_footer"/>
</xpath>
</template>
<!-- Event Detail & Registration Navigation & Branding -->
<template id="tncsc_event_detail_header_nav" name="TNCSC Event Detail Navigation &amp; Banner">
<style>
.tncsc-top-header {
background-color: #120735;
padding: 14px 20px;
text-align: center;
}
.tncsc-top-header .brand-title-ta {
font-size: 1.55rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.2;
font-family: var(--community-heading-font, sans-serif);
}
.tncsc-top-header .brand-subtitle-en {
font-size: 1.1rem;
font-weight: 400;
color: #B8B2E6;
margin: 2px 0 0 0;
}
.tncsc-hero-container {
position: relative;
}
.tncsc-hero-nav {
background: transparent !important;
padding: 16px 0;
border: none !important;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
.tncsc-hero-nav .nav-link {
color: #ffffff !important;
font-weight: 500;
font-size: 0.95rem;
padding: 6px 16px !important;
opacity: 0.92;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: opacity 0.2s;
}
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
opacity: 1;
color: #F5A623 !important;
}
.tncsc-dropdown {
position: relative;
display: inline-block;
}
.tncsc-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
background-color: #ffffff;
min-width: 230px;
padding: 12px 0;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
z-index: 1000;
text-align: left;
}
.tncsc-dropdown-menu::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tncsc-dropdown:hover .tncsc-dropdown-menu {
display: block !important;
}
.tncsc-dropdown-item {
display: block;
padding: 10px 24px;
color: #5B6C8F !important;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
text-shadow: none !important;
white-space: nowrap;
}
.tncsc-dropdown-item:hover {
color: #D89C43 !important;
background-color: #F8FAFC;
}
.tncsc-hero-nav .nav-link.active {
border-bottom: 2px solid #F5A623;
font-weight: 600;
}
.btn-tncsc-gold {
background-color: #D89C43;
color: #ffffff !important;
font-weight: 600;
font-size: 0.92rem;
padding: 10px 24px;
position: relative;
border: none;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.btn-tncsc-gold::before {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.btn-tncsc-gold::after {
content: '';
position: absolute;
bottom: -5px;
left: -5px;
width: 14px;
height: 14px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
.btn-tncsc-gold:hover {
background-color: #c48a35;
transform: translateY(-1px);
}
.tncsc-inner-hero {
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/events/event-banner.webp') center/cover no-repeat;
padding: 140px 0 90px 0;
text-align: center;
position: relative;
}
/* Event Page Content and Layout Upgrades */
#wrap.o_wevent_event {
background-color: #f7f8fc !important;
padding-top: 50px !important;
padding-bottom: 80px !important;
font-family: var(--community-font, 'Outfit', 'Inter', sans-serif);
}
#o_wevent_event_submenu {
display: none !important;
}
#o_wevent_event_main_col {
background: #ffffff !important;
border-radius: 18px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 10px 30px rgba(18, 7, 53, 0.06) !important;
padding: 40px !important;
}
#o_wevent_event_main_cover_content {
display: none !important;
}
.o_wevent_event_main_cover {
border-radius: 14px !important;
min-height: 240px !important;
max-height: 380px !important;
margin-bottom: 24px !important;
box-shadow: 0 6px 20px rgba(18, 7, 53, 0.08) !important;
overflow: hidden !important;
}
#o_wevent_event_main_col div[itemprop="description"] {
color: #334155;
font-size: 1.05rem;
line-height: 1.8;
}
#o_wevent_event_main_col div[itemprop="description"] h4,
#o_wevent_event_main_col div[itemprop="description"] h5 {
color: #120735;
font-weight: 700;
}
/* Event Sidebar Upgrades */
#o_wevent_event_main_sidebar {
padding-top: 0 !important;
}
#o_wevent_event_main_sidebar .alert-warning {
background: #fffbeb !important;
border: 1px solid #fde68a !important;
color: #92400e !important;
border-radius: 14px !important;
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 1rem !important;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1) !important;
text-align: center;
}
#o_wevent_event_main_sidebar .o_wevent_sidebar_block,
#o_wevent_event_main_sidebar .o_wevent_bordered_block {
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid #e2e8f0 !important;
padding: 24px !important;
box-shadow: 0 6px 20px rgba(18, 7, 53, 0.05) !important;
margin-bottom: 20px !important;
}
#o_wevent_event_main_sidebar .o_wevent_sidebar_title {
color: #120735 !important;
font-weight: 700 !important;
font-size: 1.05rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-bottom: 2px solid #e5a93c !important;
padding-bottom: 8px !important;
margin-bottom: 16px !important;
display: inline-block;
}
#o_wevent_event_main_sidebar .btn-light {
background: #ffffff !important;
border: 1.5px solid #d19b33 !important;
color: #120735 !important;
font-weight: 600 !important;
border-radius: 30px !important;
padding: 8px 20px !important;
transition: all 0.2s ease !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
#o_wevent_event_main_sidebar .btn-light:hover {
background: #e5a93c !important;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(229, 169, 60, 0.35);
}
.o_wevent_dates_block .card {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
border: 1px solid #e2e8f0 !important;
border-left: 4px solid #e5a93c !important;
border-radius: 12px !important;
padding: 14px 18px !important;
}
.o_wevent_day_header_number {
font-size: 2.4rem !important;
font-weight: 800 !important;
color: #120735 !important;
}
.btn-primary.o_wevent_registration_btn,
#o_wevent_event_main a.btn-primary,
#o_wevent_event_main button.btn-primary {
background: linear-gradient(135deg, #e5a93c 0%, #d19b33 100%) !important;
border: 1px solid #d19b33 !important;
color: #120735 !important;
font-weight: 700 !important;
border-radius: 30px !important;
padding: 12px 28px !important;
box-shadow: 0 4px 14px rgba(229, 169, 60, 0.35) !important;
transition: all 0.25s ease !important;
}
.btn-primary.o_wevent_registration_btn:hover,
#o_wevent_event_main a.btn-primary:hover,
#o_wevent_event_main button.btn-primary:hover {
background: linear-gradient(135deg, #f3c669 0%, #e5a93c 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(229, 169, 60, 0.45) !important;
color: #120735 !important;
}
#footer:not(.tncsc-custom-footer),
footer#bottom:not(.tncsc-custom-footer),
.o_footer,
.o_footer_copyright,
.s_footer,
#o_footer,
footer:not(.tncsc-custom-footer) {
display: none !important;
}
@media (max-width: 991px) {
.tncsc-hero-nav {
position: relative !important;
background: #120735 !important;
}
.tncsc-hero-nav .collapse {
background: #120735;
padding: 20px;
border-radius: 8px;
margin-top: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.tncsc-hero-nav nav {
flex-direction: column;
align-items: flex-start !important;
gap: 15px !important;
margin-bottom: 20px;
}
#o_wevent_event_main_col {
margin-bottom: 30px !important;
padding: 24px !important;
}
}
@media (max-width: 767px) {
.tncsc-top-header {
padding: 10px;
}
.tncsc-top-header .brand-title-ta {
font-size: 1.15rem;
}
.tncsc-top-header .brand-subtitle-en {
font-size: 0.85rem;
}
.tncsc-top-header img {
height: 44px !important;
margin-right: 12px !important;
}
.tncsc-hero-nav .nav-link {
padding: 6px 10px !important;
font-size: 0.9rem;
}
.btn-tncsc-gold {
padding: 8px 16px;
font-size: 0.85rem;
}
.tncsc-custom-footer {
padding: 40px 15px 30px 15px !important;
}
.tncsc-custom-footer img {
height: 60px !important;
}
.tncsc-custom-footer .gap-3 {
flex-wrap: wrap;
gap: 10px !important;
}
.tncsc-inner-hero {
padding: 120px 0 50px 0 !important;
}
.tncsc-inner-hero h1.display-3 {
font-size: 2.2rem !important;
}
}
</style>
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
<div class="tncsc-top-header">
<div class="container d-flex align-items-center justify-content-center">
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
<div class="text-start">
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
</div>
</div>
</div>
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
<div class="tncsc-hero-container">
<!-- Transparent Floating Navbar -->
<div class="tncsc-hero-nav">
<div class="container d-flex flex-wrap align-items-center justify-content-between">
<!-- Mobile Toggle Button -->
<div class="w-100 d-flex justify-content-end d-lg-none">
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuEventDetail" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collapsible Menu -->
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuEventDetail">
<nav class="d-flex align-items-center gap-1">
<a href="/" class="nav-link">Home</a>
<div class="tncsc-dropdown">
<a href="/about" class="nav-link">About +</a>
<div class="tncsc-dropdown-menu">
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
</div>
</div>
<a href="/event" class="nav-link active">Events</a>
<div class="tncsc-dropdown">
<a href="/membership" class="nav-link">Membership +</a>
<div class="tncsc-dropdown-menu">
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
</div>
</div>
<a href="/tamil-school" class="nav-link">Tamil Class</a>
<a href="/contact" class="nav-link">Contact</a>
</nav>
<div class="d-flex align-items-center gap-2 mt-3 mt-lg-0">
<t t-call="tncsc_deployment.website_member_login_button"/>
<a href="/event" class="btn-tncsc-gold py-2 px-3 align-self-start align-self-lg-center">
<i class="fa fa-ticket"></i> All Events
</a>
</div>
</div>
</div>
</div>
<!-- Inner Hero Title & Breadcrumb -->
<div class="tncsc-inner-hero">
<div class="container">
<h1 class="display-3 fw-bold text-white mb-2" style="font-size: 3.2rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">
<t t-if="event" t-out="event.name"/>
<t t-else="">Events</t>
</h1>
<p t-if="event and event.subtitle" class="lead text-white-50 mb-3" style="font-size: 1.25rem;" t-out="event.subtitle"/>
<div class="fs-5 text-white-50 fw-medium">
<a href="/" class="text-white-50 text-decoration-none">Home</a>
<span class="mx-2 text-white-50">|</span>
<a href="/event" class="text-white-50 text-decoration-none">Events</a>
<t t-if="event">
<span class="mx-2 text-white-50">|</span>
<span class="text-white" t-out="event.name"/>
</t>
</div>
</div>
</div>
</div>
</template>
<template id="view_event_layout_custom_header" inherit_id="website_event.layout" name="TNCSC Event Layout Custom Header &amp; Footer">
<xpath expr="//t[@t-call='website.layout']" position="inside">
<t t-set="no_header" t-value="True"/>
</xpath>
<xpath expr="//div[@id='wrap']" position="before">
<t t-call="tncsc_deployment.tncsc_event_detail_header_nav"/>
</xpath>
<xpath expr="//div[@id='wrap']" position="after">
<t t-call="tncsc_deployment.tncsc_custom_footer"/>
</xpath>
</template>
<!-- Odoo's stock footer (shown on built-in pages such as event
registration, login and school registration) ships demo content:

341
addons/tncsc_deployment/views/website_pages.xml
View File

@ -3484,7 +3484,6 @@
</div>
</div>
constant
<!-- Pricing Tiers Grid Section -->
<section class="registration-section">
<div class="container">
@ -3712,21 +3711,218 @@
font-family: var(--community-font, 'Outfit', 'Inter', sans-serif);
min-height: 100vh;
}
.tncsc-join-hero {
background: linear-gradient(135deg, #120735 0%, #20104e 50%, #15093c 100%);
padding: 60px 20px 45px 20px;
.tncsc-top-header {
background-color: #120735;
padding: 14px 20px;
text-align: center;
}
.tncsc-top-header .brand-title-ta {
font-size: 1.55rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.2;
font-family: var(--community-heading-font, sans-serif);
}
.tncsc-top-header .brand-subtitle-en {
font-size: 1.1rem;
font-weight: 400;
color: #B8B2E6;
margin: 2px 0 0 0;
}
.tncsc-hero-container {
position: relative;
}
.tncsc-hero-nav {
background: transparent !important;
padding: 16px 0;
border: none !important;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
.tncsc-hero-nav .nav-link {
color: #ffffff !important;
font-weight: 500;
font-size: 0.95rem;
padding: 6px 16px !important;
opacity: 0.92;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: opacity 0.2s;
}
.tncsc-hero-nav .nav-link:hover, .tncsc-hero-nav .nav-link.active {
opacity: 1;
color: #F5A623 !important;
}
.tncsc-dropdown {
position: relative;
display: inline-block;
}
.tncsc-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
background-color: #ffffff;
min-width: 230px;
padding: 12px 0;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
z-index: 1000;
text-align: left;
}
.tncsc-dropdown-menu::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tncsc-dropdown:hover .tncsc-dropdown-menu {
display: block !important;
}
.tncsc-dropdown-item {
display: block;
padding: 10px 24px;
color: #5B6C8F !important;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
text-shadow: none !important;
white-space: nowrap;
}
.tncsc-dropdown-item:hover {
color: #D89C43 !important;
background-color: #F8FAFC;
}
.tncsc-hero-nav .nav-link.active {
border-bottom: 2px solid #F5A623;
font-weight: 600;
}
.btn-tncsc-gold {
background-color: #D89C43;
color: #ffffff !important;
font-weight: 600;
font-size: 0.92rem;
padding: 10px 24px;
position: relative;
border: none;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.btn-tncsc-gold::before {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.btn-tncsc-gold::after {
content: '';
position: absolute;
bottom: -5px;
left: -5px;
width: 14px;
height: 14px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
.btn-tncsc-gold:hover {
background-color: #c48a35;
transform: translateY(-1px);
}
.tncsc-inner-hero {
background: linear-gradient(180deg, rgba(20, 10, 50, 0.85) 0%, rgba(30, 15, 70, 0.90) 100%), url('/tncsc_deployment/static/src/img/membership/membership-banner.webp') center/cover no-repeat;
padding: 140px 0 90px 0;
text-align: center;
position: relative;
}
.tncsc-join-hero::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e5a93c, #f3c669, #e5a93c);
#footer:not(.tncsc-custom-footer),
footer#bottom:not(.tncsc-custom-footer),
.o_footer,
.o_footer_copyright,
.s_footer,
#o_footer,
footer:not(.tncsc-custom-footer) {
display: none !important;
}
@media (max-width: 991px) {
.tncsc-hero-nav {
position: relative !important;
background: #120735 !important;
}
.tncsc-hero-nav .collapse {
background: #120735;
padding: 20px;
border-radius: 8px;
margin-top: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.tncsc-hero-nav nav {
flex-direction: column;
align-items: flex-start !important;
gap: 15px !important;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tncsc-top-header {
padding: 10px;
}
.tncsc-top-header .brand-title-ta {
font-size: 1.15rem;
}
.tncsc-top-header .brand-subtitle-en {
font-size: 0.85rem;
}
.tncsc-top-header img {
height: 44px !important;
margin-right: 12px !important;
}
.tncsc-hero-nav .nav-link {
padding: 6px 10px !important;
font-size: 0.9rem;
}
.btn-tncsc-gold {
padding: 8px 16px;
font-size: 0.85rem;
}
.tncsc-custom-footer {
padding: 40px 15px 30px 15px !important;
}
.tncsc-custom-footer img {
height: 60px !important;
}
.tncsc-custom-footer .gap-3 {
flex-wrap: wrap;
gap: 10px !important;
}
.tncsc-inner-hero {
padding: 120px 0 50px 0 !important;
}
.tncsc-inner-hero h1.display-3 {
font-size: 2.2rem !important;
}
.tncsc-join-card {
margin-top: 35px !important;
padding: 24px 18px !important;
}
}
.tncsc-join-card {
background: #ffffff;
@ -3734,8 +3930,8 @@
border: 1px solid #e2e8f0;
box-shadow: 0 10px 30px rgba(18, 7, 53, 0.06);
padding: 35px 40px;
margin-top: -30px;
margin-bottom: 60px;
margin-top: 60px;
margin-bottom: 80px;
position: relative;
z-index: 10;
}
@ -3820,14 +4016,70 @@
}
</style>
<!-- Top Hero -->
<div class="tncsc-join-hero">
<div class="container">
<span class="badge px-3 py-2 rounded-pill fw-bold mb-3" style="background-color: #e5a93c; color: #120735;">
OFFICIAL MEMBERSHIP REGISTRATION
</span>
<h1 class="display-5 fw-bold text-white mb-2">Tamil Nadu Cultural Society of Canada</h1>
<p class="fs-5 mb-0" style="color: #c9c3ec;">தமிழ்நாடு கலாச்சார சங்கம் - உறுப்பினர் விண்ணப்பப் படிவம்</p>
<!-- Top Header Banner with Emblem Logo and Bilingual Title -->
<div class="tncsc-top-header">
<div class="container d-flex align-items-center justify-content-center">
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 64px; width: auto; margin-right: 18px;" class="img-fluid"/>
<div class="text-start">
<h1 class="brand-title-ta">தமிழ்நாடு கலாச்சார சங்கம் - கனடா</h1>
<p class="brand-subtitle-en">Tamil Nadu Cultural Society of Canada</p>
</div>
</div>
</div>
<!-- Hero Main Banner Section with Navigation Bar & Page Title -->
<div class="tncsc-hero-container">
<!-- Transparent Floating Navbar -->
<div class="tncsc-hero-nav">
<div class="container d-flex flex-wrap align-items-center justify-content-between">
<!-- Mobile Toggle Button -->
<div class="w-100 d-flex justify-content-end d-lg-none">
<button class="navbar-toggler border-0 text-white fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#tncscMobileMenuMembershipJoin" aria-expanded="false" aria-label="Toggle navigation" style="background: transparent;">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collapsible Menu -->
<div class="collapse navbar-collapse d-lg-flex justify-content-between w-100" id="tncscMobileMenuMembershipJoin">
<nav class="d-flex align-items-center gap-1">
<a href="/" class="nav-link">Home</a>
<div class="tncsc-dropdown">
<a href="/about" class="nav-link">About +</a>
<div class="tncsc-dropdown-menu">
<a href="/about/tamil-nadu" class="tncsc-dropdown-item">Tamil Nadu</a>
<a href="/about/board-of-directors" class="tncsc-dropdown-item">Board Of Directors</a>
</div>
</div>
<a href="/event" class="nav-link">Events</a>
<div class="tncsc-dropdown">
<a href="/membership" class="nav-link active">Membership +</a>
<div class="tncsc-dropdown-menu">
<a href="/membership/benefits" class="tncsc-dropdown-item">Membership Benefits</a>
<a href="/membership/registration" class="tncsc-dropdown-item">Membership Registration</a>
</div>
</div>
<a href="/tamil-school" class="nav-link">Tamil Class</a>
<a href="/contact" class="nav-link">Contact</a>
</nav>
<a href="/event" class="btn-tncsc-gold py-2 px-3 mt-3 mt-lg-0 align-self-start align-self-lg-center">
<i class="fa fa-ticket"></i> View Event
</a>
</div>
</div>
</div>
<!-- Inner Hero Title & Breadcrumb -->
<div class="tncsc-inner-hero">
<div class="container">
<h1 class="display-3 fw-bold text-white mb-3" style="font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);">Membership Registration</h1>
<div class="fs-5 text-white-50 fw-medium">
<a href="/" class="text-white-50 text-decoration-none">Home</a>
<span class="mx-2 text-white-50">|</span>
<a href="/membership/registration" class="text-white-50 text-decoration-none">Membership</a>
<span class="mx-2 text-white-50">|</span>
<span class="text-white">Registration Form</span>
</div>
</div>
</div>
</div>
@ -4247,6 +4499,51 @@
</div>
</div>
<!-- Custom Dark Temple Footer Section -->
<footer id="tncscFooterSection" class="tncsc-custom-footer position-relative" style="background: linear-gradient(180deg, rgba(8, 16, 40, 0.65) 0%, rgba(10, 20, 50, 0.70) 100%), url('/tncsc_deployment/static/src/img/home/footer-bgwithclor.webp') center/cover no-repeat; padding: 60px 0 40px 0; color: #ffffff; text-align: center; display: block !important;">
<div class="container position-relative">
<!-- Emblem Logo -->
<img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" style="height: 90px; width: auto;" class="img-fluid mb-4"/>
<!-- Description Copy -->
<p style="color: #CBD5E1; font-size: 1.02rem; line-height: 1.65; max-width: 760px;" class="mx-auto mb-4">
For over 28+ years, the Tamil Nadu Cultural Society of Canada (TNCSC) has been a pillar for Tamil families across Canada – preserving language, celebrating tradition, and uniting generations through community events and cultural programs.
</p>
<!-- Footer Navigation Links -->
<div class="d-flex justify-content-center align-items-center gap-4 mb-4">
<a href="/" class="text-white text-decoration-none fw-medium fs-6">Home</a>
<span class="text-white-50">|</span>
<a href="/about" class="text-white text-decoration-none fw-medium fs-6">About Us</a>
<span class="text-white-50">|</span>
<a href="/membership" class="text-white text-decoration-none fw-medium fs-6">Membership</a>
<span class="text-white-50">|</span>
<a href="/contact" class="text-white text-decoration-none fw-medium fs-6">Contact</a>
</div>
<!-- Horizontal Divider -->
<hr style="border-color: rgba(255, 255, 255, 0.15); max-width: 850px;" class="mx-auto my-4"/>
<!-- Social Icons -->
<div class="d-flex justify-content-center align-items-center gap-3 mt-3">
<a href="https://www.facebook.com/TNCSCCanada/" target="_blank" rel="noopener" class="btn-tncsc-social" aria-label="Facebook" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
<i class="fa fa-facebook"></i>
</a>
<a href="https://www.youtube.com/@tamilnaduculturalsocietyof5866" target="_blank" rel="noopener" class="btn-tncsc-social" aria-label="YouTube" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
<i class="fa fa-youtube-play"></i>
</a>
<a href="https://www.instagram.com/tncsc_canada" target="_blank" rel="noopener" class="btn-tncsc-social" aria-label="Instagram" style="width: 48px; height: 48px; background-color: #D89C43; color: #ffffff !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none !important;">
<i class="fa fa-instagram"></i>
</a>
</div>
<!-- Floating Back to Top Button -->
<a href="#wrap" class="position-absolute bottom-0 end-0 mb-3 me-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #D89C43; color: #ffffff; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" aria-label="Back to top">
<i class="fa fa-arrow-up fs-5"></i>
</a>
</div>
</footer>
<!-- Live Validation & UI Logic -->
<script>
document.addEventListener('DOMContentLoaded', function () {