ci: so it Begins!
This commit is contained in:
Begin
242
public/index.html
Normal file
242
public/index.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Begin Event Functions Example</title>
|
||||
</head>
|
||||
<style>
|
||||
:root {
|
||||
--light: #FEFEFE;
|
||||
--purple: #8D30FF;
|
||||
--magenta: #FF577B;
|
||||
--angle: 45deg;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
color: var(--light);
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Roboto, Helvetica, Arial,
|
||||
sans-serif,
|
||||
"Apple Color Emoji";
|
||||
line-height: 1.6;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
.height-100 {
|
||||
height: 100%;
|
||||
}
|
||||
.margin-bottom1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.padding-top5 {
|
||||
padding-top: 9rem;
|
||||
}
|
||||
.max-width22 {
|
||||
max-width: 22rem;
|
||||
}
|
||||
.display-flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.align-items-initial {
|
||||
align-items: initial;
|
||||
}
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-content-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.border-solid {
|
||||
border: 2px solid;
|
||||
}
|
||||
.color-light {
|
||||
color: var(--light);
|
||||
}
|
||||
.color-purple-active:active {
|
||||
color: var(--purple);
|
||||
}
|
||||
.linear-gradient {
|
||||
background-image: linear-gradient(var(--angle), var(--magenta), var(--purple));
|
||||
}
|
||||
.background-size-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
.background-color-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.background-color-light-active:active {
|
||||
background-color: var(--light);
|
||||
}
|
||||
.border-color-light {
|
||||
border-color: var(--light);
|
||||
}
|
||||
.border-radius-pill {
|
||||
border-radius: 999px;
|
||||
}
|
||||
.padding1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.padding-top1 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.padding-right2 {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
.padding-bottom1 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.padding-left2 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.font-size1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.font-weight-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:30em) {
|
||||
.flex-direction-row-lg {
|
||||
flex-direction: row;
|
||||
}
|
||||
.align-items-center-lg {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body
|
||||
class="
|
||||
padding-top5
|
||||
padding-right2
|
||||
padding-left2
|
||||
linear-gradient
|
||||
display-flex
|
||||
flex-direction-column
|
||||
align-items-initial
|
||||
align-items-center-lg
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
max-width22
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="
|
||||
margin-bottom1
|
||||
"
|
||||
>
|
||||
Publish an event
|
||||
</h1>
|
||||
<div
|
||||
class="
|
||||
display-flex
|
||||
flex-direction-column
|
||||
flex-direction-row-lg
|
||||
justify-content-space-between
|
||||
margin-bottom1
|
||||
"
|
||||
>
|
||||
<form
|
||||
action=/my-event
|
||||
method=POST
|
||||
>
|
||||
<input type="hidden" name="name" value="Bark">
|
||||
<button
|
||||
class="
|
||||
margin-bottom1
|
||||
padding-top1
|
||||
padding-right2
|
||||
padding-bottom1
|
||||
padding-left2
|
||||
font-size1
|
||||
font-weight-500
|
||||
color-light
|
||||
color-purple-active
|
||||
border-radius-pill
|
||||
border-solid
|
||||
border-color-light
|
||||
background-color-transparent
|
||||
background-color-light-active
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
🐶 Bark
|
||||
</button>
|
||||
</form>
|
||||
<form
|
||||
action=/my-event
|
||||
method=POST
|
||||
>
|
||||
<input type="hidden" name="name" value="Meow">
|
||||
<button
|
||||
class="
|
||||
margin-bottom1
|
||||
padding-top1
|
||||
padding-right2
|
||||
padding-bottom1
|
||||
padding-left2
|
||||
font-size1
|
||||
font-weight-500
|
||||
color-light
|
||||
color-purple-active
|
||||
border-radius-pill
|
||||
border-solid
|
||||
border-color-light
|
||||
background-color-transparent
|
||||
background-color-light-active
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
😺 Meow
|
||||
</button>
|
||||
</form>
|
||||
<form
|
||||
action=/my-event
|
||||
method=POST
|
||||
>
|
||||
<input type="hidden" name="name" value="Moo">
|
||||
<button
|
||||
class="
|
||||
margin-bottom1
|
||||
padding-top1
|
||||
padding-right2
|
||||
padding-bottom1
|
||||
padding-left2
|
||||
font-size1
|
||||
font-weight-500
|
||||
color-light
|
||||
color-purple-active
|
||||
border-radius-pill
|
||||
border-solid
|
||||
border-color-light
|
||||
background-color-transparent
|
||||
background-color-light-active
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
🐮 Moo
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<p>
|
||||
Now go check out the click tracking in your app's <a class="color-light font-weight-500" href="https://begin.com/forward/data">Begin Data console →</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user