Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
H
HIAST-Clinics
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
almohanad.hafez
HIAST-Clinics
Commits
2a4cba14
Commit
2a4cba14
authored
Aug 20, 2024
by
Almouhannad
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
(F) Add doctors section to home page
parent
052b971d
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
238 additions
and
20 deletions
+238
-20
home.component.css
Clinics.Frontend/src/app/components/home/home.component.css
+127
-2
home.component.html
Clinics.Frontend/src/app/components/home/home.component.html
+84
-5
header.component.css
...d/src/app/components/template/header/header.component.css
+2
-2
header.component.html
.../src/app/components/template/header/header.component.html
+10
-8
header.component.ts
...nd/src/app/components/template/header/header.component.ts
+12
-0
layout.component.css
...d/src/app/components/template/layout/layout.component.css
+2
-2
layout.component.html
.../src/app/components/template/layout/layout.component.html
+1
-1
doctors-1.jpg
Clinics.Frontend/src/assets/images/doctors/doctors-1.jpg
+0
-0
doctors-2.jpg
Clinics.Frontend/src/assets/images/doctors/doctors-2.jpg
+0
-0
doctors-3.jpg
Clinics.Frontend/src/assets/images/doctors/doctors-3.jpg
+0
-0
doctors-4.jpg
Clinics.Frontend/src/assets/images/doctors/doctors-4.jpg
+0
-0
No files found.
Clinics.Frontend/src/app/components/home/home.component.css
View file @
2a4cba14
/* #region main-home */
/* #region main-home */
.main-home
{
.main-home
{
width
:
100%
;
width
:
100%
;
min-height
:
calc
(
100vh
-
112px
);
min-height
:
calc
(
100vh
-
112px
);
...
@@ -104,4 +103,130 @@
...
@@ -104,4 +103,130 @@
}
}
/* #endregion */
/* #region doctors */
.doctors
.team-member
{
background-color
:
var
(
--surface-color
);
box-shadow
:
0px
2px
15px
rgba
(
0
,
0
,
0
,
0.1
);
position
:
relative
;
border-radius
:
5px
;
transition
:
0.5s
;
padding
:
30px
;
height
:
100%
;
}
@media
(
max-width
:
468px
)
{
.doctors
.team-member
{
flex-direction
:
column
;
justify-content
:
center
!important
;
align-items
:
center
!important
;
}
}
.doctors
.team-member
.pic
{
overflow
:
hidden
;
width
:
150px
;
border-radius
:
50%
;
flex-shrink
:
0
;
}
.doctors
.team-member
.pic
img
{
transition
:
ease-in-out
0.3s
;
}
.doctors
.team-member
:hover
{
transform
:
translateY
(
-10px
);
}
.doctors
.team-member
.member-info
{
padding-left
:
30px
;
}
@media
(
max-width
:
468px
)
{
.doctors
.team-member
.member-info
{
padding
:
30px
0
0
0
;
text-align
:
center
;
}
}
.doctors
.team-member
h4
{
font-weight
:
700
;
margin-bottom
:
5px
;
font-size
:
20px
;
}
.doctors
.team-member
span
{
display
:
block
;
font-size
:
15px
;
padding-bottom
:
10px
;
position
:
relative
;
font-weight
:
500
;
}
.doctors
.team-member
span
::after
{
content
:
""
;
position
:
absolute
;
display
:
block
;
width
:
50px
;
height
:
1px
;
background
:
color-mix
(
in
srgb
,
var
(
--default-color
),
transparent
85%
);
bottom
:
0
;
left
:
0
;
}
@media
(
max-width
:
468px
)
{
.doctors
.team-member
span
::after
{
left
:
calc
(
50%
-
25px
);
}
}
.doctors
.team-member
p
{
margin
:
10px
0
0
0
;
font-size
:
14px
;
}
.doctors
.team-member
.social
{
margin-top
:
12px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
start
;
width
:
100%
;
}
@media
(
max-width
:
468px
)
{
.doctors
.team-member
.social
{
justify-content
:
center
;
}
}
.doctors
.team-member
.social
a
{
background
:
color-mix
(
in
srgb
,
var
(
--default-color
),
transparent
94%
);
transition
:
ease-in-out
0.3s
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
border-radius
:
50px
;
width
:
36px
;
height
:
36px
;
}
.doctors
.team-member
.social
a
i
{
color
:
color-mix
(
in
srgb
,
var
(
--default-color
),
transparent
20%
);
font-size
:
16px
;
margin
:
0
2px
;
}
.doctors
.team-member
.social
a
:hover
{
background
:
var
(
--accent-color
);
}
.doctors
.team-member
.social
a
:hover
i
{
color
:
var
(
--contrast-color
);
}
.doctors
.team-member
.social
a
+
a
{
margin-left
:
8px
;
}
/* #endregion */
/* #endregion */
\ No newline at end of file
Clinics.Frontend/src/app/components/home/home.component.html
View file @
2a4cba14
<div
class=
"custom-child"
>
<div
class=
"custom-child"
>
<!-- #region main-home -->
<section
class=
"main-home section light-background"
>
<section
class=
"main-home section light-background"
>
<img
src=
"assets/images/cover.png"
alt=
"Cover"
>
<img
src=
"assets/images/cover.png"
alt=
"Cover"
>
...
@@ -28,13 +30,13 @@
...
@@ -28,13 +30,13 @@
<div
class=
"col-lg-8 d-flex align-items-stretch"
>
<div
class=
"col-lg-8 d-flex align-items-stretch"
>
<div
class=
"d-flex flex-column justify-content-center"
>
<div
class=
"d-flex flex-column justify-content-center"
>
<div
class=
"row gy-4"
>
<div
class=
"row gy-4"
>
<div
class=
"col-xl-4 d-flex align-items-stretch"
>
<div
class=
"col-xl-4 d-flex align-items-stretch"
>
<div
class=
"icon-box"
>
<div
class=
"icon-box"
>
<i
class=
"bi bi-clipboard-data"
></i>
<i
class=
"bi bi-clipboard-data"
></i>
<h4
style=
"font-size: 19px;"
>
استعراض
التاريخ المرضي
</h4>
<h4
>
التاريخ المرضي
</h4>
<p
class=
"text-center"
style=
"font-weight: 500; color:var(--heading-color);"
>
يوفر
<p
class=
"text-center"
style=
"font-weight: 500; color:var(--heading-color);"
>
يوفر
التطبيق امكانية استعراض التاريخ المرضي لموظفي المركز وأفراد عائلتهم
التطبيق امكانية استعراض التاريخ المرضي لموظفي المركز وأفراد عائلتهم
</p>
</p>
...
@@ -44,7 +46,7 @@
...
@@ -44,7 +46,7 @@
<div
class=
"col-xl-4 d-flex align-items-stretch"
>
<div
class=
"col-xl-4 d-flex align-items-stretch"
>
<div
class=
"icon-box"
>
<div
class=
"icon-box"
>
<i
class=
"bi bi-graph-up"
></i>
<i
class=
"bi bi-graph-up"
></i>
<h4>
ا
ستخلاص الا
حصائيات
</h4>
<h4>
احصائيات
</h4>
<p
class=
"text-center"
style=
"font-weight: 500; color:var(--heading-color);"
>
من
<p
class=
"text-center"
style=
"font-weight: 500; color:var(--heading-color);"
>
من
مزايا هذا التطبيق امكانية عرض احصائيات طبيّة لموظفي المركز
مزايا هذا التطبيق امكانية عرض احصائيات طبيّة لموظفي المركز
</p>
</p>
...
@@ -54,7 +56,7 @@
...
@@ -54,7 +56,7 @@
<div
class=
"col-xl-4 d-flex align-items-stretch"
>
<div
class=
"col-xl-4 d-flex align-items-stretch"
>
<div
class=
"icon-box"
>
<div
class=
"icon-box"
>
<i
class=
"bi bi-clock-history"
></i>
<i
class=
"bi bi-clock-history"
></i>
<h4>
تنظيم
دور الانتظار
</h4>
<h4>
دور الانتظار
</h4>
<p
style=
"font-weight: 500; color:var(--heading-color);"
>
يتيح هذا التطبيق إمكانية
<p
style=
"font-weight: 500; color:var(--heading-color);"
>
يتيح هذا التطبيق إمكانية
تنظيم أدوار انتظار المرضى
</p>
تنظيم أدوار انتظار المرضى
</p>
</div>
</div>
...
@@ -68,6 +70,83 @@
...
@@ -68,6 +70,83 @@
</div>
</div>
</section>
</section>
<!-- #endregion -->
<!-- #region doctors -->
<section
id=
"doctors"
class=
"doctors section"
>
<div
class=
"container section-title"
>
<h2>
الفريق الطبي
</h2>
</div>
<div
class=
"container mt"
>
<div
class=
"row gy-4"
>
<div
class=
"col-lg-6"
>
<div
class=
"team-member d-flex align-items-start"
>
<div
class=
"pic"
><img
src=
"assets/images/doctors/doctors-1.jpg"
class=
"img-fluid"
alt=
""
></div>
<div
class=
"member-info"
>
<h4>
د. أحمد حافظ
</h4>
<span>
اخصائي جراحة وجه وفكين
</span>
<div
class=
"social"
>
<a
href=
""
><i
class=
"bi bi-telephone"
></i></a>
<a
href=
""
><i
class=
"bi bi-envelope"
></i></a>
<a
href=
""
><i
class=
"bi bi-whatsapp"
></i></a>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col-lg-6"
>
<div
class=
"team-member d-flex align-items-start"
>
<div
class=
"pic"
><img
src=
"assets/images/doctors/doctors-2.jpg"
class=
"img-fluid"
alt=
""
></div>
<div
class=
"member-info"
>
<h4>
د. زهراء كنجو
</h4>
<span>
اخصائية تغذية
</span>
<div
class=
"social"
>
<a
href=
""
><i
class=
"bi bi-telephone"
></i></a>
<a
href=
""
><i
class=
"bi bi-envelope"
></i></a>
<a
href=
""
><i
class=
"bi bi-whatsapp"
></i></a>
</div>
</div>
</div>
</div>
<div
class=
"col-lg-6"
>
<div
class=
"team-member d-flex align-items-start"
>
<div
class=
"pic"
><img
src=
"assets/images/doctors/doctors-3.jpg"
class=
"img-fluid"
alt=
""
></div>
<div
class=
"member-info"
>
<h4>
د. رغدان ربيع
</h4>
<span>
اخصائي أمراض قلبية
</span>
<div
class=
"social"
>
<a
href=
""
><i
class=
"bi bi-telephone"
></i></a>
<a
href=
""
><i
class=
"bi bi-envelope"
></i></a>
<a
href=
""
><i
class=
"bi bi-whatsapp"
></i></a>
</div>
</div>
</div>
</div>
<div
class=
"col-lg-6"
>
<div
class=
"team-member d-flex align-items-start"
>
<div
class=
"pic"
><img
src=
"assets/images/doctors/doctors-4.jpg"
class=
"img-fluid"
alt=
""
></div>
<div
class=
"member-info"
>
<h4>
د. شام محمد
</h4>
<span>
اخصائية علاج فيزيائي
</span>
<div
class=
"social"
>
<a
href=
""
><i
class=
"bi bi-telephone"
></i></a>
<a
href=
""
><i
class=
"bi bi-envelope"
></i></a>
<a
href=
""
><i
class=
"bi bi-whatsapp"
></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- #endregion -->
</div>
\ No newline at end of file
Clinics.Frontend/src/app/components/template/header/header.component.css
View file @
2a4cba14
...
@@ -131,11 +131,11 @@
...
@@ -131,11 +131,11 @@
box-shadow
:
0px
0
18px
rgba
(
0
,
0
,
0
,
0.1
);
box-shadow
:
0px
0
18px
rgba
(
0
,
0
,
0
,
0.1
);
}
}
/*
.scrolled .header .topbar {
.scrolled
.header
.topbar
{
height
:
0
;
height
:
0
;
visibility
:
hidden
;
visibility
:
hidden
;
overflow
:
hidden
;
overflow
:
hidden
;
}
*/
}
/* #endregion */
/* #endregion */
...
...
Clinics.Frontend/src/app/components/template/header/header.component.html
View file @
2a4cba14
<div
class=
"custom-child"
>
<div
class=
"custom-child"
>
<div
class=
"header
sticky-top
"
>
<div
class=
"header"
>
<div
class=
"branding d-flex align-items-center"
>
<div
class=
"branding d-flex align-items-center"
>
<div
class=
"container position-relative d-flex align-items-center justify-content-between"
>
<div
class=
"container position-relative d-flex align-items-center justify-content-between"
>
...
@@ -7,16 +7,19 @@
...
@@ -7,16 +7,19 @@
<img
src=
"assets/images/logo.png"
alt=
"Logo"
width=
"100em"
height=
"100em"
>
<img
src=
"assets/images/logo.png"
alt=
"Logo"
width=
"100em"
height=
"100em"
>
</div>
</div>
<h1
class=
"h3 m-auto custom-app-name"
>
المركز الطبي - برنامج الأطباء
</h1>
<h1
class=
"h3 m-auto custom-app-name"
>
المركز الطبي - برنامج الأطباء
</h1>
<nav
class=
"navmenu custom-buttons"
>
<nav
class=
"navmenu custom-buttons"
>
<ul>
<ul>
<li><button
class=
"btn btn-outline-secondary"
>
اتصل بنا
</button></li>
<li><a><button
class=
"btn"
<li><button
class=
"btn btn-outline-secondary"
>
المواعيد اليوميّة
</button></li>
[
class
]="{'
btn-outline-primary
'
:
isSelected
('
Contact
Us
'),
'
btn-outline-secondary
'
:
!
isSelected
('
Contact
Us
')}"
<li><button
class=
"btn btn-outline-secondary"
>
الأطباء
</button></li>
(
click
)="
selectButton
('
Contact
Us
')"
>
عن المستوصف
</button></a></li>
<li><button
class=
"btn btn-outline-primary"
>
القائمة الرئيسية
</button></li>
<li><a
href=
"#doctors"
><button
class=
"btn"
[
class
]="{'
btn-outline-primary
'
:
isSelected
('
Doctors
'),
'
btn-outline-secondary
'
:
!
isSelected
('
Doctors
')}"
(
click
)="
selectButton
('
Doctors
')"
>
الفريق الطبي
</button></a></li>
<li><a
href=
"#"
><button
class=
"btn"
[
class
]="{'
btn-outline-primary
'
:
isSelected
('
Main
Menu
'),
'
btn-outline-secondary
'
:
!
isSelected
('
Main
Menu
')}"
(
click
)="
selectButton
('
Main
Menu
')"
>
الصفحة الرئيسية
</button></a></li>
</ul>
</ul>
</nav>
</nav>
</div>
</div>
...
@@ -24,5 +27,4 @@
...
@@ -24,5 +27,4 @@
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
Clinics.Frontend/src/app/components/template/header/header.component.ts
View file @
2a4cba14
...
@@ -7,4 +7,16 @@ import { Component } from '@angular/core';
...
@@ -7,4 +7,16 @@ import { Component } from '@angular/core';
})
})
export
class
HeaderComponent
{
export
class
HeaderComponent
{
//#region Selected button
private
selectedButton
:
string
=
'Main Menu'
;
isSelected
(
buttonName
:
string
):
boolean
{
return
this
.
selectedButton
===
buttonName
;
}
selectButton
(
buttonName
:
string
):
void
{
this
.
selectedButton
=
buttonName
;
}
//#endregion
}
}
Clinics.Frontend/src/app/components/template/layout/layout.component.css
View file @
2a4cba14
...
@@ -40,7 +40,7 @@
...
@@ -40,7 +40,7 @@
}
}
::ng-deep
.section-title
{
::ng-deep
.section-title
{
text-align
:
center
;
text-align
:
center
;
padding-bottom
:
6
0px
;
padding-bottom
:
3
0px
;
position
:
relative
;
position
:
relative
;
}
}
...
@@ -69,7 +69,7 @@
...
@@ -69,7 +69,7 @@
content
:
""
;
content
:
""
;
position
:
absolute
;
position
:
absolute
;
display
:
block
;
display
:
block
;
width
:
60px
;
width
:
1
60px
;
height
:
3px
;
height
:
3px
;
background
:
var
(
--accent-color
);
background
:
var
(
--accent-color
);
left
:
0
;
left
:
0
;
...
...
Clinics.Frontend/src/app/components/template/layout/layout.component.html
View file @
2a4cba14
<app-header></app-header>
<app-header
class=
"sticky-top"
></app-header>
<router-outlet></router-outlet>
<router-outlet></router-outlet>
...
...
Clinics.Frontend/src/assets/images/doctors/doctors-1.jpg
0 → 100644
View file @
2a4cba14
27.6 KB
Clinics.Frontend/src/assets/images/doctors/doctors-2.jpg
0 → 100644
View file @
2a4cba14
24 KB
Clinics.Frontend/src/assets/images/doctors/doctors-3.jpg
0 → 100644
View file @
2a4cba14
26 KB
Clinics.Frontend/src/assets/images/doctors/doctors-4.jpg
0 → 100644
View file @
2a4cba14
29.9 KB
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment