lperbet.html 23 KB

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