diff --git a/ordre-du-jour/odj/src/app/app.component.html b/ordre-du-jour/odj/src/app/app.component.html index 86524ea0..70e897cf 100644 --- a/ordre-du-jour/odj/src/app/app.component.html +++ b/ordre-du-jour/odj/src/app/app.component.html @@ -1,283 +1,57 @@ - - - - - - - - -
+ + Sujets: + +
    +
  • + {{i+1}}) {{s.title}} + + currentSubjectId: {{currentSubjectId}} + +

    {{s.duration}} min, par {{s.author}}. Reste: {{resteTopicMinutes}}

    +
    • +
-

Ordre du jour

-

Début: {{startTime}}

-

Fin: {{endTime}}

+ + 
+          {{hints}}
+
- - Sujets: - -
    -
  • -

    {{s.title}}

    -

    {{s.duration}} min

    -

    par {{s.author}}

    -

    Reste: {{resteTopicMinutes}}

    -
    • -
- - 
-          {{hints}}
-
-
- +
-
-
- - - - - - - + +
+ debug: + 
+        {{subjects|json}}
+
+
+ + diff --git a/ordre-du-jour/odj/src/app/app.component.scss b/ordre-du-jour/odj/src/app/app.component.scss index e69de29b..49f31b34 100644 --- a/ordre-du-jour/odj/src/app/app.component.scss +++ b/ordre-du-jour/odj/src/app/app.component.scss @@ -0,0 +1,190 @@ + +:host { + --bright-blue: oklch(51.01% 0.274 263.83); + --electric-violet: oklch(53.18% 0.28 296.97); + --french-violet: oklch(47.66% 0.246 305.88); + --vivid-pink: oklch(69.02% 0.277 332.77); + --hot-red: oklch(61.42% 0.238 15.34); + --orange-red: oklch(63.32% 0.24 31.68); + + --gray-900: oklch(19.37% 0.006 300.98); + --gray-700: oklch(36.98% 0.014 302.71); + --gray-400: oklch(70.9% 0.015 304.04); + + --red-to-pink-to-purple-vertical-gradient: linear-gradient( + 180deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); + + --red-to-pink-to-purple-horizontal-gradient: linear-gradient( + 90deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); + + --pill-accent: var(--bright-blue); + + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1 { + font-size: 3.125rem; + color: var(--gray-900); + font-weight: 500; + line-height: 100%; + letter-spacing: -0.125rem; + margin: 0; + font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; +} + +p { + margin: 0; + color: var(--gray-700); +} + +main { + width: 100%; + min-height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + box-sizing: inherit; + position: relative; +} + +.angular-logo { + max-width: 9.2rem; +} + +.content { + display: flex; + justify-content: space-around; + width: 100%; + max-width: 700px; + margin-bottom: 3rem; +} + +.content h1 { + margin-top: 1.75rem; +} + +.content p { + margin-top: 1.5rem; +} + +.divider { + width: 1px; + background: var(--red-to-pink-to-purple-vertical-gradient); + margin-inline: 0.5rem; +} + +.pill-group { + display: flex; + flex-direction: column; + align-items: start; + flex-wrap: wrap; + gap: 1.25rem; +} + +.pill { + display: flex; + align-items: center; + --pill-accent: var(--bright-blue); + background: color-mix(in srgb, var(--pill-accent) 5%, transparent); + color: var(--pill-accent); + padding-inline: 0.75rem; + padding-block: 0.375rem; + border-radius: 2.75rem; + border: 0; + transition: background 0.3s ease; + font-family: var(--inter-font); + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: 1.4rem; + letter-spacing: -0.00875rem; + text-decoration: none; +} + +.pill:hover { + background: color-mix(in srgb, var(--pill-accent) 15%, transparent); +} + +.pill-group .pill:nth-child(6n + 1) { + --pill-accent: var(--bright-blue); +} +.pill-group .pill:nth-child(6n + 2) { + --pill-accent: var(--french-violet); +} +.pill-group .pill:nth-child(6n + 3), +.pill-group .pill:nth-child(6n + 4), +.pill-group .pill:nth-child(6n + 5) { + --pill-accent: var(--hot-red); +} + +.pill-group svg { + margin-inline-start: 0.25rem; +} + +.social-links { + display: flex; + align-items: center; + gap: 0.73rem; + margin-top: 1.5rem; +} + +.social-links path { + transition: fill 0.3s ease; + fill: var(--gray-400); +} + +.social-links a:hover svg path { + fill: var(--gray-900); +} +// +//.left-side{ +// width: 50%; +//} +.subject{ + display: block; + padding: 1rem; + border-left: 10px solid white; + &.active{ + border-left-color: #00b89c; + } +} + +.btn{ + cursor: pointer; + padding: 0.75rem 1.5rem; + border: solid 1px slategray; + border-radius: 0.5rem; +} +pre{ + padding: 0.5rem; + background: lightslategrey; +} +@media screen and (max-width: 650px) { + .content { + flex-direction: column; + width: max-content; + } + + .divider { + height: 1px; + width: 100%; + background: var(--red-to-pink-to-purple-horizontal-gradient); + margin-block: 1.5rem; + } +} diff --git a/ordre-du-jour/odj/src/app/app.component.ts b/ordre-du-jour/odj/src/app/app.component.ts index 18a66f08..82ae2843 100644 --- a/ordre-du-jour/odj/src/app/app.component.ts +++ b/ordre-du-jour/odj/src/app/app.component.ts @@ -1,19 +1,21 @@ import {Component, OnInit} from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterOutlet } from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {RouterOutlet} from '@angular/router'; import {FormsModule} from "@angular/forms"; -interface Subject{ + +interface Subject { title: string, // titre du sujet à aborder duration: number, // nombre de minutes du sujet author: string // auteur du sujet qui anime la discussion } + @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, FormsModule], templateUrl: './app.component.html', - styleUrl: './app.component.scss' + styleUrl: './app.component.scss', }) export class AppComponent implements OnInit { title = 'odj'; @@ -38,23 +40,33 @@ export class AppComponent implements OnInit { "\t - le nextcloud osm https://nextcloud.openstreetmap.fr\n" + "\t - les status des services en ligne https://stats.uptimerobot.com/mQX5Vi5YW2"; resteTopicMinutes: any = 10; + showDebug: boolean = false; - parseTheListOfTopicsInPasteLand(){ + parseTheListOfTopicsInPasteLand() { - let newTopics:any = [] + let newTopics: any = [] let topics: any = this.pasteLand.split('*') - topics.forEach((elem:string)=>{ + topics.forEach((elem: string) => { // console.log('topic', elem) - newTopics.push({ - title: elem, - duration: 15, - author: '' - }) + + let boom = elem.split('-') + if (boom[0]) { + newTopics.push({ + title: boom[0], + duration: 15, + author: '' + }) + } }) this.subjects = newTopics } - ngOnInit(){ + + ngOnInit() { this.parseTheListOfTopicsInPasteLand() } + + nextSubject() { + this.currentSubjectId++ + } }