4 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/component/content-loader/text-content-loader/text-content-loader.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../styles/util/util';
2 | @import '../../../../styles/loading/loading';
3 |
4 | .text {
5 | @include default-background;
6 | @include util.default-border-radius;
7 |
8 | height: 10px;
9 | animation: animate-color 2s infinite;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/service/in-memory-data-service/in-memory-data.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { InMemoryDbService } from 'angular-in-memory-web-api';
3 |
4 | @Injectable( {
5 | providedIn: 'root'
6 | } )
7 | export class InMemoryDataService implements InMemoryDbService {
8 | createDb() {
9 | return {};
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/component/content-loader/image-content-loader/image-content-loader.component.html:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/src/app/page/splash-layout/splash-layout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component( {
4 | selector: 'app-splash-layout',
5 | templateUrl: './splash-layout.component.html',
6 | styleUrls: [ './splash-layout.component.scss' ]
7 | } )
8 | export class SplashLayoutComponent {
9 |
10 | constructor() {
11 | // Intentionally blank
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/data/information/information.data.ts:
--------------------------------------------------------------------------------
1 | export const INFORMATION_TYPES = {
2 | error: {
3 | cssClass: 'error',
4 | icon: 'times'
5 | },
6 | warning: {
7 | cssClass: 'warning',
8 | icon: 'exclamation-triangle'
9 | },
10 | success: {
11 | cssClass: 'success', icon: 'check'
12 | },
13 | info: {
14 | cssClass: 'info',
15 | icon: 'info-circle'
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/src/app/model/pricing/pricing.model.ts:
--------------------------------------------------------------------------------
1 | import { Ribbon } from '@open-template-hub/card';
2 |
3 | export interface PricingOption {
4 | title: string,
5 | description: string,
6 | ribbon?: Ribbon,
7 | contactRequired?: boolean,
8 | price?: {
9 | currency: string,
10 | value: string,
11 | subscriptionTime: string
12 | },
13 | features: string[][]
14 | link?: string
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/raw-content-pages/sign-up-success-page/sign-up-success-page.component.html:
--------------------------------------------------------------------------------
1 | Less
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | More
14 |
2 |
11 |
--------------------------------------------------------------------------------
/src/app/service/loading/loading.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { BehaviorSubject } from 'rxjs';
3 |
4 | @Injectable( {
5 | providedIn: 'root'
6 | } )
7 | export class LoadingService {
8 |
9 | private loading = new BehaviorSubject( false );
10 | sharedLoading = this.loading.asObservable();
11 |
12 | setLoading( loading: boolean ) {
13 | this.loading.next( loading );
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if ( environment.production ) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule( AppModule ).catch( err => console.error( err ) );
12 |
--------------------------------------------------------------------------------
/src/styles/logo/logo.scss:
--------------------------------------------------------------------------------
1 | @use '../util/util';
2 |
3 | .logo-wrapper {
4 | @include util.flex-center-center;
5 |
6 | display: inline-flex;
7 | flex-direction: column;
8 |
9 | & > * {
10 | margin: 0.4em;
11 | }
12 | }
13 |
14 | .logo-under-maintenance {
15 | filter: grayscale(100%);
16 | }
17 |
18 | @media only screen and (max-width: 999px) {
19 | .logo-wrapper > * {
20 | margin: 0.2em;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/heroku.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | echo "Building OTH Web UI app for $NODE_ENV"
4 |
5 | build_dev='ng build --configuration=staging --localize'
6 | if [ $NODE_ENV = "development" ]; then
7 | echo "running $build_dev ..."
8 | eval "$build_dev"
9 | fi
10 |
11 | build_prod='ng build --configuration=production --localize'
12 | if [ $NODE_ENV = "production" ]; then
13 | echo "running $build_prod ..."
14 | eval "$build_prod"
15 | fi
16 |
--------------------------------------------------------------------------------
/src/app/guard/auth/auth.guard.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { AuthGuard } from './auth.guard';
4 |
5 | describe( 'AuthGuard', () => {
6 | let guard: AuthGuard;
7 |
8 | beforeEach( () => {
9 | TestBed.configureTestingModule( {} );
10 | guard = TestBed.inject( AuthGuard );
11 | } );
12 |
13 | it( 'should be created', () => {
14 | expect( guard ).toBeTruthy();
15 | } );
16 | } );
17 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/partners-page/partners-page.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../styles/util/util';
2 | @use 'node_modules/@open-template-hub/card/styles/card/card';
3 |
4 | .business-partners-wrapper {
5 | @include util.flex-layout-column;
6 | @include util.flex-center-center;
7 |
8 | box-sizing: border-box;
9 |
10 | width: 100%;
11 |
12 | padding-left: 3vw;
13 | padding-right: 3vw;
14 |
15 | padding-bottom: 100px;
16 | }
17 |
--------------------------------------------------------------------------------
/.run/start.run.xml:
--------------------------------------------------------------------------------
1 |
3 | ![logo]()
4 |
5 |
6 |
7 |
2 |
7 |
9 |
--------------------------------------------------------------------------------
/src/app/service/mail/mail.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { MailService } from './mail.service';
4 |
5 | describe( 'AnalyticsService', () => {
6 | let service: MailService;
7 |
8 | beforeEach( () => {
9 | TestBed.configureTestingModule( {} );
10 | service = TestBed.inject( MailService );
11 | } );
12 |
13 | it( 'should be created', () => {
14 | expect( service ).toBeTruthy();
15 | } );
16 | } );
17 |
--------------------------------------------------------------------------------
/src/app/service/theme/theme.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { ThemeService } from './theme.service';
4 |
5 | describe( 'ThemeService', () => {
6 | let service: ThemeService;
7 |
8 | beforeEach( () => {
9 | TestBed.configureTestingModule( {} );
10 | service = TestBed.inject( ThemeService );
11 | } );
12 |
13 | it( 'should be created', () => {
14 | expect( service ).toBeTruthy();
15 | } );
16 | } );
17 |
--------------------------------------------------------------------------------
/src/app/service/toast/toast.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { ToastService } from './toast.service';
4 |
5 | describe( 'ToastService', () => {
6 | let service: ToastService;
7 |
8 | beforeEach( () => {
9 | TestBed.configureTestingModule( {} );
10 | service = TestBed.inject( ToastService );
11 | } );
12 |
13 | it( 'should be created', () => {
14 | expect( service ).toBeTruthy();
15 | } );
16 | } );
17 |
--------------------------------------------------------------------------------
/.github/workflows/on-push-tags.yml:
--------------------------------------------------------------------------------
1 | name: On Push Tags Workflows
2 |
3 | on:
4 | push:
5 | tags:
6 | - '*'
7 |
8 | jobs:
9 | tagged-release:
10 | name: 'Tagged Release'
11 | runs-on: 'ubuntu-latest'
12 |
13 | steps:
14 | - name: Generate Release From Tag
15 | uses: 'marvinpinto/action-automatic-releases@latest'
16 | with:
17 | repo_token: '${{ secrets.MASTER_BRANCH_ACCESS_TOKEN }}'
18 | prerelease: false
19 |
--------------------------------------------------------------------------------
/.run/startStaging.run.xml:
--------------------------------------------------------------------------------
1 | {{ formattedRateNumber }}
8 |
2 |
10 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/docs-page/docs-page.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
8 |
9 |
2 |
12 |
--------------------------------------------------------------------------------
/.run/updateMessages.run.xml:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
11 |
6 |
11 |
7 | ![]()
8 |
10 | {{ tech.description }}
9 |
8 |
9 |
11 | {{ feature.title }}
10 |
14 |
16 | {{ feature.description }}
15 |
2 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/pricing-page/pricing-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
5 |
6 |
10 |
11 |
--------------------------------------------------------------------------------
/src/app/component/content-loader/image-content-loader/image-content-loader.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component( {
4 | selector: 'app-image-content-loader',
5 | templateUrl: './image-content-loader.component.html',
6 | styleUrls: [ './image-content-loader.component.scss' ],
7 | } )
8 | export class ImageContentLoaderComponent implements OnInit {
9 | @Input() imageContentLoaderClass?: string;
10 |
11 | constructor() {
12 | /* Intentionally blank */
13 | }
14 |
15 | ngOnInit(): void {
16 | /* Intentionally blank */
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/partners-page/partners-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/app/component/content-loader/content-loader.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit, TemplateRef } from '@angular/core';
2 |
3 | @Component( {
4 | selector: 'app-content-loader',
5 | templateUrl: './content-loader.component.html',
6 | styleUrls: [ './content-loader.component.scss' ],
7 | } )
8 | export class ContentLoaderComponent implements OnInit {
9 | @Input() contentLoaderClass?: string;
10 | @Input() contentTemplate: TemplateRef
2 |
12 |
--------------------------------------------------------------------------------
/src/app/component/card/doc-card/doc-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, TemplateRef } from '@angular/core';
2 | import { BRAND } from 'src/app/data/brand/brand.data';
3 |
4 | @Component( {
5 | selector: 'app-doc-card',
6 | templateUrl: './doc-card.component.html',
7 | styleUrls: [ './doc-card.component.scss' ]
8 | } )
9 | export class DocCardComponent {
10 |
11 | @Input() docHeader: TemplateRef
3 | ![logo]()
4 |
5 |
6 |
7 |
2 |
12 |
--------------------------------------------------------------------------------
/src/app/component/card/blog-card/blog-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, TemplateRef } from '@angular/core';
2 | import { BRAND } from 'src/app/data/brand/brand.data';
3 |
4 | @Component( {
5 | selector: 'app-blog-card',
6 | templateUrl: './blog-card.component.html',
7 | styleUrls: [ './blog-card.component.scss' ]
8 | } )
9 | export class BlogCardComponent {
10 |
11 | @Input() blogHeader: TemplateRef
3 | ![logo]()
4 |
5 |
6 |
7 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/app/component/swiper/business-partner-swiper/business-partner-swiper.component.html:
--------------------------------------------------------------------------------
1 |
2 |
16 |
--------------------------------------------------------------------------------
/src/app/component/card/timeline-card/step-timeline-card/step-timeline-card.component.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
11 |
14 |
8 |
10 |
6 |
7 |
11 |
8 |
10 | {{ num }}
9 |
12 |
14 | {{ step.text }}
13 |
2 |
16 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/blog-page/blog-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { NAVIGATIONS } from 'src/app/data/navigation/navigation.data';
4 | import { BLOG } from '../../../data/blog/blog.data';
5 |
6 | @Component( {
7 | selector: 'app-blog-page',
8 | templateUrl: './blog-page.component.html',
9 | styleUrls: [ './blog-page.component.scss' ],
10 | } )
11 | export class BlogPageComponent {
12 | BLOG = BLOG;
13 |
14 | constructor( public router: Router ) {
15 | }
16 |
17 | openBlog = ( tag: string, key: string ) => {
18 | this.router.navigate( [ NAVIGATIONS.blog.url + '/' + tag + '/' + key ] );
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import { getTestBed } from '@angular/core/testing';
4 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
5 | import 'zone.js/dist/zone-testing';
6 |
7 | declare const require: any;
8 |
9 | // First, initialize the Angular testing environment.
10 | getTestBed().initTestEnvironment(
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting()
13 | );
14 | // Then we find all the tests.
15 | const context = require.context( './', true, /\.spec\.ts$/ );
16 | // And load the modules.
17 | context.keys().map( context );
18 |
--------------------------------------------------------------------------------
/src/app/component/swiper/presentation-swiper/presentation-swiper.component.html:
--------------------------------------------------------------------------------
1 |
3 | ![logo]()
4 |
5 |
6 | ![partner]()
7 |
8 |
9 |
10 |
11 |
15 | 12 | {{error}} 13 |
14 |
2 |
17 |
--------------------------------------------------------------------------------
/src/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "open-template-hub",
3 | "short_name": "oth",
4 | "theme_color": "#FEFEFE",
5 | "background_color": "#FFFFFF",
6 | "display": "standalone",
7 | "scope": "./",
8 | "start_url": "./",
9 | "icons": [
10 | {
11 | "src": "./assets/favicons/android-chrome-192x192.png",
12 | "sizes": "192x192",
13 | "type": "image/png"
14 | },
15 | {
16 | "src": "./assets/favicons/android-chrome-512x512.png",
17 | "sizes": "512x512",
18 | "type": "image/png"
19 | },
20 | {
21 | "src": "./assets/favicons/maskable_icon_x512.png",
22 | "sizes": "512x512",
23 | "type": "image/png",
24 | "purpose": "maskable"
25 | }
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web-ui-template",
3 | "description": "Web UI Template is a modern, responsive, and customizable web UI template for your business. It contains reusable components, theme color, and design support along with dark theme support.",
4 | "website": "https://opentemplatehub.com/product/user-interface/web-ui-template",
5 | "repository": "https://github.com/open-template-hub/web-ui-template",
6 | "logo": "https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/ui/web-ui-logo.png",
7 | "keywords": [
8 | "angular",
9 | "template",
10 | "ui-components",
11 | "angular-components",
12 | "web",
13 | "web-ui",
14 | "open-template-hub"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/component/design/top-svg/top-svg.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ThemeDesignSettings } from '../../../data/theme/theme.data';
3 | import { ThemeService } from '../../../service/theme/theme.service';
4 |
5 | @Component( {
6 | selector: 'app-top-svg',
7 | templateUrl: './top-svg.component.html',
8 | styleUrls: [ './top-svg.component.scss' ]
9 | } )
10 | export class TopSvgComponent {
11 |
12 | themeDesignSetting;
13 |
14 | ThemeDesignSettings = ThemeDesignSettings;
15 |
16 | constructor(
17 | private themeService: ThemeService
18 | ) {
19 | this.themeService.themeDesignSetting.subscribe( themeDesignSetting => this.themeDesignSetting = themeDesignSetting );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/component/design/bottom-svg/bottom-svg.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ThemeDesignSettings } from '../../../data/theme/theme.data';
3 | import { ThemeService } from '../../../service/theme/theme.service';
4 |
5 | @Component( {
6 | selector: 'app-bottom-svg',
7 | templateUrl: './bottom-svg.component.html',
8 | styleUrls: [ './bottom-svg.component.scss' ]
9 | } )
10 | export class BottomSvgComponent {
11 |
12 | themeDesignSetting;
13 |
14 | ThemeDesignSettings = ThemeDesignSettings;
15 |
16 | constructor(
17 | private themeService: ThemeService
18 | ) {
19 | this.themeService.themeDesignSetting.subscribe( themeDesignSetting => this.themeDesignSetting = themeDesignSetting );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/data/blog/blog.data.ts:
--------------------------------------------------------------------------------
1 | import { Blog } from '../../model/blog/blog.model';
2 | import { EMPLOYEES } from '../employee/employee.data';
3 |
4 | export const BLOG: Blog[] = [
5 | {
6 | key: 'what-is-open-template-hub',
7 | url: 'what-is-open-template-hub.md',
8 | date: '21 Oct 2021',
9 | title: 'What is Open Template Hub?',
10 | excerpt: 'We, as Open Template Hub contributors, keep developing new functionalities and capabilities every week. You can create your microservices or create your mobile and web applications which are integrated with those microservices, that means you can create your own business ground up through Open Template Hub extremely fast..',
11 | author: EMPLOYEES[ 1 ],
12 | tag: 'tech',
13 | }
14 | ];
15 |
--------------------------------------------------------------------------------
/ngsw-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/service-worker/config/schema.json",
3 | "index": "/index.html",
4 | "assetGroups": [
5 | {
6 | "name": "app",
7 | "installMode": "prefetch",
8 | "resources": {
9 | "files": [
10 | "/favicon.ico",
11 | "/index.html",
12 | "/manifest.webmanifest",
13 | "/*.css",
14 | "/*.js"
15 | ]
16 | }
17 | },
18 | {
19 | "name": "assets",
20 | "installMode": "lazy",
21 | "updateMode": "prefetch",
22 | "resources": {
23 | "files": [
24 | "/assets/**",
25 | "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
26 | ]
27 | }
28 | }
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/blog-page/blog-content-page/blog-content-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
12 |
15 |
9 |
11 |
2 |
11 |
12 |
13 |
18 |
--------------------------------------------------------------------------------
/src/app/component/swiper/screenshot-swiper/screenshot-swiper.component.html:
--------------------------------------------------------------------------------
1 |
3 |
7 |
8 |
15 |
17 |
12 | ![logo]()
14 |
16 | {{ screenshot.description }}
15 |
2 |
3 |
12 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/app/component/nav/footer/footer.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { FooterComponent } from './footer.component';
4 |
5 | describe( 'FooterComponent', () => {
6 | let component: FooterComponent;
7 | let fixture: ComponentFixture
2 |
21 |
22 |
--------------------------------------------------------------------------------
/src/app/component/popup/cookie-popup/cookie-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { URLS } from '../../../data/navigation/navigation.data';
3 |
4 | @Component( {
5 | selector: 'app-cookies',
6 | templateUrl: './cookie-popup.component.html',
7 | styleUrls: [ './cookie-popup.component.scss' ]
8 | } )
9 | export class CookiePopupComponent implements OnInit {
10 |
11 | accepted = false;
12 |
13 | public URLS = URLS;
14 |
15 | ngOnInit(): void {
16 | if ( localStorage.getItem( 'cookiesAccepted' ) ) {
17 | this.accepted = true;
18 | }
19 | }
20 |
21 | setAccepted() {
22 | this.accepted = true;
23 | if ( !localStorage.getItem( 'cookiesAccepted' ) ) {
24 | localStorage.setItem( 'cookiesAccepted', JSON.stringify( true ) );
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/component/card/policy-card/policy-card.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PolicyCardComponent } from './policy-card.component';
4 |
5 | describe( 'PolicyCardComponent', () => {
6 | let component: PolicyCardComponent;
7 | let fixture: ComponentFixture
2 |
19 |
--------------------------------------------------------------------------------
/src/app/page/landing-layout/landing-layout.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 | import { LandingLayoutComponent } from './landing-layout.component';
3 |
4 | describe( 'LandingLayoutComponent', () => {
5 | let component: LandingLayoutComponent;
6 | let fixture: ComponentFixture
3 |
13 |
4 |
6 |
7 |
10 |
12 |
17 |
18 |
6 |
7 | ![wallpaper]()
8 |
9 |
10 |
18 | {{ title }}
11 | 12 | 13 | {{ secondaryText }} 14 | 15 |{{ secondaryText }}
16 | 17 |
7 |
9 | Recent Activities
8 |
12 |
20 |
13 | ![activity icon]()
14 |
19 |
15 |
16 |
18 | {{ timestampToString( event.timestamp ) }}
17 |
6 |
8 | {{ title }}
7 |
13 |
20 |
14 |
15 |
18 |
19 |
16 |
17 |