feat: dynamic card exp

This commit is contained in:
GlennWSo 2024-04-08 21:23:36 +02:00
parent a400e9ff2b
commit 59c1094f97
9 changed files with 162 additions and 16 deletions

View file

@ -10,6 +10,7 @@
<script src="https://unpkg.com/htmx.org@1.9.11"
integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
<link rel="stylesheet" href="./style.css">
</head>
@ -17,16 +18,58 @@
<body>
<ul class="lasdist">
<div class="card trunc">
<div class="card derp" _="on click toggle .trunc on me">
<img class="icon" src="nextcloud_icon_14.png">
<h3>Nextcloud</h3>
<p class="text">
Mollis, ante non euismod ornare, orci diam ornare orci, eu mattis
tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur
et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis
maximus quam auctor pellentesque.
Nextcloud is a suite of client-server software for creating and using file
hosting services. Our nextcloud server is integrated with OnlyOffice and can provide functionality similar to
Dropbox, Office 365 or Google Drive.
</p>
<a class="footer" href="https://cloud.sondell.org">web app</a>
<div class="footer" _="on click halt the event's bubbling">
<h4>Get started</h4>
<p>
Download the app for your device and login with the server adress:
<code class="link">
https://cloud.sondell.org/
</code>
<button
style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em"
_="on click
writeText(my previousElementSibling's innerText) into navigator's clipboard
put 'copied!' into me
wait 1s
put 'copy' into me">
copy
</button>
</p>
<span>
<a class="app-link" href="https://nextcloud.com/install/#card-clients-btns">
<img src="./desktop.svg" height="40">
</a>
<a class="app-link" href= "https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
<img src="./googleplay-trim.png" alt="Download from Google Play" height="40"
data-canonical-src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
style="max-width: 100%;">
</a>
<a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
<img
src="https://camo.githubusercontent.com/c4395f930c17c2f878dbd98b55d461375f6feb7a998e0ac6e3be2376b8429b8a/68747470733a2f2f646576656c6f7065722e6170706c652e636f6d2f6173736574732f656c656d656e74732f6261646765732f646f776e6c6f61642d6f6e2d7468652d6170702d73746f72652e737667"
alt="the Nextcloud iOS files app" height="40"
data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
style="max-width: 100%;">
</a>
<a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
<img src="./pwa-badge.png" alt="Demo of the Nextcloud iOS files app" height="40"
data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
style="max-width: 100%;">
</a>
</span>
</div>
</div>
<div class="card">