ot_typo3/ot_templating/Resources/Private/Templates/OtCustomizer/Index.html

<f:layout name="Backend/Default" />

<f:section name="content">
    <div class="ot-customizer">
        <f:if condition="{pageSelected}">
            <f:then>

                <div class="themes">
                    <f:for each="{themes}" as="theme" key="theme_name">

                        <div class="theme-card">
                            <div class="theme-title">
                                {theme.name}
                            </div>
                            <div class="theme-poster">
                                <f:image src="{theme.picture}" alt="poster" />
                            </div>
                            <div class="theme-description">
                                {theme.description}
                            </div>
                            <div class="theme-controls">
                                <button>Sélectionner</button>
                            </div>
                        </div>
                    </f:for>
                </div>

                <div class="customizer">
                    <form>

                        <div class="form-group">
                            <label>Couleur du thème</label>
                            <select class="form-control form-control-adapt" size="1">
                                <option value="light-blue" selected="selected">Bleu ciel</option>
                                <option value="blue">Bleu</option>
                                <option value="green">Vert</option>
                                <option value="orange">Orange</option>
                                <option value="grey">Gris</option>
                                <option value="red">Rouge</option>
                                <option value="light-red">Rouge cerise</option>
                                <option value="purple">Violet</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Afficher le caroussel</label>
                            <input type="checkbox"
                                   class="checkbox-input"
                                   value="1">
                        </div>

                        <div class="actions">
                            <button class="btn btn-primary"
                                    type="submit"
                                    value="1">
                                Appliquer
                            </button>
                        </div>
                    </form>
                </div>
            </f:then>
            <f:else>
                <f:comment><!-- No page selected --></f:comment>
                <f:translate key="noPageSelected" />
            </f:else>
        </f:if>
    </div>
</f:section>