clovis.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Clovis 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. letter-spacing: normal;
  41. text-transform: none;
  42. display: inline-block;
  43. white-space: nowrap;
  44. word-wrap: normal;
  45. direction: ltr;
  46. font-feature-settings: "liga";
  47. -moz-font-feature-settings: "liga";
  48. -moz-osx-font-smoothing: grayscale;
  49. }
  50. .benevole {
  51. vertical-align: middle;
  52. display: inline-block;
  53. }
  54. .benevole .icon {
  55. vertical-align: bottom;
  56. }
  57. .planning-container {
  58. max-width: 800px;
  59. width: 100%;
  60. }
  61. .daily-agenda {
  62. border: solid 1px var(--color-neutral-200);
  63. }
  64. .day-header {
  65. background: var(--color-neutral-200);
  66. color: var(--color-accent-800);
  67. padding: 12px;
  68. font-size: 1.8rem;
  69. font-weight: bold;
  70. text-transform: capitalize;
  71. }
  72. .agenda-creneau-header {
  73. padding: 12px;
  74. background: var(--color-accent-850);
  75. position: relative;
  76. border-bottom: 1px solid var(--color-accent-600);
  77. }
  78. .agenda-creneau-time {
  79. padding-right: 8px;
  80. }
  81. .agenda-creneau-title {
  82. font-weight: bold;
  83. text-transform: capitalize;
  84. }
  85. .agenda-creneau-action {
  86. position: absolute;
  87. top: 8px;
  88. right: 12px;
  89. background: transparent;
  90. outline: 0;
  91. border: 0;
  92. cursor: pointer;
  93. }
  94. .agenda-creneau-action:hover {
  95. color: var(--color-neutral-400);
  96. }
  97. .transformation-container {
  98. height: auto;
  99. overflow: hidden;
  100. }
  101. .agenda-creneau-details {
  102. padding: 4px 12px;
  103. display: flex;
  104. flex-wrap: wrap;
  105. overflow: hidden;
  106. opacity: 1;
  107. transform-origin: 0px 0px;
  108. transition: height 0.3s ease-in-out;
  109. }
  110. .agenda-creneau-details--title {
  111. width: 100%;
  112. font-weight: 600;
  113. margin: 8px 0px;
  114. }
  115. .agenda-creneau-details--content {
  116. width: 100%;
  117. margin: 0px 0px 8px;
  118. }
  119. @media (min-width: 600px) {
  120. .name-header {
  121. text-align: center;
  122. }
  123. .planning-container {
  124. margin-left: auto;
  125. margin-right: auto;
  126. }
  127. .agenda-creneau-time {
  128. padding-right: 2rem;
  129. }
  130. .agenda-creneau-details--title {
  131. width: 16.6%;
  132. margin-bottom: 12px;
  133. }
  134. .agenda-creneau-details--content {
  135. width: calc(33.3% - 8px);
  136. padding-right: 8px;
  137. margin: 8px 0px 16px;
  138. }
  139. }
  140. .agenda-creneau-details--content .chip {
  141. margin: 2px;
  142. }
  143. .hide {
  144. display: none;
  145. }
  146. #links {
  147. list-style-type: none;
  148. max-width: 200px;
  149. margin: 0 auto;
  150. border-top: 1px solid var(--color-neutral-400);
  151. padding: 0;
  152. }
  153. .link-item {
  154. padding: 8px 12px;
  155. margin: 0 auto;
  156. border: solid 1px var(--color-neutral-400);
  157. border-top: 0px;
  158. }
  159. .link-item a {
  160. display: block;
  161. }
  162. .formcontrol {
  163. all: initial;
  164. display: block;
  165. box-sizing: border-box;
  166. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  167. }
  168. .formcontrol.home-search {
  169. margin: 3rem auto 1rem;
  170. max-width: 400px;
  171. }
  172. .formcontrol:not(:last-child) {
  173. margin-bottom: 1rem;
  174. }
  175. .formcontrol-control {
  176. width: 100%;
  177. }
  178. .formcontrol-label {
  179. color: var(--color-neutral-200);
  180. display: -webkit-box;
  181. display: flex;
  182. font-size: 0.9rem;
  183. font-family: inherit;
  184. font-weight: 500;
  185. line-height: 1.5rem;
  186. margin-bottom: 0.2rem;
  187. }
  188. .formcontrol-label > button {
  189. margin-left: 0.25rem;
  190. }
  191. .formcontrol-optional {
  192. -webkit-box-flex: 1;
  193. flex: 1;
  194. color: #647592;
  195. font-size: 0.75rem;
  196. margin-top: 0.25rem;
  197. text-align: right;
  198. line-height: 1.125rem;
  199. margin-left: 0.25rem;
  200. }
  201. .formcontrol-help {
  202. color: #647592;
  203. display: -webkit-box;
  204. display: flex;
  205. font-size: 0.75rem;
  206. margin-top: 0.5rem;
  207. font-family: inherit;
  208. line-height: 1.125rem;
  209. }
  210. .formcontrol-helplink {
  211. -webkit-box-flex: 1;
  212. flex: 1;
  213. margin-top: calc(-0.25rem);
  214. text-align: right;
  215. }
  216. .formcontrol--error .formcontrol-help {
  217. color: #e4002b;
  218. }
  219. .formcontrol--success .formcontrol-help {
  220. color: #08875b;
  221. }
  222. .input {
  223. all: initial;
  224. color: var(--color-neutral-100);
  225. width: 100%;
  226. border: none;
  227. height: 2rem;
  228. margin: 0;
  229. outline: 0;
  230. padding: 0.2rem 0.5rem;
  231. font-size: 0.875rem;
  232. -webkit-appearance: none;
  233. -moz-appearance: none;
  234. appearance: none;
  235. box-shadow: 0 -1px 0 0 var(--color-accent-700) inset;
  236. box-sizing: border-box;
  237. -webkit-transition: 0.1s ease-in-out;
  238. transition: 0.1s ease-in-out;
  239. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  240. line-height: 1.25rem;
  241. background-color: var(--color-accent-950);
  242. -webkit-transition-property: box-shadow, border;
  243. transition-property: box-shadow, border;
  244. }
  245. .input::-webkit-input-placeholder {
  246. color: #505d74;
  247. }
  248. .input:-ms-input-placeholder {
  249. color: #505d74;
  250. }
  251. .input::-ms-input-placeholder {
  252. color: #505d74;
  253. }
  254. .input::placeholder {
  255. color: #505d74;
  256. }
  257. .input:hover {
  258. background-color: var(--color-accent-850);
  259. }
  260. .input:focus {
  261. box-shadow: 0 0 0 2px var(--color-accent-700);
  262. border-color: transparent;
  263. background-color: var(--color-accent-950);
  264. }
  265. .input:disabled {
  266. color: #c1c7d3 !important;
  267. -webkit-user-select: none;
  268. -moz-user-select: none;
  269. -ms-user-select: none;
  270. user-select: none;
  271. border-color: transparent;
  272. pointer-events: none;
  273. }
  274. .input:disabled::-webkit-input-placeholder {
  275. color: #c1c7d3;
  276. }
  277. .input:disabled:-ms-input-placeholder {
  278. color: #c1c7d3;
  279. }
  280. .input:disabled::-ms-input-placeholder {
  281. color: #c1c7d3;
  282. }
  283. .input:disabled::placeholder {
  284. color: #c1c7d3;
  285. }
  286. .input--small {
  287. height: 2rem;
  288. font-size: 0.875rem;
  289. line-height: 1.125rem;
  290. padding-top: 0.25rem;
  291. padding-bottom: 0.25rem;
  292. }
  293. .input--adorned-start {
  294. padding-left: 2rem;
  295. }
  296. .input--adorned-end {
  297. padding-right: 2rem;
  298. }
  299. .input--valid {
  300. box-shadow: 0 -1px 0 0 #08875b inset !important;
  301. }
  302. .input--valid:focus {
  303. box-shadow: 0 0 0 2px #08875b !important;
  304. }
  305. .input--invalid {
  306. box-shadow: 0 -1px 0 0 #e93255 inset !important;
  307. }
  308. .input--invalid:focus {
  309. box-shadow: 0 0 0 2px #e93255 !important;
  310. }
  311. #search {
  312. 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");
  313. background-repeat: no-repeat;
  314. padding-left: 30px;
  315. background-position: 4px;
  316. }
  317. </style>
  318. </head>
  319. <body>
  320. <h1 class="name-header">Clovis</h1>
  321. <div class="planning-container">
  322. <div class="daily-agenda">
  323. <div class="day-header">jeudi 08 septembre</div>
  324. <div>
  325. <div>
  326. <div class="agenda-creneau-header">
  327. <span class="agenda-creneau-time">09h00-11h00 </span>
  328. <span class="agenda-creneau-title">courses</span>
  329. </div>
  330. <div class="agenda-creneau-details">
  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>Fabien : 06 79 15 25 84</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>Jérémie : 06 89 26 95 92</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>Alexis FP : 06 95 52 90 88</span>
  380. </div>
  381. </div>
  382. </div>
  383. </div>
  384. <div>
  385. <div class="agenda-creneau-header">
  386. <span class="agenda-creneau-time">14h00-18h00 </span>
  387. <span class="agenda-creneau-title">bouffe</span>
  388. </div>
  389. <div class="agenda-creneau-details">
  390. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  391. <div class="agenda-creneau-details--content">
  392. <div class="benevole">
  393. <svg
  394. class="icon"
  395. xmlns="http://www.w3.org/2000/svg"
  396. height="24px"
  397. viewBox="0 0 24 24"
  398. width="24px"
  399. fill="currentcolor"
  400. >
  401. <path d="M0 0h24v24H0z" fill="none" />
  402. <path
  403. 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"
  404. />
  405. </svg>
  406. <span>Fabien : 06 79 15 25 84</span>
  407. </div>
  408. <div class="benevole">
  409. <svg
  410. class="icon"
  411. xmlns="http://www.w3.org/2000/svg"
  412. height="24px"
  413. viewBox="0 0 24 24"
  414. width="24px"
  415. fill="currentcolor"
  416. >
  417. <path d="M0 0h24v24H0z" fill="none" />
  418. <path
  419. 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"
  420. />
  421. </svg>
  422. <span>Jérémie : 06 89 26 95 92</span>
  423. </div>
  424. <div class="benevole">
  425. <svg
  426. class="icon"
  427. xmlns="http://www.w3.org/2000/svg"
  428. height="24px"
  429. viewBox="0 0 24 24"
  430. width="24px"
  431. fill="currentcolor"
  432. >
  433. <path d="M0 0h24v24H0z" fill="none" />
  434. <path
  435. 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"
  436. />
  437. </svg>
  438. <span>Matthias : 06 89 04 53 82</span>
  439. </div>
  440. <div class="benevole">
  441. <svg
  442. class="icon"
  443. xmlns="http://www.w3.org/2000/svg"
  444. height="24px"
  445. viewBox="0 0 24 24"
  446. width="24px"
  447. fill="currentcolor"
  448. >
  449. <path d="M0 0h24v24H0z" fill="none" />
  450. <path
  451. 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"
  452. />
  453. </svg>
  454. <span>Alexis FP : 06 95 52 90 88</span>
  455. </div>
  456. <div class="benevole">
  457. <svg
  458. class="icon"
  459. xmlns="http://www.w3.org/2000/svg"
  460. height="24px"
  461. viewBox="0 0 24 24"
  462. width="24px"
  463. fill="currentcolor"
  464. >
  465. <path d="M0 0h24v24H0z" fill="none" />
  466. <path
  467. 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"
  468. />
  469. </svg>
  470. <span>Nicolas : 06 88 18 89 44</span>
  471. </div>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477. <div class="daily-agenda">
  478. <div class="day-header">vendredi 09 septembre</div>
  479. <div>
  480. <div>
  481. <div class="agenda-creneau-header">
  482. <span class="agenda-creneau-time">08h00-09h00 </span>
  483. <span class="agenda-creneau-title">Recup camion deco</span>
  484. </div>
  485. <div class="agenda-creneau-details">
  486. </div>
  487. </div>
  488. <div>
  489. <div class="agenda-creneau-header">
  490. <span class="agenda-creneau-time">09h00-10h00 </span>
  491. <span class="agenda-creneau-title">Reception clé durante + EDL 9h</span>
  492. </div>
  493. <div class="agenda-creneau-details">
  494. </div>
  495. </div>
  496. <div>
  497. <div class="agenda-creneau-header">
  498. <span class="agenda-creneau-time">10h00-12h00 </span>
  499. <span class="agenda-creneau-title">Courses pain + boucherie + autre</span>
  500. </div>
  501. <div class="agenda-creneau-details">
  502. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</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>Marine : 06 32 99 84 98</span>
  519. </div>
  520. </div>
  521. </div>
  522. </div>
  523. <div>
  524. <div class="agenda-creneau-header">
  525. <span class="agenda-creneau-time">14h00-17h00 </span>
  526. <span class="agenda-creneau-title">Tournée camion déco aprem</span>
  527. </div>
  528. <div class="agenda-creneau-details">
  529. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  530. <div class="agenda-creneau-details--content">
  531. <div class="benevole">
  532. <svg
  533. class="icon"
  534. xmlns="http://www.w3.org/2000/svg"
  535. height="24px"
  536. viewBox="0 0 24 24"
  537. width="24px"
  538. fill="currentcolor"
  539. >
  540. <path d="M0 0h24v24H0z" fill="none" />
  541. <path
  542. 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"
  543. />
  544. </svg>
  545. <span>Quang Huy : 06 74 44 36 35</span>
  546. </div>
  547. <div class="benevole">
  548. <svg
  549. class="icon"
  550. xmlns="http://www.w3.org/2000/svg"
  551. height="24px"
  552. viewBox="0 0 24 24"
  553. width="24px"
  554. fill="currentcolor"
  555. >
  556. <path d="M0 0h24v24H0z" fill="none" />
  557. <path
  558. 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"
  559. />
  560. </svg>
  561. <span>Sylvain : 06 72 29 46 89</span>
  562. </div>
  563. </div>
  564. </div>
  565. </div>
  566. <div>
  567. <div class="agenda-creneau-header">
  568. <span class="agenda-creneau-time">20h00-21h00 </span>
  569. <span class="agenda-creneau-title">Accueil Durante </span>
  570. </div>
  571. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  572. <div class="agenda-creneau-details--content">Attendre devant pour accueillir les fanfarons et les bénévoles. Vous aurez une fiche avec toutes les personnes inscrites à l&#39;accueil.
  573. Donnez un bracelet + ecocup + les teeshirts aux bénévoles qui n&#39;en ont pas.
  574. Indiquez où poser les affaires dans la salle. </div>
  575. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  576. <div class="agenda-creneau-details--content">
  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>Silvia : 06 98 09 84 36</span>
  592. </div>
  593. </div>
  594. <div class="agenda-creneau-details--title">Le responsable</div>
  595. <div class="agenda-creneau-details--content">
  596. <div class="benevole">
  597. <svg
  598. class="icon"
  599. xmlns="http://www.w3.org/2000/svg"
  600. height="24px"
  601. viewBox="0 0 24 24"
  602. width="24px"
  603. fill="currentcolor"
  604. >
  605. <path d="M0 0h24v24H0z" fill="none" />
  606. <path
  607. 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"
  608. />
  609. </svg>
  610. <span>Marine : 06 32 99 84 98
  611. Louise : 06 77 62 65 64
  612. Clovis : 06 68 79 86 73</span>
  613. </div>
  614. </div>
  615. <div class="agenda-creneau-details--title">Ceux que tu remplaces</div>
  616. <div class="agenda-creneau-details--content">
  617. <div class="benevole">
  618. <svg
  619. class="icon"
  620. xmlns="http://www.w3.org/2000/svg"
  621. height="24px"
  622. viewBox="0 0 24 24"
  623. width="24px"
  624. fill="currentcolor"
  625. >
  626. <path d="M0 0h24v24H0z" fill="none" />
  627. <path
  628. 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"
  629. />
  630. </svg>
  631. <span>Louise : 06 77 62 65 64</span>
  632. </div>
  633. <div class="benevole">
  634. <svg
  635. class="icon"
  636. xmlns="http://www.w3.org/2000/svg"
  637. height="24px"
  638. viewBox="0 0 24 24"
  639. width="24px"
  640. fill="currentcolor"
  641. >
  642. <path d="M0 0h24v24H0z" fill="none" />
  643. <path
  644. 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"
  645. />
  646. </svg>
  647. <span>Marine : 06 32 99 84 98</span>
  648. </div>
  649. </div>
  650. <div class="agenda-creneau-details--title">Les personnes qui arrivent après toi</div>
  651. <div class="agenda-creneau-details--content">
  652. <div class="benevole">
  653. <svg
  654. class="icon"
  655. xmlns="http://www.w3.org/2000/svg"
  656. height="24px"
  657. viewBox="0 0 24 24"
  658. width="24px"
  659. fill="currentcolor"
  660. >
  661. <path d="M0 0h24v24H0z" fill="none" />
  662. <path
  663. 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"
  664. />
  665. </svg>
  666. <span>Hutch : 06 89 09 67 29</span>
  667. </div>
  668. <div class="benevole">
  669. <svg
  670. class="icon"
  671. xmlns="http://www.w3.org/2000/svg"
  672. height="24px"
  673. viewBox="0 0 24 24"
  674. width="24px"
  675. fill="currentcolor"
  676. >
  677. <path d="M0 0h24v24H0z" fill="none" />
  678. <path
  679. 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"
  680. />
  681. </svg>
  682. <span>Sylvain : 06 72 29 46 89</span>
  683. </div>
  684. </div>
  685. </div>
  686. </div>
  687. </div>
  688. </div>
  689. <div class="daily-agenda">
  690. <div class="day-header">samedi 10 septembre</div>
  691. <div>
  692. <div>
  693. <div class="agenda-creneau-header">
  694. <span class="agenda-creneau-time">07h30-09h00 </span>
  695. <span class="agenda-creneau-title">Finir nettoyage Durante</span>
  696. </div>
  697. <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
  698. <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>
  699. <div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
  700. <div class="agenda-creneau-details--content">
  701. <div class="benevole">
  702. <svg
  703. class="icon"
  704. xmlns="http://www.w3.org/2000/svg"
  705. height="24px"
  706. viewBox="0 0 24 24"
  707. width="24px"
  708. fill="currentcolor"
  709. >
  710. <path d="M0 0h24v24H0z" fill="none" />
  711. <path
  712. 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"
  713. />
  714. </svg>
  715. <span>Laureen : 07 78 10 47 37</span>
  716. </div>
  717. <div class="benevole">
  718. <svg
  719. class="icon"
  720. xmlns="http://www.w3.org/2000/svg"
  721. height="24px"
  722. viewBox="0 0 24 24"
  723. width="24px"
  724. fill="currentcolor"
  725. >
  726. <path d="M0 0h24v24H0z" fill="none" />
  727. <path
  728. 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"
  729. />
  730. </svg>
  731. <span>Aymeric Pompom : 06 78 57 28 15</span>
  732. </div>
  733. </div>
  734. <div class="agenda-creneau-details--title">Le responsable</div>
  735. <div class="agenda-creneau-details--content">
  736. <div class="benevole">
  737. <svg
  738. class="icon"
  739. xmlns="http://www.w3.org/2000/svg"
  740. height="24px"
  741. viewBox="0 0 24 24"
  742. width="24px"
  743. fill="currentcolor"
  744. >
  745. <path d="M0 0h24v24H0z" fill="none" />
  746. <path
  747. 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"
  748. />
  749. </svg>
  750. <span>Sylvain : 06 72 29 46 90</span>
  751. </div>
  752. </div>
  753. </div>
  754. </div>
  755. <div>
  756. <div class="agenda-creneau-header">
  757. <span class="agenda-creneau-time">00h00-00h30 </span>
  758. <span class="agenda-creneau-title">Départ vigiles 23h45</span>
  759. </div>
  760. <div class="agenda-creneau-details">
  761. </div>
  762. </div>
  763. </div>
  764. </div>
  765. </div>
  766. </body>
  767. </html>