add custom login page design and a new home dashboard with app icons
This commit is contained in:
Alaguraj0361
parent
efa3371c86
commit
3d9a000f20
@ -4,13 +4,15 @@
|
||||
'license': 'LGPL-3',
|
||||
'category': 'Website',
|
||||
'summary': 'Redirect login to home and show icon grid',
|
||||
'depends': ['base', 'web'],
|
||||
'depends': ['base', 'web', 'auth_signup'],
|
||||
'data': [
|
||||
'views/home_template.xml',
|
||||
'views/login_templates.xml',
|
||||
],
|
||||
'assets': {
|
||||
'web.assets_frontend': [
|
||||
'web.assets_common': [
|
||||
'home_dashboard/static/src/css/home_menu.css',
|
||||
'home_dashboard/static/src/css/login_style.css',
|
||||
],
|
||||
},
|
||||
'installable': True,
|
||||
|
||||
143
addons/home_dashboard/static/src/css/login_style.css
Normal file
143
addons/home_dashboard/static/src/css/login_style.css
Normal file
@ -0,0 +1,143 @@
|
||||
/* Container takes full screen */
|
||||
.o_login_main_wrapper {
|
||||
display: flex !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
overflow: hidden;
|
||||
/* Main Background Gradient matching your colors */
|
||||
background: linear-gradient(135deg, #fecd4f 0%, #2bb1a5 100%) !important;
|
||||
}
|
||||
|
||||
/* Left Side - Image and Text */
|
||||
.o_login_left_side {
|
||||
flex: 1.2 !important;
|
||||
/* Slightly wider than the form side */
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 40px !important;
|
||||
position: relative;
|
||||
/* Using the background image from your static path */
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
||||
url('/home_dashboard/static/src/img/login_bg.png') no-repeat center center !important;
|
||||
background-size: cover !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.o_login_content h1 {
|
||||
font-size: 3.5rem !important;
|
||||
font-weight: 800 !important;
|
||||
text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Right Side - Form Section */
|
||||
.o_login_right_side {
|
||||
flex: 0 0 550px !important;
|
||||
/* Fixed width for the form area */
|
||||
background: #ffffff !important;
|
||||
/* Solid white background for the right side */
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
/* Card Styling - No more transparency if you want exactly the 2nd image look */
|
||||
.o_login_card {
|
||||
width: 100% !important;
|
||||
max-width: 400px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Logo container for the right side */
|
||||
/* லாகின் கார்டு - கிரேடியன்ட் தோற்றம் */
|
||||
.o_login_card {
|
||||
width: 100% !important;
|
||||
max-width: 420px !important;
|
||||
padding: 40px !important;
|
||||
|
||||
/* கார்டுக்கு கிரேடியன்ட் பின்னணி */
|
||||
background: linear-gradient(145deg, #ffffff, #f9f9f9) !important;
|
||||
|
||||
/* கார்டு விளிம்பில் மெல்லிய கிரேடியன்ட் பார்டர் வர இந்த முறையைப் பயன்படுத்தலாம் */
|
||||
border: 2px solid transparent !important;
|
||||
background-clip: padding-box !important;
|
||||
position: relative !important;
|
||||
|
||||
border-radius: 30px !important;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
/* ஒருவேளை கார்டின் உள்ளேயே நிறம் மாற வேண்டும் என்றால் இதை பயன்படுத்தவும் */
|
||||
/* background: linear-gradient(135deg, rgba(254, 205, 79, 0.1) 0%, rgba(43, 177, 165, 0.1) 100%) !important; */
|
||||
|
||||
/* லாகின் பட்டன் - முழு கிரேடியன்ட் */
|
||||
.oe_login_buttons .btn-primary {
|
||||
background: linear-gradient(to right, #2bb1a5, #fecd4f) !important;
|
||||
/* பச்சை முதல் மஞ்சள் வரை */
|
||||
border: none !important;
|
||||
border-radius: 25px !important;
|
||||
color: white !important;
|
||||
font-weight: bold !important;
|
||||
padding: 12px !important;
|
||||
width: 100% !important;
|
||||
transition: transform 0.2s ease !important;
|
||||
}
|
||||
|
||||
.oe_login_buttons .btn-primary:hover {
|
||||
transform: scale(1.02) !important;
|
||||
box-shadow: 0 5px 15px rgba(43, 177, 165, 0.4) !important;
|
||||
}
|
||||
|
||||
/* இன்புட் பீல்டுகள் (Input Fields) */
|
||||
.form-control,
|
||||
.o_custom_input {
|
||||
border-radius: 15px !important;
|
||||
border: 1px solid #eee !important;
|
||||
padding: 12px 20px !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
/* லேபிள்கள் மற்றும் தலைப்பு நிறம் */
|
||||
.o_login_header_text h3 {
|
||||
background: -webkit-linear-gradient(#2bb1a5, #fecd4f);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.o_login_logo_container img {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
Updated Button Color .oe_login_buttons .btn-primary {
|
||||
background: #2bb1a5 !important;
|
||||
border: none !important;
|
||||
border-radius: 25px !important;
|
||||
font-weight: bold !important;
|
||||
padding: 12px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Placeholder color styling */
|
||||
.o_custom_input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Hide Odoo's default navbar/footer on login */
|
||||
.o_main_navbar,
|
||||
footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive fix */
|
||||
@media (max-width: 992px) {
|
||||
.o_login_left_side {
|
||||
display: none !important;
|
||||
/* Hide image on mobile */
|
||||
}
|
||||
|
||||
.o_login_right_side {
|
||||
flex: 1 !important;
|
||||
}
|
||||
}
|
||||
BIN
addons/home_dashboard/static/src/img/login_bg.png
Normal file
BIN
addons/home_dashboard/static/src/img/login_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 760 KiB |
@ -3,6 +3,7 @@
|
||||
<t t-call="web.frontend_layout">
|
||||
<t t-set="no_footer" t-value="True"/>
|
||||
<t t-set="no_header" t-value="True"/>
|
||||
<link rel="stylesheet" type="text/css" href="/home_dashboard/static/src/css/home_menu.css"/>
|
||||
|
||||
<div class="o_home_menu_background">
|
||||
<!-- Top Bar -->
|
||||
|
||||
53
addons/home_dashboard/views/login_templates.xml
Normal file
53
addons/home_dashboard/views/login_templates.xml
Normal file
@ -0,0 +1,53 @@
|
||||
<odoo>
|
||||
<template id="custom_login_layout" inherit_id="web.login_layout" name="Custom Login Layout" priority="10">
|
||||
<xpath expr="//t[@t-call='web.frontend_layout']" position="inside">
|
||||
<t t-set="body_classname" t-value="'o_custom_login_body'"/>
|
||||
<t t-set="head">
|
||||
<link rel="stylesheet" type="text/css" href="/home_dashboard/static/src/css/login_style.css"/>
|
||||
</t>
|
||||
</xpath>
|
||||
|
||||
<xpath expr="//div[hasclass('container')]" position="replace">
|
||||
<div class="o_login_main_wrapper">
|
||||
<div class="o_login_left_side">
|
||||
<div class="o_login_content">
|
||||
<h1>Chennora restaurant</h1>
|
||||
<p>Bringing Authentic South Indian Cuisine to Brampton</p>
|
||||
|
||||
<div class="o_social_login_icons">
|
||||
<span class="sign_text">Sign in with</span>
|
||||
<div class="icons_row">
|
||||
<i class="fa fa-facebook-circle"/>
|
||||
<i class="fa fa-twitter-square"/>
|
||||
<i class="fa fa-instagram"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="o_login_right_side">
|
||||
<div class="o_login_card_wrapper">
|
||||
<div class="o_login_logo_container">
|
||||
<img t-attf-src="/web/binary/company_logo{{ '?db=' + request.db if request.db else '' }}" alt="Logo"/>
|
||||
</div>
|
||||
|
||||
<div class="o_login_card">
|
||||
<div class="o_login_header_text">
|
||||
<h3>Login</h3>
|
||||
<p>Welcome back! Please enter your details.</p>
|
||||
</div>
|
||||
|
||||
<div class="o_login_form_container">
|
||||
<t t-out="0"/>
|
||||
</div>
|
||||
|
||||
<div class="o_login_footer text-center">
|
||||
<a href="/web/database/selector" t-if="not disable_database_manager">Databases</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
</odoo>
|
||||
Loading…
x
Reference in New Issue
Block a user