├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── capacitor.config.json
├── e2e
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.json
├── ionic.config.json
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── home
    │   │   ├── home-routing.module.ts
    │   │   ├── home.module.ts
    │   │   ├── home.page.html
    │   │   ├── home.page.scss
    │   │   └── home.page.ts
    │   └── sphere
    │   │   ├── sphere.component.html
    │   │   ├── sphere.component.scss
    │   │   └── sphere.component.ts
    ├── assets
    │   └── icon
    │   │   └── favicon.png
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── global.d.ts
    ├── global.scss
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── theme
    │   └── variables.scss
    └── zone-flags.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /.angular/cache
 2 | # Specifies intentionally untracked files to ignore when using Git
 3 | # http://git-scm.com/docs/gitignore
 4 | 
 5 | *~
 6 | *.sw[mnpcod]
 7 | .tmp
 8 | *.tmp
 9 | *.tmp.*
10 | *.sublime-project
11 | *.sublime-workspace
12 | .DS_Store
13 | Thumbs.db
14 | UserInterfaceState.xcuserstate
15 | $RECYCLE.BIN/
16 | 
17 | *.log
18 | log.txt
19 | npm-debug.log*
20 | 
21 | /.idea
22 | /.ionic
23 | /.sass-cache
24 | /.sourcemaps
25 | /.versions
26 | /.vscode
27 | /coverage
28 | /dist
29 | /node_modules
30 | /platforms
31 | /plugins
32 | /www
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ionic-level
 2 | 
 3 | This is a basic iOS level application clone developed using **Angular**, **Ionic**, and **Capacitor**. The app leverages the **Capacitor Motion plugin** for device orientation tracking.
 4 | 
 5 | <b>Live Demo:</b> https://ionic-level.vercel.app
 6 | 
 7 | https://github.com/arthurrmp/ionic-level/assets/44805300/31276244-aa3d-43bb-ab0e-9c44cefa028a
 8 | 
 9 | ## Installation
10 | 
11 | 1. Install dependencies: `npm install`
12 | 2. Run the app: `ionic serve --external --ssl`
13 |    > Note: The `--ssl` flag is required to use the device orientation API on a real device.
14 | 3. Open the app on your device using the provided URL.
15 | 
16 | ## Contact
17 | 
18 | If you have any questions or discussions about the project, feel free to contact me.
19 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "app": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "www",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "tsconfig.app.json",
 21 |             "assets": [
 22 |               {
 23 |                 "glob": "**/*",
 24 |                 "input": "src/assets",
 25 |                 "output": "assets"
 26 |               },
 27 |               {
 28 |                 "glob": "**/*.svg",
 29 |                 "input": "node_modules/ionicons/dist/ionicons/svg",
 30 |                 "output": "./svg"
 31 |               }
 32 |             ],
 33 |             "styles": ["src/theme/variables.scss", "src/global.scss"],
 34 |             "scripts": [],
 35 |             "aot": false,
 36 |             "vendorChunk": true,
 37 |             "extractLicenses": false,
 38 |             "buildOptimizer": false,
 39 |             "sourceMap": true,
 40 |             "optimization": false,
 41 |             "namedChunks": true
 42 |           },
 43 |           "configurations": {
 44 |             "production": {
 45 |               "fileReplacements": [
 46 |                 {
 47 |                   "replace": "src/environments/environment.ts",
 48 |                   "with": "src/environments/environment.prod.ts"
 49 |                 }
 50 |               ],
 51 |               "optimization": true,
 52 |               "outputHashing": "all",
 53 |               "sourceMap": false,
 54 |               "namedChunks": false,
 55 |               "aot": true,
 56 |               "extractLicenses": true,
 57 |               "vendorChunk": false,
 58 |               "buildOptimizer": true,
 59 |               "budgets": [
 60 |                 {
 61 |                   "type": "initial",
 62 |                   "maximumWarning": "2mb",
 63 |                   "maximumError": "5mb"
 64 |                 }
 65 |               ]
 66 |             },
 67 |             "ci": {
 68 |               "progress": false
 69 |             }
 70 |           },
 71 |           "defaultConfiguration": ""
 72 |         },
 73 |         "serve": {
 74 |           "builder": "@angular-devkit/build-angular:dev-server",
 75 |           "options": {
 76 |             "browserTarget": "app:build"
 77 |           },
 78 |           "configurations": {
 79 |             "production": {
 80 |               "browserTarget": "app:build:production"
 81 |             },
 82 |             "ci": {
 83 |             }
 84 |           }
 85 |         },
 86 |         "extract-i18n": {
 87 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 88 |           "options": {
 89 |             "browserTarget": "app:build"
 90 |           }
 91 |         },
 92 |         "test": {
 93 |           "builder": "@angular-devkit/build-angular:karma",
 94 |           "options": {
 95 |             "main": "src/test.ts",
 96 |             "polyfills": "src/polyfills.ts",
 97 |             "tsConfig": "tsconfig.spec.json",
 98 |             "karmaConfig": "karma.conf.js",
 99 |             "styles": [],
100 |             "scripts": [],
101 |             "assets": [
102 |               {
103 |                 "glob": "favicon.ico",
104 |                 "input": "src/",
105 |                 "output": "/"
106 |               },
107 |               {
108 |                 "glob": "**/*",
109 |                 "input": "src/assets",
110 |                 "output": "/assets"
111 |               }
112 |             ]
113 |           },
114 |           "configurations": {
115 |             "ci": {
116 |               "progress": false,
117 |               "watch": false
118 |             }
119 |           }
120 |         },
121 |         "e2e": {
122 |           "builder": "@angular-devkit/build-angular:protractor",
123 |           "options": {
124 |             "protractorConfig": "e2e/protractor.conf.js",
125 |             "devServerTarget": "app:serve"
126 |           },
127 |           "configurations": {
128 |             "production": {
129 |               "devServerTarget": "app:serve:production"
130 |             },
131 |             "ci": {
132 |               "devServerTarget": "app:serve:ci"
133 |             }
134 |           }
135 |         }
136 |       }
137 |     }
138 |   },
139 |   "cli": {
140 |     "schematicCollections": [
141 |       "@ionic/angular-toolkit"
142 |     ]
143 |   },
144 |   "schematics": {
145 |     "@ionic/angular-toolkit:component": {
146 |       "styleext": "scss"
147 |     },
148 |     "@ionic/angular-toolkit:page": {
149 |       "styleext": "scss"
150 |     }
151 |   }
152 | }
153 | 


--------------------------------------------------------------------------------
/capacitor.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "appId": "io.ionic.starter",
 3 |   "appName": "measure",
 4 |   "bundledWebRuntime": false,
 5 |   "npmClient": "npm",
 6 |   "webDir": "www",
 7 |   "plugins": {
 8 |     "SplashScreen": {
 9 |       "launchShowDuration": 0
10 |     }
11 |   },
12 |   "cordova": {}
13 | }
14 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('new App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should be blank', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toContain('Start with Ionic UI Components');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.deepCss('app-root ion-content')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es2018",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "measure",
3 |   "integrations": {
4 |     "capacitor": {}
5 |   },
6 |   "type": "angular"
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-level",
 3 |   "version": "0.0.2",
 4 |   "author": "Arthur Machado",
 5 |   "homepage": "https://github.com/arthurrmp",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/common": "^16.2.12",
17 |     "@angular/core": "^16.2.12",
18 |     "@angular/forms": "^16.2.12",
19 |     "@angular/platform-browser": "^16.2.12",
20 |     "@angular/platform-browser-dynamic": "^16.2.12",
21 |     "@angular/router": "^16.2.12",
22 |     "@capacitor/core": "^5.6.0",
23 |     "@capacitor/motion": "^5.0.6",
24 |     "@ionic/angular": "^7.6.3",
25 |     "tslib": "^2.0.0",
26 |     "zone.js": "~0.13.3"
27 |   },
28 |   "devDependencies": {
29 |     "@angular-devkit/build-angular": "^16.2.11",
30 |     "@angular/cli": "^16.2.11",
31 |     "@angular/compiler": "^16.2.12",
32 |     "@angular/compiler-cli": "^16.2.12",
33 |     "@angular/language-service": "^16.2.12",
34 |     "@types/node": "^12.11.1",
35 |     "tslint": "~6.1.0",
36 |     "typescript": "~4.9.5"
37 |   },
38 |   "description": "An Ionic project"
39 | }
40 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 3 | 
 4 | const routes: Routes = [
 5 |   {
 6 |     path: '',
 7 |     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
 8 |   },
 9 |   {
10 |     path: '',
11 |     redirectTo: '',
12 |     pathMatch: 'full'
13 |   },
14 | ];
15 | 
16 | @NgModule({
17 |   imports: [
18 |     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
19 |   ],
20 |   exports: [RouterModule]
21 | })
22 | export class AppRoutingModule { }
23 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <ion-app>
2 |   <ion-router-outlet></ion-router-outlet>
3 | </ion-app>
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurrmp/ionic-level/db587e5248daf39ac6aae757bc8ea0a336fb91dd/src/app/app.component.scss


--------------------------------------------------------------------------------
/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 |   constructor() {}
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { RouteReuseStrategy } from '@angular/router';
 4 | 
 5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 6 | 
 7 | import { AppComponent } from './app.component';
 8 | import { AppRoutingModule } from './app-routing.module';
 9 | 
10 | @NgModule({
11 |     declarations: [AppComponent],
12 |     imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios' }), AppRoutingModule],
13 |     providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
14 |     bootstrap: [AppComponent]
15 | })
16 | export class AppModule { }  
17 | 


--------------------------------------------------------------------------------
/src/app/home/home-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | import { HomePage } from './home.page';
 4 | 
 5 | const routes: Routes = [
 6 |   {
 7 |     path: '',
 8 |     component: HomePage,
 9 |   }
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [RouterModule.forChild(routes)],
14 |   exports: [RouterModule]
15 | })
16 | export class HomePageRoutingModule {}
17 | 


--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { IonicModule } from '@ionic/angular';
 4 | import { FormsModule } from '@angular/forms';
 5 | import { HomePage } from './home.page';
 6 | 
 7 | import { HomePageRoutingModule } from './home-routing.module';
 8 | import { SphereComponent } from '../sphere/sphere.component';
 9 | 
10 | 
11 | @NgModule({
12 |   imports: [
13 |     CommonModule,
14 |     FormsModule,
15 |     IonicModule,
16 |     HomePageRoutingModule
17 |   ],
18 |   declarations: [HomePage, SphereComponent]
19 | })
20 | export class HomePageModule {}
21 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.html:
--------------------------------------------------------------------------------
 1 | <ion-content [forceOverscroll]="false" [scrollY]="false">
 2 |   <div class="container" [class.success]="isAligned()">
 3 |     <ng-container *ngIf="!motion">
 4 |       <h1>Ionic Level</h1>
 5 |       <p>
 6 |         In order to use this PWA, you need to give permission to access your
 7 |         device's motion sensor.
 8 |       </p>
 9 |       <ion-button (click)="requestPermission()"> Give Permission </ion-button>
10 |       <div class="technologies">
11 |         <p>Made with</p>
12 |         <p>
13 |           <a
14 |             *ngFor="let technology of technologies"
15 |             [href]="technology.link"
16 |             target="_blank"
17 |           >
18 |             <ion-icon [name]="technology.icon" size="large"></ion-icon>
19 |           </a>
20 |         </p>
21 |       </div>
22 |     </ng-container>
23 |     <ng-container *ngIf="motion">
24 |       <app-sphere
25 |         [beta]="motion.beta"
26 |         [gamma]="motion.gamma"
27 |         [success]="isAligned()"
28 |       />
29 |       <div class="angle" [class.mix-blend-difference]="!isAligned()">
30 |         {{isAligned()? 0 : angle}}°
31 |       </div>
32 |       <app-sphere
33 |         [beta]="-motion.beta"
34 |         [gamma]="-motion.gamma"
35 |         [success]="isAligned()"
36 |         [bordered]="isAligned()"
37 |       />
38 |     </ng-container>
39 |   </div>
40 | </ion-content>
41 | 
42 | <ion-footer>
43 |   <ion-toolbar>
44 |     <ion-title>
45 |       Created by
46 |       <a class="nickname" href="https://github.com/arthurrmp" target="_blank">
47 |         arthurrmp
48 |         <ion-icon name="logo-github"></ion-icon>
49 |       </a>
50 |     </ion-title>
51 |   </ion-toolbar>
52 | </ion-footer>
53 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
 1 | .success {
 2 |   background-color: var(--ion-color-success);
 3 | }
 4 | 
 5 | .angle {
 6 |   font-size: 4em;
 7 |   font-weight: lighter;
 8 |   position: absolute;
 9 | }
10 | 
11 | .container {
12 |   width: 100%;
13 |   height: 100%;
14 |   display: flex;
15 |   justify-content: center;
16 |   align-items: center;
17 |   flex-direction: column;
18 |   text-align: center;
19 |   transition: background-color 0.3s ease-in-out;
20 | }
21 | 
22 | .nickname {
23 |   text-decoration: none;
24 | }
25 | 
26 | .technologies {
27 |   padding-top: 100px;
28 | 
29 |   ion-icon {
30 |     margin: 0 10px;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { Motion, OrientationListenerEvent } from '@capacitor/motion';
 3 | import { AlertController } from '@ionic/angular';
 4 | 
 5 | const TOLERANCE = 0.7;
 6 | 
 7 | @Component({
 8 |   selector: 'app-home',
 9 |   templateUrl: 'home.page.html',
10 |   styleUrls: ['home.page.scss'],
11 | })
12 | export class HomePage {
13 |   public motion: OrientationListenerEvent;
14 |   public angle: number = 0;
15 | 
16 |   public technologies = [
17 |     {
18 |       icon: 'logo-angular',
19 |       link: 'https://angular.io',
20 |     },
21 |     {
22 |       icon: 'logo-ionic',
23 |       link: 'https://ionicframework.com',
24 |     },
25 |     {
26 |       icon: 'logo-capacitor',
27 |       link: 'https://capacitorjs.com',
28 |     },
29 |   ] as const;
30 | 
31 |   constructor(private alertController: AlertController) {}
32 | 
33 |   async requestPermission() {
34 |     try {
35 |       await (
36 |         DeviceOrientationEvent as unknown as DeviceOrientationEventiOS
37 |       ).requestPermission();
38 |       this.addOrientationListener();
39 |     } catch (e) {
40 |       const alert = await this.alertController.create({
41 |         subHeader: 'We have not been able to access your device sensors 😞',
42 |         message: 'Your device may not support the DeviceMotion Web API',
43 |         buttons: ['OK'],
44 |       });
45 |       await alert.present();
46 |     }
47 |   }
48 | 
49 |   addOrientationListener() {
50 |     Motion.addListener('orientation', (event: OrientationListenerEvent) => {
51 |       this.motion = event;
52 | 
53 |       const gamma = Math.abs(event.gamma);
54 |       const beta = Math.abs(event.beta);
55 | 
56 |       this.angle = -Math.round(Math.max(gamma, beta));
57 |     });
58 |   }
59 | 
60 |   public isAligned() {
61 |     if (
62 |       !this.motion ||
63 |       Math.abs(this.motion?.gamma) > TOLERANCE ||
64 |       Math.abs(this.motion?.beta) > TOLERANCE
65 |     ) {
66 |       return false;
67 |     }
68 | 
69 |     return true;
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/app/sphere/sphere.component.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="sphere"
 3 |   [class]="{
 4 |     'no-background': success,
 5 |     'mix-blend-difference': !success,
 6 |     bordered: bordered
 7 |   }"
 8 |   [style.--motion-beta]="beta + 'vh'"
 9 |   [style.--motion-gamma]="gamma + 'vw'"
10 | ></div>
11 | 


--------------------------------------------------------------------------------
/src/app/sphere/sphere.component.scss:
--------------------------------------------------------------------------------
 1 | .sphere {
 2 |   transform: translate(
 3 |     calc(var(--motion-gamma) - 50%),
 4 |     calc(var(--motion-beta) - 50%)
 5 |   );
 6 |   width: 200px;
 7 |   height: 200px;
 8 |   border-radius: 50%;
 9 |   position: absolute;
10 |   background-color: var(--ion-color-dark);
11 | }
12 | 
13 | .bordered {
14 |   border: 2px solid var(--ion-color-dark);
15 | }
16 | 
17 | .no-background {
18 |   background-color: transparent;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/sphere/sphere.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-sphere',
 5 |   templateUrl: './sphere.component.html',
 6 |   styleUrls: ['./sphere.component.scss'],
 7 | })
 8 | export class SphereComponent {
 9 | 
10 |   @Input() public beta: number = 0;
11 |   @Input() public gamma: number = 0;
12 |   @Input() public success: boolean = false;
13 |   @Input() public bordered: boolean = false;
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurrmp/ionic-level/db587e5248daf39ac6aae757bc8ea0a336fb91dd/src/assets/icon/favicon.png


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | interface DeviceOrientationEventiOS extends DeviceOrientationEvent {
2 |   requestPermission?: () => Promise<'granted' | 'denied'>;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * App Global CSS
 3 |  * ----------------------------------------------------------------------------
 4 |  * Put style rules here that you want to apply globally. These styles are for
 5 |  * the entire app and not just one component. Additionally, this file can be
 6 |  * used as an entry point to import other CSS/Sass files to be included in the
 7 |  * output CSS.
 8 |  * For more information on global stylesheets, visit the documentation:
 9 |  * https://ionicframework.com/docs/layout/global-stylesheets
10 |  */
11 | 
12 | /* Core CSS required for Ionic components to work properly */
13 | @import "~@ionic/angular/css/core.css";
14 | 
15 | /* Basic CSS for apps built with Ionic */
16 | @import "~@ionic/angular/css/normalize.css";
17 | @import "~@ionic/angular/css/structure.css";
18 | @import "~@ionic/angular/css/typography.css";
19 | @import '~@ionic/angular/css/display.css';
20 | 
21 | /* Optional CSS utils that can be commented out */
22 | @import "~@ionic/angular/css/padding.css";
23 | @import "~@ionic/angular/css/float-elements.css";
24 | @import "~@ionic/angular/css/text-alignment.css";
25 | @import "~@ionic/angular/css/text-transformation.css";
26 | @import "~@ionic/angular/css/flex-utils.css";
27 | 
28 | .mix-blend-difference {
29 |   mix-blend-mode: difference;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <title>Ionic Level</title>
 7 | 
 8 |   <base href="/" />
 9 | 
10 |   <meta name="color-scheme" content="light dark" />
11 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12 |   <meta name="format-detection" content="telephone=no" />
13 |   <meta name="msapplication-tap-highlight" content="no" />
14 | 
15 |   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
16 | 
17 |   <!-- add to homescreen for ios -->
18 |   <meta name="apple-mobile-web-app-capable" content="yes" />
19 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20 | </head>
21 | 
22 | <body>
23 |   <app-root></app-root>
24 | </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * By default, zone.js will patch all possible macroTask and DomEvents
23 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
24 |  * because those flags need to be set before `zone.js` being loaded, and webpack
25 |  * will put import in the top of bundle, so user need to create a separate file
26 |  * in this directory (for example: zone-flags.ts), and put the following flags
27 |  * into that file, and then add the following code before importing zone.js.
28 |  * import './zone-flags';
29 |  *
30 |  * The flags allowed in zone-flags.ts are listed here.
31 |  *
32 |  * The following flags will work for all browsers.
33 |  *
34 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 |  *
38 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
40 |  *
41 |  *  (window as any).__Zone_enable_cross_context_check = true;
42 |  *
43 |  */
44 | 
45 | import './zone-flags';
46 | 
47 | /***************************************************************************************************
48 |  * Zone JS is required by default for Angular itself.
49 |  */
50 | import 'zone.js';  // Included with Angular CLI.
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * APPLICATION IMPORTS
55 |  */
56 | 


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   --ion-color-primary: #428cff;
  3 |   --ion-color-primary-rgb: 66,140,255;
  4 |   --ion-color-primary-contrast: #ffffff;
  5 |   --ion-color-primary-contrast-rgb: 255,255,255;
  6 |   --ion-color-primary-shade: #3a7be0;
  7 |   --ion-color-primary-tint: #5598ff;
  8 | 
  9 |   --ion-color-secondary: #50c8ff;
 10 |   --ion-color-secondary-rgb: 80,200,255;
 11 |   --ion-color-secondary-contrast: #ffffff;
 12 |   --ion-color-secondary-contrast-rgb: 255,255,255;
 13 |   --ion-color-secondary-shade: #46b0e0;
 14 |   --ion-color-secondary-tint: #62ceff;
 15 | 
 16 |   --ion-color-tertiary: #6a64ff;
 17 |   --ion-color-tertiary-rgb: 106,100,255;
 18 |   --ion-color-tertiary-contrast: #ffffff;
 19 |   --ion-color-tertiary-contrast-rgb: 255,255,255;
 20 |   --ion-color-tertiary-shade: #5d58e0;
 21 |   --ion-color-tertiary-tint: #7974ff;
 22 | 
 23 | 	--ion-color-success: #62cc62;
 24 | 	--ion-color-success-rgb: 98,204,98;
 25 | 	--ion-color-success-contrast: #000000;
 26 | 	--ion-color-success-contrast-rgb: 0,0,0;
 27 | 	--ion-color-success-shade: #56b456;
 28 | 	--ion-color-success-tint: #72d172;
 29 | 
 30 |   --ion-color-warning: #ffd534;
 31 |   --ion-color-warning-rgb: 255,213,52;
 32 |   --ion-color-warning-contrast: #000000;
 33 |   --ion-color-warning-contrast-rgb: 0,0,0;
 34 |   --ion-color-warning-shade: #e0bb2e;
 35 |   --ion-color-warning-tint: #ffd948;
 36 | 
 37 |   --ion-color-danger: #ff4961;
 38 |   --ion-color-danger-rgb: 255,73,97;
 39 |   --ion-color-danger-contrast: #ffffff;
 40 |   --ion-color-danger-contrast-rgb: 255,255,255;
 41 |   --ion-color-danger-shade: #e04055;
 42 |   --ion-color-danger-tint: #ff5b71;
 43 | 
 44 |   --ion-color-dark: #f4f5f8;
 45 |   --ion-color-dark-rgb: 244,245,248;
 46 |   --ion-color-dark-contrast: #000000;
 47 |   --ion-color-dark-contrast-rgb: 0,0,0;
 48 |   --ion-color-dark-shade: #d7d8da;
 49 |   --ion-color-dark-tint: #f5f6f9;
 50 | 
 51 |   --ion-color-medium: #989aa2;
 52 |   --ion-color-medium-rgb: 152,154,162;
 53 |   --ion-color-medium-contrast: #000000;
 54 |   --ion-color-medium-contrast-rgb: 0,0,0;
 55 |   --ion-color-medium-shade: #86888f;
 56 |   --ion-color-medium-tint: #a2a4ab;
 57 | 
 58 |   --ion-color-light: #000000;
 59 |   --ion-color-light-rgb: 34,36,40;
 60 |   --ion-color-light-contrast: #ffffff;
 61 |   --ion-color-light-contrast-rgb: 255,255,255;
 62 |   --ion-color-light-shade: #1e2023;
 63 |   --ion-color-light-tint: #383a3e;
 64 | }
 65 | 
 66 | /*
 67 |  * iOS Dark Theme
 68 |  * -------------------------------------------
 69 |  */
 70 | 
 71 | .ios body {
 72 |   --ion-background-color: #000000;
 73 |   --ion-background-color-rgb: 0,0,0;
 74 | 
 75 |   --ion-text-color: #ffffff;
 76 |   --ion-text-color-rgb: 255,255,255;
 77 | 
 78 |   --ion-color-step-50: #0d0d0d;
 79 |   --ion-color-step-100: #1a1a1a;
 80 |   --ion-color-step-150: #262626;
 81 |   --ion-color-step-200: #333333;
 82 |   --ion-color-step-250: #404040;
 83 |   --ion-color-step-300: #4d4d4d;
 84 |   --ion-color-step-350: #595959;
 85 |   --ion-color-step-400: #666666;
 86 |   --ion-color-step-450: #737373;
 87 |   --ion-color-step-500: #808080;
 88 |   --ion-color-step-550: #8c8c8c;
 89 |   --ion-color-step-600: #999999;
 90 |   --ion-color-step-650: #a6a6a6;
 91 |   --ion-color-step-700: #b3b3b3;
 92 |   --ion-color-step-750: #bfbfbf;
 93 |   --ion-color-step-800: #cccccc;
 94 |   --ion-color-step-850: #d9d9d9;
 95 |   --ion-color-step-900: #e6e6e6;
 96 |   --ion-color-step-950: #f2f2f2;
 97 | 
 98 |   --ion-item-background: #000000;
 99 | 
100 |   --ion-card-background: #1c1c1d;
101 | }
102 | 
103 | .ios ion-modal {
104 |   --ion-background-color: var(--ion-color-step-100);
105 |   --ion-toolbar-background: var(--ion-color-step-150);
106 |   --ion-toolbar-border-color: var(--ion-color-step-250);
107 | }
108 | 
109 | 
110 | /*
111 |  * Material Design Dark Theme
112 |  * -------------------------------------------
113 |  */
114 | 
115 | .md body {
116 |   --ion-background-color: #121212;
117 |   --ion-background-color-rgb: 18,18,18;
118 | 
119 |   --ion-text-color: #ffffff;
120 |   --ion-text-color-rgb: 255,255,255;
121 | 
122 |   --ion-border-color: #222222;
123 | 
124 |   --ion-color-step-50: #1e1e1e;
125 |   --ion-color-step-100: #2a2a2a;
126 |   --ion-color-step-150: #363636;
127 |   --ion-color-step-200: #414141;
128 |   --ion-color-step-250: #4d4d4d;
129 |   --ion-color-step-300: #595959;
130 |   --ion-color-step-350: #656565;
131 |   --ion-color-step-400: #717171;
132 |   --ion-color-step-450: #7d7d7d;
133 |   --ion-color-step-500: #898989;
134 |   --ion-color-step-550: #949494;
135 |   --ion-color-step-600: #a0a0a0;
136 |   --ion-color-step-650: #acacac;
137 |   --ion-color-step-700: #b8b8b8;
138 |   --ion-color-step-750: #c4c4c4;
139 |   --ion-color-step-800: #d0d0d0;
140 |   --ion-color-step-850: #dbdbdb;
141 |   --ion-color-step-900: #e7e7e7;
142 |   --ion-color-step-950: #f3f3f3;
143 | 
144 |   --ion-item-background: #1e1e1e;
145 | 
146 |   --ion-toolbar-background: #1f1f1f;
147 | 
148 |   --ion-tab-bar-background: #1f1f1f;
149 | 
150 |   --ion-card-background: #1e1e1e;
151 | }
152 | 


--------------------------------------------------------------------------------
/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Prevents Angular change detection from
3 |  * running with certain Web Component callbacks
4 |  */
5 | (window as any).__Zone_disable_customElements = true;
6 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "sourceMap": true,
 8 |     "declaration": false,
 9 |     "downlevelIteration": true,
10 |     "experimentalDecorators": true,
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2020",
14 |     "module": "es2020",
15 |     "lib": ["es2018", "dom"]
16 |   },
17 |   "angularCompilerOptions": {
18 |     "enableI18nLegacyMessageIdFormat": false,
19 |     "strictInjectionParameters": true,
20 |     "strictInputAccessModifiers": true,
21 |     "strictTemplates": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rules": {
  4 |     "align": {
  5 |       "options": [
  6 |         "parameters",
  7 |         "statements"
  8 |       ]
  9 |     },
 10 |     "array-type": false,
 11 |     "arrow-return-shorthand": true,
 12 |     "curly": true,
 13 |     "deprecation": {
 14 |       "severity": "warning"
 15 |     },
 16 |     "component-class-suffix": [true, "Page", "Component"],
 17 |     "contextual-lifecycle": true,
 18 |     "directive-class-suffix": true,
 19 |     "directive-selector": [
 20 |       true,
 21 |       "attribute",
 22 |       "app",
 23 |       "camelCase"
 24 |     ],
 25 |     "component-selector": [
 26 |       true,
 27 |       "element",
 28 |       "app",
 29 |       "kebab-case"
 30 |     ],
 31 |     "eofline": true,
 32 |     "import-blacklist": [
 33 |       true,
 34 |       "rxjs/Rx"
 35 |     ],
 36 |     "import-spacing": true,
 37 |     "indent": {
 38 |       "options": [
 39 |         "spaces"
 40 |       ]
 41 |     },
 42 |     "max-classes-per-file": false,
 43 |     "max-line-length": [
 44 |       true,
 45 |       140
 46 |     ],
 47 |     "member-ordering": [
 48 |       true,
 49 |       {
 50 |         "order": [
 51 |           "static-field",
 52 |           "instance-field",
 53 |           "static-method",
 54 |           "instance-method"
 55 |         ]
 56 |       }
 57 |     ],
 58 |     "no-console": [
 59 |       true,
 60 |       "debug",
 61 |       "info",
 62 |       "time",
 63 |       "timeEnd",
 64 |       "trace"
 65 |     ],
 66 |     "no-empty": false,
 67 |     "no-inferrable-types": [
 68 |       true,
 69 |       "ignore-params"
 70 |     ],
 71 |     "no-non-null-assertion": true,
 72 |     "no-redundant-jsdoc": true,
 73 |     "no-switch-case-fall-through": true,
 74 |     "no-var-requires": false,
 75 |     "object-literal-key-quotes": [
 76 |       true,
 77 |       "as-needed"
 78 |     ],
 79 |     "quotemark": [
 80 |       true,
 81 |       "single"
 82 |     ],
 83 |     "semicolon": {
 84 |       "options": [
 85 |         "always"
 86 |       ]
 87 |     },
 88 |     "space-before-function-paren": {
 89 |       "options": {
 90 |         "anonymous": "never",
 91 |         "asyncArrow": "always",
 92 |         "constructor": "never",
 93 |         "method": "never",
 94 |         "named": "never"
 95 |       }
 96 |     },
 97 |     "typedef-whitespace": {
 98 |       "options": [
 99 |         {
100 |           "call-signature": "nospace",
101 |           "index-signature": "nospace",
102 |           "parameter": "nospace",
103 |           "property-declaration": "nospace",
104 |           "variable-declaration": "nospace"
105 |         },
106 |         {
107 |           "call-signature": "onespace",
108 |           "index-signature": "onespace",
109 |           "parameter": "onespace",
110 |           "property-declaration": "onespace",
111 |           "variable-declaration": "onespace"
112 |         }
113 |       ]
114 |     },
115 |     "variable-name": {
116 |       "options": [
117 |         "ban-keywords",
118 |         "check-format",
119 |         "allow-pascal-case"
120 |       ]
121 |     },
122 |     "whitespace": {
123 |       "options": [
124 |         "check-branch",
125 |         "check-decl",
126 |         "check-operator",
127 |         "check-separator",
128 |         "check-type",
129 |         "check-typecast"
130 |       ]
131 |     },
132 |     "no-conflicting-lifecycle": true,
133 |     "no-host-metadata-property": true,
134 |     "no-input-rename": true,
135 |     "no-inputs-metadata-property": true,
136 |     "no-output-native": true,
137 |     "no-output-on-prefix": true,
138 |     "no-output-rename": true,
139 |     "no-outputs-metadata-property": true,
140 |     "template-banana-in-box": true,
141 |     "template-no-negated-async": true,
142 |     "use-lifecycle-interface": true,
143 |     "use-pipe-transform-interface": true,
144 |     "object-literal-sort-keys": false
145 |   },
146 |   "rulesDirectory": [
147 |     "codelyzer"
148 |   ]
149 | }
150 | 


--------------------------------------------------------------------------------