Widget: HomePageOld: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(98 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<hr> <!-- Remove later -->
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude>
<div class="container">
<includeonly>
  <div class="row row-cols-3">
 
     <div class="col">Cell 1</div>
<!-- STYLES BEGIN -->
    <div class="col">Cell 2</div>
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/homepage/styles_v2.css">
    <div class="col">Cell 3</div>
<!-- STYLES END -->
    <div class="col">Cell 4</div>
 
    <div class="col">Cell 5</div>
    <!-- HP BEGIN -->
    <div class="col">Cell 6</div>
    <div id="hp-wrapper">
    <div class="col">Cell 7</div>
 
    <div class="col">Cell 8</div>
        <!-- HEADING BEGIN -->
    <div class="col">Cell 9</div>
        <div id="hp-heading">
  </div>
            <h1 translate="no">
</div>
                <span>LINKS</span>
<hr> <!-- Remove later -->
                <span>Community</span>
                <span>Center</span>
            </h1>
            <p class="hp-lead">
                <span>Strengthening links between technologies and&nbsp;society for&nbsp;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>
                           
                        </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://api.safety-base.eu/v2/links/snippets/styles.css">
            <script src="https://api.safety-base.eu/v2/links/snippets/script.js"></script>
            <!-- SNIPPETS END -->
       
            <!-- SEARCH BEGIN -->
                <script src="https://api.safety-base.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://api.safety-base.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>
 
                <!-- LINK -->
                <a class="hp-area orange" href="https://links.communitycenter.eu/index.php/List_of_Guidelines">
                    <div class="hp-area-icon">
                        <img src="https://api.safety-base.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>
 
                <!-- LINK -->
                <a class="hp-area cyan" href="https://links.communitycenter.eu/index.php/List_of_Use_Cases">
                    <div class="hp-area-icon">
                        <img src="https://api.safety-base.eu/v2/links/lib?q=3-uc_list.svg">
                    </div>
                    <div class="hp-area-text">
                        <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://api.safety-base.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 -->
 
        </div>
        <!-- MAIN END -->
               
        <!-- PRODUCTS BEGIN -->
        <div id="hp-products" class="container-fluid">
            <div class="row">
 
                <!-- LINK -->
                <div id="hp-feel-safe" class="col-12 col-lg-4">
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Feel_Safe">
                        <div class="hp-area-icon">
                            <img src="https://api.safety-base.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://api.safety-base.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>
 
                <!-- LINK -->
                <div id="hp-wheel" class="col-12 col-lg-4">
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Resilience_Wheel">
                        <div class="hp-area-icon">
                            <img src="https://api.safety-base.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>
 
            </div>
        </div>
        <!-- PRODUCTS END -->
       
        <!-- COLLECTIONS BEGIN -->
        <div id="hp-collections" class="container-fluid">
            <div class="row">
 
                <!-- LINK -->
                <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://api.safety-base.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>
                       
                <!-- 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://api.safety-base.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>
        <!-- COLLECTIONS END -->
 
        <!-- 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>
        <!-- FORUM SECTION END -->
           
    </div>
    <!-- HP END -->
 
    <!-- BEGIN SAFETY.WIDGET -->
    <link rel="stylesheet" href="https://widget.safety-base.eu/v2/widget/styles.css">
    <div id="safety-widget"></div>
    <script src="https://widget.safety-base.eu/v2/widget/script.js"></script>
    <!-- END SAFETY.WIDGET -->
 
</includeonly>

Latest revision as of 08:36, 2 October 2024

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