Skip to content

H
HIAST-Clinics
Commit 052b971d authored by Almouhannad's avatar Almouhannad
Browse files
Options

(F) Add home page

parent e18ffb2b
Hide whitespace changes
Inline Side-by-side
Showing with 306 additions and 49 deletions
Clinics.Frontend/src/app/app-routing.module.ts
View file @ 052b971d
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = []; const routes: Routes = [
{ path: '', component: HomeComponent }
];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
......
Clinics.Frontend/src/app/app.module.ts
View file @ 052b971d
...@@ -10,6 +10,7 @@ import { ToastrModule } from 'ngx-toastr'; ...@@ -10,6 +10,7 @@ import { ToastrModule } from 'ngx-toastr';
import { LayoutComponent } from './components/template/layout/layout.component'; import { LayoutComponent } from './components/template/layout/layout.component';
import { HeaderComponent } from './components/template/header/header.component'; import { HeaderComponent } from './components/template/header/header.component';
import { FooterComponent } from './components/template/footer/footer.component'; import { FooterComponent } from './components/template/footer/footer.component';
import { HomeComponent } from './components/home/home.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -32,7 +33,8 @@ import { FooterComponent } from './components/template/footer/footer.component'; ...@@ -32,7 +33,8 @@ import { FooterComponent } from './components/template/footer/footer.component';
AppComponent, AppComponent,
LayoutComponent, LayoutComponent,
HeaderComponent, HeaderComponent,
FooterComponent FooterComponent,
HomeComponent
], ],
// identifies the root component that Angular should // identifies the root component that Angular should
......
Clinics.Frontend/src/app/components/home/home.component.css 0 → 100644
View file @ 052b971d
/* #region main-home */
.main-home {
width: 100%;
min-height: calc(100vh - 112px);
padding: 80px 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.main-home img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.main-home .container {
z-index: 3;
}
.main-home .welcome h2 {
margin: 0;
font-size: 48px;
font-weight: 700;
}
.main-home .welcome p {
font-size: 24px;
margin: 0;
}
.main-home .content {
margin-top: 40px;
}
.main-home .content .why-box {
color: var(--contrast-color);
background: var(--accent-color);
padding: 30px;
border-radius: 4px;
}
.main-home .content .why-box h3 {
color: var(--contrast-color);
font-weight: 700;
font-size: 34px;
margin-bottom: 30px;
}
.main-home .content .why-box p {
margin-bottom: 30px;
}
.main-home .content .why-box .more-btn {
color: var(--contrast-color);
background: color-mix(in srgb, var(--contrast-color), transparent 80%);
display: inline-block;
padding: 6px 30px 8px 30px;
border-radius: 50px;
transition: all ease-in-out 0.4s;
}
.main-home .content .why-box .more-btn i {
font-size: 14px;
}
.main-home .content .why-box .more-btn:hover {
background: var(--surface-color);
color: var(--accent-color);
}
.main-home .content .icon-box {
text-align: center;
border-radius: 10px;
background: color-mix(in srgb, var(--surface-color), transparent 20%);
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
padding: 40px 30px;
width: 100%;
}
.main-home .content .icon-box i {
font-size: 40px;
color: var(--accent-color);
}
.main-home .content .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 10px 0 20px 0;
}
.main-home .content .icon-box p {
font-size: 15px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
/* #endregion */
\ No newline at end of file
Clinics.Frontend/src/app/components/home/home.component.html 0 → 100644
View file @ 052b971d
<div class="custom-child">
<section class="main-home section light-background">
<img src="assets/images/cover.png" alt="Cover">
<div class="container position-relative">
<div class="welcome position-relative">
<h2 style="margin-left: 0.5em">المركز الطبي</h2>
<br>
<p style="font-weight: 500; color:var(--heading-color);">لدى مركز الدراسات والبحوث العلمية</p>
</div>
<div class="content row gy-4">
<div class="col-lg-4 d-flex align-items-stretch">
<div class="why-box">
<h3 class="text-center">تسجيل الدخول</h3>
<p class="text-center text-light">
للاستفادة من خدمات هذا التطبيق، يحب عليك تسجيل الدخول أولاً
</p>
<div class="text-center">
<a href="#about" class="more-btn"><span>تسجيل الدخول </span> <i
class="bi bi-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-8 d-flex align-items-stretch">
<div class="d-flex flex-column justify-content-center">
<div class="row gy-4">
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box">
<i class="bi bi-clipboard-data"></i>
<h4 style="font-size: 19px;">استعراض التاريخ المرضي</h4>
<p class="text-center" style="font-weight: 500; color:var(--heading-color);">يوفر
التطبيق امكانية استعراض التاريخ المرضي لموظفي المركز وأفراد عائلتهم
</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box">
<i class="bi bi-graph-up"></i>
<h4>استخلاص الاحصائيات</h4>
<p class="text-center" style="font-weight: 500; color:var(--heading-color);">من
مزايا هذا التطبيق امكانية عرض احصائيات طبيّة لموظفي المركز
</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box">
<i class="bi bi-clock-history"></i>
<h4>تنظيم دور الانتظار</h4>
<p style="font-weight: 500; color:var(--heading-color);">يتيح هذا التطبيق إمكانية
تنظيم أدوار انتظار المرضى </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Clinics.Frontend/src/app/components/home/home.component.ts 0 → 100644
View file @ 052b971d
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent {
}
Clinics.Frontend/src/app/components/template/footer/footer.component.html
View file @ 052b971d
<footer id="footer" class="footer light-background"> <div class="custom-child">
<div class="container footer-top"> <footer id="footer" class="footer light-background">
<div class="row gy-4 justify-content-center"> <div class="container footer-top">
<div class="col-lg-4 col-md-6 footer-about mx-auto"> <div class="row gy-4 justify-content-center">
<div class="logo d-flex align-items-center"> <div class="col-lg-4 col-md-6 footer-about mx-auto">
<span class="sitename">المركز الصّحي - تطبيق الأطباء</span> <div class="logo d-flex align-items-center">
</div> <span class="sitename">المركز الطبي - برنامج الأطباء</span>
<div class="footer-contact pt-3 text-center custom-credits"> </div>
<p>إشراف: المهندس محمود الياس</p> <div class="footer-contact pt-3 text-center custom-credits">
<p>تطوير: المهنّد ياسر حافظ</p> <p>إشراف: المهندس محمود الياس</p>
<br> <p>تطوير: المهنّد ياسر حافظ</p>
</div> <br>
<div class="social-links d-flex justify-content-center mb-4"> </div>
<a href="https://github.com/Almouhannad" target="_blank"><i class="bi bi-github"></i></a> <div class="social-links d-flex justify-content-center mb-4">
<a href="mailto:almohannad.hafez@hiast.edu.sy"><i class="bi bi-envelope"></i></a> <a href="https://github.com/Almouhannad" target="_blank"><i class="bi bi-github"></i></a>
<a href="mailto:almohannad.hafez@hiast.edu.sy"><i class="bi bi-envelope"></i></a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </footer>
</footer> </div>
\ No newline at end of file
Clinics.Frontend/src/app/components/template/header/header.component.html
View file @ 052b971d
<div class="header sticky-top"> <div class="custom-child">
<div class="header sticky-top">
<div class="branding d-flex align-items-center">
<div class="container position-relative d-flex align-items-center justify-content-between">
<div class="logo d-flex align-items-center me-auto">
<img src="assets/images/logo.png" alt="Logo" width="100em" height="100em">
</div>
<div class="branding d-flex align-items-center">
<div class="container position-relative d-flex align-items-center justify-content-between">
<div class="logo d-flex align-items-center me-auto">
<img src="assets/images/logo.png" alt="Logo" width="100em" height="100em">
</div>
<h1 class="h3 m-auto custom-app-name">المركز الطبي - برنامج الأطباء</h1>
<h1 class="h3 m-auto custom-app-name">المركز الصّحي - برنامج الأطباء</h1>
<nav class="navmenu custom-buttons">
<ul>
<li><button class="btn btn-outline-secondary">اتصل بنا</button></li>
<li><button class="btn btn-outline-secondary">المواعيد اليوميّة</button></li>
<li><button class="btn btn-outline-secondary">الأطباء</button></li>
<li><button class="btn btn-outline-primary">القائمة الرئيسية</button></li>
</ul>
</nav>
</div>
<nav class="navmenu custom-buttons">
<ul>
<li><button class="btn btn-outline-secondary">اتصل بنا</button></li>
<li><button class="btn btn-outline-secondary">المواعيد اليوميّة</button></li>
<li><button class="btn btn-outline-secondary">الأطباء</button></li>
<li><button class="btn btn-outline-primary">القائمة الرئيسية</button></li>
</ul>
</nav>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
Clinics.Frontend/src/app/components/template/layout/layout.component.css
View file @ 052b971d
/*-------------------------------------------------------------- /* #region General */
# General Styling & Shared Classes ::ng-deep .custom-child{
--------------------------------------------------------------*/
::ng-deep * {
color: var(--default-color); color: var(--default-color);
background-color: var(--background-color); background-color: var(--background-color);
font-family: var(--default-font); font-family: var(--default-font);
} }
::ng-deep a { ::ng-deep .custom-child a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
transition: 0.3s; transition: 0.3s;
} }
::ng-deep a:hover { ::ng-deep .custom-child a:hover {
color: color-mix(in srgb, var(--accent-color), transparent 25%); color: color-mix(in srgb, var(--accent-color), transparent 25%);
text-decoration: none; text-decoration: none;
} }
::ng-deep h1, ::ng-deep .custom-child h1,
::ng-deep h2, ::ng-deep .custom-child h2,
::ng-deep h3, ::ng-deep .custom-child h3,
::ng-deep h4, ::ng-deep .custom-child h4,
::ng-deep h5, ::ng-deep .custom-child h5,
::ng-deep h6 { ::ng-deep .custom-child h6,
::ng-deep .custom-child p {
color: var(--heading-color); color: var(--heading-color);
font-family: var(--heading-font); font-family: var(--heading-font);
} }
\ No newline at end of file
/* #endregion */
/* #region Sections */
::ng-deep section,
::ng-deep .section {
color: var(--default-color);
background-color: var(--background-color);
padding: 60px 0;
scroll-margin-top: 72px;
overflow: clip;
}
::ng-deep .section-title {
text-align: center;
padding-bottom: 60px;
position: relative;
}
::ng-deep .section-title h2 {
font-size: 32px;
font-weight: 500;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}
::ng-deep .section-title h2:before {
content: "";
position: absolute;
display: block;
width: 160px;
height: 1px;
background: color-mix(in srgb, var(--default-color), transparent 60%);
left: 0;
right: 0;
bottom: 1px;
margin: auto;
}
::ng-deep .section-title h2::after {
content: "";
position: absolute;
display: block;
width: 60px;
height: 3px;
background: var(--accent-color);
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
::ng-deep .section-title p {
margin-bottom: 0;
}
/* #endregion */
\ No newline at end of file
Clinics.Frontend/src/app/components/template/layout/layout.component.html
View file @ 052b971d
<app-header></app-header> <app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer> <app-footer></app-footer>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab