Skip to content

Instantly share code, notes, and snippets.

@Tiagoperes
Created March 31, 2020 18:26
Show Gist options
  • Select an option

  • Save Tiagoperes/5305dbaed539308712855425a0e43f0d to your computer and use it in GitHub Desktop.

Select an option

Save Tiagoperes/5305dbaed539308712855425a0e43f0d to your computer and use it in GitHub Desktop.
beagle forms
{
"_beagleType_": "container",
"id": "content",
"style": {
"width": "800px",
"height": "100%",
"display": "flex",
"justify-content": "space-around"
},
"children": [
{
"_beagleType_": "page-counter",
"id": "page-counter",
"totalPages": 5,
"activePage": 3
},
{
"_beagleType_": "form",
"id": "form",
"onSubmit": {
"event": "xhr",
"url": "http://localhost:3000/create-account/address",
"method": "post"
},
"onSuccess": {
"event": "navigate",
"url": "#plan"
},
"children": [
{
"_beagleType_": "card",
"id": "form-card",
"style": {
"padding": "20px 30px"
},
"children": [
{
"_beagleType_": "title",
"id": "form-title",
"value": "endereco"
},
{
"_beagleType_": "container",
"id": "field-group-1",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "zip-field",
"label": "cep",
"name": "zip",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "street-field",
"label": "rua ou avenida",
"name": "street",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-2",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "container",
"id": "field-group-2.1",
"style": {
"display": "flex",
"flex-direction": "row",
"flex": 1,
"margin-right": "15px"
},
"children": [
{
"_beagleType_": "input",
"id": "number-field",
"label": "número",
"name": "number",
"type": "number",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "neighborhood-field",
"label": "bairro",
"name": "neighborhood",
"value": "",
"style": {
"margin-left": "15px",
"flex": 2
}
}
]
},
{
"_beagleType_": "input",
"id": "phone-field",
"label": "telefone",
"name": "phone",
"type": "telephone",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-3",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "select",
"id": "state-field",
"label": "Estado",
"name": "state",
"value": "",
"options": [
{
"name": "Minas Gerais",
"value": "mg"
},
{
"name": "São Paulo",
"value": "sp"
},
{
"name": "Rio de Janeiro",
"value": "sp"
}
],
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "city-field",
"label": "Cidade",
"name": "city",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-4",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "complement-field",
"label": "Complemento",
"name": "complement",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
}
]
},
{
"_beagleType_": "container",
"id": "button-group",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"flex": 1
},
"children": [
{
"_beagleType_": "button",
"id": "previous-button",
"value": "Anterior",
"type": "link",
"url": "#professional-data",
"align-self": "start"
},
{
"_beagleType_": "button",
"id": "next-button",
"value": "Próximo",
"type": "submit",
"align-self": "end"
}
]
}
]
}
]
}
{
"_beagleType_": "container",
"id": "content",
"style": {
"width": "800px",
"height": "100%",
"display": "flex",
"justify-content": "space-around"
},
"children": [
{
"_beagleType_": "page-counter",
"id": "page-counter",
"totalPages": 5,
"activePage": 1
},
{
"_beagleType_": "form",
"id": "form",
"onSubmit": {
"event": "xhr",
"url": "http://localhost:3000/create-account/payment",
"method": "post"
},
"onSuccess": {
"event": "navigate",
"url": "#success"
},
"children": [
{
"_beagleType_": "card",
"id": "form-card",
"style": {
"padding": "20px 30px"
},
"children": [
{
"_beagleType_": "title",
"id": "form-title",
"value": "pagamento por cartao de credito"
},
{
"_beagleType_": "container",
"id": "field-group-1",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "card-number-field",
"label": "número",
"name": "cardNumber",
"type": "number",
"maxlength": 16,
"autocomplete": "cc-number",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "card-name-field",
"autocomplete": "cc-name",
"label": "Nome como escrito no catão",
"name": "cardName",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-2",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "card-expiry-field",
"label": "validade",
"name": "expiryMonth",
"placeholder": "01-2020",
"autocomplete": "cc-exp",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "card-cvv-field",
"label": "cvv",
"name": "cvv",
"type": "number",
"autocomplete": "cc-csc",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-3",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "checkbox",
"id": "terms-field",
"name": "terms",
"value": false,
"position": "left",
"style": {
"flex": 1
},
"children": [
{
"_beagleType_": "text",
"value": "Aceito que será cobrado um valor mensal de R$ 9,99 no cartão cujo os dados foram inseridos acima."
}
]
}
]
}
]
},
{
"_beagleType_": "container",
"id": "button-group",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"flex": 1
},
"children": [
{
"_beagleType_": "button",
"id": "previous-button",
"value": "Anterior",
"type": "link",
"url": "#plan",
"align-self": "start"
},
{
"_beagleType_": "button",
"id": "next-button",
"value": "Próximo",
"type": "submit",
"align-self": "end"
}
]
}
]
}
]
}
{
"_beagleType_": "container",
"id": "content",
"style": {
"width": "800px",
"height": "100%",
"display": "flex",
"justify-content": "space-around"
},
"children": [
{
"_beagleType_": "page-counter",
"id": "page-counter",
"totalPages": 5,
"activePage": 1
},
{
"_beagleType_": "form",
"id": "form",
"onSubmit": {
"event": "xhr",
"url": "http://localhost:3000/create-account/personal-data",
"method": "post"
},
"onSuccess": {
"event": "navigate",
"url": "#professional-data"
},
"children": [
{
"_beagleType_": "card",
"id": "form-card",
"style": {
"padding": "20px 30px"
},
"children": [
{
"_beagleType_": "title",
"id": "form-title",
"value": "dados pessoais"
},
{
"_beagleType_": "container",
"id": "field-group-1",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "name-field",
"label": "nome",
"name": "name",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "lastname-field",
"label": "sobrenome",
"name": "lastname",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-2",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "email-field",
"type": "email",
"label": "e-mail",
"name": "email",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "container",
"id": "field-group-2.1",
"style": {
"flex-direction": "row",
"display": "flex",
"margin-left": "15px",
"flex": 1
},
"children": [
{
"_beagleType_": "select",
"id": "sex-field",
"label": "sexo",
"name": "sex",
"value": "",
"options": [
{
"name": "masculino",
"value": "m"
},
{
"name": "feminino",
"value": "f"
},
{
"name": "outro",
"value": "x"
}
],
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "age-field",
"label": "idade",
"name": "age",
"type": "number",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
}
]
},
{
"_beagleType_": "container",
"id": "field-group-3",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "cpf-field",
"type": "cpf",
"label": "cpf",
"name": "cpf",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "id-field",
"label": "identidade",
"name": "id",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
}
]
},
{
"_beagleType_": "container",
"id": "button-group",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"flex": 1
},
"children": [
{
"_beagleType_": "button",
"id": "previous-button",
"value": "Anterior",
"disabled": true,
"align-self": "start"
},
{
"_beagleType_": "button",
"id": "next-button",
"value": "Próximo",
"type": "submit",
"align-self": "end"
}
]
}
]
}
]
}
{
"_beagleType_": "container",
"id": "content",
"style": {
"width": "800px",
"height": "100%",
"display": "flex",
"justify-content": "space-around"
},
"children": [
{
"_beagleType_": "page-counter",
"id": "page-counter",
"totalPages": 5,
"activePage": 1
},
{
"_beagleType_": "form",
"id": "form",
"onSubmit": {
"event": "xhr",
"url": "http://localhost:3000/create-account/plan",
"method": "post"
},
"onSuccess": {
"event": "navigate",
"url": "#payment"
},
"children": [
{
"_beagleType_": "card",
"id": "form-card",
"style": {
"padding": "20px 30px"
},
"children": [
{
"_beagleType_": "title",
"id": "form-title",
"value": "plano"
},
{
"_beagleType_": "subtitle",
"id": "form-subtitle",
"value": "selecione um plano para sua conta"
},
{
"_beagleType_": "radiogroup",
"id": "plan-field",
"value": "",
"children": [
{
"_beagleType_": "radio",
"id": "plan-option-basic",
"value": "basic",
"position": "left",
"children": [
{
"_beagleType_": "text",
"value": "Basic",
"style": {
"color": "blue",
"margin": "0 0 5px 0"
}
},
{
"_beagleType_": "text",
"value": "O plano básico oferece...",
"style": {
"color": "gray",
"margin": "0"
}
}
]
},
{
"_beagleType_": "radio",
"id": "plan-option-silver",
"value": "silver",
"children": [
{
"_beagleType_": "text",
"value": "Silver",
"style": {
"color": "blue",
"margin": "0 0 5px 0"
}
},
{
"_beagleType_": "text",
"value": "O plano silver oferece...",
"style": {
"color": "gray",
"margin": "0"
}
}
]
},
{
"_beagleType_": "radio",
"id": "plan-option-premium",
"value": "premium",
"children": [
{
"_beagleType_": "text",
"value": "Premium",
"style": {
"color": "blue",
"margin": "0 0 5px 0"
}
},
{
"_beagleType_": "text",
"value": "O plano premium oferece...",
"style": {
"color": "gray",
"margin": "0"
}
}
]
}
]
}
]
},
{
"_beagleType_": "container",
"id": "button-group",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"flex": 1
},
"children": [
{
"_beagleType_": "button",
"id": "previous-button",
"value": "Anterior",
"type": "link",
"url": "#address",
"align-self": "start"
},
{
"_beagleType_": "button",
"id": "next-button",
"value": "Próximo",
"type": "submit",
"align-self": "end"
}
]
}
]
}
]
}
{
"_beagleType_": "container",
"id": "content",
"style": {
"width": "800px",
"height": "100%",
"display": "flex",
"justify-content": "space-around"
},
"children": [
{
"_beagleType_": "page-counter",
"id": "page-counter",
"totalPages": 5,
"activePage": 2
},
{
"_beagleType_": "form",
"id": "form",
"onSubmit": {
"event": "xhr",
"url": "http://localhost:3000/create-account/professional-data",
"method": "post"
},
"onSuccess": {
"event": "navigate",
"url": "#address"
},
"children": [
{
"_beagleType_": "card",
"id": "form-card",
"style": {
"padding": "20px 30px"
},
"children": [
{
"_beagleType_": "title",
"id": "form-title",
"value": "dados profissionais"
},
{
"_beagleType_": "container",
"id": "field-group-1",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "select",
"id": "education-field",
"label": "Escolaridade",
"name": "education",
"value": "",
"options": [
{
"name": "Ensino fundamental incompleto",
"value": "1"
},
{
"name": "Ensino fundamental completo",
"value": "2"
},
{
"name": "Colegial incompleto",
"value": "3"
},
{
"name": "Colegial completo",
"value": "4"
},
{
"name": "Ensino superior incompleto",
"value": "5"
},
{
"name": "Ensino superior completo",
"value": "6"
},
{
"name": "Pós-graduação completa ou superior",
"value": "7"
}
],
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "company-field",
"label": "Empresa ou instituição de ensino",
"name": "company",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-2",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "select",
"id": "area-field",
"label": "Área de atuação",
"name": "area",
"value": "",
"options": [
{
"name": "Educação",
"value": "education"
},
{
"name": "Tecnologia",
"value": "technology"
},
{
"name": "Construção",
"value": "construction"
},
{
"name": "Administração",
"value": "administration"
},
{
"name": "Marketing",
"value": "marketing"
},
{
"name": "Política",
"value": "politics"
},
{
"name": "Esportes e bem-estar",
"value": "sports"
},
{
"name": "Saúde",
"value": "health"
}
],
"style": {
"margin-right": "15px",
"flex": 1
}
},
{
"_beagleType_": "input",
"id": "profession-field",
"label": "Profissão",
"name": "profession",
"value": "",
"style": {
"margin-left": "15px",
"flex": 1
}
}
]
},
{
"_beagleType_": "container",
"id": "field-group-3",
"style": {
"margin": "10px 0",
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"_beagleType_": "input",
"id": "income-field",
"label": "Renda média mensal (R$)",
"name": "income",
"value": "",
"style": {
"margin-right": "15px",
"flex": 1
}
}
]
}
]
},
{
"_beagleType_": "container",
"id": "button-group",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"flex": 1
},
"children": [
{
"_beagleType_": "button",
"id": "previous-button",
"value": "Anterior",
"type": "link",
"url": "#personal-data",
"align-self": "start"
},
{
"_beagleType_": "button",
"id": "next-button",
"value": "Próximo",
"type": "submit",
"align-self": "end"
}
]
}
]
}
]
}
{
"_beagleType_": "container",
"id": "content",
"style": {
"width": "800px",
"height": "100%",
"display": "flex",
"justify-content": "space-around"
},
"children": [
{
"_beagleType_": "card",
"id": "success-card",
"style": {
"padding": "20px 30px"
},
"children": [
{
"_beagleType_": "image",
"src": "http://beagle.com/assets/image.png",
"style": {
"width": "300px"
}
},
{
"_beagleType_": "title",
"value": "sucesso!"
},
{
"_beagleType_": "text",
"value": "Parebéns! Sua conta foi criada com sucesso! Agora é só entrar no app e começar a curtir nossos serviços!"
},
{
"_beagleType_": "button",
"type": "link",
"url": "https://www.beagle.com",
"value": "Entrar no app"
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment