tests/testrender.py - master - wezzydev/pyehtml5

tests/testrender.py
749 строк32 KB
MarkEvan
Dev
09 мар 2026, 15:16
09 мар 2026, 15:166c4bb9a
from pyehtml5.htmlrender import AsyncRender, AsyncBaseLayout
from pyehtml5.E5tagger import  Document, E ,HTML, Builder
from pyehtml5.web import  ( Card, Modal, Footer, NavBar, Forms,
                        Message, icon_text, icon, Container, Views, 
                        HeroNavBar, Paginator, color, FASICON, hidden,
                        Slide, PostArticle, AsideMenu, VideoIFrame,
                        WindowIFrame, SrcDoc, Table, Dropdown,
                        notification,  VCalendar , Breadcrumbs,
                        Section, Panel, tag_addons, Columns, Grid,
                        FixedGrid, Docs, LoadingSpinn, HeroSlider)


from sanic import Request



class MyPaginator(Paginator):
    def paginator(self, page, pattren_url, **kw_data):
        page = self.get_pages(page)
        txt= page
        if page != None:
            self.display_link_page(page, pattren_url) 
        else:
            txt = "no articles"
            # self.display_link_page(page, pattren_url) 

        cont = E.div(class_="m-0 p-0")

        self.body = cont(txt, E.a(href="/paginator?page=test3")("pages3"))


class Render(AsyncRender):

    def attrs_body(self):
        self.attributes["class_"] = "bodys"

    def init_js_htmx(self):
        js = """
        htmx.config.globalViewTransitions=true;
        
        """ 
        return HTML(" ".join(js.split()))   
    

    def meta_head_append(self):
        return [
                E.meta(name="theme-color", content="#ff0d68"),
                E.meta(name="title", content="Dublliroavnie title"),
                E.meta(name="author", content="RectByte"),
                E.script(None, src="/public/assets/js/htmx.js", anonimys=True),
                E.meta(name="htmx-config", content='{"responseHandling":[{"code":"204", "swap": false}, {"code":"404", "swap": false, "error": true}, {"code":"422", "swap": true}, {"code":"[45]..", "swap": false, "error":true}, {"code":"...", "swap": true}]}',),
        ]

    async def top(self, request, builder)->None:
        nav = NavBar(class_="is-primary has-shadow")
        nav.navbar_brand(logo="EHTML5",  host="/", data_target="navMenu", class_="app-menu")
        user_icon = icon_text(name=FASICON.user, text="GitVerse") 
        user_icon_text = icon_text(name=FASICON.user, text="button icon", class_="has-text-primary")               
        
        
        
        link_name = (("/message", "example message"), ("/card", "example card"),
            ("/paginator", "example paginator"), ("/icons", "all icons"),
            ("/slide", "example slide"), ("/ivideo", "example iframe_video"),
            ("/post", "example post"), ("/aside", "example aside_menu"),
            ("/window", "example window iframe"),
            ("/table", "example table"), ("/notification", "example notification"),
            ("/drop", "example dropdown"), ("/modal", "example modal"), ("/calendar", "example calendar"),
             ("/panel", "example panel"), ("/admin", "example admin"),
             ("/grid", "example grid"),("/forms", "example forms"), 
            )            
        

        link = []
        for href, name in link_name:
            l = E.a(class_="navbar-item", href=str(href))(str(name))
            link.append(l)
        
        start = [*link] 
        st = NavBar.navbar_dropdown(name="примеры EHTL5", 
                list_link=start, class_="has-dropdown is-arrowless is-hoverable")
        
        end = [
            E.a(class_="button  is-outlined", href="https://gitverse.ru/rectbyte", style="margin:1px;")(user_icon ),
            E.a(class_="button ", href="https://gitverse.ru/rectbyte", style="margin:1px;")(user_icon ),
           
           
        ]                     
        nav.navbar_menu(list_start=[st,], list_end=end, class_=["is-primary"], id="navMenu")                

    



        builder(nav())
        # builder(None)

    async def bottom(self, request, builder)->None:
        footer = Footer()
        bod = E.div(class_=" has-text-black ")(tag_addons(("is-primary", "teststs"), ("is-info", "qqwqwqw")))
        footer.footer_body(body=bod, class_="has-color-info")
        # builder(footer())
        builder(None)


txt = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"""


class PageMessage(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)

        # self.builder.h1(class_="title has-text-centered")("sdsadasdasd").TitleText("Demo dfds dsfsdf message")    

        # t.title("Demo dfds dsfsdf message")
        # self.builder.h1(class_="title")("dfdsfsdfsdfsdfdsf sdfsd fsdf")
        col = Columns(class_="is-multiline has-text-primary  is-centered")
        for i in range(10):
            # if i% 2  == 0:
                #  col.column("<p> tetettstss</p>", class_="bb")
            msg = Message(class_="is-link message" )

            msg.add_header("hellooo",  class_="is-link", onclick="messageClose(event)" )
            msg.add_body(E.p(class_="test")(txt))
            col.column(msg(),  class_='is-5 bb')
        self.builder(col())




 

class PagePanel(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        panel = Panel(class_="is-link scroll")
        panel.header = "menu block"
        l = [
            E.a(herf="")("tetststs sgf se ew fwef wefwe fwefwe fweewg"),
            E.a(herf="")("tetststs wegewgweg w"),
            E.a(herf="")("tetststs wegewgwegew fewf wefwe fwefwe fwef wefweg"),
            E.a(herf="")("tetststs wegewgwegwe dfgsd sdf ewfewfwefg"),
            E.a(herf="")("tetststs egwegewe fewf wefwef wefwe fwefewgweg"),

        ]
        panel.panel_tabs(list_link=l)
  


     
        panel.panel_link(name="test-link3", class_="has-text-primary", href="/").panel_link(name="tests-link89", icon_name=FASICON.user, class_="tests", href="/")
        panel.panel_link(name="test-link3", class_="has-text-primary", href="/")
        panel.panel_link(name="test-link33", class_="has-text-primary", href="/")
        panel.panel_link(name="test-link3", class_="has-text-primary", href="/")
        panel.panel_link(name="test-link3", class_="has-text-primary", href="/")
        self.builder(panel())


class PageSlide(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        sl = Slide()
        l = []
        sl.widescreen = 2 
        sl.desktop = 8 #> 968 width
        sl.mobile = 6 #<600 width
        sl.tablet = 8 #930 width
        for i in range(1,30):
            bibox = E.div(class_="box has-text-centered  has-background-primary mt-2 mb-2", style="height:auto;")(f"example-{i}") 
            # rt = sl.boxing(data=bibox(f"example-{i}"), classes=["m-0", "bb","is-centered" ,"mt-4", "mb-4"])
            l.append(bibox)
        sl.slider(l, style="padding:2px;")
        btns = E.div(class_="buttons")(

            E.button(class_="button is-info", onclick="slide()")("left"),
            E.button(class_="button is-link", onclick="slide()")("right"),

        )

        self.builder(sl(), btns)        


class PageIcons(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        card = Card(class_="is-clipped m-0 p-0")
        name_icons = FASICON.__dict__.get("dict_group")
        l = []
        for name, val in name_icons.items():
            p = E.p(class_="has-text-primary")(val)
            c = icon_text(name=val, text=f"{name}")
            box = E.div(class_=f"block", style="height:100px;")(c, p)
            card.card_content(box)
            l.append(card())
        container = Container(class_="columns is-multiline is-fullhd is-centered")
        container.container_body([*l])
        views = Views(class_="mt-4 mb-4 m-0 bb")
        views.centered = True
        views.desktop = 2
        views.tablet = 3
        views.mobile=6
        views.view_body(list_body=l, class_=["p-1", "m-0"])
        self.builder(views() )





class PagePaginator(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        print(request)
        
        page_name = kw_data.get("page", None)
        self.render.set_meta_seo(**kw_data)
        paginator = MyPaginator()
        paginator.set_pages_list(lst=["test1", 'test2', "test3", "test4"])
        
        paginator.paginator(page_name, pattren_url=f"http://localhost:8000/paginator?page=", ) 
        self.builder(paginator())


class PageDropDown(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        dr = Dropdown(class_="m-5 is-fullhd")
       
        avatar = """
        <figure class="image  is-32x32 ml-2">
                        <img class="is-rounded" src="/public/assets/images/user.jpg">
        </figure>
        """
        dr.avatar_path = "/public/assets/images/user.jpg"
        f = E.a(class_="dropdown-item", href="#3333")("sdsdsds")
        lit = [f,f,f,f]
        dr.button_name="sdsds dsdsd"
        dr.opening = "left"
        dr.drops_out= "down"
        dr.drop_content(lst=[E.a(class_="dropdown-item ", href="#")(f"sdsadsa dsad sad "), f,
        E.hr(class_="dropdown-divider"), f], )
        print(dr.__doc__, "gsdgsgds")
        self.builder(dr())

class PageNotification(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        section = Section()
        data = E.div()(
            E.p()("sdsadsad"),
            E.br(),
            E.hr(),
            E.p()("dfdfdfdf"),



        )
        section.section_title("test title")
        section.section_subtitle("test title" , class_="is-size-2")

        section.section_body(notification(data, target="name", class_="is-info column is-5", onclick="closeNotification()", style="color:red;"))
  
        self.builder(section())

class PageForms(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        forms = Forms(class_="is-info", id="test", action="/", method="POST")
        f = E.div(class_="column is-4 field")(
                  E.div(class_="control ", )(
                  E.label(class_="label", for_="name")("Label"),

                  E.input(class_="input", type="text", id="name", name="name"),
                  ),
        )
        forms.add_field(f)

        print(*( hash(i) for i in forms._fields.keys()))
        forms.add_field(child=f)
        # forms.add_field(child=f)

        self.builder(forms())


class PageTable(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        table = Table(class_="is-hoverable is-striped is-fullwidth")
        table.add_caption(txt="user tessttsts", class_="title is-size-5 has-text-info")
        table.add_thead(arr=["teete", "wdwdwdw", "Wwwwdwdwd", "Wdwdwdw"], onclick="tetsts", class_="asdasdasd sdsdsdsd asdasdasd")
        table.add_tbody(arr=[("ssdsd", "sdsdsd", "", "dsadsadasd" ), ("sdsad", "", "adasd", ""),
        ("sdsad", "", "adasd", ""),(E.p(class_="has-text-link")("tsttsdtsd"), "", "adasd", ""),("sdsad", "", "adasd", "")], class_="has-text-primary")
        table.add_tfood(arr=["sdsd", "", "sdsd", ""])
        self.builder(table())
    


class PageIVideo(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        ivideo = VideoIFrame()
        self.builder(E.hr())
        ivideo.vbody(src="https://rutube.ru/play/embed/331a38441c513a23b35cdc96e0704aef/?skinColor=fbf819")
        self.builder(ivideo())
        ivideo.vbody(src="https://rutube.ru/play/embed/331a38441c513a23b35cdc96e0704aef/?skinColor=fbf819")
# <iframe width="720" height="405"  style="border: none;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        self.builder(E.hr())
        ivideo.vbody(src="https://rutube.ru/play/embed/1663c1465198a4661dc2bbea0b413df8/")

        self.builder(ivideo())
        ivideo.vbody(src="https://rutube.ru/play/embed/331a38441c513a23b35cdc96e0704aef/?skinColor=fbf819")

        self.builder(E.hr())
        self.builder(ivideo())
        ivideo.vbody(src="https://rutube.ru/play/embed/331a38441c513a23b35cdc96e0704aef/?skinColor=fbf819")

        self.builder(E.hr())
        # <iframe width="720" height="405" src="https://rutube.ru/play/embed/307cb5ec9c00e4263ee2988cd5a12440/" style="border: none;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        self.builder(ivideo())


# class PagePreCode(BaseLayout):

#     async def layout(self, request: Request,  **kw_data):
#         self.render.set_meta_seo(**kw_data)
#         pre = PreCode(class_=["is-medium", "scroll"])
#         txt = """
# window = WindowIFrame(classes=["container", "is-fullhd",])
# doc = SrcDoc("test", language="ru", _urls=["/public/assets/css/bulma.css",
# "/ddasdasda.js"])
# body = E.div(class_="box")(
# "tetetetetettetetete  tet tetete t"
# ).script(None, src="/wewewew.js")
# # self.builder(window(src="https://m.ok.ru/dk?st.cmd=movieLayer&st.groupId=52627847315637&st.retLoc=top&st.discType=GROUP_MOVIE&st.mvId=10163714853557&st.stpos=rec_1&st.plog=-1%3B-1%3B1%3B&st.discId=10163714853557&st.rtu=%2Fdk%3Fst.cmd%3DuserMovies%26st.frwd%3Doff%26st.page%3D1%26_prevCmd%3DuserMovies%26tkn%3D697%26__dp%3Dy&_prevCmd=movieLayer&tkn=9413&_cl.id=1761327420544&_clickLog=%5B%7B%22targetId%22%3A%2210163714853557%22%2C%22target%22%3A%22to_recommendation%22%7D%2C%7B%22target%22%3A%22VIDEO%22%7D%2C%7B%22contentId%22%3A%2210163714853557%22%2C%22recommendationChain%22%3A%220%22%2C%22contentType%22%3A%22video%22%2C%22collector%22%3A%22layer.stat.collector%22%2C%22layerLocationType%22%3A%22VIDEO_FEED%22%7D%5D&_cl.sID=movieLayer#", style="height:100vh;"))
# self.builder(window(srcdoc=doc(body=[body])))
#         """
#         js= """
#         <!-- This anchor tag posts to '/click' when it is clicked -->
#   <a ic-post-to="/click">
#     Click Me!
#   </a>
#         """
#         pre.data(txt,)
#         self.builder(pre())



class PageWindow(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        window = WindowIFrame(class_="is-fullhd bb", style="height:1000px;")
        doc = SrcDoc("test", language="ru", _urls=["/public/assets/css/bulma.css",
         "/ddasdasda.js"])
        body = E.div(class_="box")(
            "tetetetetettetetete  tet tetete t"
        ).script(None, src="/wewewew.js")
        window.frame(src="https://m.ok.ru/dk?st.cmd=movieLayer&st.groupId=52627847315637&st.retLoc=top&st.discType=GROUP_MOVIE&st.mvId=10163714853557&st.stpos=rec_1&st.plog=-1%3B-1%3B1%3B&st.discId=10163714853557&st.rtu=%2Fdk%3Fst.cmd%3DuserMovies%26st.frwd%3Doff%26st.page%3D1%26_prevCmd%3DuserMovies%26tkn%3D697%26__dp%3Dy&_prevCmd=movieLayer&tkn=9413&_cl.id=1761327420544&_clickLog=%5B%7B%22targetId%22%3A%2210163714853557%22%2C%22target%22%3A%22to_recommendation%22%7D%2C%7B%22target%22%3A%22VIDEO%22%7D%2C%7B%22contentId%22%3A%2210163714853557%22%2C%22recommendationChain%22%3A%220%22%2C%22contentType%22%3A%22video%22%2C%22collector%22%3A%22layer.stat.collector%22%2C%22layerLocationType%22%3A%22VIDEO_FEED%22%7D%5D&_cl.sID=movieLayer#", class_=["is-fullhd", "container"], style="height:1000px;")
        self.builder(window())


class PageCalendar(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        calendar = VCalendar(class_=["is-bordered"])
        calendar.empty_colonka_color= "light"
        calendar.set_caption("2025 октябрь")
        calendar.calendar_monthdays(2025, 10, event={6: {"class_": "has-text-primary"}, 22: {"class_": "has-background-success"}, 30: {"class_": "has-text-primary"}}, onclick="test()", class_=["has-background-info"], style="color:green;")
        self.builder(calendar())


class PageAsideMenu(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        aside = AsideMenu()
        aside.menu_list_css = "is-size-5"
        aside.submenu_css = "is-size-5"
        #  <ul class="submenu">
        #             <li><a>Menu 1</a></li>
        #             <li><a>Menu 2</a></li>
        #             <li><a>Menu 3</a></li>
        #         </ul>  
        lk = [
              E.a(href="#tetssts", class_="has-background-primary", style="color:green;")("test1"),
              [E.a(href="#tetssts")("test2"), [E.a(href="dfdsfdsf")("dfsdfdsf")]],
              E.a(href="#tetssts")("test3"),
              E.a(href="#tetssts")("test4"),
              E.a(href="#tetssts")("test5"),
              [E.a(href="#tetssts")("test6"),[
              E.a(href="#tetssts")("test5"),
              E.a(href="#tetssts")("test5"),
              E.a(href="#tetssts")("test5"),

              ] ],

        ]
        aside.append_menu(name='name1', list_link=lk, label_css="is-size-4")
        aside.append_menu(name="test1", list_link=lk, label_css="has-text-primary" )
        cont = Container()
        cont.container_body([aside()])
        self.builder(aside(), cont())

class PageHero(AsyncBaseLayout):
    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        hero = HeroNavBar(classes=["is-light", "is-large", "is-bold","is-boxed", "scrolls"])
        start = [
            E.a(class_="navbar-item ")("link - 3"),
            E.a(class_="navbar-item modal-trigger",   data_target="modal-uslugi" )("link - 33"),
            E.a(class_="navbar-item modal-trigger",  data_target="modal-uslugi")("link - 55"),
            E.a(class_="navbar-item modal-trigger",  data_target="modal-uslugi")("link - 777"),

        ] 
        hero.start_link(name="Услуги", link=start)
        hero.start_link(name="Наши работы", link=start)

        item = E.div(class_="navbar-item")
        end = [
            item(
            E.a(class_="mr-3",  href="tel:+79199000690" )(icon(name=FASICON.phone, classes=["has-text-primary", "fa-lg"])),
            E.a(class_="mr-4", href="https://t.me/linesforms")(icon(name=FASICON.paper_plane, classes=["has-text-info", "fa-lg"]) ),
            E.a(class_="button m-1 is-primary modal-trigger", data_target="modal-menu")(icon(name=FASICON.bars)),
            )
        ]  

        hero.end_link(link=end)       
        hero.hero_header(logo="Линейные Формы", host="/",
                classes=["modal-trigger"], data_target="modal-menu", sub_classes=["is-boxed"] )
        one_h = "Строительсво и ремонт квартир"
        two_h = "быстро и качественно"
        bn = [
            E.div(class_="title is-underlined has-text-primary", style="color: rgb(54,24,184);")(one_h),
            E.div(class_="subtitle has-text-primary",)(two_h)

        ] 
        bys = E.div(class_="box has-text-centered", style="background:rgba(0, 255, 0,0.1);")       
        hero.hero_body([bys(*bn)], class_=["myhero"])
        with E.ul()  as l:
            for i in range(12):
                l(E.li(E.a(class_=" is-light")(f" buton - {i}"), class_="" )(None))           
        food = [l]
        hero.hero_food(food,  classes=["is-boxed", "is-fullwidth", "has-text-white"]) 
        self.builder(E.div(class_="box", style="height:600px;")(None),hero())


class PageModal(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data)
        aside = AsideMenu(class_=["m-2"])    
        lk = [
              E.a(href="#tetssts", class_="has-background-primary", style="color:green;")("test1"),
              E.a(href="#tetssts")("test2"),
              E.a(href="#tetssts")("test3"),
              E.a(href="#tetssts")("test4"),
              E.a(href="#tetssts")("test5"),
              E.a(href="#tetssts")("test6"),

        ]
        aside.append_menu(name="test1", list_link=lk,)
        aside.append_menu(name="test2", list_link=lk, )
        modal = Modal(id="test2")
        modal.background_active = False
        btn = E.button(class_="button modal-trigger", data_target="test2")("open modal")
        modal.modal_body(body=E.div(class_="box has-background-primary",)(aside(), aside()), onclick="aDSADASD", class_="tetetet", style="color: green;",)
        modalf = Modal(id="test3")
        modalf.left=0
        modalf.width = 40
        modalf.bottom = 200
        btnf = E.button(class_="button modal-trigger", data_target="test3")("open modal fixed")
        modalf.nav_bottom = False
       
        modalf.modal_body_fixed(body=E.div(class_="box")(aside()), class_=["is-3"] )
    
        self.builder(modal(button_close=True),  modalf(), btn, btnf, style="height: 80vh;")



class PagePost(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data) 
        post = PostArticle(class_="column bb is-5 m-3 p-3")
        post.container="article"
        post.post_media(src="/public/assets/images/pythonist.png", size="128x128", class_="tessdsd sds d")
        box = E.p(class_="has-text-black")(
            "dfdsfsdfsdfsdfdsfsdfsdfsdf rer ererwer erwe rwerew  rewr werwerewr",
            E.br(),
            E.strong()("sadfasdsads"),
            E.button(href="/#", class_="button ml-4 is-primary")("tests"),
        )
        post.post_content(box, ondblclick="teststs()", title="postarticle")
        self.builder(post())


class PageGrid(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data) 
        grid = Grid(class_="has-4-cols")
        fixed = FixedGrid(class_=["has-4-cols"])
        for i in range(10, 30):
            if i == 13:
                box = E.div(class_="box bb has-background-info")(str(i))
                # fixed.cells(data_cell=box, class_="is-col-span-2")
                fixed.cells(data_cell=box,  class_="is-row-span-2")
            if i == 20:
                fixed.cells(data_cell=box,  class_="is-row-from-end-1 ")


            else:    
                box = E.div(class_="box bb has-background-primary")(str(i))

                fixed.cells(data_cell=box)
            if i == 13:
                box = E.div(class_="box bb has-background-link")(str(i))

                # grid.cells(data_cell=box, class_="is-row-start-5 ")
                grid.cells(data_cell=box, class_="is-row-from-end-1 ")

            else:  
                box = E.div(class_="box bb has-background-primary")(str(i))
               
                    # fixed.cells(data_cell=box,  class_="is-row-from-end-1 ")
                    # fixed.cells(data_cell=box,  class_="is-row-span-8 ")

                grid.cells(data_cell=box, )

        self.builder(grid(), E.hr(), fixed())


class PageCard(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        card = Card()
        
        card.card_header("headres", fasicon=FASICON.user, color_header="has-text-link", class_="has-text-link")
        card.card_image(src="/public/assets/images/pythonist.png",  alt="tests" )
        card.card_content(content=E.div(class_="block")("content"), class_="has-text-white")
        l = [
            E.a(href="#/", class_="card-footer-item")("tetsss"),
            E.a(href="#/about/", class_="card-footer-item")("sasdsasd"),
            E.a(href="#/about/", class_="card-footer-item")("sasdsasd"),
            E.a(href="#/about/", class_="card-footer-item")("sasdsasd"),

        ]
        card.card_footer(l)
        self.render.set_meta_seo(**kw_data)
        l = []
        # for i in range(10):
        #     l.append(card())
        card2 = Card(class_="tettee")
        card2.card_header("tetetet", fasicon=FASICON.arrow_left,  onclick="test()")
        card2.card_content(E.p("sdsadasdasdasdasdsa   faafasfasf asf").br().p("f asfa sfasfas fasfasf as fasf asfas"))
        ld = E.a(href="sdsad", class_="card-footer-item")("asdsad")
        card2.card_footer([ld, ld, ld ])    
        self.builder(card2(), card(), *l)



class PageIndex(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        meta_tegi = self.builder.USERSMETA
        meta_tegi.meta(name="GENERATOR", content="Microsoft FrontPage 4.0")
        self.render.set_meta_seo(**kw_data)
        l = [
            E.a(href="#/", class_="card-footer-item")("tetsss"),
            E.a(href="#/about/", class_="is-active has-text-black  button" , aria_current="page")("sasdsasd"),
            E.a(href="#/about/", class_="button")(icon_text(name=FASICON.user, text="user")),
            E.a(href="#/about/", class_="button")("sasdsasd"),

        ] 
       
        
        

        kw_data["og_image"] = "https://test.ru/image.ipg"
        self.render.set_meta_property(**kw_data)
        
        modal = Modal(id="modal-js-example")
        modal.nav_bottom=False
        body = E.div(class_="box" )(
            E.p()("tetetettetete"),
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
             )

        b = [
            E.p()("tetetettetete"),
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
            E.p()("tetetettetete"),      
        ]     

        modal.modal_body_fixed(body=body)

        hero = HeroNavBar(class_="is-primary is-large")
        hero.start_link("tests", b )
        hero.end_link(link=l)
        hero.hero_header(logo="HeroLogo",
                data_target="navMenu2", 
                onclick="menuBarOpen(event)", id="navNeu2", class_=["app-menu"] )

        bn = [
            E.div(class_="block bb")(
            E.div(class_="title")("asaSAS AS a fdsfsdfsdf sdfds"),
            E.div(class_="subtitle")("asaSAS AS dfdsfdsfsdfds f")
            ),
        ]        

        hero.hero_body(list_body=bn, class_=["myhero" , "bb"], style="background:blue;")
        with E.ul()  as l:
            for i in range(22):
                l(E.li(E.a(class_=" is-light")(f" buton - {i}"), class_="" )(None))           
        food = [l]
        hero.hero_food(list_body=food,  class_=["is-boxed", "is-fullwidth", "has-text-white"])    
        drop = """
   <div class="card">
   <header class="card-header"><p class="card-header-title">Component</p>
   <button class="card-header-icon" aria-label="more options">
   <span class="icon"><i class="fa-solid fa-angle-down"></i></span>
   </button></header>
   <div class="card-content"><div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. </p><a>@bulmaio</a><p>. </p><a href="#">#css</a><p> </p><a href="#">#responsive</a><br><time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time></div></div><footer class="card-footer"><a class="card-footer-item" href="#">Save</a><a class="card-footer-item" href="#">Edit</a><a class="card-footer-item" href="#">Delete</a></footer></div>
        """
        dr = Dropdown(class_="m-5")
        dr.button_name = "teststs"
       
        phone =  E.input(type="tel",  class_="input ", style="width:200px;", id="phone", placeholder="8(999)123-45-67", value="8")
        phon =  """
         <div class="box">
                <h1 class="title is-5">Введите номер телефона</h1>

                <!-- Bulma field -->
                <div class="field">
                    <label class="label">Введите номер телефона</label>
                    <div class="control has-icons-left">
                        <!-- Сам инпут с классом input и модификатором is-medium для удобства -->
                        <input class="input is-medium" type="tel" id="phone" placeholder="8(999)123-45-67" value="8">
                        <span class="icon is-medium is-left">
                            <i class="fas fa-phone"></i>
                        </span>
                    </div>
                    <p class="help">Формат: 8(XXX)XXX-XX-XX</p>
                </div>
            </div>
        
        """
   
        product = """
    <div class="product-slider">
        <h2 class="product-slider__title">Наши товары</h2>
        <div class="product-slider__wrapper">
            <button class="product-slider__btn product-slider__btn--prev" aria-label="Предыдущий">&#10094;</button>
            <div class="product-slider__track" id="sliderTrack"></div>
            <button class="product-slider__btn product-slider__btn--next" aria-label="Следующий">&#10095;</button>
        </div>
        <div class="product-slider__dots" id="sliderDots"></div>
    </div>
        """
        l = [
            E.a(href="#/", class_="card-footer-item")("tetsss"),
            E.a(href="#/about/", class_="is-active has-text-black", aria_current="page")("sasdsasd"),
            E.a(href="#/about/", class_="")(icon_text(name=FASICON.user, text="user")),
            E.a(href="#/about/", class_="")("sasdsasd"),

        ]
     
        spiner = icon("fas fa-spinner fa-pulse fa-2x  ", class_="has-text-danger htmx-indicator", id="spin")
        sp = icon(FASICON.spinner, class_="fa-pulse fa-4x htmx-indicator has-text-primary", style="position:absolute;top:40%;left:45%;", id="pin")
        dr.button_color="info"
        dr.drop_content(lst=[E.a(class_="dropdown-item ", href="#")("sdsadsa dsad sad"), E.hr(class_="dropdown-divider")])

        load = LoadingSpinn()
        load.color = "link"

      
        iint = """
        <input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
    placeholder="Search...">
<div id="search-results"></div>
        
        """

  
       
  
        bkg = E.div(class_="htmx-indicator", id="truk", style=" display: flex; position:fixed;background: rgba(3, 3, 3, 0.9); align-items: center;  flex-direction: column; justify-content: center; top:0;right:0;left:0;bottom:0;z-index:41;")(sp)
        "------------------------------------------------------"
        he = HeroSlider(class_="tests")
        he.theme_button = "is-info"
        he.add_slider_img( src="/public/assets/images/sl3.png",  loading="lazy", alt="Slide 4")
        he.add_slider_img( src="/public/assets/images/sl1.png",  loading="lazy", alt="Slide 4")
        he.add_slider_img( src="/public/assets/images/sl4.png",  loading="lazy", alt="Slide 4")        
        he.add_slider_img( src="/public/assets/images/sl2.png",  loading="lazy", alt="Slide 4")
        "------------------------------------------------------"


       

        opens = E.div(None, id="opens", class_="opens")         
        spin = E.img(class_="htmx-indicator has-text-info", id="ter", src="/public/assets/images/rings.svg")
        btn = E.button(data_hx_post="/clicked?args=column_5|size_12",  hx_headers='{"X-CSRF-TOKEN": "CSRF_TOKEN_INSERTED_HERE"}', hx_params="testst=ffsfafasfas", form="associated-form",  hx_indicator="#load_spinn", hx_encoding="multipart/form-data",  hx_swap="innerHTML",  class_="button", hx_target="#opens",  hx_trigger="click", )("testts",)
        self.builder.h1(class_="title  has-text-centered")("sadsadasdasd asdas dasd")
        self.builder(load() ,opens, btn, HTML(phon), he(),dr(), HTML(product))


class PageDocs(AsyncBaseLayout):

    async def layout(self, request: Request,  **kw_data):
        self.render.set_meta_seo(**kw_data) 
        doc = Docs()
        self.builder(doc.view_message(count=4, color="is-warning"))

render = Render()
handler_lst =(PageMessage("message"), PageIndex("index"),
              PageSlide("slide"), PagePaginator("paginator"),
              PageNotification("notification"), PageCard("card"),
              PageIcons("icons"), PagePost("post"), PageAsideMenu("aside"),
              PageIVideo("ivideo"), PageWindow("window"), PageTable("table"), PageNotification("notification"), PageDropDown("drop"),
              PageModal("modal"),
              PageCalendar("calendar"), PagePanel("panel"),
              PageGrid("grid"), PageHero("hero"), PageForms("forms"), PageDocs("doc"))


render.register_handler_page(*handler_lst)