frontend
This commit is contained in:
szymonj98
parent
29c83c3637
commit
3917ffe845
@ -4,7 +4,7 @@ root = true
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
indent_size = 4
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"prettier.tabWidth": 4
|
||||
}
|
||||
@ -31,6 +31,7 @@
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
@ -99,6 +100,7 @@
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
|
||||
66
package-lock.json
generated
66
package-lock.json
generated
@ -9,10 +9,12 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@angular/animations": "~13.3.0",
|
||||
"@angular/cdk": "^13.3.9",
|
||||
"@angular/common": "~13.3.0",
|
||||
"@angular/compiler": "~13.3.0",
|
||||
"@angular/core": "~13.3.0",
|
||||
"@angular/forms": "~13.3.0",
|
||||
"@angular/material": "^13.3.9",
|
||||
"@angular/platform-browser": "~13.3.0",
|
||||
"@angular/platform-browser-dynamic": "~13.3.0",
|
||||
"@angular/router": "~13.3.0",
|
||||
@ -347,6 +349,28 @@
|
||||
"@angular/core": "13.3.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk": {
|
||||
"version": "13.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
|
||||
"integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"parse5": "^5.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^13.0.0 || ^14.0.0-0",
|
||||
"@angular/core": "^13.0.0 || ^14.0.0-0",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk/node_modules/parse5": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
||||
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@angular/cli": {
|
||||
"version": "13.3.10",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.10.tgz",
|
||||
@ -564,6 +588,23 @@
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/material": {
|
||||
"version": "13.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.9.tgz",
|
||||
"integrity": "sha512-FU8lcMgo+AL8ckd27B4V097ZPoIZNRHiCe3wpgkImT1qC0YwcyXZVn0MqQTTFSdC9a/aI8wPm3AbTClJEVw5Vw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/animations": "^13.0.0 || ^14.0.0-0",
|
||||
"@angular/cdk": "13.3.9",
|
||||
"@angular/common": "^13.0.0 || ^14.0.0-0",
|
||||
"@angular/core": "^13.0.0 || ^14.0.0-0",
|
||||
"@angular/forms": "^13.0.0 || ^14.0.0-0",
|
||||
"@angular/platform-browser": "^13.0.0 || ^14.0.0-0",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser": {
|
||||
"version": "13.3.12",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.12.tgz",
|
||||
@ -12278,6 +12319,23 @@
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "13.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
|
||||
"integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
|
||||
"requires": {
|
||||
"parse5": "^5.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"parse5": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
||||
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/cli": {
|
||||
"version": "13.3.10",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.10.tgz",
|
||||
@ -12430,6 +12488,14 @@
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "13.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.9.tgz",
|
||||
"integrity": "sha512-FU8lcMgo+AL8ckd27B4V097ZPoIZNRHiCe3wpgkImT1qC0YwcyXZVn0MqQTTFSdC9a/aI8wPm3AbTClJEVw5Vw==",
|
||||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "13.3.12",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.12.tgz",
|
||||
|
||||
@ -11,10 +11,12 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~13.3.0",
|
||||
"@angular/cdk": "^13.3.9",
|
||||
"@angular/common": "~13.3.0",
|
||||
"@angular/compiler": "~13.3.0",
|
||||
"@angular/core": "~13.3.0",
|
||||
"@angular/forms": "~13.3.0",
|
||||
"@angular/material": "^13.3.9",
|
||||
"@angular/platform-browser": "~13.3.0",
|
||||
"@angular/platform-browser-dynamic": "~13.3.0",
|
||||
"@angular/router": "~13.3.0",
|
||||
@ -36,4 +38,4 @@
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"typescript": "~4.6.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
30
src/app/account/login/login.component.html
Normal file
30
src/app/account/login/login.component.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="login-container">
|
||||
<div class="image-container"><img src="assets/images/ai-image.jpg" alt=""></div>
|
||||
<div class="login-form-container">
|
||||
<div class="form-container">
|
||||
<div class="logo-container">
|
||||
<img class="logo-image" src="assets/images/logo-white.svg" alt="">
|
||||
EXACTDATA
|
||||
</div>
|
||||
<div class="header">Zaloguj się!</div>
|
||||
|
||||
<div class="form">
|
||||
<div class="exe-input">
|
||||
<label>Adres Email</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="exe-input">
|
||||
<label>Hasło</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button [routerLink]="'/main-view'" class="button-primary">Zaloguj się</button>
|
||||
<div class="register-link">
|
||||
Nie masz jeszcze konta?
|
||||
<a [routerLink]="'/register'">Zarejestruj się!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
55
src/app/account/login/login.component.scss
Normal file
55
src/app/account/login/login.component.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.login-container {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.image-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 55%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width:45%;
|
||||
.logo-container {
|
||||
font-size: 55px;
|
||||
margin: 0 0 40px 0;
|
||||
.logo-image {
|
||||
width: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
.header{
|
||||
font-size:35px;
|
||||
color:#0097A7;
|
||||
text-align: left;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
.form{
|
||||
.button-container{
|
||||
margin: 45px 0 0 0;
|
||||
button{
|
||||
width:100%;
|
||||
height:35px;
|
||||
}
|
||||
.register-link{
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 13px;
|
||||
a{
|
||||
color:#0097A7;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
25
src/app/account/login/login.component.spec.ts
Normal file
25
src/app/account/login/login.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LoginComponent } from './login.component';
|
||||
|
||||
describe('LoginComponent', () => {
|
||||
let component: LoginComponent;
|
||||
let fixture: ComponentFixture<LoginComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ LoginComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LoginComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/account/login/login.component.ts
Normal file
15
src/app/account/login/login.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.scss']
|
||||
})
|
||||
export class LoginComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
34
src/app/account/register/register.component.html
Normal file
34
src/app/account/register/register.component.html
Normal file
@ -0,0 +1,34 @@
|
||||
<div class="register-container">
|
||||
<div class="image-container"><img src="assets/images/ai-image.jpg" alt=""></div>
|
||||
<div class="register-form-container">
|
||||
<div class="form-container">
|
||||
<div class="logo-container">
|
||||
<img class="logo-image" src="assets/images/logo-white.svg" alt="">
|
||||
EXACTDATA
|
||||
</div>
|
||||
<div class="header">Zarejestruj się!</div>
|
||||
|
||||
<div class="form">
|
||||
<div class="exe-input">
|
||||
<label>Adres Email</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="exe-input">
|
||||
<label>Hasło</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="exe-input">
|
||||
<label>Powtórz hasło</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button class="button-primary">Zarejestruj się</button>
|
||||
<div class="register-link">
|
||||
Masz już konto?
|
||||
<a [routerLink]="'/login'">Zaloguj się!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
55
src/app/account/register/register.component.scss
Normal file
55
src/app/account/register/register.component.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.register-container {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.image-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 55%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width:45%;
|
||||
.logo-container {
|
||||
font-size: 55px;
|
||||
margin: 0 0 40px 0;
|
||||
.logo-image {
|
||||
width: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
.header{
|
||||
font-size:35px;
|
||||
color:#0097A7;
|
||||
text-align: left;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
.form{
|
||||
.button-container{
|
||||
margin: 45px 0 0 0;
|
||||
button{
|
||||
width:100%;
|
||||
height:35px;
|
||||
}
|
||||
.register-link{
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 13px;
|
||||
a{
|
||||
color:#0097A7;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
25
src/app/account/register/register.component.spec.ts
Normal file
25
src/app/account/register/register.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RegisterComponent } from './register.component';
|
||||
|
||||
describe('RegisterComponent', () => {
|
||||
let component: RegisterComponent;
|
||||
let fixture: ComponentFixture<RegisterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ RegisterComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RegisterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/account/register/register.component.ts
Normal file
15
src/app/account/register/register.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-register',
|
||||
templateUrl: './register.component.html',
|
||||
styleUrls: ['./register.component.scss']
|
||||
})
|
||||
export class RegisterComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,10 +1,34 @@
|
||||
import { DashboardComponent } from './main-view/dashboard/dashboard.component';
|
||||
import { SettingsComponent } from './main-view/settings/settings.component';
|
||||
import { AnalysisStoryComponent } from './main-view/analysis-story/analysis-story.component';
|
||||
import { PostAnalysisComponent } from './main-view/post-analysis/post-analysis.component';
|
||||
import { AdvertAnalysisComponent } from './main-view/advert-analysis/advert-analysis.component';
|
||||
import { MainViewComponent } from './main-view/main-view/main-view.component';
|
||||
import { RegisterComponent } from './account/register/register.component';
|
||||
import { LoginComponent } from './account/login/login.component';
|
||||
import { HomePageComponent } from './home-page/home-page/home-page.component';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
const routes: Routes = [
|
||||
{ path: '', component: HomePageComponent },
|
||||
{ path: 'login', component: LoginComponent },
|
||||
{ path: 'register', component: RegisterComponent },
|
||||
{
|
||||
path: 'main-view', component: MainViewComponent, children: [
|
||||
{path: '',component: DashboardComponent},
|
||||
{path: 'ad-analysis',component: AdvertAnalysisComponent},
|
||||
{path: 'post-analysis',component: PostAnalysisComponent},
|
||||
{path: 'post-analysis/:id',component: PostAnalysisComponent},
|
||||
{path: 'history',component: AnalysisStoryComponent},
|
||||
{path: 'settings',component: SettingsComponent}
|
||||
]
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
||||
@ -1,484 +1 @@
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
|
||||
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<style>
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toolbar img {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.toolbar #twitter-logo {
|
||||
height: 40px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.toolbar #youtube-logo {
|
||||
height: 40px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.toolbar #twitter-logo:hover,
|
||||
.toolbar #youtube-logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin: 82px auto 32px;
|
||||
padding: 0 16px;
|
||||
max-width: 960px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg.material-icons {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
svg.material-icons:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.card svg.material-icons path {
|
||||
fill: #888;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
all: unset;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fafafa;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
margin: 0 8px 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.card-container .card:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.card.card-small {
|
||||
height: 16px;
|
||||
width: 168px;
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card):hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card):hover .material-icons path {
|
||||
fill: rgb(105, 103, 103);
|
||||
}
|
||||
|
||||
.card.highlight-card {
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
width: auto;
|
||||
min-width: 30%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card.card.highlight-card span {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
svg#rocket {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
svg#rocket-smoke {
|
||||
height: calc(100vh - 95px);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 180px;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
color: #1976d2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #125699;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
border-radius: 6px;
|
||||
padding-top: 45px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
background-color: rgb(15, 15, 16);
|
||||
}
|
||||
|
||||
.terminal::before {
|
||||
content: "\2022 \2022 \2022";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: rgb(58, 58, 58);
|
||||
color: #c2c3c4;
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
line-height: 0;
|
||||
padding: 14px 0;
|
||||
text-indent: 4px;
|
||||
}
|
||||
|
||||
.terminal pre {
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
||||
color: white;
|
||||
padding: 0 1rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-link {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 40px;
|
||||
margin: 8px;
|
||||
background-color: white;
|
||||
border: 1px solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
transition: 1s ease-out;
|
||||
}
|
||||
|
||||
.circle-link:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
|
||||
.github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
svg#clouds {
|
||||
position: fixed;
|
||||
bottom: -160px;
|
||||
left: -230px;
|
||||
z-index: -10;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media screen and (max-width: 767px) {
|
||||
.card-container > *:not(.circle-link) ,
|
||||
.terminal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card:not(.highlight-card) {
|
||||
height: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.card.highlight-card span {
|
||||
margin-left: 72px;
|
||||
}
|
||||
|
||||
svg#rocket-smoke {
|
||||
right: 120px;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
svg#rocket-smoke {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="toolbar" role="banner">
|
||||
<img
|
||||
width="40"
|
||||
alt="Angular Logo"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
|
||||
/>
|
||||
<span>Welcome</span>
|
||||
<div class="spacer"></div>
|
||||
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
|
||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
||||
<rect width="400" height="400" fill="none"/>
|
||||
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
|
||||
<svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="content" role="main">
|
||||
|
||||
<!-- Highlight Card -->
|
||||
<div class="card highlight-card card-small">
|
||||
|
||||
<svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
|
||||
<title>Rocket Ship</title>
|
||||
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
|
||||
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
|
||||
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
|
||||
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
|
||||
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<span>{{ title }} app is running!</span>
|
||||
|
||||
<svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
|
||||
<title>Rocket Ship Smoke</title>
|
||||
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<h2>Resources</h2>
|
||||
<p>Here are some links to help you get started:</p>
|
||||
|
||||
<div class="card-container">
|
||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
|
||||
<span>Learn Angular</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
|
||||
<span>CLI Documentation</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 21.813 23.453"><path d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#808080"/><path d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#808080"/><path d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/><path d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/><path d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/></svg>
|
||||
<span>Angular Material</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
|
||||
<span>Angular Blog</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
|
||||
<span>Angular DevTools</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<h2>Next Steps</h2>
|
||||
<p>What do you want to do next with your app?</p>
|
||||
|
||||
<input type="hidden" #selection>
|
||||
|
||||
<div class="card-container">
|
||||
<button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>New Component</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Angular Material</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Add PWA Support</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Add Dependency</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Run and Watch Tests</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Build for Production</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Terminal -->
|
||||
<div class="terminal" [ngSwitch]="selection.value">
|
||||
<pre *ngSwitchDefault>ng generate component xyz</pre>
|
||||
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
|
||||
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
|
||||
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
|
||||
<pre *ngSwitchCase="'test'">ng test</pre>
|
||||
<pre *ngSwitchCase="'build'">ng build</pre>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="card-container">
|
||||
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
|
||||
<title>Meetup Logo</title>
|
||||
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
|
||||
<title>Discord Logo</title>
|
||||
<path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
|
||||
<path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
Love Angular?
|
||||
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
|
||||
<div class="github-star-badge">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||||
Star
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
|
||||
<title>Gray Clouds Background</title>
|
||||
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@ -1,16 +1,49 @@
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { HomePageComponent } from './home-page/home-page/home-page.component';
|
||||
import { NavBarComponent } from './shared-components/nav-bar/nav-bar.component';
|
||||
import { LoginComponent } from './account/login/login.component';
|
||||
import { RegisterComponent } from './account/register/register.component';
|
||||
import { MainViewComponent } from './main-view/main-view/main-view.component';
|
||||
import {MatSidenavModule} from '@angular/material/sidenav';
|
||||
import { HeaderComponent } from './shared-components/header/header.component';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { AdvertAnalysisComponent } from './main-view/advert-analysis/advert-analysis.component';
|
||||
import { PostAnalysisComponent } from './main-view/post-analysis/post-analysis.component';
|
||||
import { AnalysisStoryComponent } from './main-view/analysis-story/analysis-story.component';
|
||||
import { SettingsComponent } from './main-view/settings/settings.component';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import { DashboardComponent } from './main-view/dashboard/dashboard.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
AppComponent,
|
||||
HomePageComponent,
|
||||
NavBarComponent,
|
||||
LoginComponent,
|
||||
RegisterComponent,
|
||||
MainViewComponent,
|
||||
HeaderComponent,
|
||||
AdvertAnalysisComponent,
|
||||
PostAnalysisComponent,
|
||||
AnalysisStoryComponent,
|
||||
SettingsComponent,
|
||||
DashboardComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule
|
||||
AppRoutingModule,
|
||||
MatSidenavModule,
|
||||
BrowserAnimationsModule,
|
||||
MatToolbarModule,
|
||||
MatIconModule,
|
||||
MatTableModule,
|
||||
MatTooltipModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
||||
49
src/app/home-page/home-page/home-page.component.html
Normal file
49
src/app/home-page/home-page/home-page.component.html
Normal file
@ -0,0 +1,49 @@
|
||||
<div class="home-page">
|
||||
<div class="nav-bar-container">
|
||||
<div class="logo-container"><img class="logo-image" src="assets/images/logo.svg" alt=""></div>
|
||||
<div class="navigation-button-container">
|
||||
<div class="nav-text">Super</div>
|
||||
<div class="nav-text">Fajne</div>
|
||||
<div class="nav-text">Podstrony</div>
|
||||
</div>
|
||||
<div class="login-button-container">
|
||||
<button class="button-primary" [routerLink]="'/register'">Zarejestruj się</button>
|
||||
<button class="button-primary" [routerLink]="'/login'">Zaloguj się</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-page-content">
|
||||
<div class="header-container">
|
||||
<div class="title-container">
|
||||
<div class="main-header">EXACTDATA</div>
|
||||
<div class="sub-header">MARKETING DONE BETTER</div>
|
||||
<div class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. </div>
|
||||
<div class="know-more-button">
|
||||
<button class="button-primary">Dowiedz się więcej</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-container">
|
||||
<img src="assets/images/home-marketing.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="info-section-container">
|
||||
<div class="images-container">
|
||||
<div class="row-1">
|
||||
<div><img class="img-1" src="assets/images/info-image-1.png" alt=""></div>
|
||||
<div><img class="img-2" src="assets/images/info-image-2.png" alt=""></div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div><img class="img-3" src="assets/images/info-image-3.png" alt=""></div>
|
||||
<div><img class="img-4" src="assets/images/info-image-4.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
115
src/app/home-page/home-page/home-page.component.scss
Normal file
115
src/app/home-page/home-page/home-page.component.scss
Normal file
@ -0,0 +1,115 @@
|
||||
.nav-bar-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
background-color: black;
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 30px;
|
||||
|
||||
.logo-image {
|
||||
height: 70%
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
column-gap: 40px;
|
||||
.nav-text{
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
&:hover{
|
||||
color:#0097A7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button-container{
|
||||
flex: 1;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
column-gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.home-page-content{
|
||||
padding: 150px 15% 1px 15%;
|
||||
.header-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title-container{
|
||||
max-width: 30%;
|
||||
.main-header{
|
||||
font-size: 60px;
|
||||
color:white;
|
||||
white-space: normal;
|
||||
line-height: 1;
|
||||
//margin: 0px 0px 35px 0px;
|
||||
}
|
||||
.sub-header{
|
||||
font-size: 25px;
|
||||
color:#0097A7;
|
||||
margin: 0px 0px 35px 0px;
|
||||
}
|
||||
.header-description{
|
||||
font-size:20px;
|
||||
color:white;
|
||||
margin: 0px 0px 35px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-section{
|
||||
margin: 150px 0 100px 0;
|
||||
.info-section-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
column-gap: 150px;
|
||||
.images-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
.row-1,.row-2{
|
||||
column-gap: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.row-1{
|
||||
.img-1{
|
||||
border-top-left-radius: 35px;
|
||||
}
|
||||
.img-2{
|
||||
border-top-right-radius: 35px;
|
||||
}
|
||||
}
|
||||
.row-2{
|
||||
.img-3{
|
||||
border-bottom-left-radius: 35px;
|
||||
}
|
||||
.img-4{
|
||||
border-bottom-right-radius: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-container{
|
||||
color:white;
|
||||
font-size:20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/app/home-page/home-page/home-page.component.spec.ts
Normal file
25
src/app/home-page/home-page/home-page.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomePageComponent } from './home-page.component';
|
||||
|
||||
describe('HomePageComponent', () => {
|
||||
let component: HomePageComponent;
|
||||
let fixture: ComponentFixture<HomePageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HomePageComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomePageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/home-page/home-page/home-page.component.ts
Normal file
15
src/app/home-page/home-page/home-page.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home-page',
|
||||
templateUrl: './home-page.component.html',
|
||||
styleUrls: ['./home-page.component.scss']
|
||||
})
|
||||
export class HomePageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="advert-analysis-container">
|
||||
<div class="header">Analiza tekstu reklamy</div>
|
||||
<div class="advert-text-container">
|
||||
<div class="exe-textarea">
|
||||
<label>Wprowadź tekst reklamy</label>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
<div class="button-container"><button class="button-primary">Przeprowadź analize</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
.advert-analysis-container{
|
||||
.header{
|
||||
font-size: 25px;
|
||||
//font-weight: 500;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
padding:30px;
|
||||
.advert-text-container{
|
||||
width:400px;
|
||||
.button-container{
|
||||
margin: 20px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AdvertAnalysisComponent } from './advert-analysis.component';
|
||||
|
||||
describe('AdvertAnalysisComponent', () => {
|
||||
let component: AdvertAnalysisComponent;
|
||||
let fixture: ComponentFixture<AdvertAnalysisComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AdvertAnalysisComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AdvertAnalysisComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-advert-analysis',
|
||||
templateUrl: './advert-analysis.component.html',
|
||||
styleUrls: ['./advert-analysis.component.scss']
|
||||
})
|
||||
export class AdvertAnalysisComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
<div class="analysis-story-container">
|
||||
<div class="header">Historia twoich analiz</div>
|
||||
<div class="sub-header">50% twoich postów jest pozytywnie odbieranych przez społeczność</div>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="analysisStory">
|
||||
<ng-container matColumnDef="link">
|
||||
<th mat-header-cell *matHeaderCellDef>Link do posta</th>
|
||||
<td mat-cell *matCellDef="let element"><a href="{{element.postUrl}}" target="blank"> {{element.postUrl}} </a></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="result">
|
||||
<th mat-header-cell *matHeaderCellDef>Ogólny wynik analizy</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div [ngSwitch]="element.isPositive">
|
||||
<div *ngSwitchCase="true" class="positive-result">Pozytywny</div>
|
||||
<div *ngSwitchCase="false" class="negative-result">Negatywny</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element"> <button (click)="navigateToAnalysis(element.id)" class="button-primary analysis-button">Przejdź do
|
||||
analizy</button></td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,67 @@
|
||||
.analysis-story-container {
|
||||
padding: 30px;
|
||||
|
||||
.header {
|
||||
font-size: 25px;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
font-size: 14px;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
table {
|
||||
th {
|
||||
padding-right: 10px;
|
||||
background-color: #474747;
|
||||
color: #ECECEC;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #0097A7;
|
||||
border-right: 1px solid #0097A7;
|
||||
}
|
||||
th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
tr {
|
||||
background-color: rgba(49, 49, 49, 1);
|
||||
|
||||
td {
|
||||
color: #ECECEC;
|
||||
max-width: 400px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #0097A7;
|
||||
border-right: 1px solid #0097A7;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.negative-result {
|
||||
color: #FA4242
|
||||
}
|
||||
|
||||
.positive-result {
|
||||
color: #7C88F8
|
||||
}
|
||||
.analysis-button{
|
||||
height:30px;
|
||||
padding:0px 8px;
|
||||
font-size:12px
|
||||
}
|
||||
a{
|
||||
color:#ECECEC;
|
||||
&:hover{
|
||||
color:#0097A7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AnalysisStoryComponent } from './analysis-story.component';
|
||||
|
||||
describe('AnalysisStoryComponent', () => {
|
||||
let component: AnalysisStoryComponent;
|
||||
let fixture: ComponentFixture<AnalysisStoryComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AnalysisStoryComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AnalysisStoryComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
39
src/app/main-view/analysis-story/analysis-story.component.ts
Normal file
39
src/app/main-view/analysis-story/analysis-story.component.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
export interface AnalysisStoryInterface {
|
||||
id: number;
|
||||
postUrl: string;
|
||||
isPositive: boolean;
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'app-analysis-story',
|
||||
templateUrl: './analysis-story.component.html',
|
||||
styleUrls: ['./analysis-story.component.scss']
|
||||
})
|
||||
export class AnalysisStoryComponent implements OnInit {
|
||||
|
||||
analysisStory: AnalysisStoryInterface[] = [
|
||||
{
|
||||
id: 0,
|
||||
postUrl: 'https://www.facebook.com/rtveuroagd/posts/pfbid02Jr4girzeaB9UdEj2V78RSzp2inkhaY3kxsmdtNitMVzq3A9WnBBzsYDeWhK5HNx5l',
|
||||
isPositive: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
postUrl: 'https://www.facebook.com/rtveuroagd/posts/pfbid02UTh3KgftpyaMqmXSM8XyVDnbCzT2uay4d99TQWNUb2XgWD21beEhy4g6BYesLBKCl',
|
||||
isPositive: false
|
||||
},
|
||||
]
|
||||
displayedColumns: string[] = ['link', 'result', 'action'];
|
||||
|
||||
constructor(private router: Router, private route: ActivatedRoute,) { }
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
navigateToAnalysis(analysisId: number) {
|
||||
this.router.navigate(['/main-view/post-analysis', analysisId])
|
||||
}
|
||||
|
||||
}
|
||||
6
src/app/main-view/dashboard/dashboard.component.html
Normal file
6
src/app/main-view/dashboard/dashboard.component.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div class="dashboard-container">
|
||||
<div (click)="navigate(element.route)" *ngFor="let element of dashboardElements" class="dashboard-element">
|
||||
<div class="element-icon"><mat-icon>{{element.icon}}</mat-icon></div>
|
||||
<div class="element-name">{{element.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
28
src/app/main-view/dashboard/dashboard.component.scss
Normal file
28
src/app/main-view/dashboard/dashboard.component.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.dashboard-container {
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap:20px;
|
||||
|
||||
.dashboard-element {
|
||||
margin: 0 20px 0 0;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
background-color: #474747;
|
||||
border: solid 2px #c6c5c5;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
//color: #0097A7;
|
||||
border-color: #0097A7;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/app/main-view/dashboard/dashboard.component.spec.ts
Normal file
25
src/app/main-view/dashboard/dashboard.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
describe('DashboardComponent', () => {
|
||||
let component: DashboardComponent;
|
||||
let fixture: ComponentFixture<DashboardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
50
src/app/main-view/dashboard/dashboard.component.ts
Normal file
50
src/app/main-view/dashboard/dashboard.component.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { Router } from '@angular/router';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface DashboardElements {
|
||||
name: string;
|
||||
route: string;
|
||||
icon:string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
constructor(private router:Router) { }
|
||||
|
||||
dashboardElements:DashboardElements[]=[
|
||||
{
|
||||
name:'Analiza tekstu reklamy',
|
||||
route: '/main-view/ad-analysis',
|
||||
icon: 'textsms',
|
||||
},
|
||||
{
|
||||
name:'Analiza posta',
|
||||
route: '/main-view/post-analysis',
|
||||
icon: 'find_in_page',
|
||||
},
|
||||
{
|
||||
name:'Historia twoich analiz',
|
||||
route: '/main-view/history',
|
||||
icon: 'history',
|
||||
},
|
||||
{
|
||||
name:'Ustawienia konta',
|
||||
route: '/main-view/settings',
|
||||
icon: 'account_circle',
|
||||
}
|
||||
]
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
navigate(route:string){
|
||||
this.router.navigate([route])
|
||||
}
|
||||
|
||||
}
|
||||
21
src/app/main-view/main-view/main-view.component.html
Normal file
21
src/app/main-view/main-view/main-view.component.html
Normal file
@ -0,0 +1,21 @@
|
||||
<app-header></app-header>
|
||||
<mat-drawer-container class="main-view-container">
|
||||
<mat-drawer mode="side" opened>
|
||||
<ng-container *ngFor="let menuElement of menuConfig, let i = index">
|
||||
<div (click)="route(i)" class="menu-element" [ngClass]="{'active-menu-element':
|
||||
router.isActive(menuElement.route, {
|
||||
paths: 'subset',
|
||||
queryParams: 'ignored',
|
||||
fragment: 'ignored',
|
||||
matrixParams: 'ignored'
|
||||
})
|
||||
}">
|
||||
<div class="menu-icon"><mat-icon>{{menuElement.icon}}</mat-icon></div>
|
||||
<div class="menu-text">{{menuElement.name}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</mat-drawer>
|
||||
<mat-drawer-content>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-drawer-content>
|
||||
</mat-drawer-container>
|
||||
49
src/app/main-view/main-view/main-view.component.scss
Normal file
49
src/app/main-view/main-view/main-view.component.scss
Normal file
@ -0,0 +1,49 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.menu {
|
||||
color: white
|
||||
}
|
||||
|
||||
mat-drawer-container {
|
||||
height: 100%;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
mat-drawer {
|
||||
width: 300px;
|
||||
border-right: 1px solid #0097A7;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.menu-element {
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #0097A7;
|
||||
border-color: white;
|
||||
}
|
||||
color: white;
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
column-gap: 15px;
|
||||
padding: 20px 30px 20px 30px;
|
||||
border-bottom: 1px solid #0097A7;
|
||||
|
||||
.menu-text {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.active-menu-element {
|
||||
background-color: #0097A7;
|
||||
border-color: white;
|
||||
}
|
||||
25
src/app/main-view/main-view/main-view.component.spec.ts
Normal file
25
src/app/main-view/main-view/main-view.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MainViewComponent } from './main-view.component';
|
||||
|
||||
describe('MainViewComponent', () => {
|
||||
let component: MainViewComponent;
|
||||
let fixture: ComponentFixture<MainViewComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ MainViewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
45
src/app/main-view/main-view/main-view.component.ts
Normal file
45
src/app/main-view/main-view/main-view.component.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-view',
|
||||
templateUrl: './main-view.component.html',
|
||||
styleUrls: ['./main-view.component.scss']
|
||||
})
|
||||
export class MainViewComponent implements OnInit {
|
||||
|
||||
activePage: number = 0
|
||||
|
||||
menuConfig: { name: string, icon: string, route: string }[] = [
|
||||
{
|
||||
name: 'Analiza tekstu reklamy',
|
||||
icon: 'textsms',
|
||||
route: '/main-view/ad-analysis',
|
||||
}, {
|
||||
name: 'Analiza posta',
|
||||
icon: 'find_in_page',
|
||||
route: '/main-view/post-analysis',
|
||||
}, {
|
||||
name: 'Historia twoich analiz',
|
||||
icon: 'history',
|
||||
route: '/main-view/history',
|
||||
}, {
|
||||
name: 'Ustawienia konta',
|
||||
icon: 'account_circle',
|
||||
route: '/main-view/settings',
|
||||
}
|
||||
]
|
||||
|
||||
constructor(
|
||||
public router:Router
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
route(index:number){
|
||||
this.activePage = index
|
||||
this.router.navigate([this.menuConfig[index].route])
|
||||
}
|
||||
|
||||
}
|
||||
95
src/app/main-view/post-analysis/post-analysis.component.html
Normal file
95
src/app/main-view/post-analysis/post-analysis.component.html
Normal file
@ -0,0 +1,95 @@
|
||||
<div class="post-analysis-container">
|
||||
<div class="header">Analiza postu reklamowego</div>
|
||||
<div *ngIf="!isPreview" class="post-text-container">
|
||||
<div class="exe-input">
|
||||
<label>Wprowadź link do posta</label>
|
||||
<input>
|
||||
<div class="input-down-text">
|
||||
<mat-icon (click)="isHelpNeed = !isHelpNeed">help</mat-icon>
|
||||
<span>Jak znaleźć link do posta?</span>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isHelpNeed" class="find-post-help">
|
||||
Se kurwa poszukaj
|
||||
</div>
|
||||
<div class="button-container"><button (click)="showResult = !showResult" class="button-primary">Przeprowadź
|
||||
analize</button></div>
|
||||
|
||||
</div>
|
||||
<div *ngIf="showResult" class="analysis-rsult-contaainer">
|
||||
<div *ngIf="isPreview" class="post-preview-link">
|
||||
<a
|
||||
href="https://www.facebook.com/rtveuroagd/posts/pfbid02Jr4girzeaB9UdEj2V78RSzp2inkhaY3kxsmdtNitMVzq3A9WnBBzsYDeWhK5HNx5l">
|
||||
https://www.facebook.com/rtveuroagd/posts/pfbid02Jr4girzeaB9UdEj2V78RSzp2inkhaY3kxsmdtNitMVzq3A9WnBBzsYDeWhK5HNx5l
|
||||
</a>
|
||||
</div>
|
||||
<div class="general-stat-container">
|
||||
<div class="stat-header">Ogólne statystyki:</div>
|
||||
<div class="comment-counts">
|
||||
Liczba komentarzy: <span>{{postAnalysisResult.postCommentCounts}}</span>
|
||||
</div>
|
||||
<div class="reaction-counts-container">
|
||||
Reakcje:
|
||||
<div class="reaction-counts">
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.angry > 0">
|
||||
{{postAnalysisResult.reaction.angry}} <img src="assets/images/fb-emotes/angry.svg"> </div>
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.haha > 0">
|
||||
{{postAnalysisResult.reaction.haha}} <img src="assets/images/fb-emotes/haha.svg">
|
||||
</div>
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.happy > 0">
|
||||
{{postAnalysisResult.reaction.happy}} <img src="assets/images/fb-emotes/happy.svg"> </div>
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.hearth > 0">
|
||||
{{postAnalysisResult.reaction.hearth}} <img src="assets/images/fb-emotes/hearth.svg"> </div>
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.like > 0">
|
||||
{{postAnalysisResult.reaction.like}}<img src="assets/images/fb-emotes/like.svg">
|
||||
</div>
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.ooo > 0">
|
||||
{{postAnalysisResult.reaction.ooo}} <img src="assets/images/fb-emotes/ooo.svg">
|
||||
</div>
|
||||
<div class="reaction-count" *ngIf="postAnalysisResult.reaction.sad > 0">
|
||||
{{postAnalysisResult.reaction.sad}} <img src="assets/images/fb-emotes/sad.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popular-comment-stat-container">
|
||||
<div class="popular-comment-header">Najpopularniejsze komentarze:</div>
|
||||
<div class="comments-container">
|
||||
<div *ngFor="let comment of postAnalysisResult.mostPopularComments" class="comment">
|
||||
<div class="text">{{comment.comment}}</div>
|
||||
<div class="reaction">
|
||||
<div class="reaction-count" *ngIf="comment.reaction.angry > 0">
|
||||
{{postAnalysisResult.reaction.angry}} <img src="assets/images/fb-emotes/angry.svg"> </div>
|
||||
<div class="reaction-count" *ngIf="comment.reaction.haha > 0">
|
||||
{{postAnalysisResult.reaction.haha}} <img src="assets/images/fb-emotes/haha.svg">
|
||||
</div>
|
||||
<div class="reaction-count" *ngIf="comment.reaction.happy > 0">
|
||||
{{postAnalysisResult.reaction.happy}} <img src="assets/images/fb-emotes/happy.svg"> </div>
|
||||
<div class="reaction-count" *ngIf="comment.reaction.hearth > 0">
|
||||
{{postAnalysisResult.reaction.hearth}} <img src="assets/images/fb-emotes/hearth.svg"> </div>
|
||||
<div class="reaction-count" *ngIf="comment.reaction.like > 0">
|
||||
{{postAnalysisResult.reaction.like}}<img src="assets/images/fb-emotes/like.svg">
|
||||
</div>
|
||||
<div class="reaction-count" *ngIf="comment.reaction.ooo > 0">
|
||||
{{postAnalysisResult.reaction.ooo}} <img src="assets/images/fb-emotes/ooo.svg">
|
||||
</div>
|
||||
<div class="reaction-count" *ngIf="comment.reaction.sad > 0">
|
||||
{{postAnalysisResult.reaction.sad}} <img src="assets/images/fb-emotes/sad.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="general-opinion-header">
|
||||
<div class="result-header">Ogólny odbiór posta przez społeczność: <span
|
||||
[ngSwitch]="postAnalysisResult.isPositive">
|
||||
<span *ngSwitchCase="true" class="positive-result">Pozytywny</span>
|
||||
<span *ngSwitchCase="false" class="negative-result">Negatywny</span>
|
||||
</span></div>
|
||||
<div class="details-button-container">
|
||||
<button class="button-primary">Więcej szczególów</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
150
src/app/main-view/post-analysis/post-analysis.component.scss
Normal file
150
src/app/main-view/post-analysis/post-analysis.component.scss
Normal file
@ -0,0 +1,150 @@
|
||||
.post-analysis-container {
|
||||
.header {
|
||||
font-size: 25px;
|
||||
//font-weight: 500;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
|
||||
padding:30px;
|
||||
|
||||
.post-text-container {
|
||||
.exe-input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
width:400px;
|
||||
|
||||
.button-container {
|
||||
margin: 0px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.find-post-help {
|
||||
padding: 20px 5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-rsult-contaainer {
|
||||
margin: 35px 0 0 0;
|
||||
|
||||
.post-preview-link {
|
||||
max-width: 500px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 25px 0;
|
||||
a {
|
||||
color: #0097A7
|
||||
}
|
||||
|
||||
color:#0097A7
|
||||
}
|
||||
|
||||
.general-stat-container {
|
||||
.stat-header {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.comment-counts {
|
||||
font-size: 13px;
|
||||
|
||||
span {
|
||||
color: #0097A7;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.reaction-counts-container {
|
||||
margin: 15px 0 0 0;
|
||||
font-size: 13px;
|
||||
|
||||
.reaction-counts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 15px;
|
||||
margin: 5px 0 0 0;
|
||||
|
||||
.reaction-count {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0097A7;
|
||||
|
||||
img {
|
||||
margin: 4px 0 0 0;
|
||||
width: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular-comment-stat-container {
|
||||
margin: 35px 0 0 0;
|
||||
|
||||
.popular-comment-header {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
.comment {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
column-gap: 30px;
|
||||
padding: 20px 0 20px 0;
|
||||
max-width: 350px;
|
||||
border-bottom: 2px solid #0097A7;
|
||||
|
||||
.reaction {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 10px;
|
||||
|
||||
.reaction-count {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0097A7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.general-opinion-header {
|
||||
margin: 45px 0 20px 0;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
|
||||
.details-button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.negative-result {
|
||||
color: #FA4242
|
||||
}
|
||||
|
||||
.positive-result {
|
||||
color: #7C88F8
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PostAnalysisComponent } from './post-analysis.component';
|
||||
|
||||
describe('PostAnalysisComponent', () => {
|
||||
let component: PostAnalysisComponent;
|
||||
let fixture: ComponentFixture<PostAnalysisComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PostAnalysisComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PostAnalysisComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
84
src/app/main-view/post-analysis/post-analysis.component.ts
Normal file
84
src/app/main-view/post-analysis/post-analysis.component.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface Reaction {
|
||||
angry: number;
|
||||
haha: number;
|
||||
happy: number;
|
||||
hearth: number;
|
||||
like: number;
|
||||
ooo: number;
|
||||
sad: number;
|
||||
}
|
||||
|
||||
export interface PopularComments {
|
||||
comment: string;
|
||||
reaction: Reaction;
|
||||
}
|
||||
|
||||
export interface PostAnalysisResult {
|
||||
isPositive:boolean;
|
||||
reaction: Reaction;
|
||||
postCommentCounts: number;
|
||||
mostPopularComments: PopularComments[];
|
||||
analysisResults: any
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'app-post-analysis',
|
||||
templateUrl: './post-analysis.component.html',
|
||||
styleUrls: ['./post-analysis.component.scss']
|
||||
})
|
||||
export class PostAnalysisComponent implements OnInit {
|
||||
isHelpNeed = false
|
||||
showResult = false
|
||||
isPreview = false
|
||||
|
||||
postAnalysisResult: PostAnalysisResult = {
|
||||
isPositive: true,
|
||||
reaction: {
|
||||
angry: 0,
|
||||
haha: 0,
|
||||
happy: 20,
|
||||
hearth: 34,
|
||||
like: 56,
|
||||
ooo: 2,
|
||||
sad: 0
|
||||
},
|
||||
postCommentCounts: 157,
|
||||
mostPopularComments: [{
|
||||
comment: 'Ale super reklamka uhuhu',
|
||||
reaction: {
|
||||
angry: 0,
|
||||
haha: 0,
|
||||
happy: 0,
|
||||
hearth: 4,
|
||||
like: 6,
|
||||
ooo: 0,
|
||||
sad: 0
|
||||
},
|
||||
}, {
|
||||
comment: 'Ale fajne produkty robicie',
|
||||
reaction: {
|
||||
angry: 0,
|
||||
haha: 0,
|
||||
happy: 0,
|
||||
hearth: 0,
|
||||
like: 14,
|
||||
ooo: 20,
|
||||
sad: 0
|
||||
},
|
||||
}],
|
||||
analysisResults: []
|
||||
}
|
||||
|
||||
constructor(private route:ActivatedRoute) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.route.snapshot.params['id']) {
|
||||
this.isPreview = true;
|
||||
this.showResult = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
33
src/app/main-view/settings/settings.component.html
Normal file
33
src/app/main-view/settings/settings.component.html
Normal file
@ -0,0 +1,33 @@
|
||||
<div class="settings-container">
|
||||
<div class="header">Ustawienia konta</div>
|
||||
<div class="sub-header">Twoja organizacja:<span class="organization-info-container">
|
||||
SAMSUNG
|
||||
</span></div>
|
||||
|
||||
<div class="settings-form-container">
|
||||
<div class="form-header">Twoje dane</div>
|
||||
<div class="settings-form">
|
||||
<div class="exe-input">
|
||||
<label>Imię</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="exe-input">
|
||||
<label>Nazwisko</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="exe-input">
|
||||
<label>Adres Email</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="exe-input">
|
||||
<label>Hasło</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button class="button-primary">Zmień hasło</button>
|
||||
<button class="button-primary">Zapisz</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
33
src/app/main-view/settings/settings.component.scss
Normal file
33
src/app/main-view/settings/settings.component.scss
Normal file
@ -0,0 +1,33 @@
|
||||
.settings-container {
|
||||
padding: 30px;
|
||||
|
||||
.header {
|
||||
font-size: 25px;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
font-size: 14px;
|
||||
margin: 0 0 45px 0;
|
||||
}
|
||||
|
||||
.organization-info-container {
|
||||
font-size: 18px;
|
||||
margin: 0 0 35px 0;
|
||||
color: #0097A7;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-form-container{
|
||||
max-width:360px;
|
||||
.form-header{
|
||||
font-size: 20px;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
.button-container{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
column-gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/app/main-view/settings/settings.component.spec.ts
Normal file
25
src/app/main-view/settings/settings.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SettingsComponent } from './settings.component';
|
||||
|
||||
describe('SettingsComponent', () => {
|
||||
let component: SettingsComponent;
|
||||
let fixture: ComponentFixture<SettingsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ SettingsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/main-view/settings/settings.component.ts
Normal file
15
src/app/main-view/settings/settings.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
templateUrl: './settings.component.html',
|
||||
styleUrls: ['./settings.component.scss']
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
13
src/app/shared-components/header/header.component.html
Normal file
13
src/app/shared-components/header/header.component.html
Normal file
@ -0,0 +1,13 @@
|
||||
<mat-toolbar>
|
||||
<mat-toolbar-row>
|
||||
<div class="header-container">
|
||||
<div class="logo-container">
|
||||
<img (click)="navigateToDashboard()" class="logo-image" src="assets/images/logo.svg" alt="">
|
||||
<div class="logo-text">EXACTDATA</div>
|
||||
</div>
|
||||
<div class="login-button-container">
|
||||
<button class="button-primary" [routerLink]="''">Wyloguj się</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
41
src/app/shared-components/header/header.component.scss
Normal file
41
src/app/shared-components/header/header.component.scss
Normal file
@ -0,0 +1,41 @@
|
||||
mat-toolbar-row{
|
||||
padding:0px;
|
||||
height: 81px;
|
||||
}
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
background-color: black;
|
||||
border-bottom:1px solid #0097A7;
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 30px;
|
||||
|
||||
.logo-image {
|
||||
height: 70%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo-text{
|
||||
color:white;
|
||||
font-size:40px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-button-container{
|
||||
flex: 1;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
column-gap: 40px;
|
||||
}
|
||||
}
|
||||
25
src/app/shared-components/header/header.component.spec.ts
Normal file
25
src/app/shared-components/header/header.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeaderComponent } from './header.component';
|
||||
|
||||
describe('HeaderComponent', () => {
|
||||
let component: HeaderComponent;
|
||||
let fixture: ComponentFixture<HeaderComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HeaderComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
20
src/app/shared-components/header/header.component.ts
Normal file
20
src/app/shared-components/header/header.component.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Router } from '@angular/router';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss']
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
constructor(private router:Router) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
navigateToDashboard(): void {
|
||||
this.router.navigate(['/main-view'])
|
||||
}
|
||||
|
||||
}
|
||||
1
src/app/shared-components/nav-bar/nav-bar.component.html
Normal file
1
src/app/shared-components/nav-bar/nav-bar.component.html
Normal file
@ -0,0 +1 @@
|
||||
<p>nav-bar works!</p>
|
||||
25
src/app/shared-components/nav-bar/nav-bar.component.spec.ts
Normal file
25
src/app/shared-components/nav-bar/nav-bar.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NavBarComponent } from './nav-bar.component';
|
||||
|
||||
describe('NavBarComponent', () => {
|
||||
let component: NavBarComponent;
|
||||
let fixture: ComponentFixture<NavBarComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ NavBarComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavBarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/shared-components/nav-bar/nav-bar.component.ts
Normal file
15
src/app/shared-components/nav-bar/nav-bar.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-bar',
|
||||
templateUrl: './nav-bar.component.html',
|
||||
styleUrls: ['./nav-bar.component.scss']
|
||||
})
|
||||
export class NavBarComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
BIN
src/assets/images/ai-image-2.jpg
Normal file
BIN
src/assets/images/ai-image-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/images/ai-image.jpg
Normal file
BIN
src/assets/images/ai-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/images/ai-login-image.png
Normal file
BIN
src/assets/images/ai-login-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
9
src/assets/images/fb-emotes/angry.svg
Normal file
9
src/assets/images/fb-emotes/angry.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
9
src/assets/images/fb-emotes/haha.svg
Normal file
9
src/assets/images/fb-emotes/haha.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
9
src/assets/images/fb-emotes/happy.svg
Normal file
9
src/assets/images/fb-emotes/happy.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
9
src/assets/images/fb-emotes/hearth.svg
Normal file
9
src/assets/images/fb-emotes/hearth.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
9
src/assets/images/fb-emotes/like.svg
Normal file
9
src/assets/images/fb-emotes/like.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
9
src/assets/images/fb-emotes/ooo.svg
Normal file
9
src/assets/images/fb-emotes/ooo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
9
src/assets/images/fb-emotes/sad.svg
Normal file
9
src/assets/images/fb-emotes/sad.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
BIN
src/assets/images/home-marketing.png
Normal file
BIN
src/assets/images/home-marketing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
src/assets/images/info-image-1.png
Normal file
BIN
src/assets/images/info-image-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/images/info-image-2.png
Normal file
BIN
src/assets/images/info-image-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
src/assets/images/info-image-3.png
Normal file
BIN
src/assets/images/info-image-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
src/assets/images/info-image-4.png
Normal file
BIN
src/assets/images/info-image-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
3
src/assets/images/logo-white.svg
Normal file
3
src/assets/images/logo-white.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="58" height="55" viewBox="0 0 58 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M31.5898 13.1938C33.6693 12.2131 35.1039 10.0883 35.1039 7.63574C35.1039 4.25682 32.3808 1.5 29 1.5C25.6192 1.5 22.8961 4.25682 22.8961 7.63574C22.8961 10.0708 24.3103 12.1827 26.3657 13.1726V24.0458C25.632 24.3992 24.98 24.8956 24.4448 25.4985L13.6311 22.4717C13.167 19.553 10.653 17.3108 7.60393 17.3108C4.22311 17.3108 1.5 20.0676 1.5 23.4465C1.5 26.8254 4.22311 29.5823 7.60393 29.5823C9.43015 29.5823 11.0645 28.7779 12.1813 27.5056L22.9677 30.5248C23.0592 31.1211 23.2363 31.6896 23.486 32.2169L16.6399 41.2419C16.5056 41.233 16.3701 41.2285 16.2335 41.2285C12.8527 41.2285 10.1296 43.9853 10.1296 47.3643C10.1296 50.7432 12.8527 53.5 16.2335 53.5C19.6144 53.5 22.3375 50.7432 22.3375 47.3643C22.3375 46.0554 21.9289 44.8399 21.2318 43.8419L27.5297 35.5395C28.0004 35.6564 28.4928 35.7185 29 35.7185C29.4335 35.7185 29.8562 35.6731 30.2638 35.587L36.8005 44.2041C36.2472 45.1282 35.9294 46.2099 35.9294 47.3643C35.9294 50.7432 38.6525 53.5 42.0334 53.5C45.4142 53.5 48.1373 50.7432 48.1373 47.3643C48.1373 43.9853 45.4142 41.2285 42.0334 41.2285C41.7351 41.2285 41.4419 41.25 41.1552 41.2914L34.4182 32.4103C34.7248 31.8177 34.938 31.1689 35.0385 30.4838L45.7912 27.474C46.9086 28.7646 48.5548 29.5823 50.3961 29.5823C53.7769 29.5823 56.5 26.8254 56.5 23.4465C56.5 20.0676 53.7769 17.3108 50.3961 17.3108C47.3614 17.3108 44.8566 19.532 44.3756 22.4305L33.5271 25.4671C32.9864 24.8662 32.3288 24.3732 31.5898 24.0246V13.1938Z" fill="white" stroke="#0097A7" stroke-width="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
3
src/assets/images/logo.svg
Normal file
3
src/assets/images/logo.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="auto" height="366" viewBox="0 0 387 366" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M202.985 71.314C217.844 67.1329 228.733 53.3708 228.733 37.0585C228.733 17.4337 212.972 1.5 193.5 1.5C174.028 1.5 158.267 17.4337 158.267 37.0585C158.267 53.2513 168.997 66.9311 183.689 71.2206V164.14C175.372 166.568 168.324 172.006 163.774 179.206L71.9647 153.437C71.9651 153.365 71.9654 153.292 71.9654 153.219C71.9654 133.595 56.2047 117.661 36.7327 117.661C17.2606 117.661 1.5 133.595 1.5 153.219C1.5 172.844 17.2606 188.778 36.7327 188.778C49.3162 188.778 60.3497 182.124 66.5815 172.119L158.27 197.854C158.268 198.003 158.267 198.152 158.267 198.302C158.267 205.763 160.546 212.691 164.44 218.412L107.162 294.126C104.838 293.639 102.429 293.383 99.9611 293.383C80.4891 293.383 64.7284 309.317 64.7284 328.941C64.7284 348.566 80.4891 364.5 99.9611 364.5C119.433 364.5 135.194 348.566 135.194 328.941C135.194 318.905 131.072 309.834 124.439 303.366L179.296 230.853C183.64 232.786 188.445 233.86 193.5 233.86C198.038 233.86 202.374 232.995 206.355 231.419L262.446 305.564C257.037 311.816 253.762 319.995 253.762 328.941C253.762 348.566 269.522 364.5 288.994 364.5C308.466 364.5 324.227 348.566 324.227 328.941C324.227 309.317 308.466 293.383 288.994 293.383C285.402 293.383 281.936 293.925 278.672 294.933L221.699 219.623C226.116 213.68 228.733 206.297 228.733 198.302C228.733 198.056 228.73 197.811 228.725 197.567L320.267 171.873C326.47 182.015 337.581 188.778 350.267 188.778C369.739 188.778 385.5 172.844 385.5 153.219C385.5 133.595 369.739 117.661 350.267 117.661C330.819 117.661 315.073 133.556 315.035 153.149L223.07 178.961C218.456 171.789 211.349 166.4 202.985 164.046V71.314Z" fill="#0097A7" stroke="white" stroke-width="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -6,8 +6,11 @@
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
125
src/styles.scss
125
src/styles.scss
@ -1 +1,126 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.flex-direction-row {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.flex-direction-column {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.flex-align-items-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.flex-justify-items-center {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: #0097A7;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: #0097A7;
|
||||
border: 2px solid #0097A7;
|
||||
}
|
||||
}
|
||||
|
||||
.exe-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
border: 2px solid #0097A7;
|
||||
border-radius: 25px;
|
||||
height: 32px;
|
||||
padding: 0px 15px 0px 15px;
|
||||
color: #0097A7;
|
||||
|
||||
&:focus {
|
||||
border: 3px solid #0097A7;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
.input-down-text{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-self: center;
|
||||
margin: 5px 0 0 0;
|
||||
column-gap: 8px;
|
||||
font-size: 12px;
|
||||
mat-icon{
|
||||
color:#0097A7;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
&:hover{
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
span{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exe-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: rgb(232, 230, 230);
|
||||
border: 2px solid #0097A7;
|
||||
border-radius: 25px;
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
max-width:400px;
|
||||
padding: 15px 15px 0px 20px;
|
||||
color: #0097A7;
|
||||
resize: vertical;
|
||||
font-size: 17px;
|
||||
&:focus {
|
||||
border: 3px solid #0097A7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user