wanjakrah/tusha
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Move from old git to gittea

Browse Source
This commit is contained in:
Wanja Krah
2024-11-08 10:17:11 +01:00
parent 48b2880ea0
commit c75f322a0c
65 changed files with 19224 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/app/pages/modus/focus/focus.component.html Normal file
View File

@@ -0,0 +1,89 @@
<app-tusha-page>
<ion-breadcrumbs slot="breadcrumb">
<ion-breadcrumb href="tusha/home">
<ion-icon slot="start" name="home"/>
Home
</ion-breadcrumb>
<ion-breadcrumb href="tusha/modus">
<ion-icon slot="start" name="aperture"/>
Modus
</ion-breadcrumb>
<ion-breadcrumb>
<ion-icon slot="start" name="time"/>
Focus
</ion-breadcrumb>
</ion-breadcrumbs>
<!-- TODO add settings cogwheel -->
<!-- TODO add default action to div -->
<!-- TODO add are you sure pop-ups -->
<div class="countdown-box countdown-state-{{state}}-box">
<div class="leftright-line">
<span class="countdown-state-text countdown-state-{{state}}-text">{{state}}</span>
<ion-icon name="settings-outline"></ion-icon>
</div>
<div class="countdown-timer">
<svg class="focustimer countdown-state-{{state}}-box" width="100%" height="100%" viewBox="0 0 200 200" (click)="startWhereWeAre()">
<!-- Definieer de gradient -->
<defs>
<!-- have the gradient follow the path is possible but too difficult for now - can be read at https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path -->
<linearGradient id="grad1" x1="1" y1="0" x2="0" y2="0">
<stop offset="0%" stop-color="blue"></stop>
<stop offset="80%" stop-color="green"></stop>
<stop offset="100%" stop-color="red"></stop>
</linearGradient>
</defs>
<path id="1stPath" [attr.d]="pathD"
fill="none" stroke="url(#grad1)" stroke-width="30" stroke-dasharray="0" [attr.stroke-dashoffset]="dashOffset" />
</svg>
<div class="countdown-text">{{ minutesText }}:{{ secondsText }}</div>
</div>
</div>
<div class="leftright-line">
<ion-button (click)="startTimer(25)">Focus</ion-button>
<ion-button (click)="stopTimer()">Give up</ion-button>
</div>
<div class="leftright-line">
<ion-button (click)="startTimer(5)">Reload</ion-button>
<ion-button (click)="startTimer(15)">Recharge</ion-button>
</div>
<div class="timer">
<div class="countdown focusmode">
<svg class="focustimer" width="100%" height="100%" viewBox="0 0 200 200" style="background-color: lavender;" (click)="startWhereWeAre()">
<!-- Definieer de gradient -->
<defs>
<!-- have the gradient follow the path is possible but too difficult for now - can be read at https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path -->
<linearGradient id="grad1" x1="1" y1="0" x2="0" y2="0">
<stop offset="0%" stop-color="blue"></stop>
<stop offset="80%" stop-color="green"></stop>
<stop offset="100%" stop-color="red"></stop>
</linearGradient>
</defs>
<path id="1stPath" [attr.d]="pathD"
fill="none" stroke="url(#grad1)" stroke-width="30" stroke-dasharray="0" [attr.stroke-dashoffset]="dashOffset" />
</svg>
<div class="countdown-text">{{ minutesText }}:{{ secondsText }}</div>
</div>
</div>
<div class="state state-{{state}}">{{state}}</div>
<!-- TODO decide buttons to show on state -->
<div class="buttonBar">
<ion-button (click)="startTimer(25)">Focus</ion-button>
<ion-button (click)="stopTimer()">Give up</ion-button>
</div>
<div class="buttonBar">
<ion-button (click)="startTimer(5)">Reload</ion-button>
<ion-button (click)="startTimer(15)">Recharge</ion-button>
</div>
</app-tusha-page>