lperbet.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Lucas 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. <p>Bonjour Lucas,</p>
  320. <p>
  321. tu trouveras ci dessous et ci joint le récapitulatif de tes créneaux pour BDLG.<br />
  322. Blabla à faire valider à la com bénévole.
  323. </p>
  324. <p>Cordialement,<br />La commission Bénévole</p>
  325. <div class="planning-container">
  326. <div class="daily-agenda">
  327. <div class="day-header">vendredi 09 septembre</div>
  328. <div>
  329. <div>
  330. <div class="agenda-creneau-header">
  331. <span class="agenda-creneau-time">20h00-22h00 </span>
  332. <span class="agenda-creneau-title">Réchauffer la viande au BBQ</span>
  333. </div>
  334. <div class="agenda-creneau-details">
  335. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  336. <div class="agenda-creneau-details--content">
  337. <div class="benevole">
  338. <svg
  339. class="icon"
  340. xmlns="http://www.w3.org/2000/svg"
  341. height="24px"
  342. viewBox="0 0 24 24"
  343. width="24px"
  344. fill="currentcolor"
  345. >
  346. <path d="M0 0h24v24H0z" fill="none" />
  347. <path
  348. 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"
  349. />
  350. </svg>
  351. <span>Fabien : 06 79 15 25 84</span>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. </div>
  358. <div class="daily-agenda">
  359. <div class="day-header">samedi 10 septembre</div>
  360. <div>
  361. <div>
  362. <div class="agenda-creneau-header">
  363. <span class="agenda-creneau-time">13h00-15h00 </span>
  364. <span class="agenda-creneau-title">Installation du jardin des plantes </span>
  365. </div>
  366. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  367. <div class="agenda-creneau-details--content">Installation du catering (barrières / tables / chaises / autowash)
  368. Installation du bar (barnum / tireuses / logistique).
  369. installation signalétique
  370. </div>
  371. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  372. <div class="agenda-creneau-details--content">
  373. <div class="benevole">
  374. <svg
  375. class="icon"
  376. xmlns="http://www.w3.org/2000/svg"
  377. height="24px"
  378. viewBox="0 0 24 24"
  379. width="24px"
  380. fill="currentcolor"
  381. >
  382. <path d="M0 0h24v24H0z" fill="none" />
  383. <path
  384. 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"
  385. />
  386. </svg>
  387. <span>Alexis Méca : 06 74 57 10 12</span>
  388. </div>
  389. <div class="benevole">
  390. <svg
  391. class="icon"
  392. xmlns="http://www.w3.org/2000/svg"
  393. height="24px"
  394. viewBox="0 0 24 24"
  395. width="24px"
  396. fill="currentcolor"
  397. >
  398. <path d="M0 0h24v24H0z" fill="none" />
  399. <path
  400. 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"
  401. />
  402. </svg>
  403. <span>Cyril : 06 73 51 44 99</span>
  404. </div>
  405. <div class="benevole">
  406. <svg
  407. class="icon"
  408. xmlns="http://www.w3.org/2000/svg"
  409. height="24px"
  410. viewBox="0 0 24 24"
  411. width="24px"
  412. fill="currentcolor"
  413. >
  414. <path d="M0 0h24v24H0z" fill="none" />
  415. <path
  416. 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"
  417. />
  418. </svg>
  419. <span>Hélène B : 06 85 17 16 15</span>
  420. </div>
  421. <div class="benevole">
  422. <svg
  423. class="icon"
  424. xmlns="http://www.w3.org/2000/svg"
  425. height="24px"
  426. viewBox="0 0 24 24"
  427. width="24px"
  428. fill="currentcolor"
  429. >
  430. <path d="M0 0h24v24H0z" fill="none" />
  431. <path
  432. 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"
  433. />
  434. </svg>
  435. <span>Isabel : 06 95 04 77 60</span>
  436. </div>
  437. <div class="benevole">
  438. <svg
  439. class="icon"
  440. xmlns="http://www.w3.org/2000/svg"
  441. height="24px"
  442. viewBox="0 0 24 24"
  443. width="24px"
  444. fill="currentcolor"
  445. >
  446. <path d="M0 0h24v24H0z" fill="none" />
  447. <path
  448. 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"
  449. />
  450. </svg>
  451. <span>Katharina „Tshik Tshik“ : 49176 43 49 76 81</span>
  452. </div>
  453. <div class="benevole">
  454. <svg
  455. class="icon"
  456. xmlns="http://www.w3.org/2000/svg"
  457. height="24px"
  458. viewBox="0 0 24 24"
  459. width="24px"
  460. fill="currentcolor"
  461. >
  462. <path d="M0 0h24v24H0z" fill="none" />
  463. <path
  464. 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"
  465. />
  466. </svg>
  467. <span>Paul-Erwan : 07 87 76 64 76</span>
  468. </div>
  469. <div class="benevole">
  470. <svg
  471. class="icon"
  472. xmlns="http://www.w3.org/2000/svg"
  473. height="24px"
  474. viewBox="0 0 24 24"
  475. width="24px"
  476. fill="currentcolor"
  477. >
  478. <path d="M0 0h24v24H0z" fill="none" />
  479. <path
  480. 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"
  481. />
  482. </svg>
  483. <span>Simon : 06 35 10 27 15</span>
  484. </div>
  485. <div class="benevole">
  486. <svg
  487. class="icon"
  488. xmlns="http://www.w3.org/2000/svg"
  489. height="24px"
  490. viewBox="0 0 24 24"
  491. width="24px"
  492. fill="currentcolor"
  493. >
  494. <path d="M0 0h24v24H0z" fill="none" />
  495. <path
  496. 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"
  497. />
  498. </svg>
  499. <span>Stephane : 06 11 89 31 83</span>
  500. </div>
  501. </div>
  502. <div class="agenda-creneau-details--title">Le responsable</div>
  503. <div class="agenda-creneau-details--content">
  504. <div class="benevole">
  505. <svg
  506. class="icon"
  507. xmlns="http://www.w3.org/2000/svg"
  508. height="24px"
  509. viewBox="0 0 24 24"
  510. width="24px"
  511. fill="currentcolor"
  512. >
  513. <path d="M0 0h24v24H0z" fill="none" />
  514. <path
  515. 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"
  516. />
  517. </svg>
  518. <span>Lieu : Marine 06 32 99 84 98
  519. Bar : Stef 06 66 33 03 09
  520. Logistique : Lorraine 06 71 35 76 12
  521. </span>
  522. </div>
  523. </div>
  524. </div>
  525. </div>
  526. <div>
  527. <div class="agenda-creneau-header">
  528. <span class="agenda-creneau-time">23h30-00h00 </span>
  529. <span class="agenda-creneau-title">Démontage barnum</span>
  530. </div>
  531. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  532. <div class="agenda-creneau-details--content">démonter le barnum</div>
  533. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  534. <div class="agenda-creneau-details--content">
  535. <div class="benevole">
  536. <svg
  537. class="icon"
  538. xmlns="http://www.w3.org/2000/svg"
  539. height="24px"
  540. viewBox="0 0 24 24"
  541. width="24px"
  542. fill="currentcolor"
  543. >
  544. <path d="M0 0h24v24H0z" fill="none" />
  545. <path
  546. 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"
  547. />
  548. </svg>
  549. <span>Anne Croute : 06 33 02 77 18</span>
  550. </div>
  551. <div class="benevole">
  552. <svg
  553. class="icon"
  554. xmlns="http://www.w3.org/2000/svg"
  555. height="24px"
  556. viewBox="0 0 24 24"
  557. width="24px"
  558. fill="currentcolor"
  559. >
  560. <path d="M0 0h24v24H0z" fill="none" />
  561. <path
  562. 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"
  563. />
  564. </svg>
  565. <span>Nathan : 06 03 95 63 75</span>
  566. </div>
  567. <div class="benevole">
  568. <svg
  569. class="icon"
  570. xmlns="http://www.w3.org/2000/svg"
  571. height="24px"
  572. viewBox="0 0 24 24"
  573. width="24px"
  574. fill="currentcolor"
  575. >
  576. <path d="M0 0h24v24H0z" fill="none" />
  577. <path
  578. 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"
  579. />
  580. </svg>
  581. <span>Fred : 07 85 46 09 59</span>
  582. </div>
  583. <div class="benevole">
  584. <svg
  585. class="icon"
  586. xmlns="http://www.w3.org/2000/svg"
  587. height="24px"
  588. viewBox="0 0 24 24"
  589. width="24px"
  590. fill="currentcolor"
  591. >
  592. <path d="M0 0h24v24H0z" fill="none" />
  593. <path
  594. 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"
  595. />
  596. </svg>
  597. <span>Alexis Méca : 06 74 57 10 12</span>
  598. </div>
  599. <div class="benevole">
  600. <svg
  601. class="icon"
  602. xmlns="http://www.w3.org/2000/svg"
  603. height="24px"
  604. viewBox="0 0 24 24"
  605. width="24px"
  606. fill="currentcolor"
  607. >
  608. <path d="M0 0h24v24H0z" fill="none" />
  609. <path
  610. 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"
  611. />
  612. </svg>
  613. <span>Armel : 06 35 56 46 52</span>
  614. </div>
  615. <div class="benevole">
  616. <svg
  617. class="icon"
  618. xmlns="http://www.w3.org/2000/svg"
  619. height="24px"
  620. viewBox="0 0 24 24"
  621. width="24px"
  622. fill="currentcolor"
  623. >
  624. <path d="M0 0h24v24H0z" fill="none" />
  625. <path
  626. 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"
  627. />
  628. </svg>
  629. <span>Nicolas : 06 88 18 89 44</span>
  630. </div>
  631. <div class="benevole">
  632. <svg
  633. class="icon"
  634. xmlns="http://www.w3.org/2000/svg"
  635. height="24px"
  636. viewBox="0 0 24 24"
  637. width="24px"
  638. fill="currentcolor"
  639. >
  640. <path d="M0 0h24v24H0z" fill="none" />
  641. <path
  642. 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"
  643. />
  644. </svg>
  645. <span>Nils : 06 35 38 72 26</span>
  646. </div>
  647. </div>
  648. <div class="agenda-creneau-details--title">Le responsable</div>
  649. <div class="agenda-creneau-details--content">
  650. <div class="benevole">
  651. <svg
  652. class="icon"
  653. xmlns="http://www.w3.org/2000/svg"
  654. height="24px"
  655. viewBox="0 0 24 24"
  656. width="24px"
  657. fill="currentcolor"
  658. >
  659. <path d="M0 0h24v24H0z" fill="none" />
  660. <path
  661. 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"
  662. />
  663. </svg>
  664. <span>Lorraine 06 71 35 76 12</span>
  665. </div>
  666. </div>
  667. </div>
  668. </div>
  669. <div>
  670. <div class="agenda-creneau-header">
  671. <span class="agenda-creneau-time">00h00-00h30 </span>
  672. <span class="agenda-creneau-title">créneau propreté / chiottes + poubelles</span>
  673. </div>
  674. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  675. <div class="agenda-creneau-details--content">Laver les toilettes (cuvettes) / remettre du PQ, savon, etc. Que t&#39;ai toi-même envie d&#39;y aller après.
  676. Faire le tour des poubelles pour vérfier état (changer sac) et vérifier le tri</div>
  677. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  678. <div class="agenda-creneau-details--content">
  679. <div class="benevole">
  680. <svg
  681. class="icon"
  682. xmlns="http://www.w3.org/2000/svg"
  683. height="24px"
  684. viewBox="0 0 24 24"
  685. width="24px"
  686. fill="currentcolor"
  687. >
  688. <path d="M0 0h24v24H0z" fill="none" />
  689. <path
  690. 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"
  691. />
  692. </svg>
  693. <span>Alicia : 07 50 87 91 54</span>
  694. </div>
  695. </div>
  696. <div class="agenda-creneau-details--title">Le responsable</div>
  697. <div class="agenda-creneau-details--content">
  698. <div class="benevole">
  699. <svg
  700. class="icon"
  701. xmlns="http://www.w3.org/2000/svg"
  702. height="24px"
  703. viewBox="0 0 24 24"
  704. width="24px"
  705. fill="currentcolor"
  706. >
  707. <path d="M0 0h24v24H0z" fill="none" />
  708. <path
  709. 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"
  710. />
  711. </svg>
  712. <span>Marine : 06 32 99 84 98
  713. Louise :
  714. Poubelle : Alexis : 06 79 99 31 24</span>
  715. </div>
  716. </div>
  717. </div>
  718. </div>
  719. </div>
  720. </div>
  721. <div class="daily-agenda">
  722. <div class="day-header">dimanche 11 septembre</div>
  723. <div>
  724. <div>
  725. <div class="agenda-creneau-header">
  726. <span class="agenda-creneau-time">08h00-09h00 </span>
  727. <span class="agenda-creneau-title">Finir nettoyage Durante</span>
  728. </div>
  729. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  730. <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>
  731. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  732. <div class="agenda-creneau-details--content">
  733. <div class="benevole">
  734. <svg
  735. class="icon"
  736. xmlns="http://www.w3.org/2000/svg"
  737. height="24px"
  738. viewBox="0 0 24 24"
  739. width="24px"
  740. fill="currentcolor"
  741. >
  742. <path d="M0 0h24v24H0z" fill="none" />
  743. <path
  744. 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"
  745. />
  746. </svg>
  747. <span>Olga : 06 49 44 08 43</span>
  748. </div>
  749. </div>
  750. <div class="agenda-creneau-details--title">Le responsable</div>
  751. <div class="agenda-creneau-details--content">
  752. <div class="benevole">
  753. <svg
  754. class="icon"
  755. xmlns="http://www.w3.org/2000/svg"
  756. height="24px"
  757. viewBox="0 0 24 24"
  758. width="24px"
  759. fill="currentcolor"
  760. >
  761. <path d="M0 0h24v24H0z" fill="none" />
  762. <path
  763. 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"
  764. />
  765. </svg>
  766. <span>Sylvain : 06 72 29 46 90</span>
  767. </div>
  768. </div>
  769. </div>
  770. </div>
  771. <div>
  772. <div class="agenda-creneau-header">
  773. <span class="agenda-creneau-time">09h00-11h00 </span>
  774. <span class="agenda-creneau-title">Install / prépa public</span>
  775. </div>
  776. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  777. <div class="agenda-creneau-details--content">Mettre en place pour arrivée du public : signalétique / tables / chaises, etc. </div>
  778. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</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>Silvia : 06 98 09 84 36</span>
  795. </div>
  796. <div class="benevole">
  797. <svg
  798. class="icon"
  799. xmlns="http://www.w3.org/2000/svg"
  800. height="24px"
  801. viewBox="0 0 24 24"
  802. width="24px"
  803. fill="currentcolor"
  804. >
  805. <path d="M0 0h24v24H0z" fill="none" />
  806. <path
  807. 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"
  808. />
  809. </svg>
  810. <span>Fred : 07 85 46 09 59</span>
  811. </div>
  812. <div class="benevole">
  813. <svg
  814. class="icon"
  815. xmlns="http://www.w3.org/2000/svg"
  816. height="24px"
  817. viewBox="0 0 24 24"
  818. width="24px"
  819. fill="currentcolor"
  820. >
  821. <path d="M0 0h24v24H0z" fill="none" />
  822. <path
  823. 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"
  824. />
  825. </svg>
  826. <span>Katharina „Tshik Tshik“ : 49176 43 49 76 81</span>
  827. </div>
  828. <div class="benevole">
  829. <svg
  830. class="icon"
  831. xmlns="http://www.w3.org/2000/svg"
  832. height="24px"
  833. viewBox="0 0 24 24"
  834. width="24px"
  835. fill="currentcolor"
  836. >
  837. <path d="M0 0h24v24H0z" fill="none" />
  838. <path
  839. 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"
  840. />
  841. </svg>
  842. <span>Stanislaw : 06 75 27 65 48</span>
  843. </div>
  844. </div>
  845. <div class="agenda-creneau-details--title">Le responsable</div>
  846. <div class="agenda-creneau-details--content">
  847. <div class="benevole">
  848. <svg
  849. class="icon"
  850. xmlns="http://www.w3.org/2000/svg"
  851. height="24px"
  852. viewBox="0 0 24 24"
  853. width="24px"
  854. fill="currentcolor"
  855. >
  856. <path d="M0 0h24v24H0z" fill="none" />
  857. <path
  858. 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"
  859. />
  860. </svg>
  861. <span>Sylvain : 06 72 29 46 90</span>
  862. </div>
  863. </div>
  864. </div>
  865. </div>
  866. </div>
  867. </div>
  868. </div>
  869. </body>
  870. </html>