5 |
20 |
21 |
6 |
7 | 
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
8 |
9 |
22 |
24 |
25 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 |
2 | .page {
3 | display: flex;
4 | flex-direction: column;
5 | min-height: 98vh;
6 |
7 | .toolbar {
8 | display: flex;
9 | margin: 8px;
10 |
11 | .menu {
12 | &.logo {
13 | img {
14 | width: 32px;
15 | }
16 | }
17 |
18 | a {
19 | text-decoration: none;
20 | color: black;
21 | }
22 | }
23 |
24 | .spacer {
25 | flex: 1;
26 | }
27 | }
28 |
29 | .content {
30 | flex: 1;
31 |
32 | }
33 |
34 | .footer {
35 | text-align: center;
36 | }
37 |
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(() => TestBed.configureTestingModule({
7 | imports: [RouterTestingModule],
8 | declarations: [AppComponent]
9 | }));
10 |
11 | it('should create the app', () => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.componentInstance;
14 | expect(app).toBeTruthy();
15 | });
16 |
17 | it(`should have as title 'kedamanga'`, () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app.title).toEqual('kedamanga');
21 | });
22 |
23 | it('should render title', () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | fixture.detectChanges();
26 | const compiled = fixture.nativeElement as HTMLElement;
27 | expect(compiled.querySelector('.content span')?.textContent).toContain('kedamanga app is running!');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss']
7 | })
8 | export class AppComponent {
9 | title = 'kedamanga';
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 | import {HomePageComponent} from "./home-page/home-page.component";
7 | import {ContactPageComponent} from "./contact-page/contact-page.component";
8 |
9 | @NgModule({
10 | declarations: [
11 | AppComponent,
12 | HomePageComponent,
13 | ContactPageComponent
14 | ],
15 | imports: [
16 | BrowserModule,
17 | AppRoutingModule
18 | ],
19 | providers: [],
20 | bootstrap: [AppComponent]
21 | })
22 | export class AppModule { }
23 |
--------------------------------------------------------------------------------
/src/app/contact-page/contact-page.component.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/app/contact-page/contact-page.component.scss:
--------------------------------------------------------------------------------
1 | .contact-box {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: start;
6 |
7 | img {
8 | width: 300px;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/contact-page/contact-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ContactPageComponent } from './contact-page.component';
4 |
5 | describe('ContactPageComponent', () => {
6 | let component: ContactPageComponent;
7 | let fixture: ComponentFixture
15 |
3 |
18 |
19 |
23 |
24 | 
15 |
20 | 
21 |
22 |
21 |
25 |
37 |
38 |
26 | 
27 |
28 |
27 |
29 |
36 |
30 | 支持连接 NAS
31 |
32 |
33 | 可通过 WebDAV，SMB 等协议连接 NAS 设备，并流式阅读漫画
34 |
35 |
39 |
51 |
40 |
47 |
41 | 真实纹理
42 |
43 |
44 | 带给你纸张般的阅读体验
45 |
46 |
48 | 
49 |
50 |
49 |
52 |
64 |
--------------------------------------------------------------------------------
/src/app/home-page/home-page.component.scss:
--------------------------------------------------------------------------------
1 | .section {
2 | display: flex;
3 | flex-direction: row;
4 |
5 | &.features {
6 | background: #fed941;
7 | }
8 |
9 | .text {
10 | flex: 1;
11 | display: flex;
12 | flex-direction: column;
13 | align-self: center;
14 | width: 50vw;
15 |
16 | &.landing {
17 | align-items: center;
18 | }
19 |
20 | &.left {
21 | align-items: end;
22 | margin-right: 50px;
23 | }
24 |
25 | &.right {
26 | align-items: start;
27 | margin-left: 50px;
28 | }
29 |
30 | .app-logo {
31 | width: 200px;
32 | }
33 |
34 | @media (max-width: 768px) {
35 | .app-logo {
36 | display: none;
37 | }
38 | }
39 |
40 | .title {
41 | font-size: 32px;
42 | font-weight: bold;
43 | }
44 |
45 | .description {
46 | margin: 0 12px 12px;
47 | }
48 |
49 | .download-btn img {
50 | width: 150px;
51 | }
52 | }
53 |
54 | img {
55 | flex: 1;
56 | width: 50vw;
57 | display: block;
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/home-page/home-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomePageComponent } from './home-page.component';
4 |
5 | describe('HomePageComponent', () => {
6 | let component: HomePageComponent;
7 | let fixture: ComponentFixture
53 | 
54 |
55 |
54 |
56 |
63 |
57 | 隐私模式
58 |
59 |
60 | 长按底部任意图标，开关「隐私模式」
61 |
62 |