|
|
(50 intermediate revisions by 2 users 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> |
− | :root {
| |
− | --compass-color: #C31980;
| |
− | --handbook-color: #C2902D;
| |
− | --safe-color: #80C319;
| |
− | }
| |
− | #hp-wrapper {
| |
− | --hp-border: 1px solid rgba(0, 0, 0, .5);
| |
− | font-family: 'Open Sans';
| |
− | }
| |
− | #hp-wrapper h1, #hp-wrapper h2, #hp-wrapper h3 {
| |
− | font-family: 'Raleway';
| |
− | font-weight: 300;
| |
− | letter-spacing: .06em;
| |
− | }
| |
− | #hp-heading {
| |
− | padding: 1em;
| |
− | margin-bottom: 4em;
| |
− | background:
| |
− | url(/index.php?title=Special:Redirect/file/Links-logo-network.png) top -10vh right -5vw / 50% no-repeat,
| |
− | linear-gradient(125deg, #FFFFFF 0%, #222222 100%),
| |
− | linear-gradient(200deg, #d5dde3 0%, #d5dde3 50%, #acbac8 calc(50% + 1px), #acbac8 60%, #5d758c calc(60% + 1px), #5d758c 75%, #415262 calc(75% + 1px), #415262 100%),
| |
− | linear-gradient(113deg, #d5dde3 0%, #d5dde3 40%, #acbac8 calc(40% + 1px), #acbac8 50%, #5d758c calc(50% + 1px), #5d758c 70%, #415262 calc(70% + 1px), #415262 100%);
| |
− | background-blend-mode: multiply, overlay, overlay, normal;
| |
− | clip-path: inset(0 100% 100% 0);
| |
− | transition: all 500ms ease-in-out;
| |
− | }
| |
− | .loaded #hp-heading { clip-path: inset(0); }
| |
− | #hp-heading h1 { font-size: 3.4em; margin-bottom: .5em; color: var(--links-grey); }
| |
− | #hp-heading h1 span {
| |
− | display: block;
| |
− | white-space: nowrap;
| |
− | opacity: 0;
| |
− | transform: translateX(-1em);
| |
− | transition: all 500ms ease-in-out;
| |
− | }
| |
− | .loaded #hp-heading h1 span { opacity: .95; transform: translateX(0); }
| |
− | #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; }
| |
− | #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
| |
− | #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
| |
− | #hp-heading .hp-lead { font-size: 1.4em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; }
| |
− | .loaded #hp-heading .hp-lead { opacity: .95; }
| |
− | .hp-button-wrapper { text-align: left; }
| |
− | .hp-large-button {
| |
− | display: inline-block;
| |
− | background-color: var(--links-grey);
| |
− | color: #C31980;
| |
− | border: 2px solid currentColor;
| |
− | font-size: 1.3em;
| |
− | padding: 0 .5em;
| |
− | opacity: 0;
| |
− | transition: opacity 500ms ease-in-out 1300ms, color 500ms;
| |
− | text-decoration: none;
| |
− | cursor: pointer;
| |
− | background-color: rgba(255, 255, 255, .4);
| |
− | border-radius: 5px;
| |
− | }
| |
− | .hp-large-button svg { fill: #C31980; height: 4em; transition: fill 500ms; }
| |
− | .hp-large-button:hover { text-decoration: none; color: var(--links-blue); }
| |
− | .hp-large-button:hover svg { fill: var(--links-blue); }
| |
− | .loaded .hp-large-button { opacity: 1; }
| |
− | .hp-search { margin-bottom: 4em; }
| |
− | .hp-areas { margin-bottom: 8em; }
| |
− | .hp-areas *, #hp-collections *, #hp-products * { transition: all 400ms ease-in-out; }
| |
− | #hp-collections, #hp-products { border-top: var(--hp-border); }
| |
− | .hp-areas h2 { text-align: center; margin-bottom: 1.5em; }
| |
− | .hp-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
| |
− | .hp-area h3 { text-align: center; }
| |
− | .hp-area:hover { text-decoration: none; }
| |
− | .hp-area:hover h3 { font-weight: 700 !important; }
| |
− | .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
| |
− | .hp-area-icon svg { width: 100px; height: 100px; }
| |
− | .hp-area-text { flex: 1 1 75%; }
| |
− | .hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; }
| |
− | .hp-area-arrow { display: none; }
| |
− | .hp-compass {
| |
− | border-top: var(--hp-border);
| |
− | border-bottom: var(--hp-border);
| |
− | padding: 2em 1em;
| |
− | display: flex;
| |
− | justify-content: center;
| |
− | }
| |
− | #hp-resources, #hp-networks, #hp-feel-safe, #hp-handbook, #hp-wheel { padding: 2em 1em; }
| |
− | #hp-resources .hp-area, #hp-networks .hp-area,
| |
− | #hp-feel-safe .hp-area, #hp-handbook .hp-area, #hp-wheel .hp-area { margin-bottom: 0 !important; }
| |
− | #hp-recent h3 { margin-bottom: 1em; }
| |
− | #forum-topics { padding: 2em 1em; }
| |
− | #hp-changes { border-top: var(--hp-border); padding: 2em 1em; }
| |
− | .blue * {
| |
− | color: var(--links-blue);
| |
− | border-color: var(--links-blue);
| |
− | fill: var(--links-blue);
| |
− | }
| |
− | .orange * {
| |
− | color: var(--links-orange);
| |
− | border-color: var(--links-orange);
| |
− | fill: var(--links-orange);
| |
− | }
| |
− | .grey * {
| |
− | color: var(--links-grey);
| |
− | border-color: var(--links-grey);
| |
− | fill: var(--links-grey);
| |
− | }
| |
− | .cyan * {
| |
− | color: var(--links-cyan);
| |
− | border-color: var(--links-cyan);
| |
− | fill: var(--links-cyan);
| |
− | }
| |
− | .yellow * {
| |
− | color: var(--ccl-color);
| |
− | border-color: var(--ccl-color);
| |
− | fill: var(--ccl-color);
| |
− | }
| |
| | | |
− | /* Quick fix for removed Compass. Delete when Compass is restored. */
| + | <!-- STYLES BEGIN --> |
− | #forum-topics { border-top: var(--hp-border); }
| + | <link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/main/styles.css"> |
| + | <!-- STYLES END --> |
| | | |
− | @media screen and (min-width: 992px) {
| + | <!-- HEADING BEGIN --> |
− | #hp-heading { padding: 3em; margin-bottom: 4em; }
| + | <div id="hp-wrapper"> |
− | #hp-heading h1 { font-size: 5em; }
| + | <div id="hp-heading"> |
− | #hp-heading .hp-lead { max-width: 50%; font-size: 2em; }
| + | <h1 translate="no"> |
− | .hp-button-wrapper { text-align: left; }
| + | <span>LINKS</span> |
− | .hp-large-button { font-size: 2em; }
| + | <span>Community</span> |
− | #hp-main { width: 75%; margin: auto; }
| + | <span>Center</span> |
− | .hp-search { margin-bottom: 8em; }
| + | </h1> |
− | .hp-area { flex-direction: row; }
| + | <p class="hp-lead"><span>Strengthening links between technologies and society for European disaster resilience.</span></p> |
− | .hp-area h3 { text-align: left; }
| + | <div class="hp-button-wrapper"> |
− | .hp-areas h2 { margin-bottom: 2em; }
| + | <a class="hp-large-button" href="/index.php/User_Guidance"> |
− | .hp-area-icon svg { width: 130px; height: 130px; }
| + | <div style="display: flex; align-items: center;"> |
− | .hp-area-arrow { display: block; flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; }
| + | <div> |
− | .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
| + | <img src="https://www.safetyinnovation.center/lcc/main/img/svg-1.svg"> |
− | .hp-compass { padding: 5em; }
| + | </div> |
− | #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
| + | <div style="display: flex; flex-direction: column;"> |
− | #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
| + | <span>User Guidance</span> |
− | .hp-compass .hp-area-text h2 { font-size: 3em; }
| + | <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">Navigate through the LINKS<br>Community Center!</span> |
− | .hp-compass .hp-area-text p { font-size: 1.8em; font-weight: 300 !important; }
| + | </div> |
− | .hp-compass svg { width: 200px; height: 200px; }
| |
− | | |
− | /* Quick fix for removed Compass. Delete when Compass is restored. */
| |
− | #hp-resources {border-right: 0 none; }
| |
− | #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;
| |
− | text-align: center;
| |
− | -webkit-backface-visibility: hidden; /* Safari */
| |
− | backface-visibility: hidden;
| |
− | }
| |
− | .snippet-header {
| |
− | color: #fff;
| |
− | }
| |
− | .snippet-body {
| |
− | transform: rotateY(180deg);
| |
− | }
| |
− | /* .snippet-header {
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | border-bottom: 2px solid;
| |
− | padding: .75em;
| |
− | text-align: center;
| |
− | transition: all 250ms;
| |
− | color: #fff;
| |
− | }
| |
− | .snippet-body {
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | padding: 1em;
| |
− | transition: all 250ms;
| |
− | } */
| |
− | | |
− | .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);
| |
− | }
| |
− | | |
− | /* .snippet:hover .snippet-header { background-color: #fff; }
| |
− | .snippet.TL:hover .snippet-header { color: var(--links-blue); }
| |
− | .snippet.RW:hover .snippet-header { color: var(--links-grey); }
| |
− | .snippet.GL:hover .snippet-header { color: var(--links-orange); }
| |
− | .snippet.UCL:hover .snippet-header { color: var(--links-cyan); }
| |
− | .snippet.ICH:hover .snippet-header { color: var(--handbook-color); }
| |
− | .snippet.FS:hover .snippet-header { color: var(--safe-color); } */
| |
− | </style>
| |
− | | |
− | <script>
| |
− | function search(event) {
| |
− | event.preventDefault();
| |
− | const searchString = document.getElementById('hp-search-input').value;
| |
− | window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1');
| |
− | }
| |
− | </script>
| |
− | | |
− | <div id="hp-wrapper">
| |
− | <div id="hp-heading">
| |
− | <h1>
| |
− | <span>LINKS</span>
| |
− | <span>Community</span>
| |
− | <span>Center</span>
| |
− | </h1>
| |
− | <p class="hp-lead"><span>Strengthening links between technologies and society for European disaster resilience.</span></p>
| |
− | <div class="hp-button-wrapper">
| |
− | <a class="hp-large-button" href="/index.php/User_Guidance">
| |
− | <div style="display: flex; align-items: center;">
| |
− | <div>
| |
− | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="prefix__prefix__Livello_1" x="0" y="0" version="1.1" viewBox="0 0 128 128"><defs id="prefix__prefix__defs43"><path id="prefix__prefix__rect345" d="M977.382 473.479h642.714v494.395H977.382z"/></defs><style id="style2" type="text/css">.prefix__prefix__st0{fill:#fff}.prefix__prefix__st1,.prefix__prefix__st2{fill:currentColor}</style><g id="prefix__prefix__g38" transform="translate(-585.75 -578.105)"><ellipse id="prefix__prefix__circle4" cx="649.905" cy="642.245" stroke-width=".116" class="prefix__prefix__st0" rx="49.012" ry="48.98"/><path id="prefix__prefix__path6" stroke-width=".116" d="M649.905 587.962c-30 0-54.32 24.303-54.32 54.283s24.32 54.284 54.32 54.284 54.32-24.303 54.32-54.284c-.002-29.98-24.321-54.283-54.32-54.283zm0 101.565c-26.13 0-47.313-21.169-47.313-47.282 0-26.113 21.183-47.281 47.313-47.281 26.13 0 47.313 21.168 47.313 47.281s-21.183 47.282-47.313 47.282z" class="prefix__prefix__st1"/><g id="prefix__prefix__g16" transform="matrix(.11647 0 0 .11639 574.077 567.372)"><path id="prefix__prefix__polygon8" d="M649.51 640.66l38.15 143.56 291.19 185.79-185.78-291.2z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon10" d="M650.21 641.36l-38.15-143.55-291.19-185.79 185.79 291.2z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon12" d="M650.24 640.25L506.68 678.4 320.9 969.6l291.19-185.79z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon14" d="M649.97 640.52l143.56-38.15 185.79-291.19-291.2 185.78z" class="prefix__prefix__st2"/></g><path id="prefix__prefix__path18" stroke-width=".116" d="M649.905 603.864c-21.21 0-38.406 17.184-38.406 38.38 0 21.197 17.195 38.38 38.406 38.38 21.21 0 38.405-17.183 38.405-38.38 0-21.196-17.194-38.38-38.405-38.38zm0 74.706c-20.075 0-36.35-16.263-36.35-36.326s16.274-36.325 36.35-36.325 36.35 16.263 36.35 36.326-16.275 36.325-36.35 36.325z" class="prefix__prefix__st1"/><g id="prefix__prefix__g28" transform="matrix(.11647 0 0 .11639 574.077 567.372)"><path id="prefix__prefix__polygon20" d="M649.16 642.83l151.75 88.04 398.36-88.04-398.36-88.03z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon22" d="M650.33 642.83L498.58 554.8l-398.35 88.03 398.35 88.04z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon24" d="M649.43 641.88L561.4 793.64l88.03 398.35 88.03-398.35z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon26" d="M649.43 642.33l88.03-151.75-88.03-398.36-88.03 398.36z" class="prefix__prefix__st2"/></g><ellipse id="prefix__prefix__circle30" cx="649.769" cy="642.189" stroke-width=".116" class="prefix__prefix__st0" rx="13.741" ry="13.731"/></g></svg>
| |
− | </div>
| |
− | <div style="display: flex; flex-direction: column;">
| |
− | <span>User Guidance</span>
| |
− | <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">
| |
− | Navigate through the LINKS<br>Community Center!
| |
− | </span>
| |
− | </div>
| |
− | </div>
| |
− | </a>
| |
− | </div>
| |
| </div> | | </div> |
| + | </a> |
| + | </div> |
| + | </div> |
| + | <div id="hp-main"> |
| + | <!-- HEADING END --> |
| | | |
− | <div id="hp-main">
| + | <!-- SNIPPETS BEGIN --> |
− | <div id="snippets" style="display:none"></div>
| + | <div id="snippets"></div> |
| + | <link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/snippets/styles.css"> |
| + | <script src="https://www.safetyinnovation.center/lcc/snippets/script.js"></script> |
| + | <!-- SNIPPETS END --> |
| | | |
− | <form class="hp-search form-inline w-100" onsubmit="search(event)">
| + | <!-- SEARCH BEGIN --> |
− | <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text"
| + | <script src="https://www.safetyinnovation.center/lcc/search/script.js"></script> |
− | placeholder="Search the entire LCC" aria-label="Search">
| + | <form class="hp-search form-inline w-100" onsubmit="search(event)"> |
− | <button type="submit" class="btn btn-primary btn-lg"
| + | <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" placeholder="Search the entire LCC" aria-label="Search"> |
− | style="background-color: var(--links-blue); border-color: var(--links-blue);">Search</button>
| + | <button type="submit" class="btn btn-primary btn-lg" style="background-color: var(--links-blue); border-color: var(--links-blue);"> |
− | </form>
| + | Search |
| + | </button> |
| + | </form> |
| + | <!-- SEARCH END --> |
| | | |
| <div class="hp-areas"> | | <div class="hp-areas"> |
Line 430: |
Line 180: |
| </div> | | </div> |
| </div> | | </div> |
− |
| |
− | <!--kie: comment out until it is available.-->
| |
− | <!-- <div class="hp-compass cyan">
| |
− | <div class="d-flex align-items-center">
| |
− | <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="c"><path d="M199 603h96v96h-96z"/></clipPath></defs><g clip-path="url(#c)" transform="translate(-199 -603)"><path d="m277.516 645.583 2.136.654c-2.126-14.416-13.438-25.741-27.852-27.884l.691 2.143a31.072 31.072 0 0 1 25.025 25.087ZM214.36 646.146l2.14-.646a31.07 31.07 0 0 1 25.02-25l.655-2.139c-14.368 2.147-25.652 13.42-27.815 27.785ZM241.386 681.481a31.073 31.073 0 0 1-24.87-24.881l-2.151-.7a33.075 33.075 0 0 0 27.679 27.727ZM279.654 655.746l-2.141.691a31.072 31.072 0 0 1-25.032 25.068l-.691 2.143c14.424-2.14 25.744-13.475 27.864-27.902Z"/><path d="m274.8 647.888-15.134-4.924 4.837-9.38-9.431 4.806-4.872-15.208-2-6.2-1.2-3.9-1.3 4-1.9 6.2-4.784 15.134-9.416-4.832 4.82 9.429-15.12 4.776-6.3 1.9-4 1.3 4 1.3 6.1 2 15.248 4.8-4.848 9.405 9.386-4.947L243.7 678.8l1.9 6.2 1.3 4 1.3-4 2-6.2 4.9-15.3 9.4 4.9-4.828-9.351 15.028-4.859 6.2-2 4-1.3-3.9-1.1Zm-.714 4.4-15.341 4.954-2.01-3.893a9.925 9.925 0 0 1-.951 2.519l4.045 7.832-7.723-4.027a9.93 9.93 0 0 1-2.361 1.027l3.555 1.854-5 15.629-1.382 4.283-1.308-4.271-4.925-15.595 3.594-1.894a9.95 9.95 0 0 1-2.36-1.017l-7.73 4.074 4.051-7.863a9.91 9.91 0 0 1-.959-2.505l-2 3.885-15.557-4.89-4.194-1.375 4.37-1.315 15.441-4.877 1.967 3.847a9.938 9.938 0 0 1 .981-2.475l-4.088-8 8.016 4.113a9.958 9.958 0 0 1 2.523-.953l-3.92-2.013 4.894-15.474 1.27-4.148 1.316 4.072 4.966 15.518-4.011 2.044a9.922 9.922 0 0 1 2.53.955l8.1-4.125-4.147 8.043c.433.78.76 1.614.971 2.481l2.033-3.943 15.475 5.035 3.883 1.192Z"/><path d="M247 644.088a7 7 0 1 0 7 7 7.009 7.009 0 0 0-7-7Zm0 12a5 5 0 1 1 5-5 5.007 5.007 0 0 1-5 5.003Z"/></g></svg>
| |
− | </div>
| |
− | <div class="hp-area-text">
| |
− | <h2>Want to be guided?</h2>
| |
− | <p>
| |
− | Try the compass!
| |
− | </p>
| |
− | </div>
| |
− | </div>
| |
− | </div> -->
| |
| | | |
| <div id="hp-recent" class="container-fluid"> | | <div id="hp-recent" class="container-fluid"> |
Line 462: |
Line 197: |
| </div></div> | | </div></div> |
| | | |
− | <script>
| + | <!-- BEGIN SAFETY.WIDGET --> |
− | const maxAmount = 6; // maximum number of snippets
| + | <link rel="stylesheet" href="https://www.safetyinnovation.center/widget/styles.css"> |
− | const snippets = [
| + | <div id="safety-widget"></div> |
− | {
| + | <script src="https://www.safetyinnovation.center/widget/script.js"></script> |
− | "title": "Are you overwhelmed by too many social media technologies?",
| + | <!-- END SAFETY.WIDGET --> |
− | "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 over 30 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": "Look at our use cases on how to engage them.",
| |
− | "action": "/index.php/List_of_Use_Cases?do=JTdCJTIyZmlsdGVyJTIyJTNBJTdCJTIyVXNlJTIwY2FzZXMlMjB0aGVtYXRpYyUyMiUzQSU3QiUyMk1vYmlsaXNpbmclMjBWb2x1bnRlZXJzJTIyJTNBdHJ1ZSU3RCU3RCU3RA==",
| |
− | "product": "UCL",
| |
− | },
| |
− | ];
| |
− | 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> | | </includeonly> |