diff --git a/static/assets/home.css b/static/assets/home.css new file mode 100644 index 0000000..e7d131c --- /dev/null +++ b/static/assets/home.css @@ -0,0 +1,283 @@ +.header { + border-bottom: 2px solid #C28100; + padding-bottom: 1.5em; + padding-top: 1.5em; +} + +.header-container { + display: flex; +} + +.header-image { + margin-right: 3em; +} + +.header-image img { + width: 7em; +} + +.header-content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: 1em; + padding-bottom: 1em; +} + +.header-title { + font-family: 'Roboto Slab', serif; + margin: 0; + font-weight: 500; + font-size: 2.5em; +} + +.header-sub-title { + margin: 0; + text-decoration: underline; + font-weight: 100; + color: #34495e; + transition: 0.2s; +} + +.header-sub-title:hover { + color: #0029FF; +} + +.header-description { + color: #34495e; +} + +.content { + margin-top: 1.5em; + display: flex; +} + + + + +.nav { + margin-right: 2em; +} + +.nav-item { + width: 15em; + padding: 1em; + border-radius: 4px; + margin-bottom: 0.7em; + border: 3px solid rgba(255, 111, 10, 0.7); + display: flex; + cursor: pointer; + transition: ease-in-out 0.1s; + height: 1.2em; +} + +.nav-icon { + width: 3em; + padding-left: .5em; + display: flex; + justify-content: start; + align-items: center; + color: #C28200; + font-size: 1.5em; + opacity: 0.7; +} + +.nav-item-content { + display: flex; + justify-content: space-between; + width: 100%; +} + +.nav-title { + display: flex; + align-items: center; + opacity: 0.85; +} + +.nav-access { + display: flex; + align-items: center; + color: #FF6F0A; + opacity: 0.7; +} + +.nav-item.enabled { + border-color: rgba(255, 111, 10, 1); +} + +.nav-item.enabled .nav-access { + opacity: 1; +} + +.nav-item.enabled .nav-icon { + opacity: 1; +} + +.nav-item.enabled .nav-title { + opacity: 1; +} + +.nav-item:hover { + transform: scale(1.05); +} + +#nav-enabler { + display: none; +} + +.mosaic { + background: white; + width: 100%; +} + +.mosaic-header { + width: 100%; + opacity: 0.8; + text-align: right; + margin-bottom: 1.5em; +} + +.card-container { + margin: 0 auto; + width: 85%; +} + +.card { + display: flex; + border: 1px solid #bdc3c7; + border-radius: 4px; + margin-bottom: 1em; + box-shadow: 0 0 8px 0px rgba(0,0,0,0.1); +} + +.card-image { + border-right: 1px solid #C4C4C4; + + display: flex; + justify-content: center; + align-items: center; + + padding: 1em; +} + +.card-image img { + width: 12em; +} + +.card-content { + padding: 1.5em; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card-title-container { + display: flex; + justify-content: space-between; +} + +.card-icon { + color: #C28200; + opacity: 0.85; + margin-top: -.5em; + margin-right: -.5em; + font-size: 1.4em; +} + +.card-title { + font-size: 1.6em; + color: #B12008; + margin: 0; + margin-bottom: 0.5em; +} + +.card-description { + color: #34495E; + margin: 0; + line-height: 1.6em; +} + +.card-link { + color: #0029FF; + opacity: 0.75; + text-align: right; +} + +@media (max-width: 1350px) { + .card-container { + width: 100%; + } +} + +@media (max-width: 900px) { + .header { + padding-top: 1em; + padding-bottom: 1em; + } + .header-container { + display: block; + } + .header-content { + padding: 0; + } + .header-image { + margin: 0; + text-align: center; + } + .header-image img { + width: 6em; + } + .header-sub-title { + margin-top: 1em; + text-align: center; + } + .header-title { + text-align: center; + margin-bottom: .25em; + } + .header-description { + text-align: center; + } + + .content { + display: block; + } + .nav { + margin-right: 0; + user-select: none; + } + #nav-enabler { + display: flex; + } + #nav-enabler-icon { + transform: rotate(-90deg) + } + #nav-content { + max-height: 0; + transition: max-height 0.1s ease-out; + } + .nav-item { + width: auto; + } + .nav-mobile-enabler #nav-enabler-icon { + transition: all 0.1s ease; + } + + .mosaic { + position: relative; + border-top: 1px solid #C4C4C4; + padding-top: 1em; + } + .mosaic-header { + text-align: center; + } + .card { + display: block; + } + .card-image { + border-right: 0; + border-bottom: 1px solid #C4C4C4; + margin: 0; + } +} + diff --git a/static/assets/img/adam.png b/static/assets/img/adam.png new file mode 100644 index 0000000..a6a4205 Binary files /dev/null and b/static/assets/img/adam.png differ diff --git a/static/assets/img/adam.webp b/static/assets/img/adam.webp new file mode 100644 index 0000000..fe2cb06 Binary files /dev/null and b/static/assets/img/adam.webp differ diff --git a/static/assets/img/cross.png b/static/assets/img/cross.png new file mode 100644 index 0000000..bb49c0f Binary files /dev/null and b/static/assets/img/cross.png differ diff --git a/static/assets/img/dummy-1.jpg b/static/assets/img/dummy-1.jpg new file mode 100644 index 0000000..7176ed4 Binary files /dev/null and b/static/assets/img/dummy-1.jpg differ diff --git a/static/assets/img/dummy-2.jpg b/static/assets/img/dummy-2.jpg new file mode 100644 index 0000000..47b041c Binary files /dev/null and b/static/assets/img/dummy-2.jpg differ diff --git a/static/assets/img/dummy-3.jpg b/static/assets/img/dummy-3.jpg new file mode 100644 index 0000000..35a97eb Binary files /dev/null and b/static/assets/img/dummy-3.jpg differ diff --git a/static/assets/img/dummy-4.jpg b/static/assets/img/dummy-4.jpg new file mode 100644 index 0000000..03b98ff Binary files /dev/null and b/static/assets/img/dummy-4.jpg differ diff --git a/static/assets/img/dummy-5.jpg b/static/assets/img/dummy-5.jpg new file mode 100644 index 0000000..770d825 Binary files /dev/null and b/static/assets/img/dummy-5.jpg differ diff --git a/static/assets/img/espace_condorcet_logo.jpg b/static/assets/img/espace_condorcet_logo.jpg new file mode 100644 index 0000000..18cad56 Binary files /dev/null and b/static/assets/img/espace_condorcet_logo.jpg differ diff --git a/static/assets/img/lol.jpg b/static/assets/img/lol.jpg new file mode 100644 index 0000000..c576701 Binary files /dev/null and b/static/assets/img/lol.jpg differ diff --git a/static/assets/img/werobot.png b/static/assets/img/werobot.png new file mode 100644 index 0000000..0bcf5cf Binary files /dev/null and b/static/assets/img/werobot.png differ diff --git a/static/assets/js/home.js b/static/assets/js/home.js new file mode 100644 index 0000000..5c2422d --- /dev/null +++ b/static/assets/js/home.js @@ -0,0 +1,157 @@ +let navOpened = false +let oldNavText = "" +let oldNavIcon = "" + +let navEnabler = document.getElementById('nav-enabler') +let navEnablerText = document.getElementById('nav-enabler-text') +let navEnablerIcon = document.getElementById('nav-enabler-icon') +let navContent = document.getElementById('nav-content') + +let mosaic = document.getElementById('mosaic') +let mosaicHeader = document.getElementById('mosaic-header') + +navEnabler.onclick = async () => { + if (!navOpened) { + // open the menu + oldNavText = navEnablerText.textContent + navEnablerText.textContent = "Minimiser le menu" + navEnablerIcon.style.transform = "rotate(0deg)" + navContent.style.maxHeight = navContent.scrollHeight + "px" + } else { + // close the menu + navEnablerText.textContent = oldNavText + navEnablerIcon.style.transform = "rotate(-90deg)" + navContent.style.maxHeight = null + } + navOpened = !navOpened +} + +function createEl(className = false, elName = "div") { + let el = document.createElement(elName) + if (className != false) { + el.className = className + } + return el +} + +function renderNavItem(tag) { + /* +
+
+ +
+
+
+ Danse et musique +
+
+ +
+
+
+ */ + + let navItem = createEl('nav-item') + let navIcon = createEl('nav-icon') + let icon = createEl(tag.icon, 'i') + + navIcon.appendChild(icon) + navItem.appendChild(navIcon) + + let navItemContent = createEl('nav-item-content') + let navTitle = createEl('nav-title') + navTitle.textContent = tag.name + navItemContent.appendChild(navTitle) + + let navAccess = createEl('nav-access') + let chevronIcon = createEl('fas fa-chevron-right', 'i') + navAccess.appendChild(chevronIcon) + navItemContent.appendChild(navTitle) + navItemContent.appendChild(navAccess) + navItem.appendChild(navItemContent) + + return navItem +} + +function renderCard(organization) { + let card = createEl('card') + + // image + let image = createEl('card-image') + let imageTag = createEl(0, 'img') + imageTag.src = organization.thumbnail + image.appendChild(imageTag) + card.appendChild(image) + + let content = createEl('card-content') + let upperContent = createEl() + + let titleContainer = createEl('card-title-container') + let title = createEl('card-title', 'h2') + title.textContent = organization.name + titleContainer.appendChild(title) + + let icon = createEl('card-icon') + let iconTag = createEl(organization.tag.icon, 'i') + icon.appendChild(iconTag) + titleContainer.appendChild(icon) + upperContent.appendChild(titleContainer) + + let description = createEl('card-description') + description.textContent = organization.descriptionShort + upperContent.appendChild(description) + + let link = createEl('card-link') + let aTag = createEl(0, 'a') + aTag.href = "/association/" + organization.slug + aTag.textContent = "En savoir plus" + link.appendChild(aTag) + content.appendChild(upperContent) + content.appendChild(link) + card.appendChild(content) + return card +} + +function renderMosaic(data) { + let cardContainer = createEl('card-container') + data.forEach(orga => { + cardContainer.appendChild(renderCard(orga)) + }) + return cardContainer +} + +let currentTag = null +let currentCardContainer = null + +function enableTag(node) { + let all = node.id === 'nav-all' + let tagId = "" + if (!all) { + tagId = node.attributes['data-tag-id'].value + } + let data = organizations.filter(orga => orga.tag.id === tagId || all) + let cards = renderMosaic(data) + if (currentCardContainer !== null) { + mosaic.removeChild(currentCardContainer) + } + currentCardContainer = cards + mosaic.appendChild(cards) + node.className += ' enabled' + if (currentTag !== null) { + currentTag.className = currentTag.className.replace('enabled', '') + } + currentTag = node + if (data === undefined || data === null || data.length <= 0) { + mosaicHeader.textContent = "Aucune associations listées" + } else if (data.length === 1) { + mosaicHeader.textContent = "Une association listée" + } else { + mosaicHeader.textContent = data.length + " associations listées" + } +} + +navContent.childNodes.forEach(node => { + node.onclick = () => enableTag(node) +}) + +enableTag(document.getElementById('nav-all')) \ No newline at end of file diff --git a/static/assets/main.css b/static/assets/main.css new file mode 100644 index 0000000..8038f15 --- /dev/null +++ b/static/assets/main.css @@ -0,0 +1,30 @@ +html { + overflow-y: scroll; +} + +body { + font-family: 'Roboto', sans-serif; + margin: 0; +} + +.container { + width: 80%; + margin: 0 auto; +} + +a { + color: #3498db; +} + +a:hover { + text-decoration: underline; + /*opacity: 0.8;*/ + transition: color 0.2s; + color: #2980b9; +} + +@media (max-width: 900px) { + .container { + width: 92%; + } +} \ No newline at end of file diff --git a/static/assets/organization.css b/static/assets/organization.css new file mode 100644 index 0000000..bdca3c9 --- /dev/null +++ b/static/assets/organization.css @@ -0,0 +1,294 @@ +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 1em; + padding-bottom: 1em; + font-size: 1.2em; +} + +.return { + display: flex; + align-items: center; + color: #34495e; + cursor: pointer; + transition: all .2s; +} + +.return-icon { + font-size: 1.5em; + margin-right: .5em; +} + +.return:hover { + opacity: 0.88; + text-decoration: underline; +} + +.cover-background { + background-position: center; + background-size: cover; + height: 13em; + width: 100%; +} + +.cover { + height: 13em; + margin-top: -13em; + background-color: rgba(230, 126, 34, 0.78); + background-size: cover; +} + +.cover-content { + color: white; + display: flex; + align-items: center; + height: 13em; +} + +.cover-image { + background: white; + border-radius: 50%; + border: 3px solid #FD6E0B; + background-size: cover; + background-position: center; + width: 10em; + height: 10em; + margin-right: 3em; +} + +.cover-title-container { + +} + +.cover-title { + font-family: 'Roboto Slab', serif; + font-size: 3.5em; + font-weight: normal; + margin: 0; +} + +.cover-sub-title { + font-size: 1.5em; + font-weight: normal; + margin: 0; +} + +.media-mosaic { + margin-top: .75em; + width: 100%; + height: 25em; + + display: grid; + grid-template-columns: 1fr .5fr .5fr; + grid-template-rows: 1fr 1fr; + + grid-column-gap: .75em; + grid-row-gap: .75em; +} + +.media-overlay { + background-color: rgba(196, 196, 196, 0.7); + color: #B12008; + display: flex; + justify-content: center; + align-items: center; + font-size: 3.5em; +} + +.media-overlay i { + cursor: pointer; + transition: all 0.2s; +} + +.media-overlay i:hover { + transform: scale(1.2); +} + +.media-main { + grid-row: 1 / span 2; +} + +/* .media-sec { + display: grid; + grid-template-rows: 50% 50%; +} + +.media-sec-row { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 100%; +} */ + +.media { + border-radius: 4px; + background-size: cover; + background-position: center; +} + +section { + margin-top: .5em; + margin-bottom: 0; +} + +.section-title { + margin-top: 1em; + margin-bottom: 1em; +} + +.section-title h1, .section-title h2, .section-title h3 { + margin: 0; + font-weight: normal; + font-family: 'Roboto Slab', serif; + font-size: 1.8em; +} + +.section-divider { + background-color: rgba(194, 129, 0, 0.5); + width: 100%; + height: 3px; + border-radius: 1px; +} + +.description { + line-height: 1.5em; + text-align: justify; + margin: 0 auto; + width: 80%; + margin-top: 1.5em; + margin-bottom: .5em; +} + +/*********** + * PRICING * + ***********/ + +.pricing { + display: flex; + justify-content: space-between; +} + +.pricing-card { + height: 10em; + width: 100%; + padding-top: 1.5em; + padding-bottom: 1.5em; + text-align: center; + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-right: 1.5em; + color: white; +} + +.pricing .pricing-card:nth-child(1) { + background-color: rgba(177, 88, 8, .80); +} + +.pricing .pricing-card:nth-child(2) { + background-color: rgba(253, 110, 11, .780); +} + +.pricing .pricing-card:nth-child(3) { + background-color: rgba(177, 32, 8, .80); +} + +.pricing .pricing-card:last-child { + margin-right: 0; +} + +.pricing-label { + font-size: 1.5em; +} + +.pricing-name { + font-size: 1.8em; +} + +.princing-description { + +} + +/*********** + * CONTACT * + ***********/ + +.contact { + margin: 0 auto; + width: 70%; +} + +.contact-item { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: .75em; + padding-bottom: .75em; + padding-left: 2em; + padding-right: 2em; + background-color: #ECF0F1; + border-radius: 4px; + margin-bottom: 1em; +} + +.contact-icon { + color: #B15808; + background-color: #C4C4C4; + border-radius: 50%; + width: 2em; + height: 2em; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5em; +} + +.contact-content { + text-align: right; +} + +.external-link { + margin-left: .25em; + font-weight: bold; +} + +.facebook .contact-icon { + background-color: #3B5999; + color: white; +} + +.instagram .contact-icon { + background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); + color: white; +} + +.twitter .contact-icon { + background-color: #1DA1F2; + color: white; +} + +/********** + * FOOTER * + **********/ + +.footer { + width: 100%; + display: grid; + grid-template-columns: 50% 25% 25%; + grid-template-rows: 1fr; + height: 1em; + margin-top: 2em; +} + +.footer div:nth-child(1) { + background-color: rgb(177, 32, 8, .83); +} + +.footer div:nth-child(2) { + background-color: rgb(177, 88, 8, .83); +} + +.footer div:nth-child(3) { + background-color: rgb(253, 110, 11, .83); +} \ No newline at end of file diff --git a/static/home.html b/static/home.html new file mode 100644 index 0000000..673fb8c --- /dev/null +++ b/static/home.html @@ -0,0 +1,241 @@ + + + + Home + + + + + + + + + +
+
+
+ +
+
+ + Espace Condorcet Centre Social + +

Forum des associations

+
+ Cette année nous vous invitons à découvrir le forum virtuel des associations. +
+
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+ Culturelles +
+
+ +
+
+
+
+
+ +
+
+
+ Danse et musique +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/static/organization.html b/static/organization.html new file mode 100644 index 0000000..5e3de2a --- /dev/null +++ b/static/organization.html @@ -0,0 +1,221 @@ + + + + Association + + + + + + + + +
+
+
+
+
Revenir à la liste
+
+
+ Forum des associations +
+
+
+
+
+
+
+
+
+

+ We Robot +

+

+ Association de robotique +

+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+

Présentation

+
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia minima aliquam corporis fugit repellat obcaecati consequatur cumque, dolore omnis et porro, sit iusto similique blanditiis vel, alias quam ducimus voluptates. +

+

+ Unde neque adipisci et. Consequatur labore similique quia. Rerum nihil eius assumenda quae. Non vel sapiente omnis. Eum explicabo neque maxime sapiente et perspiciatis et. +

+

+ Delectus unde inventore similique ut quo. Consequatur assumenda quaerat aliquid velit et corrupti. Laboriosam qui magnam culpa est amet nobis tenetur. Ducimus a sint ea. Expedita omnis libero ipsum dolor ipsam dolor beatae. +

+

+ Qui vel sit expedita eum recusandae nemo. Facere quas dolor eum ut. Aut omnis et qui repellat nihil accusantium. Et vitae beatae ratione. Tenetur sit omnis sa +

+
+
+
+
+

Crénaux

+
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia minima aliquam corporis fugit repellat obcaecati consequatur cumque, dolore omnis et porro, sit iusto similique blanditiis vel, alias quam ducimus voluptates. +

+

+ Unde neque adipisci et. Consequatur labore similique quia. Rerum nihil eius assumenda quae. Non vel sapiente omnis. Eum explicabo neque maxime sapiente et perspiciatis et. +

+

+ Delectus unde inventore similique ut quo. Consequatur assumenda quaerat aliquid velit et corrupti. Laboriosam qui magnam culpa est amet nobis tenetur. Ducimus a sint ea. Expedita omnis libero ipsum dolor ipsam dolor beatae. +

+

+ Qui vel sit expedita eum recusandae nemo. Facere quas dolor eum ut. Aut omnis et qui repellat nihil accusantium. Et vitae beatae ratione. Tenetur sit omnis sa +

+
+
+
+
+

Tarifs

+
+
+
+
+
+ 12 € +
+
+ Enfants +
+
+ Facere quas dolor eum ut. +
+
+
+
+ 12 € +
+
+ Enfants +
+
+ Facere quas dolor eum ut. +
+
+
+
+ 12 € +
+
+ Enfants +
+
+ Facere quas dolor eum ut. +
+
+
+
+ + +
+
+

Contact

+
+
+
+
+
+ +
+
+ Frank GITON +
+
+
+
+ +
+
+ contact@werobot.fr +
+
+
+
+ +
+
+

+ 6, Rue qui fait des efforts +

+

+ 27940 Gaillon +

+
+
+
+
+ +
+
+ https://werobot.fr +
+
+
+
+ +
+
+ 07 81 42 88 42 +
+
+ +
+
+ +
+
+ https://www.instagram.com/werobot/ +
+
+ +
+
+
+ + +
+
+
+
+
+ + + \ No newline at end of file