+ 
+ 
-
-
-
-
- {{ title }} app is running!
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-Playground - Angular
+
+
-
-
- Resources
-Here are some links to help you get started:
- -
-
-
- Learn Angular
-
-
-
-
- CLI Documentation
-
-
-
-
-
- Angular Material
-
-
-
-
-
- Angular Blog
-
-
-
-
-
- Angular DevTools
-
-
-
-
-
-
- Next Steps
-What do you want to do next with your app?
- - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-ng generate component xyz-
ng add @angular/material-
ng add @angular/pwa-
ng add _____-
ng test-
ng build-
+
+
+
+
+
+
+
+
+
+
+ ![Your alt text]()
+
+
+
+
+
+
diff --git a/src/app/components/carousel/carousel.component.ts b/src/app/components/carousel/carousel.component.ts
new file mode 100755
index 0000000..6e39355
--- /dev/null
+++ b/src/app/components/carousel/carousel.component.ts
@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common'
+import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ Component,
+ Input,
+ ViewChild,
+} from '@angular/core'
+import {
+ EmblaCarouselDirective,
+ EmblaCarouselType,
+ EmblaEventType,
+ EmblaOptionsType,
+} from 'embla-carousel-angular'
+
+@Component({
+ selector: 'app-carousel',
+ templateUrl: './carousel.component.html',
+ styleUrls: ['./carousel.component.css'],
+ imports: [CommonModule, EmblaCarouselDirective],
+ standalone: true,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CarouselComponent implements AfterViewInit {
+ @ViewChild(EmblaCarouselDirective, { static: false })
+ emblaRef!: EmblaCarouselDirective
+
+ @Input() options: EmblaOptionsType = {}
+ @Input() slides: number[] = []
+
+ prevBtnEnabled = false
+ nextBtnEnabled = false
+ selectedIndex = 0
+ scrollSnaps: number[] = []
+ subscribeToEvents: EmblaEventType[] = ['init', 'reInit', 'select']
+
+ ngAfterViewInit(): void {
+ const { emblaApi } = this.emblaRef
+ if (emblaApi) {
+ this.scrollSnaps = emblaApi.scrollSnapList()
+ }
+ }
+
+ imageByIndex(index: number) {
+ return `/assets/images/slide-${index}.jpg`
+ }
+
+ scrollPrev() {
+ this.emblaRef.scrollPrev()
+ }
+
+ scrollNext() {
+ this.emblaRef.scrollNext()
+ }
+
+ scrollTo(index: number) {
+ this.emblaRef.scrollTo(index)
+ }
+
+ onSelect(emblaApi: EmblaCarouselType) {
+ this.selectedIndex = emblaApi.selectedScrollSnap()
+ this.prevBtnEnabled = emblaApi.canScrollPrev()
+ this.nextBtnEnabled = emblaApi.canScrollNext()
+ }
+}
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
old mode 100644
new mode 100755
diff --git a/src/assets/images/logos/angular_renaissance.png b/src/assets/images/logos/angular_renaissance.png
new file mode 100644
index 0000000..c9bab07
Binary files /dev/null and b/src/assets/images/logos/angular_renaissance.png differ
diff --git a/src/assets/images/slide-1.jpg b/src/assets/images/slide-1.jpg
new file mode 100755
index 0000000..cc5ee65
Binary files /dev/null and b/src/assets/images/slide-1.jpg differ
diff --git a/src/assets/images/slide-2.jpg b/src/assets/images/slide-2.jpg
new file mode 100755
index 0000000..60f3f61
Binary files /dev/null and b/src/assets/images/slide-2.jpg differ
diff --git a/src/assets/images/slide-3.jpg b/src/assets/images/slide-3.jpg
new file mode 100755
index 0000000..032516d
Binary files /dev/null and b/src/assets/images/slide-3.jpg differ
diff --git a/src/assets/images/slide-4.jpg b/src/assets/images/slide-4.jpg
new file mode 100755
index 0000000..b071396
Binary files /dev/null and b/src/assets/images/slide-4.jpg differ
diff --git a/src/assets/styles/embla/arrow.css b/src/assets/styles/embla/arrow.css
new file mode 100644
index 0000000..5345a04
--- /dev/null
+++ b/src/assets/styles/embla/arrow.css
@@ -0,0 +1,41 @@
+
+.embla__button {
+ -webkit-appearance: none;
+ background-color: transparent;
+ touch-action: manipulation;
+ display: inline-flex;
+ text-decoration: none;
+ cursor: pointer;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.embla__buttons {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 1.6rem;
+}
+
+.embla__button {
+ z-index: 1;
+ color: rgb(249, 249, 249);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ width: 4rem;
+ height: 4rem;
+}
+
+.embla__button:disabled {
+ opacity: 0.3;
+}
+
+.embla__button__svg {
+ width: 65%;
+ height: 65%;
+}
diff --git a/src/assets/styles/embla/dot.css b/src/assets/styles/embla/dot.css
new file mode 100644
index 0000000..b97d499
--- /dev/null
+++ b/src/assets/styles/embla/dot.css
@@ -0,0 +1,44 @@
+
+.embla__dot {
+ -webkit-appearance: none;
+ background-color: transparent;
+ touch-action: manipulation;
+ display: inline-flex;
+ text-decoration: none;
+ cursor: pointer;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.embla__dots {
+ z-index: 1;
+ bottom: 1.6rem;
+ position: absolute;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.embla__dot {
+ width: 2.4rem;
+ height: 2.4rem;
+ display: flex;
+ align-items: center;
+ margin-right: 0.75rem;
+ margin-left: 0.75rem;
+}
+
+.embla__dot:after {
+ background: rgb(249, 249, 249);
+ border-radius: 0.2rem;
+ width: 100%;
+ height: 0.3rem;
+ content: '';
+}
+
+.embla__dot--selected:after {
+ background: linear-gradient(45deg, rgb(47, 112, 193), rgb(116, 97, 195));
+}
diff --git a/src/assets/styles/embla/index.css b/src/assets/styles/embla/index.css
new file mode 100644
index 0000000..9897d3c
--- /dev/null
+++ b/src/assets/styles/embla/index.css
@@ -0,0 +1,69 @@
+@import './arrow.css';
+@import './dot.css';
+
+.embla {
+ --slide-spacing: 1rem;
+ --slide-size: 100%;
+ --slide-height: 19rem;
+ padding: 1.6rem;
+}
+
+.embla__viewport {
+ overflow: hidden;
+}
+
+.embla__container {
+ backface-visibility: hidden;
+ display: flex;
+ touch-action: pan-y;
+ margin-left: calc(var(--slide-spacing) * -1);
+}
+
+.embla__slide {
+ flex: 0 0 var(--slide-size);
+ min-width: 0;
+ padding-left: var(--slide-spacing);
+ position: relative;
+}
+
+.embla__slide__img {
+ display: block;
+ height: var(--slide-height);
+ width: 100%;
+ object-fit: cover;
+}
+
+.embla__slide__number {
+ width: 4.6rem;
+ height: 4.6rem;
+ z-index: 1;
+ position: absolute;
+ top: 0.6rem;
+ right: 0.6rem;
+ border-radius: 50%;
+ background-color: rgba(249, 249, 249, 0.85);
+ line-height: 4.6rem;
+ font-weight: 900;
+ text-align: center;
+ pointer-events: none;
+}
+
+.embla__slide__number > span {
+ color: rgb(47, 112, 193);
+
+ background-image: linear-gradient(
+ 45deg,
+ rgb(47, 112, 193),
+ rgb(116, 97, 195)
+ );
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-size: 1.6rem;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
new file mode 100644
index 0000000..ae8fa37
--- /dev/null
+++ b/src/assets/styles/reset.css
@@ -0,0 +1,148 @@
+
+html {
+ box-sizing: border-box;
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: 100%;
+ font-weight: 600;
+}
+
+ul {
+ list-style: none;
+}
+
+:root {
+ -moz-tab-size: 4;
+ tab-size: 4;
+}
+
+hr {
+ height: 0;
+}
+
+abbr[title] {
+ text-decoration: underline dotted;
+}
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+ font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier,
+ monospace;
+ font-size: 1em;
+}
+
+small {
+ font-size: 80%;
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+ top: -0.5em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+}
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+img,
+embed,
+iframe,
+object,
+audio,
+video {
+ height: auto;
+ max-width: 100%;
+}
diff --git a/src/assets/styles/sandbox/index.css b/src/assets/styles/sandbox/index.css
new file mode 100644
index 0000000..f304ea3
--- /dev/null
+++ b/src/assets/styles/sandbox/index.css
@@ -0,0 +1,32 @@
+
+.sandbox {
+ width: 100%;
+}
+
+.sandbox__carousel {
+ --color-detail-low-contrast: rgb(240, 240, 242);
+ position: relative;
+ background-color: rgb(244, 244, 244);
+}
+
+@media screen and (min-width: 750px) {
+ .sandbox {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 67rem;
+ }
+}
+
+@media screen and (max-width: 750px) {
+ .sandbox__carousel {
+ border-top: 0.1rem solid var(--color-detail-low-contrast);
+ border-bottom: 0.1rem solid var(--color-detail-low-contrast);
+ }
+}
+
+@media screen and (min-width: 750px) {
+ .sandbox__carousel {
+ border-radius: 0.4rem;
+ border: 0.1rem solid var(--color-detail-low-contrast);
+ }
+}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
old mode 100644
new mode 100755
index 3612073..970e25b
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
export const environment = {
- production: true
-};
+ production: true,
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
old mode 100644
new mode 100755
index f56ff47..3725056
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,8 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false
-};
+ production: false,
+}
/*
* For easier debugging in development mode, you can import the following file
diff --git a/src/favicon.ico b/src/favicon.ico
old mode 100644
new mode 100755
diff --git a/src/index.html b/src/index.html
old mode 100644
new mode 100755
diff --git a/src/main.ts b/src/main.ts
old mode 100644
new mode 100755
index c7b673c..3d8855b
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,12 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './app/app.module'
+import { environment } from './environments/environment'
if (environment.production) {
- enableProdMode();
+ enableProdMode()
}
platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.error(err));
+ .catch(err => console.error(err))
diff --git a/src/polyfills.ts b/src/polyfills.ts
old mode 100644
new mode 100755
index 429bb9e..5173f2f
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -45,8 +45,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
-import 'zone.js'; // Included with Angular CLI.
-
+import 'zone.js' // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
diff --git a/src/styles.css b/src/styles.css
old mode 100644
new mode 100755
index 90d4ee0..aed17a3
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,31 @@
/* You can add global styles to this file, and also import other style files */
+@import "./assets/styles/embla/index.css";
+@import "./assets/styles/sandbox/index.css";
+@import "./assets/styles/reset.css";
+
+:root {
+ --background-site: rgb(249, 249, 249);
+}
+
+html {
+ background-color: var(--background-site);
+ font-size: 62.5%;
+ font-family: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+ 'Segoe UI Emoji', 'Segoe UI Symbol';
+ letter-spacing: -0.02rem;
+}
+body {
+ background-color: var(--background-site);
+ color: rgb(49, 49, 49);
+ font-size: 1.6rem;
+ line-height: 1.65;
+}
+
+@supports (font-variation-settings: normal) {
+ html {
+ font-family: 'system-ui', -apple-system,
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+ }
+}
diff --git a/src/test.ts b/src/test.ts
deleted file mode 100644
index c04c876..0000000
--- a/src/test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
-