<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML Cards</title> <link rel="stylesheet" href="css/bulma.css"> <link rel="stylesheet" href="css/card.css"> <link rel="stylesheet" href="css/subcard.css"> <link rel="stylesheet" href="css/highlight.css"> <link rel="stylesheet" href="css/popup.css"> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; position: fixed; background-color: white; } .box { width: 200px; height: 200px; background-color: blueviolet; } </style> </head> <body> <!-- <h1>HTML Cards</h1> <p>Some Text on the page. Eiusmod nostrud laborum non nulla in sunt ex cillum quis. Nulla mollit minim Lorem in. Deserunt aliquip cillum dolor adipisicing. </p> <p> Ea velit consectetur est cillum consectetur adipisicing dolor sunt nostrud. Qui eu ut anim incididunt aute irure do occaecat reprehenderit ea irure ex. Ullamco cupidatat ut duis incididunt consectetur in cillum et Lorem. Ullamco voluptate laborum non consectetur non laborum voluptate minim. Non cillum do eiusmod magna consequat anim exercitation occaecat proident velit. </p> <p> Qui adipisicing dolor occaecat cupidatat dolore ipsum velit excepteur magna Lorem aliqua consectetur consectetur ipsum. Sunt tempor excepteur amet laborum id enim sunt aute dolor culpa dolor non. Eu anim veniam minim eu cupidatat enim culpa quis dolore. Amet consectetur anim et culpa aliquip consequat reprehenderit fugiat. Aute labore ullamco minim deserunt dolore quis ipsum magna consequat culpa do. Velit proident aliqua ipsum qui dolor veniam amet proident est veniam cillum. </p> <p> Cupidatat esse ut proident consectetur irure velit esse sint consectetur id est consectetur mollit. Nisi ullamco sunt deserunt consequat tempor adipisicing. Labore reprehenderit tempor aliquip veniam amet culpa excepteur dolore. Tempor aute dolor est sit. Duis laboris mollit est irure dolore pariatur deserunt velit velit elit sit. Labore laborum officia officia anim ipsum officia anim nostrud cillum est anim qui. Dolore non minim eu eiusmod amet in deserunt exercitation anim consectetur commodo occaecat.</p> --> <script src="../../../../../lib/3rdparty/all.js"></script> <script src="../../../../../lib/bootstrap.js"></script> <script src="../../../../../lib/3rdparty/inobounce.js"></script> <script src="../../../../../lib/3rdparty/hammer.propagating.js"></script> <script src="./js/all.js"></script> <script src="./js/card.js"></script> <script src="./js/highlight.js"></script> <script src="../../../js/theme.js"></script> <script> setup() async function setup() { console.log("Setting up card ...") let config = await Theme.loadConfig() console.log("Config loaded ...") let scatterContainer = new DOMScatterContainer(document.body, { stopEvents: false, useCapture: false }) Card.dynamicHeight = true function createScatterCard(id) { return ScatterCard.loadAndCreateScatterCard(scatterContainer, id, { basePath: config.tueschDirectory, modules: [ // new CardPlugin.LightBox("img-overlay"), // new CardPlugin.EnlargeableThumbnail(".thumbnail-wrapper", ".img-overlay"), // new CardPlugin.Ui("ui"), // new CardPlugin.Speech(".ui", "speech") ], onCreated: () => { console.log("Hello") }, onClose: () => { console.log("Tried to close the card. This is forbidden here! ;)") } }).catch(e => console.error(e)) } function enableDebug(element) { element.classList.add("debug") } const debug = true if (config.cards) { let promises = [] config.cards.forEach(card => { let promise = createScatterCard(card) promise.then(el => { if (debug) enableDebug(el) }) }); await Promise.all(promises) } else { element = await createScatterCard(config.card) if (debug) enableDebug(element) } console.log("Card loaded!") } </script> </body> </html>