Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
 
(53 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: 1px solid currentColor;
+
             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 58: Line 64:
 
         .hp-areas { margin-bottom: 8em; }
 
         .hp-areas { margin-bottom: 8em; }
 
         .hp-areas *, #hp-collections *, #hp-products * { transition: all 400ms ease-in-out; }
 
         .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-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 { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
Line 75: Line 82:
 
             justify-content: center;
 
             justify-content: center;
 
         }
 
         }
−
         #hp-resources, #hp-networks { padding: 2em 1em; }
+
         #hp-resources, #hp-networks, #hp-feel-safe, #hp-handbook, #hp-wheel { padding: 2em 1em; }
−
         #hp-resources { border-top: var(--hp-border); }
+
         #hp-resources .hp-area, #hp-networks .hp-area,
−
         #hp-resources .hp-area, #hp-networks .hp-area { margin-bottom: 0 !important; }
+
         #hp-feel-safe .hp-area, #hp-handbook .hp-area, #hp-wheel .hp-area { margin-bottom: 0 !important; }
 
         #hp-recent h3 { margin-bottom: 1em; }
 
         #hp-recent h3 { margin-bottom: 1em; }
 
         #forum-topics { padding: 2em 1em; }
 
         #forum-topics { padding: 2em 1em; }
Line 100: 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 106: Line 118:
  
 
         @media screen and (min-width: 992px) {
 
         @media screen and (min-width: 992px) {
−
             #hp-heading { padding: 3em; margin-bottom: 8em; }
+
             #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 120: Line 132:
 
             .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
 
             .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
 
             .hp-compass { padding: 5em; }
 
             .hp-compass { padding: 5em; }
−
            #hp-collections, #hp-products { border-top: var(--hp-border); }
 
−
            #hp-resources { border-top: 0 none; }
 
 
             #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
 
             #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
 
             #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
 
             #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
Line 131: 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 144: 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 151: Line 249:
 
             <p class="hp-lead"><span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span></p>
 
             <p class="hp-lead"><span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span></p>
 
             <div class="hp-button-wrapper">
 
             <div class="hp-button-wrapper">
−
                 <a class="hp-large-button" href="https://links.communitycenter.eu/index.php/Compass">
+
                 <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 157: Line 255:
 
                         </div>
 
                         </div>
 
                         <div style="display: flex; flex-direction: column;">
 
                         <div style="display: flex; flex-direction: column;">
−
                             <span>Compass</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 168: 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 214: Line 317:
 
                     <div class="hp-area-arrow">&rarr;</div>
 
                     <div class="hp-area-arrow">&rarr;</div>
 
                 </a>
 
                 </a>
−
            </div>
 
−
        </div>
 
  
−
        <div id="hp-collections" class="container-fluid">
+
                 <a class="hp-area yellow" href="https://links.communitycenter.eu/index.php/List_of_Crisis_Communication">
−
            <div class="row">
+
                    <div class="hp-area-icon">
−
                 <div id="hp-resources" class="col-12 col-lg-6">
+
                         <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>
−
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
+
                    </div>
−
                        <div class="hp-area-icon">
+
                    <div class="hp-area-text">
−
                            <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>
+
                        <h3>Crisis Communication</h3>
−
                        </div>
+
                        <p>
−
                        <div class="hp-area-text">
+
                            Recommendations for&nbsp;efficient risk communication in&nbsp;disasters.
−
                            <h3>Collection of Helpful Resources</h3>
+
                        </p>
−
                            <p>
+
                    </div>
−
                                Browse some interesting or&nbsp;relevant websites and&nbsp;apps.​
+
                     <div class="hp-area-arrow">&rarr;</div>
−
                            </p>
+
                 </a>
−
                        </div>
 
−
                    </a>
 
−
                </div>
 
−
                <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&nbsp;interest groups relevant for&nbsp;the context of&nbsp;social media in&nbsp;disaster management.​
 
−
                            </p>
 
−
                        </div>
 
−
                     </a>
 
−
                 </div>
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 257: Line 342:
 
                         <div class="hp-area-text">
 
                         <div class="hp-area-text">
 
                             <h3>Feel Safe</h3>
 
                             <h3>Feel Safe</h3>
−
                             <p>
+
                             <!-- <p>
 
                                 Feel Safe.
 
                                 Feel Safe.
−
                             </p>
+
                             </p> -->
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
Line 270: Line 355:
 
                         <div class="hp-area-text">
 
                         <div class="hp-area-text">
 
                             <h3>Including Citizens Handbook</h3>
 
                             <h3>Including Citizens Handbook</h3>
−
                             <p>
+
                             <!-- <p>
 
                                 Including Citizens Handbook.
 
                                 Including Citizens Handbook.
−
                             </p>
+
                             </p> -->
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
Line 283: Line 368:
 
                         <div class="hp-area-text">
 
                         <div class="hp-area-text">
 
                             <h3>Resilience Wheel</h3>
 
                             <h3>Resilience Wheel</h3>
−
                             <p>
+
                             <!-- <p>
 
                                 Resilience Wheel.
 
                                 Resilience Wheel.
−
                             </p>
+
                             </p> -->
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
Line 292: Line 377:
 
         </div>
 
         </div>
  
−
 
+
         <div id="hp-collections" class="container-fluid">
−
         <!--kie: comment out until it is available.-->
+
            <div class="row">
−
        <!-- <div class="hp-compass cyan">
+
                <div id="hp-resources" class="col-12 col-lg-6">
−
            <div class="d-flex align-items-center">
+
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
−
                <div class="hp-area-icon">
+
                        <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>
+
                            <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&nbsp;relevant websites and&nbsp;apps.
 +
                            </p>
 +
                        </div>
 +
                    </a>
 
                 </div>
 
                 </div>
−
                 <div class="hp-area-text">
+
                 <div id="hp-networks" class="col-12 col-lg-6">
−
                    <h2>Want to be guided?</h2>
+
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Overview_of_Networks">
−
                    <p>
+
                        <div class="hp-area-icon">
−
                         Try the compass!
+
                            <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>
−
                     </p>
+
                        </div>
 +
                        <div class="hp-area-text">
 +
                            <h3>Collection of Networks</h3>
 +
                            <p>
 +
                                Communities and&nbsp;interest groups relevant for&nbsp;the context of&nbsp;social media in&nbsp;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 322: 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>

Latest revision as of 14:36, 10 January 2024

Second version of the LINKS Community Center homepage.
Do not modify!

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:Homepage&oldid=12628"