Difference between revisions of "Widget:Homepage"
From LINKS Community Center
(48 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude> | <noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude> | ||
<includeonly><style> | <includeonly><style> | ||
+ | :root { | ||
+ | --compass-color: #C31980; | ||
+ | --handbook-color: #C2902D; | ||
+ | --safe-color: #80C319; | ||
+ | } | ||
#hp-wrapper { | #hp-wrapper { | ||
--hp-border: 1px solid rgba(0, 0, 0, .5); | --hp-border: 1px solid rgba(0, 0, 0, .5); | ||
Line 42: | Line 47: | ||
background-color: var(--links-grey); | background-color: var(--links-grey); | ||
color: #C31980; | color: #C31980; | ||
− | border: | + | border: 2px solid currentColor; |
font-size: 1.3em; | font-size: 1.3em; | ||
padding: 0 .5em; | padding: 0 .5em; | ||
Line 50: | Line 55: | ||
cursor: pointer; | cursor: pointer; | ||
background-color: rgba(255, 255, 255, .4); | background-color: rgba(255, 255, 255, .4); | ||
+ | border-radius: 5px; | ||
} | } | ||
.hp-large-button svg { fill: #C31980; height: 4em; transition: fill 500ms; } | .hp-large-button svg { fill: #C31980; height: 4em; transition: fill 500ms; } | ||
Line 101: | Line 107: | ||
border-color: var(--links-cyan); | border-color: var(--links-cyan); | ||
fill: var(--links-cyan); | fill: var(--links-cyan); | ||
+ | } | ||
+ | .yellow * { | ||
+ | color: var(--ccl-color); | ||
+ | border-color: var(--ccl-color); | ||
+ | fill: var(--ccl-color); | ||
} | } | ||
Line 107: | Line 118: | ||
@media screen and (min-width: 992px) { | @media screen and (min-width: 992px) { | ||
− | #hp-heading { padding: 3em; margin-bottom: | + | #hp-heading { padding: 3em; margin-bottom: 4em; } |
#hp-heading h1 { font-size: 5em; } | #hp-heading h1 { font-size: 5em; } | ||
#hp-heading .hp-lead { max-width: 50%; font-size: 2em; } | #hp-heading .hp-lead { max-width: 50%; font-size: 2em; } | ||
Line 130: | Line 141: | ||
#hp-resources {border-right: 0 none; } | #hp-resources {border-right: 0 none; } | ||
#hp-changes { border-top: var(--hp-border); } | #hp-changes { border-top: var(--hp-border); } | ||
+ | } | ||
+ | |||
+ | /* SNIPPETS */ | ||
+ | #snippets { | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(3, 1fr); | ||
+ | gap: 1em; | ||
+ | margin: 4em 0; | ||
+ | } | ||
+ | .snippet { | ||
+ | display: block; | ||
+ | text-decoration: none !important; | ||
+ | color: transparent; | ||
+ | background-color: transparent; | ||
+ | perspective: 1000px; | ||
+ | height: 7em; | ||
+ | } | ||
+ | .snippet .snippet-inner { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | transition: transform 500ms; | ||
+ | transform-style: preserve-3d; | ||
+ | } | ||
+ | .snippet:hover .snippet-inner { | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | .snippet-header, .snippet-body { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 1em; | ||
+ | border: 2px solid; | ||
+ | border-radius: 5px; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | text-align: center; | ||
+ | -webkit-backface-visibility: hidden; /* Safari */ | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .snippet-header { | ||
+ | color: #fff; | ||
+ | } | ||
+ | .snippet-body { | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | |||
+ | .snippet.TL .snippet-body { color: var(--links-blue); } | ||
+ | |||
+ | .snippet.GL .snippet-body { color: var(--links-orange); } | ||
+ | |||
+ | .snippet.UCL .snippet-body { color: var(--links-cyan); } | ||
+ | |||
+ | .snippet.ICH .snippet-body { color: var(--handbook-color); } | ||
+ | |||
+ | .snippet.FS .snippet-body { color: var(--safe-color); } | ||
+ | |||
+ | .snippet.RW .snippet-body { color: var(--links-grey); } | ||
+ | |||
+ | .snippet.TL .snippet-header { | ||
+ | background-color: var(--links-blue); | ||
+ | border-color: var(--links-blue); | ||
+ | } | ||
+ | |||
+ | .snippet.GL .snippet-header { | ||
+ | background-color: var(--links-orange); | ||
+ | border-color: var(--links-orange); | ||
+ | } | ||
+ | |||
+ | .snippet.UCL .snippet-header { | ||
+ | background-color: var(--links-cyan); | ||
+ | border-color: var(--links-cyan); | ||
+ | } | ||
+ | |||
+ | .snippet.RW .snippet-header { | ||
+ | background-color: var(--links-grey); | ||
+ | border-color: var(--links-grey); | ||
+ | } | ||
+ | |||
+ | .snippet.ICH .snippet-header { | ||
+ | background-color: var(--handbook-color); | ||
+ | border-color: var(--handbook-color); | ||
+ | } | ||
+ | |||
+ | .snippet.FS .snippet-header { | ||
+ | background-color: var(--safe-color); | ||
+ | border-color: var(--safe-color); | ||
} | } | ||
</style> | </style> | ||
Line 143: | Line 242: | ||
<div id="hp-wrapper"> | <div id="hp-wrapper"> | ||
<div id="hp-heading"> | <div id="hp-heading"> | ||
− | <h1> | + | <h1 translate="no"> |
<span>LINKS</span> | <span>LINKS</span> | ||
<span>Community</span> | <span>Community</span> | ||
Line 150: | Line 249: | ||
<p class="hp-lead"><span>Strengthening links between technologies and society for European disaster resilience.</span></p> | <p class="hp-lead"><span>Strengthening links between technologies and society for European disaster resilience.</span></p> | ||
<div class="hp-button-wrapper"> | <div class="hp-button-wrapper"> | ||
− | <a class="hp-large-button" href=" | + | <a class="hp-large-button" href="/index.php/User_Guidance"> |
<div style="display: flex; align-items: center;"> | <div style="display: flex; align-items: center;"> | ||
<div> | <div> | ||
Line 156: | Line 255: | ||
</div> | </div> | ||
<div style="display: flex; flex-direction: column;"> | <div style="display: flex; flex-direction: column;"> | ||
− | <span> | + | <span>User Guidance</span> |
<span style="font-size: 50%; margin-left: .2em; line-height: 1em;"> | <span style="font-size: 50%; margin-left: .2em; line-height: 1em;"> | ||
Navigate through the LINKS<br>Community Center! | Navigate through the LINKS<br>Community Center! | ||
Line 167: | Line 266: | ||
<div id="hp-main"> | <div id="hp-main"> | ||
− | <form class="hp-search" onsubmit="search(event)"> | + | <div id="snippets"></div> |
− | <input id="hp-search-input" class="form-control form-control-lg" type="text" placeholder="Search the entire LCC" aria-label="Search"> | + | |
+ | <form class="hp-search form-inline w-100" onsubmit="search(event)"> | ||
+ | <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" | ||
+ | placeholder="Search the entire LCC" aria-label="Search"> | ||
+ | <button type="submit" class="btn btn-primary btn-lg" | ||
+ | style="background-color: var(--links-blue); border-color: var(--links-blue);">Search</button> | ||
</form> | </form> | ||
Line 213: | Line 317: | ||
<div class="hp-area-arrow">→</div> | <div class="hp-area-arrow">→</div> | ||
</a> | </a> | ||
− | |||
− | |||
− | + | <a class="hp-area yellow" href="https://links.communitycenter.eu/index.php/List_of_Crisis_Communication"> | |
− | + | <div class="hp-area-icon"> | |
− | + | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"> <path d="M78.6 17.005H17.4a3.436 3.436 0 0 0-3.4 3.4v41.312a3.367 3.367 0 0 0 3.34 3.4H54.8l13.6 13.9v-13.8h10.2a3.436 3.436 0 0 0 3.4-3.4V20.506a3.463 3.463 0 0 0-3.4-3.501ZM80 61.817c-.02.765-.64 1.38-1.4 1.4H66.4v10.9L56.23 63.72l-.59-.6H17.4a1.37 1.37 0 0 1-1.4-1.339V20.406c.02-.765.64-1.38 1.4-1.4h61.2c.8.03 1.43.7 1.4 1.5Z" /> <path d="M46.88 27h2.25v21h-2.25ZM50 53.25c0 1.105-.9 2-2 2s-2-.895-2-2 .9-2 2-2 2 .895 2 2Z" /> </svg> | |
− | + | </div> | |
− | + | <div class="hp-area-text"> | |
− | + | <h3>Crisis Communication</h3> | |
− | + | <p> | |
− | + | Recommendations for efficient risk communication in disasters. | |
− | + | </p> | |
− | + | </div> | |
− | + | <div class="hp-area-arrow">→</div> | |
− | + | </a> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </ | ||
− | </ | ||
</div> | </div> | ||
</div> | </div> | ||
Line 291: | Line 377: | ||
</div> | </div> | ||
− | + | <div id="hp-collections" class="container-fluid"> | |
− | < | + | <div class="row"> |
− | + | <div id="hp-resources" class="col-12 col-lg-6"> | |
− | + | <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources"> | |
− | + | <div class="hp-area-icon"> | |
− | + | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="res"><path d="M592 312h96v96h-96z"/></clipPath></defs><g clip-path="url(#res)" transform="translate(-592 -312)"><path d="m675 366-10-10h-24v-35a1 1 0 0 0-2 0v11h-24l-10 10 10 10h24v48h2v-24h24Zm-59.172-16-8-8 8-8H639v16ZM641 374v-16h23.172l8 8-8 8Z"/></g></svg> | |
+ | </div> | ||
+ | <div class="hp-area-text"> | ||
+ | <h3>Collection of Helpful Resources</h3> | ||
+ | <p> | ||
+ | Browse some interesting or relevant websites and apps. | ||
+ | </p> | ||
+ | </div> | ||
+ | </a> | ||
</div> | </div> | ||
− | <div class="hp-area-text"> | + | <div id="hp-networks" class="col-12 col-lg-6"> |
− | + | <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Overview_of_Networks"> | |
− | + | <div class="hp-area-icon"> | |
− | + | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="net"><path d="M244 176h96v96h-96z"/></clipPath></defs><g clip-path="url(#net)" transform="translate(-244 -176)"><path d="M326.8 215c-.8 0-1.5.1-2.3.3l-2.2-6.7c6.1-3.2 8.5-10.7 5.3-16.8-3.2-6.1-10.7-8.5-16.8-5.3-3.3 1.7-5.7 4.9-6.5 8.5l-8.8-.8c-.1-4.6-3.8-8.2-8.4-8.1-4.6.1-8.2 3.8-8.1 8.4 0 1.7.6 3.3 1.5 4.7l-11 10.9c-5.2-4.5-13.1-4-17.6 1.2-4.5 5.2-4.1 13.1 1.1 17.6 2.3 2 5.2 3.1 8.2 3.1h.9l2.7 14.4c-4.4 1.3-6.8 5.9-5.5 10.3 1.3 4.4 5.9 6.8 10.3 5.5 4.4-1.3 6.8-5.9 5.5-10.3l-.6-1.5 8.9-4.5c4.9 6.7 14.3 8.1 20.9 3.2 5.1-3.8 7.3-10.3 5.5-16.4l9.7-5.3c2.3 3.9 7.3 5.3 11.3 3 3.9-2.3 5.3-7.3 3-11.3-1.4-2.5-4.1-4.1-7-4.1Zm-16.4-8.9c.3-3.3 3.3-5.8 6.6-5.5 2.9.3 5.2 2.6 5.5 5.5-3.6 2.5-8.4 2.5-12.1 0Zm3.3-10.3c0-1.5 1.2-2.8 2.8-2.8 1.6 0 2.8 1.2 2.8 2.8 0 1.5-1.2 2.8-2.8 2.8-1.5 0-2.8-1.3-2.8-2.8Zm2.8-8.8c5.8 0 10.5 4.7 10.5 10.5 0 2.6-1 5.1-2.7 7.1-.6-2.3-2.3-4.3-4.5-5.3 1.9-1.8 2-4.8.2-6.8-1.8-1.9-4.8-2-6.8-.2s-2 4.8-.2 6.8l.2.2c-2.2 1-3.9 2.9-4.5 5.3-3.9-4.3-3.6-10.9.7-14.8 2-1.8 4.5-2.8 7.1-2.8Zm-6.7 21.1-8.1 15.3c-7.1-3.3-15.4-.6-19.2 6.2l-9.7-5.3c1.8-4.3 1-9.2-1.9-12.8l11-11c3.4 3 8.6 2.6 11.6-.9.9-1 1.5-2.2 1.8-3.5l8.8.8v.6c-.1 4.3 2.1 8.3 5.7 10.6Zm-23.9-14.9c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm1.4 3.3c1.7 0 3.1 1.2 3.4 2.9-2.1 1.4-4.7 1.4-6.8 0 .2-1.6 1.6-2.8 3.4-2.9Zm0-8.5c3.4 0 6.2 2.8 6.3 6.2 0 1.3-.4 2.6-1.2 3.7-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.3-8.7 1.1-.8 2.4-1.2 3.8-1.2Zm-36.5 31.5c0-5.8 4.7-10.5 10.5-10.5s10.5 4.7 10.5 10.5c0 2.6-1 5.1-2.7 7.1-.6-2.3-2.3-4.3-4.5-5.3 1.9-1.8 2-4.8.2-6.8s-4.8-2-6.8-.2c-1.9 1.8-2 4.8-.2 6.8l.2.2c-2.2 1-3.9 2.9-4.5 5.3-1.8-2-2.7-4.5-2.7-7.1Zm7.7-1.7c0-1.5 1.2-2.8 2.8-2.8 1.6 0 2.8 1.2 2.8 2.8 0 1.5-1.2 2.8-2.8 2.8-1.6 0-2.8-1.3-2.8-2.8Zm-3.3 10.3c.3-3.3 3.3-5.8 6.6-5.5 2.9.3 5.2 2.6 5.5 5.5-3.6 2.5-8.5 2.5-12.1 0Zm8.6 31.4c.3-1.9 2-3.2 3.9-2.9 1.5.2 2.7 1.4 2.9 2.9-2 1.3-4.7 1.3-6.8 0Zm2.1-6.3c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm6.4 4.7c-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.4-8.7 2.8-2 6.7-1.4 8.7 1.4 1.7 2.1 1.7 5.1.1 7.3Zm1-9.2c-1.5-1.7-3.7-2.7-6-2.7h-.4l-2.7-14.4c3.2-.8 6-2.8 7.7-5.6l9.7 5.3c-1.7 4.2-1.4 8.9.7 12.8l-9 4.6Zm14.6-1.2c.3-4.2 4-7.3 8.2-7 3.7.3 6.7 3.3 7 7-4.5 3.3-10.7 3.3-15.2 0Zm4-12.6c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6-3.6-1.6-3.6-3.6Zm13 11.1c-.7-3.1-2.9-5.6-5.8-6.8 2.4-2 2.7-5.5.7-7.9-2-2.4-5.5-2.7-7.9-.7-2.4 2-2.7 5.5-.7 7.9.2.3.5.5.7.7-2.9 1.2-5.1 3.7-5.8 6.8-5-5.2-4.8-13.4.4-18.4 5.2-5 13.4-4.8 18.4.4 4.8 5 4.8 13 0 18Zm4.2-15.2c-1.2-2.7-3.2-4.9-5.6-6.5l8.1-15.3c2.8 1.2 5.9 1.3 8.8.4l2.2 6.7c-3.3 1.9-4.9 5.8-3.8 9.4l-9.7 5.3Zm14.2-2.3c.3-1.9 2-3.2 3.9-2.9 1.5.2 2.7 1.4 2.9 2.9-2 1.3-4.7 1.3-6.8 0Zm2.1-6.3c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm6.4 4.7c-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.4-8.7 2.8-2 6.7-1.4 8.7 1.4 1.7 2.1 1.7 5.1.1 7.3Z"/></g></svg> | |
− | </ | + | </div> |
+ | <div class="hp-area-text"> | ||
+ | <h3>Collection of Networks</h3> | ||
+ | <p> | ||
+ | Communities and interest groups relevant for the context of social media in disaster management. | ||
+ | </p> | ||
+ | </div> | ||
+ | </a> | ||
</div> | </div> | ||
</div> | </div> | ||
− | </div | + | </div> |
<div id="hp-recent" class="container-fluid"> | <div id="hp-recent" class="container-fluid"> | ||
Line 321: | Line 422: | ||
</div> | </div> | ||
</div> | </div> | ||
− | </div></div></includeonly> | + | </div></div> |
+ | |||
+ | <script> | ||
+ | const maxAmount = 6; // maximum number of snippets | ||
+ | const snippets = [ | ||
+ | { | ||
+ | "title": "Are you overwhelmed by too many social media technologies?", | ||
+ | "body": "Visit our Technologies Library to find the technology you need.", | ||
+ | "action": "/index.php/List_of_Disaster_Community_Technologies", | ||
+ | "product": "TL", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Do you want to be prepared when disaster strikes?", | ||
+ | "body": "Learn from many use cases about social media and crowdsourcing.", | ||
+ | "action": "/index.php/List_of_Use_Cases", | ||
+ | "product": "UCL", | ||
+ | }, | ||
+ | { | ||
+ | "title": "How to protect children during disaster?", | ||
+ | "body": "Child friendly disaster risk reduction.", | ||
+ | "action": "/index.php/Feel_Safe", | ||
+ | "product": "FS", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Be successful with your social media engagement!", | ||
+ | "body": "Find a plan in our library and develop your own strategy!", | ||
+ | "action": "/index.php/List_of_Guidelines?do=JTdCJTIyZmlsdGVyJTIyJTNBJTdCJTIyQ292ZXJzJTIwVGhlbWF0aWMlMjIlM0ElN0IlMjJDcmlzaXMlMjBjb21tdW5pY2F0aW9uJTIyJTNBdHJ1ZSUyQyUyMlNvY2lhbCUyME1lZGlhJTIwU3RyYXRlZ3klMjIlM0F0cnVlJTdEJTdEJTdE", | ||
+ | "product": "GL", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Do you know how to engage with vulnerable groups?", | ||
+ | "body": "In this helpful guide we walk you through a few actions that can be taken.", | ||
+ | "action": "/index.php/Including_Citizens_Handbook#making_information_accessible", | ||
+ | "product": "ICH", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Want to advance your organization’s use of social media?", | ||
+ | "body": "Try the Resilience Wheel.", | ||
+ | "action": "/index.php/Resilience_Wheel", | ||
+ | "product": "RW", | ||
+ | }, | ||
+ | { | ||
+ | "title": "Do you struggle with managing volunteers in disasters?", | ||
+ | "body": "Take part in the course on mobilizing volunteers.", | ||
+ | "action": "/index.php/Including_Citizens_Handbook#mobilizing_volunteers", | ||
+ | "product": "ICH", | ||
+ | }, | ||
+ | ]; | ||
+ | const container = document.getElementById('snippets'); | ||
+ | |||
+ | // Fisher-Yates shuffling algorithm | ||
+ | const shuffleArray = (array) => { | ||
+ | for (let i = array.length - 1; i > 0; i--) { | ||
+ | const j = Math.floor(Math.random() * (i + 1)); | ||
+ | [array[i], array[j]] = [array[j], array[i]]; | ||
+ | } | ||
+ | return array; | ||
+ | }; | ||
+ | |||
+ | const indices = Array.from({ length: snippets.length }, (_, index) => index); | ||
+ | |||
+ | // Array of randomly selected snippets (by index) | ||
+ | // TODO: Make sure there is at least one snippet per product. | ||
+ | let selection = shuffleArray(indices); | ||
+ | if (selection.length > maxAmount) selection = selection.slice(0, maxAmount); | ||
+ | |||
+ | for (const index of selection) { | ||
+ | const snippet = snippets[index]; | ||
+ | let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">'; | ||
+ | el += '<div class="snippet-inner">'; | ||
+ | el += '<div class="snippet-header">' + snippet.title + '</div>'; | ||
+ | el += '<div class="snippet-body">' + snippet.body + '</div>'; | ||
+ | el += '</div></a>'; | ||
+ | container.innerHTML += el; | ||
+ | } | ||
+ | </script> | ||
+ | </includeonly> |
Revision as of 14:36, 10 January 2024
Second version of the LINKS Community Center homepage.
Do not modify!