aymeric.lacoste.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Aymeric Pompom Planning</title>
  6. <style>
  7. ::before,
  8. ::after {
  9. box-sizing: border-box;
  10. }
  11. :root {
  12. --color-primary-100: hsl(10, 59%, 25%);
  13. --color-primary-200: hsl(10, 59%, 45%);
  14. --color-primary-400: hsl(37, 100%, 45%);
  15. --color-primary-600: hsl(37, 100%, 65%);
  16. --color-primary-800: hsl(37, 100%, 85%);
  17. --color-accent-100: hsl(179, 52%, 15%);
  18. --color-accent-200: hsl(179, 52%, 25%);
  19. --color-accent-400: hsl(172, 58%, 40%);
  20. --color-accent-500: hsl(172, 58%, 53%);
  21. --color-accent-600: hsl(172, 58%, 66%);
  22. --color-accent-700: hsl(172, 60%, 70%);
  23. --color-accent-800: hsl(172, 60%, 80%);
  24. --color-accent-850: hsl(172, 70%, 90%);
  25. --color-accent-900: hsl(172, 85%, 95%);
  26. --color-accent-950: hsl(172, 96%, 98%);
  27. --color-neutral-100: hsl(37, 5%, 15%);
  28. --color-neutral-200: hsl(37, 5%, 25%);
  29. --color-neutral-300: hsl(37, 5%, 35%);
  30. --color-neutral-400: hsl(37, 5%, 45%);
  31. --color-neutral-600: hsl(37, 5%, 60%);
  32. --color-neutral-800: hsl(37, 5%, 80%);
  33. }
  34. .icon {
  35. font-family: "Material Icons";
  36. font-weight: normal;
  37. font-style: normal;
  38. font-size: 24px;
  39. line-height: 1;
  40. width: 24px;
  41. height: 24px;
  42. letter-spacing: normal;
  43. text-transform: none;
  44. display: inline-block;
  45. white-space: nowrap;
  46. word-wrap: normal;
  47. direction: ltr;
  48. font-feature-settings: "liga";
  49. -moz-font-feature-settings: "liga";
  50. -moz-osx-font-smoothing: grayscale;
  51. }
  52. .icon.person {
  53. background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%2012c2.21%200%204-1.79%204-4s-1.79-4-4-4-4%201.79-4%204%201.79%204%204%204zm0%202c-2.67%200-8%201.34-8%204v2h16v-2c0-2.66-5.33-4-8-4z%22%2F%3E%3C%2Fsvg%3E");
  54. background-repeat: no-repeat;
  55. }
  56. .benevole {
  57. vertical-align: middle;
  58. display: inline-block;
  59. }
  60. .benevole .icon {
  61. vertical-align: bottom;
  62. }
  63. .planning-container {
  64. max-width: 800px;
  65. width: 100%;
  66. }
  67. .daily-agenda {
  68. border: solid 1px var(--color-neutral-200);
  69. }
  70. .day-header {
  71. background: var(--color-neutral-200);
  72. color: var(--color-accent-800);
  73. padding: 12px;
  74. font-size: 1.8rem;
  75. font-weight: bold;
  76. text-transform: capitalize;
  77. }
  78. .agenda-creneau-header {
  79. padding: 12px;
  80. background: var(--color-accent-850);
  81. position: relative;
  82. border-bottom: 1px solid var(--color-accent-600);
  83. }
  84. .agenda-creneau-time {
  85. padding-right: 8px;
  86. }
  87. .agenda-creneau-title {
  88. font-weight: bold;
  89. text-transform: capitalize;
  90. }
  91. .agenda-creneau-action {
  92. position: absolute;
  93. top: 8px;
  94. right: 12px;
  95. background: transparent;
  96. outline: 0;
  97. border: 0;
  98. cursor: pointer;
  99. }
  100. .agenda-creneau-action:hover {
  101. color: var(--color-neutral-400);
  102. }
  103. .transformation-container {
  104. height: auto;
  105. overflow: hidden;
  106. }
  107. .agenda-creneau-details {
  108. padding: 4px 12px;
  109. display: flex;
  110. flex-wrap: wrap;
  111. overflow: hidden;
  112. opacity: 1;
  113. transform-origin: 0px 0px;
  114. transition: height 0.3s ease-in-out;
  115. }
  116. .agenda-creneau-details--title {
  117. width: 100%;
  118. font-weight: 600;
  119. margin: 8px 0px;
  120. }
  121. .agenda-creneau-details--content {
  122. width: 100%;
  123. margin: 0px 0px 8px;
  124. }
  125. @media (min-width: 600px) {
  126. .name-header {
  127. text-align: center;
  128. }
  129. .planning-container {
  130. margin-left: auto;
  131. margin-right: auto;
  132. }
  133. .agenda-creneau-time {
  134. padding-right: 2rem;
  135. }
  136. .agenda-creneau-details--title {
  137. width: 16.6%;
  138. margin-bottom: 12px;
  139. }
  140. .agenda-creneau-details--content {
  141. width: calc(33.3% - 8px);
  142. padding-right: 8px;
  143. margin: 8px 0px 16px;
  144. }
  145. }
  146. .agenda-creneau-details--content .chip {
  147. margin: 2px;
  148. }
  149. .hide {
  150. display: none;
  151. }
  152. #links {
  153. list-style-type: none;
  154. max-width: 200px;
  155. margin: 0 auto;
  156. border-top: 1px solid var(--color-neutral-400);
  157. padding: 0;
  158. }
  159. .link-item {
  160. padding: 8px 12px;
  161. margin: 0 auto;
  162. border: solid 1px var(--color-neutral-400);
  163. border-top: 0px;
  164. }
  165. .link-item a {
  166. display: block;
  167. }
  168. .formcontrol {
  169. all: initial;
  170. display: block;
  171. box-sizing: border-box;
  172. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  173. }
  174. .formcontrol.home-search {
  175. margin: 3rem auto 1rem;
  176. max-width: 400px;
  177. }
  178. .formcontrol:not(:last-child) {
  179. margin-bottom: 1rem;
  180. }
  181. .formcontrol-control {
  182. width: 100%;
  183. }
  184. .formcontrol-label {
  185. color: var(--color-neutral-200);
  186. display: -webkit-box;
  187. display: flex;
  188. font-size: 0.9rem;
  189. font-family: inherit;
  190. font-weight: 500;
  191. line-height: 1.5rem;
  192. margin-bottom: 0.2rem;
  193. }
  194. .formcontrol-label > button {
  195. margin-left: 0.25rem;
  196. }
  197. .formcontrol-optional {
  198. -webkit-box-flex: 1;
  199. flex: 1;
  200. color: #647592;
  201. font-size: 0.75rem;
  202. margin-top: 0.25rem;
  203. text-align: right;
  204. line-height: 1.125rem;
  205. margin-left: 0.25rem;
  206. }
  207. .formcontrol-help {
  208. color: #647592;
  209. display: -webkit-box;
  210. display: flex;
  211. font-size: 0.75rem;
  212. margin-top: 0.5rem;
  213. font-family: inherit;
  214. line-height: 1.125rem;
  215. }
  216. .formcontrol-helplink {
  217. -webkit-box-flex: 1;
  218. flex: 1;
  219. margin-top: calc(-0.25rem);
  220. text-align: right;
  221. }
  222. .formcontrol--error .formcontrol-help {
  223. color: #e4002b;
  224. }
  225. .formcontrol--success .formcontrol-help {
  226. color: #08875b;
  227. }
  228. .input {
  229. all: initial;
  230. color: var(--color-neutral-100);
  231. width: 100%;
  232. border: none;
  233. height: 2rem;
  234. margin: 0;
  235. outline: 0;
  236. padding: 0.2rem 0.5rem;
  237. font-size: 0.875rem;
  238. -webkit-appearance: none;
  239. -moz-appearance: none;
  240. appearance: none;
  241. box-shadow: 0 -1px 0 0 var(--color-accent-700) inset;
  242. box-sizing: border-box;
  243. -webkit-transition: 0.1s ease-in-out;
  244. transition: 0.1s ease-in-out;
  245. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  246. line-height: 1.25rem;
  247. background-color: var(--color-accent-950);
  248. -webkit-transition-property: box-shadow, border;
  249. transition-property: box-shadow, border;
  250. }
  251. .input::-webkit-input-placeholder {
  252. color: #505d74;
  253. }
  254. .input:-ms-input-placeholder {
  255. color: #505d74;
  256. }
  257. .input::-ms-input-placeholder {
  258. color: #505d74;
  259. }
  260. .input::placeholder {
  261. color: #505d74;
  262. }
  263. .input:hover {
  264. background-color: var(--color-accent-850);
  265. }
  266. .input:focus {
  267. box-shadow: 0 0 0 2px var(--color-accent-700);
  268. border-color: transparent;
  269. background-color: var(--color-accent-950);
  270. }
  271. .input:disabled {
  272. color: #c1c7d3 !important;
  273. -webkit-user-select: none;
  274. -moz-user-select: none;
  275. -ms-user-select: none;
  276. user-select: none;
  277. border-color: transparent;
  278. pointer-events: none;
  279. }
  280. .input:disabled::-webkit-input-placeholder {
  281. color: #c1c7d3;
  282. }
  283. .input:disabled:-ms-input-placeholder {
  284. color: #c1c7d3;
  285. }
  286. .input:disabled::-ms-input-placeholder {
  287. color: #c1c7d3;
  288. }
  289. .input:disabled::placeholder {
  290. color: #c1c7d3;
  291. }
  292. .input--small {
  293. height: 2rem;
  294. font-size: 0.875rem;
  295. line-height: 1.125rem;
  296. padding-top: 0.25rem;
  297. padding-bottom: 0.25rem;
  298. }
  299. .input--adorned-start {
  300. padding-left: 2rem;
  301. }
  302. .input--adorned-end {
  303. padding-right: 2rem;
  304. }
  305. .input--valid {
  306. box-shadow: 0 -1px 0 0 #08875b inset !important;
  307. }
  308. .input--valid:focus {
  309. box-shadow: 0 0 0 2px #08875b !important;
  310. }
  311. .input--invalid {
  312. box-shadow: 0 -1px 0 0 #e93255 inset !important;
  313. }
  314. .input--invalid:focus {
  315. box-shadow: 0 0 0 2px #e93255 !important;
  316. }
  317. #search {
  318. background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%232ba191%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
  319. background-repeat: no-repeat;
  320. padding-left: 30px;
  321. background-position: 4px;
  322. }
  323. </style>
  324. </head>
  325. <body>
  326. <p>Bonjour Aymeric Pompom,</p>
  327. <p>
  328. tu trouveras ci dessous et ci joint le récapitulatif de tes créneaux pour Brass dans la
  329. Garonne.<br />
  330. </p>
  331. <p>À très vite,<br />La commission Bénévole</p>
  332. <div class="planning-container">
  333. <div class="daily-agenda">
  334. <div class="day-header">vendredi 09 septembre</div>
  335. <div>
  336. <div>
  337. <div class="agenda-creneau-header">
  338. <span class="agenda-creneau-time">19h00-20h00 </span>
  339. <span class="agenda-creneau-title">Gestion camion boisson</span>
  340. </div>
  341. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  342. <div class="agenda-creneau-details--content">Accueil camion froid attitré boissons, reception des fûts, remplissage du camion</div>
  343. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  344. <div class="agenda-creneau-details--content">
  345. <div class="benevole">
  346. <i class="icon person"></i>
  347. <span>Anne Croute : 06 33 02 77 18</span>
  348. </div>
  349. <div class="benevole">
  350. <i class="icon person"></i>
  351. <span>Elodie : 06 72 31 32 91</span>
  352. </div>
  353. <div class="benevole">
  354. <i class="icon person"></i>
  355. <span>Jonas : 06 69 74 79 04</span>
  356. </div>
  357. <div class="benevole">
  358. <i class="icon person"></i>
  359. <span>Silvia : 06 98 09 84 36</span>
  360. </div>
  361. <div class="benevole">
  362. <i class="icon person"></i>
  363. <span>Stefan : 06 66 33 03 09</span>
  364. </div>
  365. </div>
  366. <div class="agenda-creneau-details--title">Le responsable</div>
  367. <div class="agenda-creneau-details--content">
  368. <div class="benevole">
  369. <i class="icon person"></i>
  370. <span>Stef : 06 66 33 03 09
  371. Jonas : 06 69 74 79 04</span>
  372. </div>
  373. </div>
  374. </div>
  375. </div>
  376. <div>
  377. <div class="agenda-creneau-header">
  378. <span class="agenda-creneau-time">21h00-21h30 </span>
  379. <span class="agenda-creneau-title">Laver les chiottes ! </span>
  380. </div>
  381. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  382. <div class="agenda-creneau-details--content">Laver les toilettes (cuvette / serpillère si besoin), les vasques. Vider les poubelles et remettre du PQ si besoin
  383. </div>
  384. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  385. <div class="agenda-creneau-details--content">
  386. <div class="benevole">
  387. <i class="icon person"></i>
  388. <span>Sophie : 06 16 48 88 23</span>
  389. </div>
  390. </div>
  391. <div class="agenda-creneau-details--title">Le responsable</div>
  392. <div class="agenda-creneau-details--content">
  393. <div class="benevole">
  394. <i class="icon person"></i>
  395. <span>nan</span>
  396. </div>
  397. </div>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. <div class="daily-agenda">
  403. <div class="day-header">samedi 10 septembre</div>
  404. <div>
  405. <div>
  406. <div class="agenda-creneau-header">
  407. <span class="agenda-creneau-time">07h30-09h00 </span>
  408. <span class="agenda-creneau-title">Finir nettoyage Durante</span>
  409. </div>
  410. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  411. <div class="agenda-creneau-details--content">L&#39;équipe du soir a normalement tout rangé et commencé le gros du nettoyage. Repasser un coup de balai et de serpillère pour que tout soit propre pour le petit dej. Faire un tour au toilettes / cleaner et mettre du PQ.</div>
  412. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  413. <div class="agenda-creneau-details--content">
  414. <div class="benevole">
  415. <i class="icon person"></i>
  416. <span>Clovis : 06 68 79 86 73</span>
  417. </div>
  418. <div class="benevole">
  419. <i class="icon person"></i>
  420. <span>Laureen : 07 78 10 47 37</span>
  421. </div>
  422. </div>
  423. <div class="agenda-creneau-details--title">Le responsable</div>
  424. <div class="agenda-creneau-details--content">
  425. <div class="benevole">
  426. <i class="icon person"></i>
  427. <span>Sylvain : 06 72 29 46 90</span>
  428. </div>
  429. </div>
  430. </div>
  431. </div>
  432. <div>
  433. <div class="agenda-creneau-header">
  434. <span class="agenda-creneau-time">23h30-00h00 </span>
  435. <span class="agenda-creneau-title">Démontage barnum</span>
  436. </div>
  437. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  438. <div class="agenda-creneau-details--content">démonter le barnum</div>
  439. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  440. <div class="agenda-creneau-details--content">
  441. <div class="benevole">
  442. <i class="icon person"></i>
  443. <span>Alexis Méca : 06 74 57 10 12</span>
  444. </div>
  445. <div class="benevole">
  446. <i class="icon person"></i>
  447. <span>Anne Croute : 06 33 02 77 18</span>
  448. </div>
  449. <div class="benevole">
  450. <i class="icon person"></i>
  451. <span>Armand TB : 06 46 24 64 37</span>
  452. </div>
  453. <div class="benevole">
  454. <i class="icon person"></i>
  455. <span>Armel : 06 35 56 46 52</span>
  456. </div>
  457. <div class="benevole">
  458. <i class="icon person"></i>
  459. <span>Fred : 07 85 46 09 59</span>
  460. </div>
  461. <div class="benevole">
  462. <i class="icon person"></i>
  463. <span>Nicolas : 06 88 18 89 44</span>
  464. </div>
  465. <div class="benevole">
  466. <i class="icon person"></i>
  467. <span>Nils : 06 35 38 72 26</span>
  468. </div>
  469. </div>
  470. <div class="agenda-creneau-details--title">Le responsable</div>
  471. <div class="agenda-creneau-details--content">
  472. <div class="benevole">
  473. <i class="icon person"></i>
  474. <span>Lorraine 06 71 35 76 12</span>
  475. </div>
  476. </div>
  477. </div>
  478. </div>
  479. </div>
  480. </div>
  481. <div class="daily-agenda">
  482. <div class="day-header">dimanche 11 septembre</div>
  483. <div>
  484. <div>
  485. <div class="agenda-creneau-header">
  486. <span class="agenda-creneau-time">10h30-11h00 </span>
  487. <span class="agenda-creneau-title">Mise en place du bar</span>
  488. </div>
  489. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  490. <div class="agenda-creneau-details--content">Installer la bar pour le public / formation bar pour aprem</div>
  491. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  492. <div class="agenda-creneau-details--content">
  493. <div class="benevole">
  494. <i class="icon person"></i>
  495. <span>Amélie : 06 60 15 27 60</span>
  496. </div>
  497. <div class="benevole">
  498. <i class="icon person"></i>
  499. <span>Edouard Méca : 06 98 39 23 73</span>
  500. </div>
  501. <div class="benevole">
  502. <i class="icon person"></i>
  503. <span>Elodie : 06 72 31 32 91</span>
  504. </div>
  505. <div class="benevole">
  506. <i class="icon person"></i>
  507. <span>Jonas : 06 69 74 79 04</span>
  508. </div>
  509. <div class="benevole">
  510. <i class="icon person"></i>
  511. <span>Mathilde : 07 71 14 41 46</span>
  512. </div>
  513. <div class="benevole">
  514. <i class="icon person"></i>
  515. <span>Stefan : 06 66 33 03 09</span>
  516. </div>
  517. </div>
  518. <div class="agenda-creneau-details--title">Le responsable</div>
  519. <div class="agenda-creneau-details--content">
  520. <div class="benevole">
  521. <i class="icon person"></i>
  522. <span>Stef : 06 66 33 03 09
  523. Jonas : 06 69 74 79 04</span>
  524. </div>
  525. </div>
  526. </div>
  527. </div>
  528. <div>
  529. <div class="agenda-creneau-header">
  530. <span class="agenda-creneau-time">12h30-14h30 </span>
  531. <span class="agenda-creneau-title">Bar</span>
  532. </div>
  533. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  534. <div class="agenda-creneau-details--content">Bah tu tiens un bar !</div>
  535. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  536. <div class="agenda-creneau-details--content">
  537. <div class="benevole">
  538. <i class="icon person"></i>
  539. <span>Jonas : 06 69 74 79 04</span>
  540. </div>
  541. <div class="benevole">
  542. <i class="icon person"></i>
  543. <span>Mathilde : 07 71 14 41 46</span>
  544. </div>
  545. </div>
  546. <div class="agenda-creneau-details--title">Le responsable</div>
  547. <div class="agenda-creneau-details--content">
  548. <div class="benevole">
  549. <i class="icon person"></i>
  550. <span>Stef : 06 66 33 03 09
  551. Jonas : 06 69 74 79 04</span>
  552. </div>
  553. </div>
  554. <div class="agenda-creneau-details--title">Ceux que tu remplaces</div>
  555. <div class="agenda-creneau-details--content">
  556. <div class="benevole">
  557. <i class="icon person"></i>
  558. <span>Edouard Méca : 06 98 39 23 73</span>
  559. </div>
  560. <div class="benevole">
  561. <i class="icon person"></i>
  562. <span>Elodie : 06 72 31 32 91</span>
  563. </div>
  564. </div>
  565. <div class="agenda-creneau-details--title">Les personnes qui arrivent après toi</div>
  566. <div class="agenda-creneau-details--content">
  567. <div class="benevole">
  568. <i class="icon person"></i>
  569. <span>Amélie : 06 60 15 27 60</span>
  570. </div>
  571. <div class="benevole">
  572. <i class="icon person"></i>
  573. <span>Stefan : 06 66 33 03 09</span>
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578. </div>
  579. </div>
  580. </div>
  581. </body>
  582. </html>