<zk>
<style>
.banner {
background-color: #cc9966;
color: white;
padding: 5px 10px;
}
.menu-item {
margin: 10px 0;
}
.movie-type {
text-align: center;
margin: 20px;
}
.movie-type image {
width: 50px;
height: 50px;
}
</style>
<borderlayout>
<north height="100px" sclass="banner">
<div>
<hbox align="center">
<div>
<label style="font-size: 50px">iBilhetes</label>
</div>
</hbox>
</div>
</north>
<west width="260px" minsize="300" splittable="true" collapsible="true">
<grid>
<columns>
<column width="100px"></column>
<column></column>
</columns>
<rows>
<row class="menu-item">
<a href="venda.zul" height="32px">Venda de Bilhetes</a>
</row>
<row class="menu-item">
<a href="consulta.zul" height="32px">Consultar Bilhetes</a>
</row>
<row class="menu-item">
<a href="relatorios.zul" height="32px">Consultar Relatórios</a>
</row>
</rows>
</grid>
</west>
<center>
<vbox>
<!-- Conteúdo principal -->
<div class="movie-type">
<label style="font-size: 24px; font-weight: bold;">Tipos de Filmes</label>
<hbox>
<vbox>
<image src="https://www.jornalismo.ufv.br/cinecom/wp-content/uploads/2020/05/TOP-5-filmes-de-a%C3%A7%C3%A3o-2.jpg"/>
<label>Ação</label>
</vbox>
<vbox>
<image src="https://www.jornalismo.ufv.br/cinecom/wp-content/uploads/2020/05/TOP-5-filmes-de-a%C3%A7%C3%A3o-2.jpg"/>
<label>Comédia</label>
</vbox>
<vbox>
<image src="https://www.jornalismo.ufv.br/cinecom/wp-content/uploads/2020/05/TOP-5-filmes-de-a%C3%A7%C3%A3o-2.jpg"/>
<label>Drama</label>
</vbox>
</hbox>
<hbox>
<vbox>
<image src="https://www.jornalismo.ufv.br/cinecom/wp-content/uploads/2020/05/TOP-5-filmes-de-a%C3%A7%C3%A3o-2.jpg"/>
<label>Ação</label>
</vbox>
<vbox>
<image src="https://www.jornalismo.ufv.br/cinecom/wp-content/uploads/2020/05/TOP-5-filmes-de-a%C3%A7%C3%A3o-2.jpg"/>
<label>Comédia</label>
</vbox>
<vbox>
<image src="https://www.jornalismo.ufv.br/cinecom/wp-content/uploads/2020/05/TOP-5-filmes-de-a%C3%A7%C3%A3o-2.jpg"/>
<label>Drama</label>
</vbox>
</hbox>
</div>
</vbox>
</center>
<south height="100px" hflex="1">
<div style="text-align: center;">
<vbox style="text-align: center;">
iBilhete ${desktop.webApp.version}
<a href="http://codelaice.wordpress.com">http://codelaice.wordpress.com</a>
</vbox>
</div>
</south>
</borderlayout>
</zk>