Widget: Homepage: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(81 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<!DOCTYPE html>
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude>
<html lang="en">
<includeonly>


<head>
<!-- STYLES BEGIN -->
    <meta charset="UTF-8">
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/homepage/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- STYLES END -->
    <title>Document</title>
    <style>
        :root {
            --links-blue: #1980c3;
            --links-cyan: #34b8b8;
            --links-grey: #415262;
            --links-orange: #ee7802;
            --ccl-color: #B89F21;
        }


        #chat-button {
    <!-- HP BEGIN -->
            position: fixed;
    <div id="hp-wrapper">
            right: 10px;
            bottom: 10px;
            border-radius: 5px;
            border: 1px solid var(--links-grey);
            user-select: none;
            cursor: pointer;
            background-color: #fff;
        }


         #chat-window {
         <!-- HEADING BEGIN -->
             position: fixed;
        <div id="hp-heading">
             right: 10px;
            <h1 translate="no">
            bottom: 70px;
                <span>LINKS</span>
            background-color: #f8f9fa;
                <span>Community</span>
            width: 20vw;
                <span>Center</span>
            height: 50vh;
            </h1>
             border-radius: 15px;
             <p class="hp-lead">
             border: 2px solid var(--links-blue);
                <span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span>
             overflow: hidden;
            </p>
            box-shadow: -5px 5px 5px 5px rgb(0 0 0 / 10%);
             <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>
        <!-- HEADING END -->
 
        <!-- MAIN BEGIN -->
        <div id="hp-main">
   
             <!-- SNIPPETS BEGIN -->
            <div id="snippets"></div>
            <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/snippets/styles.css">
            <script src="https://assets.links.communitycenter.eu/v2/links/snippets/script.js"></script>
            <!-- SNIPPETS END -->
       
             <!-- SEARCH BEGIN -->
                <script src="https://assets.links.communitycenter.eu/v2/links/search"></script>
                <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>
             <!-- SEARCH END -->
 
            <!-- AREAS BEGIN -->
            <div class="hp-areas">
                <h2>Social Media and Crowdsourcing Libraries</h2>
 
                <!-- LINK -->
                <a class="hp-area blue" href="https://links.communitycenter.eu/index.php/List_of_Disaster_Community_Technologies">
                    <div class="hp-area-icon">
                        <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=1-dct_list.svg">
                    </div>
                    <div class="hp-area-text">
                        <h3>Technologies</h3>
                        <p>Software for&nbsp;interaction with, within or&nbsp;among communities in&nbsp;case of a&nbsp;disaster and for&nbsp;analysis of&nbsp;these interactions.</p>
                    </div>
                    <div class="hp-area-arrow">&rarr;</div>
                </a>


        #chat-window-controls {
                <!-- LINK -->
            padding: 5px;
                <a class="hp-area orange" href="https://links.communitycenter.eu/index.php/List_of_Guidelines">
            display: flex;
                    <div class="hp-area-icon">
            justify-content: space-between;
                        <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=2-gl_list.svg">
        }
                    </div>
                    <div class="hp-area-text">
                        <h3>Guidelines</h3>
                        <p>Expert guidelines for&nbsp;usage of&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
                    </div>
                    <div class="hp-area-arrow">&rarr;</div>
                </a>


        #chat-window-controls button {
                <!-- LINK -->
            font-size: 1.2rem;
                <a class="hp-area cyan" href="https://links.communitycenter.eu/index.php/List_of_Use_Cases">
            border-radius: 2.5rem;
                    <div class="hp-area-icon">
            border: 1px solid var(--links-blue);
                        <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=3-uc_list.svg">
            color: #fff;
                    </div>
            background-color: var(--links-blue);
                    <div class="hp-area-text">
             cursor: pointer;
                        <h3>Use Cases</h3>
        }
                        <p>Practical use cases for&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
                    </div>
                    <div class="hp-area-arrow">&rarr;</div>
                </a>
               
                <!-- LINK -->
                <a class="hp-area yellow" href="https://links.communitycenter.eu/index.php/List_of_Crisis_Communication">
                    <div class="hp-area-icon">
                        <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=4-cc_list.svg">
                    </div>
                    <div class="hp-area-text">
                        <h3>Crisis Communication</h3>
                        <p>Recommendations for&nbsp;efficient risk communication in&nbsp;disasters.</p>
                    </div>
                    <div class="hp-area-arrow">&rarr;</div>
                </a>
               
             </div>
            <!-- AREAS END -->


         .maximized-chat {
         </div>
            width: auto !important;
        <!-- MAIN END -->
            height: auto !important;
               
            left: 10px;
        <!-- PRODUCTS BEGIN -->
             top: 10px;
        <div id="hp-products" class="container-fluid">
        }
             <div class="row">


        .closed-chat {
                <!-- LINK -->
            display: none;
                <div id="hp-feel-safe" class="col-12 col-lg-4">
            pointer-events: none;
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Feel_Safe">
        }
                        <div class="hp-area-icon">
                            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-0.svg">
                        </div>
                        <div class="hp-area-text">
                            <h3>Feel Safe</h3>
                            <!-- <p>Feel Safe.</p> -->
                        </div>
                    </a>
                </div>
                       
                <!-- LINK -->
                <div id="hp-handbook" class="col-12 col-lg-4">
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Including_Citizens_Handbook_-_Accessibility">
                        <div class="hp-area-icon">
                            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-1.svg">
                        </div>
                        <div class="hp-area-text">
                            <h3>Including Citizens Handbook</h3>
                            <!-- <p>Including Citizens Handbook.</p> -->
                        </div>
                    </a>
                </div>


        #chat-window.maximized-chat #resize-chat {
                <!-- LINK -->
            transform: rotate(180deg);
                <div id="hp-wheel" class="col-12 col-lg-4">
        }
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Resilience_Wheel">
    </style>
                        <div class="hp-area-icon">
</head>
                            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-2.svg">
                        </div>
                        <div class="hp-area-text">
                            <h3>Resilience Wheel</h3>
                            <!-- <p>Resilience Wheel.</p> -->
                        </div>
                    </a>
                </div>


<body>
    <div id="chat-wrapper">
        <div id="chat-window" class="closed-chat">
            <div id="chat-window-controls">
                <button id="resize-chat" style="visibility:hidden">&larr;</button>
                <button id="close-chat">&times;</button>
             </div>
             </div>
            <div id="chat-window-content">
        </div>
                 <div style="padding: 1rem; text-align: center;">
        <!-- PRODUCTS END -->
                     <img src="https://synergiesproject.eu/wp-content/uploads/2024/04/synergies_project_logo-600x204.png"
       
                         style="height: 3rem;">
        <!-- COLLECTIONS BEGIN -->
                    <br><br>
        <div id="hp-collections" class="container-fluid">
                    If you want to know more about the evolution of the LINKS Community Center,
            <div class="row">
                    have a closer look at SYNERGIES.<br>
 
                    <br>
                <!-- LINK -->
                     <a href="https://synergiesproject.eu/" target="_blank">synergiesproject.eu</a>
                 <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">
                            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-3.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>
                       
                <!-- LINK -->
                <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">
                            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-4.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. 0b</p>
                        </div>
                    </a>
                </div>
             </div>
             </div>
         </div>
         </div>
         <div id="chat-button">
        <!-- COLLECTIONS END -->
             <img src="https://synergiesproject.eu/wp-content/uploads/2024/04/synergies_project_logo-600x204.png"
 
                style="height: 50px; margin: 0;" alt="SYNERGIES">
        <!-- FORUM SECTION BEGIN -->
        <!--
         <div id="hp-recent" class="container-fluid">
             <div class="row">
                <div id="forum-topics" class="col-12 col-lg-6">
                    <h3 class="text-center">Latest Discussions</h3>
                    <script src="https://forum.links.communitycenter.eu/javascripts/embed-topics.js"></script>
                    <d-topics-list discourse-url="https://forum.links.communitycenter.eu" per-page="5" order="latest" sort-ascending="false" template="complete"></d-topics-list>
                </div>
                <div id="hp-changes" class="col-12 col-lg-6">
                    <h3 class="text-center">News and Activities</h3>
                    <div class="h-100">
                        <div id="recent-changes">
                        </div>
                    </div>
                </div>
            </div>
         </div>
         </div>
        -->
        <!-- FORUM SECTION END -->
           
     </div>
     </div>
     <script>
     <!-- HP END -->
        const chatWindow = document.getElementById('chat-window');
        const chatContent = document.getElementById('chat-window-content');
        const resizeBtn = document.getElementById('resize-chat');
        const closeBtn = document.getElementById('close-chat');
        const chatBtn = document.getElementById('chat-button');
 
 
        chatBtn.addEventListener('click', () => {
            chatWindow.classList.toggle('closed-chat');
        });
        resizeBtn.addEventListener('click', () => {
            chatWindow.classList.toggle('maximized-chat');
        });
        closeBtn.addEventListener('click', () => {
            chatWindow.classList.add('closed-chat');
        });


        const url = 'http://192.168.100.172:4200';
    <!-- BEGIN SAFETY.WIDGET -->
        fetch(url, { method: 'HEAD' })
    <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/widget/styles.css">
            .then(response => {
    <div id="safety-widget"></div>
                if (response.ok) {
    <script src="https://assets.links.communitycenter.eu/v2/widget/script.js"></script>
                    resizeBtn.style.visibility = 'visible';
    <!-- END SAFETY.WIDGET -->
                    chatContent.innerHTML = `
                    <iframe id="embedded-page" src="${url}" frameborder="0"
                    style="width:100%;aspect-ratio:16/9;"
                    ></iframe>
                    `;
                }
            })
            .catch(error => console.error('Error during URL check', error));
    </script>
</body>


</html>
</includeonly>

Latest revision as of 08:41, 2 October 2024

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

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