100 lines
4.1 KiB
Plaintext
100 lines
4.1 KiB
Plaintext
{html, [
|
|
{head, [
|
|
{title, [<<"This is an example">>]},
|
|
{link, #{rel => "stylesheet", href => "https://unpkg.com/spectre.css/dist/spectre.min.css"}, []},
|
|
{link, #{rel => "stylesheet", href => "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"}, []},
|
|
{link, #{rel => "stylesheet", href => "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"}, []},
|
|
{script, #{src => "https://unpkg.com/htmx.org@1.9.9"}, []}
|
|
]},
|
|
{body, [
|
|
{'header', #{class => "navbar"}, [
|
|
{section, #{class => "navbar-section"}, [
|
|
{a, #{href => "#", class => "navbar-brand mr-2"}, <<"Gabarit HTML">>},
|
|
{a, #{href => "#", class => "btn btn-link"}, <<"Introduction">>},
|
|
{a, #{href => "#", class => "btn btn-link"}, <<"Docs">>}
|
|
]},
|
|
{section, #{class => "navbar-section"}, [
|
|
{'div', #{class => "input-group input-inline"}, [
|
|
{input, #{class => "form-input", type => "text", placeholder => "search"}, []},
|
|
{button, #{class => "btn btn-primary input-group-btn"}, <<"search">>}
|
|
]}
|
|
]}
|
|
]},
|
|
{'div', #{class => "container"}, [
|
|
{'div', #{class => "columns"}, [
|
|
|
|
% card 1
|
|
{'div', #{class => "card"}, [
|
|
{'div', #{class => "card-images"}, [
|
|
{img, #{src => "https://picsum.photos/id/1/300/200", class => "img-responsive"}}
|
|
]},
|
|
{'div', #{class => "card-header"}, [
|
|
{'div', #{class => "card-title h5"}, [<<"card 1">>]},
|
|
{'div', #{class => "card-subtitle text-gray"}, [<<"This is card subtitle">>]}
|
|
]},
|
|
{'div', #{class => "card-body"}, [<<"This is the body!">>]},
|
|
{'div', #{class => "card-footer"}, [
|
|
{button, #{class => "btn btn-primary"}, <<"refresh">>}
|
|
]}
|
|
]},
|
|
% card 2
|
|
{'div', #{class => "card"}, [
|
|
{'div', #{class => "card-images"}, [
|
|
{img, #{src => "https://picsum.photos/id/2/300/200", class => "img-responsive"}}
|
|
]},
|
|
{'div', #{class => "card-header"}, [
|
|
{'div', #{class => "card-title h5"}, [<<"test">>]},
|
|
{'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
|
|
]},
|
|
{'div', #{class => "card-body"}, [<<"test">>]},
|
|
{'div', #{class => "card-footer"}, [
|
|
{button, #{class => "btn btn-primary"}, <<"refresh">>}
|
|
]}
|
|
]},
|
|
% card 3
|
|
{'div', #{class => "card"}, [
|
|
{'div', #{class => "card-images"}, [
|
|
{img, #{src => "https://picsum.photos/id/3/300/200", class => "img-responsive"}}
|
|
]},
|
|
{'div', #{class => "card-header"}, [
|
|
{'div', #{class => "card-title h5"}, [<<"test">>]},
|
|
{'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
|
|
]},
|
|
{'div', #{class => "card-body"}, [<<"test">>]},
|
|
{'div', #{class => "card-footer"}, [
|
|
{button, #{class => "btn btn-primary"}, <<"refresh">>}
|
|
]}
|
|
]},
|
|
% card 4
|
|
{'div', #{class => "card"}, [
|
|
{'div', #{class => "card-images"}, [
|
|
{img, #{src => "https://picsum.photos/id/4/300/200", class => "img-responsive"}}
|
|
]},
|
|
{'div', #{class => "card-header"}, [
|
|
{'div', #{class => "card-title h5"}, [<<"test">>]},
|
|
{'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
|
|
]},
|
|
{'div', #{class => "card-body"}, [<<"test">>]},
|
|
{'div', #{class => "card-footer"}, [
|
|
{button, #{class => "btn btn-primary"}, <<"refresh">>}
|
|
]}
|
|
]},
|
|
% card 5
|
|
{'div', #{class => "card"}, [
|
|
{'div', #{class => "card-images"}, [
|
|
{img, #{src => "https://picsum.photos/id/5/300/200", class => "img-responsive"}}
|
|
]},
|
|
{'div', #{class => "card-header"}, [
|
|
{'div', #{class => "card-title h5"}, [<<"test">>]},
|
|
{'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
|
|
]},
|
|
{'div', #{class => "card-body"}, [<<"test">>]},
|
|
{'div', #{class => "card-footer"}, [
|
|
{button, #{class => "btn btn-primary"}, <<"refresh">>}
|
|
]}
|
|
]}
|
|
]}
|
|
]}
|
|
]}
|
|
]}.
|