aymeric.lacoste.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Aymeric Pompom Planning</title>
  5. <style>
  6. ::before,
  7. ::after {
  8. box-sizing: border-box;
  9. }
  10. :root {
  11. --color-primary-100: hsl(10, 59%, 25%);
  12. --color-primary-200: hsl(10, 59%, 45%);
  13. --color-primary-400: hsl(37, 100%, 45%);
  14. --color-primary-600: hsl(37, 100%, 65%);
  15. --color-primary-800: hsl(37, 100%, 85%);
  16. --color-accent-100: hsl(179, 52%, 15%);
  17. --color-accent-200: hsl(179, 52%, 25%);
  18. --color-accent-400: hsl(172, 58%, 40%);
  19. --color-accent-500: hsl(172, 58%, 53%);
  20. --color-accent-600: hsl(172, 58%, 66%);
  21. --color-accent-700: hsl(172, 60%, 70%);
  22. --color-accent-800: hsl(172, 60%, 80%);
  23. --color-accent-850: hsl(172, 70%, 90%);
  24. --color-accent-900: hsl(172, 85%, 95%);
  25. --color-accent-950: hsl(172, 96%, 98%);
  26. --color-neutral-100: hsl(37, 5%, 15%);
  27. --color-neutral-200: hsl(37, 5%, 25%);
  28. --color-neutral-300: hsl(37, 5%, 35%);
  29. --color-neutral-400: hsl(37, 5%, 45%);
  30. --color-neutral-600: hsl(37, 5%, 60%);
  31. --color-neutral-800: hsl(37, 5%, 80%);
  32. }
  33. .icon {
  34. font-family: "Material Icons";
  35. font-weight: normal;
  36. font-style: normal;
  37. font-size: 24px;
  38. line-height: 1;
  39. letter-spacing: normal;
  40. text-transform: none;
  41. display: inline-block;
  42. white-space: nowrap;
  43. word-wrap: normal;
  44. direction: ltr;
  45. font-feature-settings: "liga";
  46. -moz-font-feature-settings: "liga";
  47. -moz-osx-font-smoothing: grayscale;
  48. }
  49. .benevole {
  50. vertical-align: middle;
  51. display: inline-block;
  52. }
  53. .benevole .icon {
  54. vertical-align: bottom;
  55. }
  56. .planning-container {
  57. max-width: 800px;
  58. width: 100%;
  59. }
  60. .daily-agenda {
  61. border: solid 1px var(--color-neutral-200);
  62. }
  63. .day-header {
  64. background: var(--color-neutral-200);
  65. color: var(--color-accent-800);
  66. padding: 12px;
  67. font-size: 1.8rem;
  68. font-weight: bold;
  69. text-transform: capitalize;
  70. }
  71. .agenda-creneau-header {
  72. padding: 12px;
  73. background: var(--color-accent-850);
  74. position: relative;
  75. border-bottom: 1px solid var(--color-accent-600);
  76. }
  77. .agenda-creneau-time {
  78. padding-right: 8px;
  79. }
  80. .agenda-creneau-title {
  81. font-weight: bold;
  82. text-transform: capitalize;
  83. }
  84. .agenda-creneau-action {
  85. position: absolute;
  86. top: 8px;
  87. right: 12px;
  88. background: transparent;
  89. outline: 0;
  90. border: 0;
  91. cursor: pointer;
  92. }
  93. .agenda-creneau-action:hover {
  94. color: var(--color-neutral-400);
  95. }
  96. .transformation-container {
  97. height: auto;
  98. overflow: hidden;
  99. }
  100. .agenda-creneau-details {
  101. padding: 4px 12px;
  102. display: flex;
  103. flex-wrap: wrap;
  104. overflow: hidden;
  105. opacity: 1;
  106. transform-origin: 0px 0px;
  107. transition: height 0.3s ease-in-out;
  108. }
  109. .agenda-creneau-details--title {
  110. width: 100%;
  111. font-weight: 600;
  112. margin: 8px 0px;
  113. }
  114. .agenda-creneau-details--content {
  115. width: 100%;
  116. margin: 0px 0px 8px;
  117. }
  118. @media (min-width: 600px) {
  119. .name-header {
  120. text-align: center;
  121. }
  122. .planning-container {
  123. margin-left: auto;
  124. margin-right: auto;
  125. }
  126. .agenda-creneau-time {
  127. padding-right: 2rem;
  128. }
  129. .agenda-creneau-details--title {
  130. width: 16.6%;
  131. margin-bottom: 12px;
  132. }
  133. .agenda-creneau-details--content {
  134. width: calc(33.3% - 8px);
  135. padding-right: 8px;
  136. margin: 8px 0px 16px;
  137. }
  138. }
  139. .agenda-creneau-details--content .chip {
  140. margin: 2px;
  141. }
  142. .hide {
  143. display: none;
  144. }
  145. #links {
  146. list-style-type: none;
  147. max-width: 200px;
  148. margin: 0 auto;
  149. border-top: 1px solid var(--color-neutral-400);
  150. padding: 0;
  151. }
  152. .link-item {
  153. padding: 8px 12px;
  154. margin: 0 auto;
  155. border: solid 1px var(--color-neutral-400);
  156. border-top: 0px;
  157. }
  158. .link-item a {
  159. display: block;
  160. }
  161. .formcontrol {
  162. all: initial;
  163. display: block;
  164. box-sizing: border-box;
  165. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  166. }
  167. .formcontrol.home-search {
  168. margin: 3rem auto 1rem;
  169. max-width: 400px;
  170. }
  171. .formcontrol:not(:last-child) {
  172. margin-bottom: 1rem;
  173. }
  174. .formcontrol-control {
  175. width: 100%;
  176. }
  177. .formcontrol-label {
  178. color: var(--color-neutral-200);
  179. display: -webkit-box;
  180. display: flex;
  181. font-size: 0.9rem;
  182. font-family: inherit;
  183. font-weight: 500;
  184. line-height: 1.5rem;
  185. margin-bottom: 0.2rem;
  186. }
  187. .formcontrol-label > button {
  188. margin-left: 0.25rem;
  189. }
  190. .formcontrol-optional {
  191. -webkit-box-flex: 1;
  192. flex: 1;
  193. color: #647592;
  194. font-size: 0.75rem;
  195. margin-top: 0.25rem;
  196. text-align: right;
  197. line-height: 1.125rem;
  198. margin-left: 0.25rem;
  199. }
  200. .formcontrol-help {
  201. color: #647592;
  202. display: -webkit-box;
  203. display: flex;
  204. font-size: 0.75rem;
  205. margin-top: 0.5rem;
  206. font-family: inherit;
  207. line-height: 1.125rem;
  208. }
  209. .formcontrol-helplink {
  210. -webkit-box-flex: 1;
  211. flex: 1;
  212. margin-top: calc(-0.25rem);
  213. text-align: right;
  214. }
  215. .formcontrol--error .formcontrol-help {
  216. color: #e4002b;
  217. }
  218. .formcontrol--success .formcontrol-help {
  219. color: #08875b;
  220. }
  221. .input {
  222. all: initial;
  223. color: var(--color-neutral-100);
  224. width: 100%;
  225. border: none;
  226. height: 2rem;
  227. margin: 0;
  228. outline: 0;
  229. padding: 0.2rem 0.5rem;
  230. font-size: 0.875rem;
  231. -webkit-appearance: none;
  232. -moz-appearance: none;
  233. appearance: none;
  234. box-shadow: 0 -1px 0 0 var(--color-accent-700) inset;
  235. box-sizing: border-box;
  236. -webkit-transition: 0.1s ease-in-out;
  237. transition: 0.1s ease-in-out;
  238. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  239. line-height: 1.25rem;
  240. background-color: var(--color-accent-950);
  241. -webkit-transition-property: box-shadow, border;
  242. transition-property: box-shadow, border;
  243. }
  244. .input::-webkit-input-placeholder {
  245. color: #505d74;
  246. }
  247. .input:-ms-input-placeholder {
  248. color: #505d74;
  249. }
  250. .input::-ms-input-placeholder {
  251. color: #505d74;
  252. }
  253. .input::placeholder {
  254. color: #505d74;
  255. }
  256. .input:hover {
  257. background-color: var(--color-accent-850);
  258. }
  259. .input:focus {
  260. box-shadow: 0 0 0 2px var(--color-accent-700);
  261. border-color: transparent;
  262. background-color: var(--color-accent-950);
  263. }
  264. .input:disabled {
  265. color: #c1c7d3 !important;
  266. -webkit-user-select: none;
  267. -moz-user-select: none;
  268. -ms-user-select: none;
  269. user-select: none;
  270. border-color: transparent;
  271. pointer-events: none;
  272. }
  273. .input:disabled::-webkit-input-placeholder {
  274. color: #c1c7d3;
  275. }
  276. .input:disabled:-ms-input-placeholder {
  277. color: #c1c7d3;
  278. }
  279. .input:disabled::-ms-input-placeholder {
  280. color: #c1c7d3;
  281. }
  282. .input:disabled::placeholder {
  283. color: #c1c7d3;
  284. }
  285. .input--small {
  286. height: 2rem;
  287. font-size: 0.875rem;
  288. line-height: 1.125rem;
  289. padding-top: 0.25rem;
  290. padding-bottom: 0.25rem;
  291. }
  292. .input--adorned-start {
  293. padding-left: 2rem;
  294. }
  295. .input--adorned-end {
  296. padding-right: 2rem;
  297. }
  298. .input--valid {
  299. box-shadow: 0 -1px 0 0 #08875b inset !important;
  300. }
  301. .input--valid:focus {
  302. box-shadow: 0 0 0 2px #08875b !important;
  303. }
  304. .input--invalid {
  305. box-shadow: 0 -1px 0 0 #e93255 inset !important;
  306. }
  307. .input--invalid:focus {
  308. box-shadow: 0 0 0 2px #e93255 !important;
  309. }
  310. #search {
  311. 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");
  312. background-repeat: no-repeat;
  313. padding-left: 30px;
  314. background-position: 4px;
  315. }
  316. </style>
  317. </head>
  318. <body>
  319. <h1 class="name-header">Aymeric Pompom</h1>
  320. <div class="planning-container">
  321. <div class="daily-agenda">
  322. <div class="day-header">vendredi 09 septembre</div>
  323. <div>
  324. <div>
  325. <div class="agenda-creneau-header">
  326. <span class="agenda-creneau-time">19h00-20h00 </span>
  327. <span class="agenda-creneau-title">Gestion camion boisson</span>
  328. </div>
  329. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  330. <div class="agenda-creneau-details--content">Accueil camion froid attitré boissons, reception des fûts, remplissage du camion</div>
  331. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  332. <div class="agenda-creneau-details--content">
  333. <div class="benevole">
  334. <svg
  335. class="icon"
  336. xmlns="http://www.w3.org/2000/svg"
  337. height="24px"
  338. viewBox="0 0 24 24"
  339. width="24px"
  340. fill="currentcolor"
  341. >
  342. <path d="M0 0h24v24H0z" fill="none" />
  343. <path
  344. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  345. />
  346. </svg>
  347. <span>Jonas : 06 69 74 79 04</span>
  348. </div>
  349. <div class="benevole">
  350. <svg
  351. class="icon"
  352. xmlns="http://www.w3.org/2000/svg"
  353. height="24px"
  354. viewBox="0 0 24 24"
  355. width="24px"
  356. fill="currentcolor"
  357. >
  358. <path d="M0 0h24v24H0z" fill="none" />
  359. <path
  360. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  361. />
  362. </svg>
  363. <span>Silvia : 06 98 09 84 36</span>
  364. </div>
  365. <div class="benevole">
  366. <svg
  367. class="icon"
  368. xmlns="http://www.w3.org/2000/svg"
  369. height="24px"
  370. viewBox="0 0 24 24"
  371. width="24px"
  372. fill="currentcolor"
  373. >
  374. <path d="M0 0h24v24H0z" fill="none" />
  375. <path
  376. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  377. />
  378. </svg>
  379. <span>Anne Croute : 06 33 02 77 18</span>
  380. </div>
  381. <div class="benevole">
  382. <svg
  383. class="icon"
  384. xmlns="http://www.w3.org/2000/svg"
  385. height="24px"
  386. viewBox="0 0 24 24"
  387. width="24px"
  388. fill="currentcolor"
  389. >
  390. <path d="M0 0h24v24H0z" fill="none" />
  391. <path
  392. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  393. />
  394. </svg>
  395. <span>Elodie : 06 72 31 32 91</span>
  396. </div>
  397. <div class="benevole">
  398. <svg
  399. class="icon"
  400. xmlns="http://www.w3.org/2000/svg"
  401. height="24px"
  402. viewBox="0 0 24 24"
  403. width="24px"
  404. fill="currentcolor"
  405. >
  406. <path d="M0 0h24v24H0z" fill="none" />
  407. <path
  408. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  409. />
  410. </svg>
  411. <span>Stefan : 06 66 33 03 09</span>
  412. </div>
  413. </div>
  414. <div class="agenda-creneau-details--title">Le responsable</div>
  415. <div class="agenda-creneau-details--content">
  416. <div class="benevole">
  417. <svg
  418. class="icon"
  419. xmlns="http://www.w3.org/2000/svg"
  420. height="24px"
  421. viewBox="0 0 24 24"
  422. width="24px"
  423. fill="currentcolor"
  424. >
  425. <path d="M0 0h24v24H0z" fill="none" />
  426. <path
  427. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  428. />
  429. </svg>
  430. <span>Stef : 06 66 33 03 09
  431. Jonas : 06 69 74 79 04</span>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. <div>
  437. <div class="agenda-creneau-header">
  438. <span class="agenda-creneau-time">21h00-21h30 </span>
  439. <span class="agenda-creneau-title">Laver les chiottes ! </span>
  440. </div>
  441. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  442. <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
  443. </div>
  444. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  445. <div class="agenda-creneau-details--content">
  446. <div class="benevole">
  447. <svg
  448. class="icon"
  449. xmlns="http://www.w3.org/2000/svg"
  450. height="24px"
  451. viewBox="0 0 24 24"
  452. width="24px"
  453. fill="currentcolor"
  454. >
  455. <path d="M0 0h24v24H0z" fill="none" />
  456. <path
  457. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  458. />
  459. </svg>
  460. <span>Sophie : 06 16 48 88 23</span>
  461. </div>
  462. </div>
  463. <div class="agenda-creneau-details--title">Le responsable</div>
  464. <div class="agenda-creneau-details--content">
  465. <div class="benevole">
  466. <svg
  467. class="icon"
  468. xmlns="http://www.w3.org/2000/svg"
  469. height="24px"
  470. viewBox="0 0 24 24"
  471. width="24px"
  472. fill="currentcolor"
  473. >
  474. <path d="M0 0h24v24H0z" fill="none" />
  475. <path
  476. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  477. />
  478. </svg>
  479. <span>nan</span>
  480. </div>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. <div class="daily-agenda">
  487. <div class="day-header">samedi 10 septembre</div>
  488. <div>
  489. <div>
  490. <div class="agenda-creneau-header">
  491. <span class="agenda-creneau-time">07h30-09h00 </span>
  492. <span class="agenda-creneau-title">Finir nettoyage Durante</span>
  493. </div>
  494. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  495. <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>
  496. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  497. <div class="agenda-creneau-details--content">
  498. <div class="benevole">
  499. <svg
  500. class="icon"
  501. xmlns="http://www.w3.org/2000/svg"
  502. height="24px"
  503. viewBox="0 0 24 24"
  504. width="24px"
  505. fill="currentcolor"
  506. >
  507. <path d="M0 0h24v24H0z" fill="none" />
  508. <path
  509. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  510. />
  511. </svg>
  512. <span>Laureen : 07 78 10 47 37</span>
  513. </div>
  514. <div class="benevole">
  515. <svg
  516. class="icon"
  517. xmlns="http://www.w3.org/2000/svg"
  518. height="24px"
  519. viewBox="0 0 24 24"
  520. width="24px"
  521. fill="currentcolor"
  522. >
  523. <path d="M0 0h24v24H0z" fill="none" />
  524. <path
  525. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  526. />
  527. </svg>
  528. <span>Clovis : 06 68 79 86 73</span>
  529. </div>
  530. </div>
  531. <div class="agenda-creneau-details--title">Le responsable</div>
  532. <div class="agenda-creneau-details--content">
  533. <div class="benevole">
  534. <svg
  535. class="icon"
  536. xmlns="http://www.w3.org/2000/svg"
  537. height="24px"
  538. viewBox="0 0 24 24"
  539. width="24px"
  540. fill="currentcolor"
  541. >
  542. <path d="M0 0h24v24H0z" fill="none" />
  543. <path
  544. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  545. />
  546. </svg>
  547. <span>Sylvain : 06 72 29 46 90</span>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. <div>
  553. <div class="agenda-creneau-header">
  554. <span class="agenda-creneau-time">00h30-02h00 </span>
  555. <span class="agenda-creneau-title">soupe à l&#39;oignon</span>
  556. </div>
  557. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  558. <div class="agenda-creneau-details--content">tout est indiqué dans le cahier de route de la commission repas</div>
  559. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  560. <div class="agenda-creneau-details--content">
  561. <div class="benevole">
  562. <svg
  563. class="icon"
  564. xmlns="http://www.w3.org/2000/svg"
  565. height="24px"
  566. viewBox="0 0 24 24"
  567. width="24px"
  568. fill="currentcolor"
  569. >
  570. <path d="M0 0h24v24H0z" fill="none" />
  571. <path
  572. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  573. />
  574. </svg>
  575. <span>Fabien : 06 79 15 25 84</span>
  576. </div>
  577. <div class="benevole">
  578. <svg
  579. class="icon"
  580. xmlns="http://www.w3.org/2000/svg"
  581. height="24px"
  582. viewBox="0 0 24 24"
  583. width="24px"
  584. fill="currentcolor"
  585. >
  586. <path d="M0 0h24v24H0z" fill="none" />
  587. <path
  588. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  589. />
  590. </svg>
  591. <span>Jérémie : 06 89 26 95 92</span>
  592. </div>
  593. <div class="benevole">
  594. <svg
  595. class="icon"
  596. xmlns="http://www.w3.org/2000/svg"
  597. height="24px"
  598. viewBox="0 0 24 24"
  599. width="24px"
  600. fill="currentcolor"
  601. >
  602. <path d="M0 0h24v24H0z" fill="none" />
  603. <path
  604. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  605. />
  606. </svg>
  607. <span>Nicole : 06 34 10 06 88</span>
  608. </div>
  609. </div>
  610. <div class="agenda-creneau-details--title">Le responsable</div>
  611. <div class="agenda-creneau-details--content">
  612. <div class="benevole">
  613. <svg
  614. class="icon"
  615. xmlns="http://www.w3.org/2000/svg"
  616. height="24px"
  617. viewBox="0 0 24 24"
  618. width="24px"
  619. fill="currentcolor"
  620. >
  621. <path d="M0 0h24v24H0z" fill="none" />
  622. <path
  623. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  624. />
  625. </svg>
  626. <span>Olivier : 06 82 50 92 85
  627. Alexis : 06 79 99 31 24</span>
  628. </div>
  629. </div>
  630. <div class="agenda-creneau-details--title">Les personnes qui arrivent après toi</div>
  631. <div class="agenda-creneau-details--content">
  632. <div class="benevole">
  633. <svg
  634. class="icon"
  635. xmlns="http://www.w3.org/2000/svg"
  636. height="24px"
  637. viewBox="0 0 24 24"
  638. width="24px"
  639. fill="currentcolor"
  640. >
  641. <path d="M0 0h24v24H0z" fill="none" />
  642. <path
  643. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  644. />
  645. </svg>
  646. <span>Matthias : 06 89 04 53 82</span>
  647. </div>
  648. <div class="benevole">
  649. <svg
  650. class="icon"
  651. xmlns="http://www.w3.org/2000/svg"
  652. height="24px"
  653. viewBox="0 0 24 24"
  654. width="24px"
  655. fill="currentcolor"
  656. >
  657. <path d="M0 0h24v24H0z" fill="none" />
  658. <path
  659. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  660. />
  661. </svg>
  662. <span>PierreQ : 06 70 43 76 31</span>
  663. </div>
  664. </div>
  665. </div>
  666. </div>
  667. </div>
  668. </div>
  669. <div class="daily-agenda">
  670. <div class="day-header">dimanche 11 septembre</div>
  671. <div>
  672. <div>
  673. <div class="agenda-creneau-header">
  674. <span class="agenda-creneau-time">10h30-11h00 </span>
  675. <span class="agenda-creneau-title">Mise en place du bar</span>
  676. </div>
  677. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  678. <div class="agenda-creneau-details--content">Installer la bar pour le public / formation bar pour aprem</div>
  679. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  680. <div class="agenda-creneau-details--content">
  681. <div class="benevole">
  682. <svg
  683. class="icon"
  684. xmlns="http://www.w3.org/2000/svg"
  685. height="24px"
  686. viewBox="0 0 24 24"
  687. width="24px"
  688. fill="currentcolor"
  689. >
  690. <path d="M0 0h24v24H0z" fill="none" />
  691. <path
  692. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  693. />
  694. </svg>
  695. <span>Jonas : 06 69 74 79 04</span>
  696. </div>
  697. <div class="benevole">
  698. <svg
  699. class="icon"
  700. xmlns="http://www.w3.org/2000/svg"
  701. height="24px"
  702. viewBox="0 0 24 24"
  703. width="24px"
  704. fill="currentcolor"
  705. >
  706. <path d="M0 0h24v24H0z" fill="none" />
  707. <path
  708. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  709. />
  710. </svg>
  711. <span>Elodie : 06 72 31 32 91</span>
  712. </div>
  713. <div class="benevole">
  714. <svg
  715. class="icon"
  716. xmlns="http://www.w3.org/2000/svg"
  717. height="24px"
  718. viewBox="0 0 24 24"
  719. width="24px"
  720. fill="currentcolor"
  721. >
  722. <path d="M0 0h24v24H0z" fill="none" />
  723. <path
  724. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  725. />
  726. </svg>
  727. <span>Amélie : 06 60 15 27 60</span>
  728. </div>
  729. <div class="benevole">
  730. <svg
  731. class="icon"
  732. xmlns="http://www.w3.org/2000/svg"
  733. height="24px"
  734. viewBox="0 0 24 24"
  735. width="24px"
  736. fill="currentcolor"
  737. >
  738. <path d="M0 0h24v24H0z" fill="none" />
  739. <path
  740. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  741. />
  742. </svg>
  743. <span>Edouard Méca : 06 98 39 23 73</span>
  744. </div>
  745. <div class="benevole">
  746. <svg
  747. class="icon"
  748. xmlns="http://www.w3.org/2000/svg"
  749. height="24px"
  750. viewBox="0 0 24 24"
  751. width="24px"
  752. fill="currentcolor"
  753. >
  754. <path d="M0 0h24v24H0z" fill="none" />
  755. <path
  756. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  757. />
  758. </svg>
  759. <span>Mathilde : 07 71 14 41 46</span>
  760. </div>
  761. <div class="benevole">
  762. <svg
  763. class="icon"
  764. xmlns="http://www.w3.org/2000/svg"
  765. height="24px"
  766. viewBox="0 0 24 24"
  767. width="24px"
  768. fill="currentcolor"
  769. >
  770. <path d="M0 0h24v24H0z" fill="none" />
  771. <path
  772. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  773. />
  774. </svg>
  775. <span>Stefan : 06 66 33 03 09</span>
  776. </div>
  777. </div>
  778. <div class="agenda-creneau-details--title">Le responsable</div>
  779. <div class="agenda-creneau-details--content">
  780. <div class="benevole">
  781. <svg
  782. class="icon"
  783. xmlns="http://www.w3.org/2000/svg"
  784. height="24px"
  785. viewBox="0 0 24 24"
  786. width="24px"
  787. fill="currentcolor"
  788. >
  789. <path d="M0 0h24v24H0z" fill="none" />
  790. <path
  791. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  792. />
  793. </svg>
  794. <span>Stef : 06 66 33 03 09
  795. Jonas : 06 69 74 79 04</span>
  796. </div>
  797. </div>
  798. </div>
  799. </div>
  800. <div>
  801. <div class="agenda-creneau-header">
  802. <span class="agenda-creneau-time">12h30-14h30 </span>
  803. <span class="agenda-creneau-title">Bar</span>
  804. </div>
  805. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  806. <div class="agenda-creneau-details--content">Bah tu tiens un bar !</div>
  807. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  808. <div class="agenda-creneau-details--content">
  809. <div class="benevole">
  810. <svg
  811. class="icon"
  812. xmlns="http://www.w3.org/2000/svg"
  813. height="24px"
  814. viewBox="0 0 24 24"
  815. width="24px"
  816. fill="currentcolor"
  817. >
  818. <path d="M0 0h24v24H0z" fill="none" />
  819. <path
  820. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  821. />
  822. </svg>
  823. <span>Jonas : 06 69 74 79 04</span>
  824. </div>
  825. <div class="benevole">
  826. <svg
  827. class="icon"
  828. xmlns="http://www.w3.org/2000/svg"
  829. height="24px"
  830. viewBox="0 0 24 24"
  831. width="24px"
  832. fill="currentcolor"
  833. >
  834. <path d="M0 0h24v24H0z" fill="none" />
  835. <path
  836. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  837. />
  838. </svg>
  839. <span>Mathilde : 07 71 14 41 46</span>
  840. </div>
  841. </div>
  842. <div class="agenda-creneau-details--title">Le responsable</div>
  843. <div class="agenda-creneau-details--content">
  844. <div class="benevole">
  845. <svg
  846. class="icon"
  847. xmlns="http://www.w3.org/2000/svg"
  848. height="24px"
  849. viewBox="0 0 24 24"
  850. width="24px"
  851. fill="currentcolor"
  852. >
  853. <path d="M0 0h24v24H0z" fill="none" />
  854. <path
  855. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  856. />
  857. </svg>
  858. <span>Stef : 06 66 33 03 09
  859. Jonas : 06 69 74 79 04</span>
  860. </div>
  861. </div>
  862. <div class="agenda-creneau-details--title">Ceux que tu remplaces</div>
  863. <div class="agenda-creneau-details--content">
  864. <div class="benevole">
  865. <svg
  866. class="icon"
  867. xmlns="http://www.w3.org/2000/svg"
  868. height="24px"
  869. viewBox="0 0 24 24"
  870. width="24px"
  871. fill="currentcolor"
  872. >
  873. <path d="M0 0h24v24H0z" fill="none" />
  874. <path
  875. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  876. />
  877. </svg>
  878. <span>Elodie : 06 72 31 32 91</span>
  879. </div>
  880. <div class="benevole">
  881. <svg
  882. class="icon"
  883. xmlns="http://www.w3.org/2000/svg"
  884. height="24px"
  885. viewBox="0 0 24 24"
  886. width="24px"
  887. fill="currentcolor"
  888. >
  889. <path d="M0 0h24v24H0z" fill="none" />
  890. <path
  891. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  892. />
  893. </svg>
  894. <span>Edouard Méca : 06 98 39 23 73</span>
  895. </div>
  896. </div>
  897. <div class="agenda-creneau-details--title">Les personnes qui arrivent après toi</div>
  898. <div class="agenda-creneau-details--content">
  899. <div class="benevole">
  900. <svg
  901. class="icon"
  902. xmlns="http://www.w3.org/2000/svg"
  903. height="24px"
  904. viewBox="0 0 24 24"
  905. width="24px"
  906. fill="currentcolor"
  907. >
  908. <path d="M0 0h24v24H0z" fill="none" />
  909. <path
  910. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  911. />
  912. </svg>
  913. <span>Amélie : 06 60 15 27 60</span>
  914. </div>
  915. <div class="benevole">
  916. <svg
  917. class="icon"
  918. xmlns="http://www.w3.org/2000/svg"
  919. height="24px"
  920. viewBox="0 0 24 24"
  921. width="24px"
  922. fill="currentcolor"
  923. >
  924. <path d="M0 0h24v24H0z" fill="none" />
  925. <path
  926. d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  927. />
  928. </svg>
  929. <span>Stefan : 06 66 33 03 09</span>
  930. </div>
  931. </div>
  932. </div>
  933. </div>
  934. </div>
  935. </div>
  936. </div>
  937. </body>
  938. </html>