oykuermann
2 years ago
GitHub
@ -1,55 +1,310 @@ |
|||||
<div class="container"> |
<div class="row mb-3"> |
||||
<div class="card"> |
<div class="col-xl-6 col-12 d-flex"> |
||||
<div class="card-header"> |
<div class="card h-lg-100 w-100 overflow-hidden"> |
||||
<h5 class="card-title"> |
<div class="card-body"> |
||||
{{ '::Welcome_Title' | abpLocalization }} |
<div class="starting-content"> |
||||
</h5> |
@if(!hasLoggedIn){ |
||||
|
<h3>Welcome</h3> |
||||
|
<p class="lead text-muted mb-2"> |
||||
|
Welcome to the application. This is a startup project based on the ABP framework. For |
||||
|
more information visit abp.io. |
||||
|
</p> |
||||
|
<a (click)="login()" class="px-4 btn btn-primary mb-4" role="button" |
||||
|
><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a |
||||
|
> |
||||
|
} |
||||
|
|
||||
|
<h3>Getting Started</h3> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
startingContentTemplate; |
||||
|
context: { |
||||
|
$implicit: { |
||||
|
description: |
||||
|
'Learn how to create and run a new web application using the application startup template.', |
||||
|
href: 'https://docs.abp.io/en/abp/latest/Getting-Started-Overall', |
||||
|
label: 'Getting Started' |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></ng-container> |
||||
|
|
||||
|
<h4>Web Application Development Tutorial</h4> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
startingContentTemplate; |
||||
|
context: { |
||||
|
$implicit: { |
||||
|
description: |
||||
|
'Learn how to build an ABP based web application named Acme.BookStore.', |
||||
|
href: 'https://docs.abp.io/en/abp/latest/Tutorials/Part-1?UI=NG&DB=EF', |
||||
|
label: 'Explore Tutorial' |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></ng-container> |
||||
|
|
||||
|
<h4>Customize Lepton Theme</h4> |
||||
|
<p class="text-muted mb-2">Learn how to customize LeptonX Theme as you wish.</p> |
||||
|
<a |
||||
|
href="https://docs.abp.io/en/abp/latest/UI/Angular/Theming" |
||||
|
class="btn btn-primary soft mb-5 mb-xl-0" |
||||
|
target="_blank" |
||||
|
>Customize Lepton</a |
||||
|
> |
||||
|
</div> |
||||
|
|
||||
|
<img class="card-bg-image" src="assets/images/getting-started/bg-01.png" /> |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div class="card-body"> |
</div> |
||||
@if(!hasLoggedIn){ |
<div class="col-xl-3 col-md-6 d-flex"> |
||||
<button class="btn btn-primary mb-2" (click)="login()"> |
<div class="row"> |
||||
{{ 'AbpUi::Login' | abpLocalization }} |
<ng-container |
||||
</button> |
*ngTemplateOutlet=" |
||||
} |
visitLinkTemplate; |
||||
<p>{{ '::Welcome_Text' | abpLocalization }}</p> |
context: { |
||||
|
$implicit: { |
||||
|
label: 'Visit Support', |
||||
|
description: |
||||
|
'You can check for similar problems and solutions, or open a new topic to discuss your specific issue.', |
||||
|
href: 'https://support.abp.io/QA/Questions', |
||||
|
card: 'card overflow-hidden', |
||||
|
imgClass: '', |
||||
|
imgSrc: 'assets/images/getting-started/img-support.png', |
||||
|
logo: 'abp-support abp-logo mb-2' |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></ng-container> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
visitLinkTemplate; |
||||
|
context: { |
||||
|
$implicit: { |
||||
|
label: 'Visit Blog', |
||||
|
description: |
||||
|
'You can find content on .NET development, cross-platform, ASP.NET application templates, ABP-related news, and more.', |
||||
|
href: 'https://blog.abp.io/abp', |
||||
|
card: 'card h-md-100 overflow-hidden', |
||||
|
imgClass: 'margin-bottom: -24px', |
||||
|
imgSrc: 'assets/images/getting-started/img-blog.png', |
||||
|
logo: 'abp-blog abp-logo mb-2' |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></ng-container> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="card mt-5"> |
<div class="col-xl-3 col-md-6 d-flex"> |
||||
<div class="card-body"> |
<div class="card h-100 overflow-hidden"> |
||||
<div class="row"> |
<div class="card-body"> |
||||
<div class="col-md-auto text-center"> |
<div class="abp-community abp-logo mb-2"></div> |
||||
<img |
<p class="lead text-muted"> |
||||
src="https://abp.io/assets/png/mastering-abp-framework.webp" |
A unique community platform for |
||||
style="max-width: 400px" |
<span class="fw-bold">ABP Lovers!</span> |
||||
class="w-100 mb-5 my-md-3" |
</p> |
||||
/> |
<p class="text-muted mb-2"> |
||||
</div> |
Explore all ABP users' experiences with the ABP Framework, discover articles and videos on |
||||
<div class="col-md d-flex align-items-center"> |
how to use ABP, and join raffles for a chance to win surprise gifts! |
||||
<div class="pe-0 pe-md-4"> |
</p> |
||||
<small class="text-uppercase text-muted">THE OFFICIAL GUIDE</small> |
<a class="btn btn-brand soft mb-3" href="https://community.abp.io/" target="_blank" |
||||
<h2 class="mb-4">Mastering ABP Framework</h2> |
>Join ABP Community</a |
||||
<p class="mb-4"> |
> |
||||
|
</div> |
||||
|
<img class="mt-3" src="assets/images/getting-started/img-community.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
tableTemplate; |
||||
|
context: { |
||||
|
$implicit: { |
||||
|
title: 'More from ABP.IO', |
||||
|
items: [ |
||||
|
{ |
||||
|
iconType: 'icon', |
||||
|
style: true, |
||||
|
icon: 'bi bi-check fs-4', |
||||
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
||||
|
title: 'Latest Release Logs', |
||||
|
link: 'https://github.com/abpframework/abp/releases', |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'icon', |
||||
|
style: true, |
||||
|
icon: 'bi bi-check fs-4', |
||||
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
||||
|
title: 'Video Courses', |
||||
|
link: 'https://abp.io/video-courses/essentials', |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'icon', |
||||
|
style: true, |
||||
|
icon: 'bi bi-check fs-4', |
||||
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
||||
|
title: 'Samples', |
||||
|
link: 'https://docs.abp.io/en/abp/latest/Samples/Index', |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'icon', |
||||
|
style: true, |
||||
|
icon: 'bi bi-check fs-4', |
||||
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
||||
|
title: 'Books', |
||||
|
link: 'https://abp.io/books', |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'icon', |
||||
|
style: true, |
||||
|
icon: 'bi bi-check fs-4', |
||||
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
||||
|
title: 'FAQ', |
||||
|
link: 'https://commercial.abp.io/faq', |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></ng-container> |
||||
|
<div class="col-xl-6 col-lg-8 d-flex"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body d-flex"> |
||||
|
<div class="row align-items-center"> |
||||
|
<div class="col-md-8"> |
||||
|
<p class="text-muted mb-0">THE OFFICIAL GUIDE</p> |
||||
|
<h3>Mastering ABP Framework</h3> |
||||
|
<p class="text-muted"> |
||||
Written by the creator of the ABP Framework, this book will help you gain a complete |
Written by the creator of the ABP Framework, this book will help you gain a complete |
||||
understanding of the framework and modern web application development techniques. |
understanding of the framework and modern web application development techniques. |
||||
</p> |
</p> |
||||
<div class="mb-4"> |
<div class="d-md-flex mb-2 mb-md-0"> |
||||
<a |
<a |
||||
href="https://www.amazon.com/gp/product/B097Z2DM8Q/ref=dbs_a_def_rwt_hsch_vapi_tkin_p1_i0" |
href="https://www.amazon.com/gp/product/B097Z2DM8Q" |
||||
class="btn btn-success mb-1" |
target="_blank" |
||||
|
class="btn btn-primary soft me-md-2 mb-2 mb-md-0" |
||||
> |
> |
||||
Buy on Amazon US |
Buy on Amazon US |
||||
</a> |
</a> |
||||
|
|
||||
<a |
<a |
||||
href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242" |
href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242" |
||||
class="btn btn-primary mb-1" |
target="_blank" |
||||
|
class="btn btn-primary soft mb-2 mb-md-0" |
||||
> |
> |
||||
Buy on PACKT |
Buy on PACKT |
||||
</a> |
</a> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
<div class="col"> |
||||
|
<img src="assets/images/getting-started/book.png" /> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
tableTemplate; |
||||
|
context: { |
||||
|
$implicit: { |
||||
|
title: 'Follow us on Social Media', |
||||
|
items: [ |
||||
|
{ |
||||
|
title: 'X.com', |
||||
|
icon: 'logo-x me-2', |
||||
|
link: 'https://twitter.com/abpframework' |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'image', |
||||
|
icon: 'assets/images/getting-started/discord.svg', |
||||
|
title: 'Discord', |
||||
|
link: 'https://community.abp.io/discord' |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'image', |
||||
|
icon: 'assets/images/getting-started/stack-overflow.svg', |
||||
|
title: 'Stack Overflow', |
||||
|
link: 'https://stackoverflow.com/questions/tagged/abp' |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'image', |
||||
|
icon: 'assets/images/getting-started/youtube.svg', |
||||
|
title: 'YouTube', |
||||
|
link: 'https://www.youtube.com/@Volosoft' |
||||
|
}, |
||||
|
{ |
||||
|
iconType: 'image', |
||||
|
icon: 'assets/images/getting-started/instagram.svg', |
||||
|
title: 'Instagram', |
||||
|
link: 'https://www.instagram.com/abpframework/' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></ng-container> |
||||
</div> |
</div> |
||||
|
|
||||
|
<ng-template #startingContentTemplate let-context> |
||||
|
<p class="lead text-muted mb-2" [innerHTML]="context.description"></p> |
||||
|
<a [href]="context.href" class="btn btn-brand mb-4" target="_blank">{{ context.label }}</a> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #visitLinkTemplate let-context> |
||||
|
<div class="col-12 d-flex"> |
||||
|
<div [class]="context.card"> |
||||
|
<div class="card-body pb-0"> |
||||
|
<div [class]="context.logo"></div> |
||||
|
<p class="text-muted mb-2" [innerHTML]="context.description"></p> |
||||
|
<a [href]="context.href" class="btn btn-brand soft" target="_blank">{{ context.label }}</a> |
||||
|
<img [class]="context.imgClass" [src]="context.imgSrc" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #tableTemplate let-context> |
||||
|
<div class="col-xl-3 col-lg-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-header"> |
||||
|
<div class="card-title text-body">{{ context.title }}</div> |
||||
|
</div> |
||||
|
<div class="card-body pt-0"> |
||||
|
<div class="table-responsive"> |
||||
|
<table class="table mb-0"> |
||||
|
<tbody> |
||||
|
@for(item of context.items; track $index; let last = $last){ |
||||
|
<tr> |
||||
|
<td class="ps-0 d-flex" [class.border-bottom-0]="last"> |
||||
|
@if(item.icon){ |
||||
|
<div |
||||
|
[ngClass]="item.iconClass" |
||||
|
[style]="item.style ? 'width: 20px; height: 20px' : ''" |
||||
|
> |
||||
|
@if(item.iconType === 'image'){ |
||||
|
<img [src]="item.icon" class="me-2" /> |
||||
|
}@else if(item.iconType === 'icon'){ |
||||
|
<i [class]="item.icon"></i> |
||||
|
}@else{ |
||||
|
<div [class]="item.icon"></div> |
||||
|
} |
||||
|
</div> |
||||
|
} |
||||
|
<div>{{ item.title }}</div> |
||||
|
</td> |
||||
|
<td class="text-end pe-0 opacity-25" [class.border-bottom-0]="last"> |
||||
|
<a [href]="item.link" target="_blank"> |
||||
|
<i class="bi bi-box-arrow-up-right text-dark"></i> |
||||
|
</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
} |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
|||||
@ -1 +1,25 @@ |
|||||
/* Styles for the home component */ |
/* Styles for the home component */ |
||||
|
.card-bg-image { |
||||
|
position: absolute; |
||||
|
width: 630px; |
||||
|
height: auto; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.starting-content { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 1199px) { |
||||
|
.h-lg-100 { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 768px) { |
||||
|
.h-md-100 { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
|||||
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 583 B |
|
After Width: | Height: | Size: 302 B |
|
After Width: | Height: | Size: 893 B |
@ -1 +1,25 @@ |
|||||
/* Styles for the home component */ |
/* Styles for the home component */ |
||||
|
.card-bg-image { |
||||
|
position: absolute; |
||||
|
width: 630px; |
||||
|
height: auto; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.starting-content { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 1199px) { |
||||
|
.h-lg-100 { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 768px) { |
||||
|
.h-md-100 { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
|||||
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 583 B |
|
After Width: | Height: | Size: 302 B |
|
After Width: | Height: | Size: 893 B |