Skip to content

Instantly share code, notes, and snippets.

@zuzannamj
zuzannamj / modal-dialog.html
Last active July 16, 2024 15:39
Modal dialog on a CloudPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; }
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); padding-top: 60px; }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 8px; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
@zuzannamj
zuzannamj / slide-in-panel.html
Last active July 16, 2024 15:38
Slide-in panel on a CloudPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.slide-in-panel { position: fixed; left: -300px; top: 50%; transform: translateY(-50%); width: 300px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: left 0.3s ease; padding: 20px; border-radius: 8px; border: 1px solid #888; }
.slide-in-panel.open { left: 0; }
.slide-in-panel p { margin: 0 0 20px; font-size: 16px; }
@zuzannamj
zuzannamj / toast-notification.html
Last active July 16, 2024 15:38
Toast notification on a CloudPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; }
.styled-button { display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; background-color: #0070d2; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.styled-button:hover { background-color: #005fb2; }
.toast { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
SELECT contact.Email,
contact.Id
FROM ent.Contact_Salesforce contact
INNER JOIN (
SELECT Email,
MAX(Id) AS Id
FROM ent.Contact_Salesforce
GROUP BY Email
) aggr
ON aggr.Email = contact.Email AND aggr.Id = contact.Id
%%[
set @data = 'https://sfmarketing.cloud/'
set @qrcode = concat('https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=', @data)
]%%
<img src="%%=v(@qrcode)=%%">
<script runat="server">
Platform.Load("Core", "1");
try {
//initiate WSProxy
var prox = new Script.Util.WSProxy();
//initiate data extension
var targetDE = 'xxxxxxx-xxxxxxx-xxxxxxxxx'; //pass external key of the target DE
var logDE = DataExtension.Init(targetDE);
function getImports(objectType, cols) {
/**
* @fileoverview
* - Using the 'QRCode for Javascript library'
* - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
* - this library has no dependencies.
*
* @author davidshimjs
* @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>
* @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
*/
%%=TreatAsContent(HTTPGet('https://raw.githubusercontent.com/zuzannamj/data-views-app/main/index.html'))=%%
SELECT contact.Email,
contact.Id
FROM /*data extension name*/ contact
INNER JOIN (
SELECT Email,
MAX(Id) AS Id
FROM /*data extension name*/
GROUP BY Email
) aggr
ON aggr.Email = contact.Email AND aggr.Id = contact.Id