|
|
| Line 141: |
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); } |
| − | } | + | } |
| − | | + | </style> |
| − | /* 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);
| |
| − | }
| |
| − | | |
| − | @media only screen and (orientation: portrait) {
| |
| − | .snippet-header, .snippet-body {
| |
| − | font-size: .75em;
| |
| − | }
| |
| | | | |
| − | form.hp-search button {
| + | /* SNIPPETS BEGIN */ |
| − | display: none;
| + | <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 */ |
| − | </style>
| |
| | | | |
| | <script> | | <script> |
| Line 433: |
Line 340: |
| | </div> | | </div> |
| | </div></div> | | </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>
| |
| | | | |
| | <!-- BEGIN SAFETY.WIDGET --> | | <!-- BEGIN SAFETY.WIDGET --> |