Difference between revisions of "Widget:Homepage"
From LINKS Community Center
(47 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 209: | Line 313: | ||
<p> | <p> | ||
Practical use cases for social media and crowdsourcing in disasters. | Practical use cases for social media and crowdsourcing in disasters. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="hp-area-arrow">→</div> | ||
+ | </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> | </p> | ||
</div> | </div> | ||
Line 290: | Line 407: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div id="hp-recent" class="container-fluid"> | <div id="hp-recent" class="container-fluid"> | ||
Line 320: | 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!