- Lorem Ipsum is simply dummy text of the
- printing and typesetting industry. Lorem Ipsum
- has been the industry's standard dummy text
- ever since the 1500s, when an unknown printer
- took a galley of type and scrambled it to make
- a type specimen book.
-
-
- It has survived not only five centuries, but
- also the leap into electronic typesetting,
- remaining essentially unchanged.
-
- Successful businesses have many things in
- common, today we’ll look at the big ‘R’of
- recognition and how a digital advertising
- network may help. Recognition can be
- illustrated by two individuals entering a
- crowded room at a party. Both walk to the far
- side of the room, one of them slips through
- the crowd easily and unnoticed as they reach
- the far side.
-
- It is a long established fact that a reader
- will be distracted by the readable content of
- a page when looking at its layout.The point of
- using Lorem Ipsum is that it has a
- more-or-less normal distribution of letters,
- as opposed to using 'Content here, content
- here',making it look like readable English.
-
-
- There are many variations of passages of Lorem
- Ipsum available, but the majority have
- suffered alteration in some form, by injected
- humour, or randomised words which don't look
- even slightly believable.
-
- A pretty helpful component to show organized information to the
- user.
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Click the accordions below to expand/collapse the accordion
- content.
-
-
-
-
-
-
-
-
- This is the first item's accordion body.{" "}
- It is shown by default, until the collapse plugin adds the
- appropriate classes that we use to style each element.
- These classes control the overall appearance, as well as
- the showing and hiding via CSS transitions. You can modify
- any of this with custom CSS or overriding our default
- variables. It's also worth noting that just about any HTML
- can go within the .accordion-body, though the
- transition does limit overflow.
-
-
-
-
-
-
-
-
-
- This is the second item's accordion body.{" "}
- It is hidden by default, until the collapse plugin adds
- the appropriate classes that we use to style each element.
- These classes control the overall appearance, as well as
- the showing and hiding via CSS transitions. You can modify
- any of this with custom CSS or overriding our default
- variables. It's also worth noting that just about any HTML
- can go within the .accordion-body, though the
- transition does limit overflow.
-
-
-
-
-
-
-
-
-
- This is the third item's accordion body.{" "}
- It is hidden by default, until the collapse plugin adds
- the appropriate classes that we use to style each element.
- These classes control the overall appearance, as well as
- the showing and hiding via CSS transitions. You can modify
- any of this with custom CSS or overriding our default
- variables. It's also worth noting that just about any HTML
- can go within the .accordion-body, though the
- transition does limit overflow.
-
-
-
-
-
-
-
-
-
-
-
Flush
-
-
-
- Add .accordion-flush to remove the default
- background-color, some borders, and some rounded corners to
- render accordions edge-to-edge with their parent container.
-
-
-
-
-
-
-
-
- Placeholder content for this accordion, which is intended
- to demonstrate the .accordion-flush class.
- This is the first item's accordion body.
-
-
-
-
-
-
-
-
-
- Placeholder content for this accordion, which is intended
- to demonstrate the .accordion-flush class.
- This is the second item's accordion body. Let's imagine
- this being filled with some actual content.
-
-
-
-
-
-
-
-
-
- Placeholder content for this accordion, which is intended
- to demonstrate the .accordion-flush class.
- This is the third item's accordion body. Nothing more
- exciting happening here in terms of content, but just
- filling up the space to make it look, at least at first
- glance, a bit more representative of how this would look
- in a real-world application.
-
- Bootstrap’s cards provide a flexible and extensible content
- container with multiple variants and options.
-
-
-
-
-
-
-
- {/* Basic card section start */}
-
-
-
-
-
-
-
Card With Header And Footer
-
- Introducing our beautifully designed cards, thoughtfully
- crafted to enhance your browsing experience. These versatile
- elements are the perfect way to present information, products,
- or services on our website.
-
-
-
-
-
- Card Footer
-
-
-
-
-
-
Accordion
-
-
-
-
-
-
-
-
-
-
-
- This is the first item's accordion body.
- {" "}
- It is shown by default, until the collapse plugin adds
- the appropriate classes that we use to style each
- element. These classes control the overall appearance,
- as well as the showing and hiding via CSS transitions.
- You can modify any of this with custom CSS or overriding
- our default variables. It's also worth noting that just
- about any HTML can go within the{" "}
- .accordion-body, though the transition does
- limit overflow.
-
-
-
-
-
-
-
-
-
-
- This is the second item's accordion body.
- {" "}
- It is hidden by default, until the collapse plugin adds
- the appropriate classes that we use to style each
- element. These classes control the overall appearance,
- as well as the showing and hiding via CSS transitions.
- You can modify any of this with custom CSS or overriding
- our default variables. It's also worth noting that just
- about any HTML can go within the{" "}
- .accordion-body, though the transition does
- limit overflow.
-
-
-
-
-
-
-
-
-
-
- This is the third item's accordion body.
- {" "}
- It is hidden by default, until the collapse plugin adds
- the appropriate classes that we use to style each
- element. These classes control the overall appearance,
- as well as the showing and hiding via CSS transitions.
- You can modify any of this with custom CSS or overriding
- our default variables. It's also worth noting that just
- about any HTML can go within the{" "}
- .accordion-body, though the transition does
- limit overflow.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Be Single Minded
-
- Chocolate sesame snaps apple pie danish cupcake sweet roll
- jujubes tiramisu.Gummies bonbon apple pie fruitcake icing
- biscuit apple pie jelly-o sweet roll.
-
- Welcome to our dynamic carousel, where innovation takes center
- stage. Take a captivating journey through our cutting-edge
- products, groundbreaking solutions, and the latest
- advancements in technology. Each slide invites you to discover
- something new and exciting, providing a glimpse into the
- future of innovation.
-
-
- Whether you're a tech enthusiast, an industry professional, or
- simply curious about what's on the horizon, our carousel is
- your window into the world of creativity, ingenuity, and
- limitless possibilities. Swipe, click, or scroll through to
- immerse yourself in a visual feast of innovation that will
- inspire, inform, and leave you with a sense of wonder.
-
-
-
-
-
-
-
-
Feedback Form
-
- Your feedback is instrumental in shaping our future. It guides
- our decisions, inspires innovation, and ensures that we're
- meeting your needs. Whether you've had a stellar experience or
- encountered any challenges, we want to hear from you. Your
- feedback fuels our commitment to continuous improvement.
-
- Some placeholder content for the collapse component. This panel
- is hidden by default but revealed when the user activates the
- relevant trigger.
-
-
-
-
-
-
-
-
Multiple Targets
-
-
-
- Click the buttons below to show and hide another element via
- class changes:
-
- Some placeholder content for the first collapse component
- of this multi-collapse example. This panel is hidden by
- default but revealed when the user activates the relevant
- trigger.
-
-
-
-
-
-
- Some placeholder content for the second collapse component
- of this multi-collapse example. This panel is hidden by
- default but revealed when the user activates the relevant
- trigger.
-
- To create a split button add class
- .dropdown-toggle-split with your dropdown toggle
- class and to add divider between dropdown item use class
- .doprdown-divider
-
-
- {/* Dropdown with Icon End */}
- {/* Dropdown Direction Starts */}
-
-
-
-
-
-
Directions
-
-
-
-
- Add .dropdown-menu-end to a
- .dropdown-menu to right align the dropdown menu.
- Trigger dropdown menus at the up / right / left of the
- elements by adding{" "}
- .dropup | .dropright | .dropleft to the parent
- element.
-
- To create a dropdown with groups you can use
- .dropdown-header for the header of groups and for
- separation of group you can use .dropdown-divider
- .
-
-
- To create a dropdown with icons use class
- .dropdown-icon-wrapper with{" "}
- .dropdown.
-
- List groups are a flexible and powerful component for displaying a
- series of content.
-
-
-
-
-
-
-
- {/* list groups simple & disabled start */}
-
-
-
-
-
-
Simple List Group
-
-
-
-
- The most basic list group is simply an unordered list with
- list items, and the proper classes. Build upon it with the
- options that follow, or your own CSS as needed.
-
-
-
Cras justo odio
-
Dapibus ac facilisis in
-
Morbi leo risus
-
Porta ac consectetur ac
-
- chocolate cheesecake candy
-
-
- Oat cake icing pastry pie carrot
-
-
-
-
-
-
-
-
-
-
Disabled items
-
-
-
-
- Add .disabled to a .list-group-item{" "}
- to gray it out to appear disabled.
-
-
- Cras justo odio
-
- Dapibus ac facilisis in
-
-
- Morbi leo risus
-
-
- Porta ac consectetur ac
-
- Vestibulum at eros
-
- Biscuit jelly beans macaroon danish pudding
-
-
- Oat cake icing pastry pie carrot
-
-
-
-
-
-
-
-
- {/* list groups simple & disabled end */}
- {/* list group button & badge start*/}
-
-
-
-
-
-
Button list Group
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Badges
-
-
-
-
- Use Utility classes .d-flex{" "}
- .justify-content-between
- align-items-center to create space between badge
- and your content
-
-
- {/* list group Checkboxes and radios end */}
- {/* list group with contextual & horizontal start */}
-
-
-
-
-
-
Contextual classes
-
-
-
-
- Use contextual classes to style list items, default or linked.
- Also includes .active state.
-
-
-
- Cras justo odio
-
-
- Dapibus ac facilisis in
-
-
- Morbi leo risus
-
-
- Porta ac consectetur ac
-
-
- Vestibulum at eros
-
-
- chocolate cheesecake candy
-
-
- Oat cake icing pastry pie carrot
-
-
-
-
-
-
-
-
-
-
Horizontal
-
-
-
-
- Add .list-group-horizontal to change the layout
- of list group items from vertical to horizontal across all
- breakpoints.choose a responsive variantcode{" "}
-
- .list-group-horizontal-{"{"}sm|md|lg|xl{"}"}
- {" "}
- to make a list group horizontal starting at that breakpoint’s
- min-width.
-
- Irure enim occaecat labore sit qui aliquip reprehenderit
- amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi
- officia magna sit occaecat laboris sunt dolor. Nisi eu minim
- cillum occaecat aute est cupidatat aliqua labore aute
- occaecat ea aliquip sunt amet. Aute mollit dolor ut
- exercitation irure commodo non amet consectetur quis amet
- culpa. Quis ullamco nisi amet qui aute irure eu. Magna
- labore dolor quis ex labore id nostrud deserunt dolor
- eiusmod eu pariatur culpa mollit in irure Lorem, ipsum dolor
- sit amet consectetur adipisicing elit. Iusto quis porro
- doloribus est natus doloremque, eos laudantium
- exercitationem impedit sapiente tenetur soluta reiciendis
- deserunt!
-
-
- Cupidatat quis ad sint excepteur laborum in esse qui. Et
- excepteur consectetur ex nisi eu do cillum ad laborum.
- Mollit et eu officia dolore sunt Lorem culpa qui commodo
- velit ex amet id ex. Officia anim incididunt laboris
- deserunt anim aute dolor incididunt veniam aute dolore do
- exercitation. Dolor nisi culpa ex ad irure in elit eu
- dolore. Ad laboris ipsum reprehenderit irure non commodo
- enim culpa commodo veniam incididunt veniam ad. Lorem ipsum
- dolor sit amet consectetur, adipisicing elit.
- Exercitationem, porro! Amet soluta tempora eveniet
- blanditiis alias eos, dolor qui consectetur!
-
-
- Ut ut do pariatur aliquip aliqua aliquip exercitation do
- nostrud commodo reprehenderit aute ipsum voluptate. Irure
- Lorem et laboris nostrud amet cupidatat cupidatat anim do ut
- velit mollit consequat enim tempor. Consectetur est minim
- nostrud nostrud consectetur irure labore voluptate irure.
- Ipsum id Lorem sit sint voluptate est pariatur eu ad
- cupidatat et deserunt culpa sit eiusmod deserunt.
- Consectetur et fugiat anim do eiusmod aliquip nulla laborum
- elit adipisicing pariatur cillum. Lorem ipsum dolor sit amet
- consectetur adipisicing elit. Molestias, inventore!
-
-
-
-
-
-
-
-
- {/* list group with contextual & horizontal ends */}
- {/* List group navigation start */}
-
-
- Velit aute mollit ipsum ad dolor consectetur nulla
- officia culpa adipisicing exercitation fugiat tempor.
- Voluptate deserunt sit sunt nisi aliqua fugiat proident
- ea ut. Mollit voluptate reprehenderit occaecat nisi ad
- non minim tempor sunt voluptate consectetur exercitation
- id ut nulla. Ea et fugiat aliquip nostrud sunt
- incididunt consectetur culpa aliquip eiusmod dolor. Anim
- ad Lorem aliqua in cupidatat nisi enim eu nostrud do
- aliquip veniam minim. Lorem ipsum dolor sit amet
- consectetur, adipisicing elit. Aliquam itaque nisi
- obcaecati doloremque et est ex possimus quidem dolorem
- soluta.
-
-
- Cupidatat quis ad sint excepteur laborum in esse qui. Et
- excepteur consectetur ex nisi eu do cillum ad laborum.
- Mollit et eu officia dolore sunt Lorem culpa qui commodo
- velit ex amet id ex. Officia anim incididunt laboris
- deserunt anim aute dolor incididunt veniam aute dolore
- do exercitation. Dolor nisi culpa ex ad irure in elit eu
- dolore. Ad laboris ipsum reprehenderit irure non commodo
- enim culpa commodo veniam incididunt veniam ad.
-
-
- Ut ut do pariatur aliquip aliqua aliquip exercitation do
- nostrud commodo reprehenderit aute ipsum voluptate.
- Irure Lorem et laboris nostrud amet cupidatat cupidatat
- anim do ut velit mollit consequat enim tempor.
- Consectetur est minim nostrud nostrud consectetur irure
- labore voluptate irure. Ipsum id Lorem sit sint
- voluptate est pariatur eu ad cupidatat et deserunt culpa
- sit eiusmod deserunt. Consectetur et fugiat anim do
- eiusmod aliquip nulla laborum elit adipisicing pariatur
- cillum.
-
-
- Irure enim occaecat labore sit qui aliquip reprehenderit
- amet velit. Deserunt ullamco ex elit nostrud ut dolore
- nisi officia magna sit occaecat laboris sunt dolor. Nisi
- eu minim cillum occaecat aute est cupidatat aliqua
- labore aute occaecat ea aliquip sunt amet. Aute mollit
- dolor ut exercitation irure commodo non amet consectetur
- quis amet culpa. Quis ullamco nisi amet qui aute irure
- eu. Magna labore dolor quis ex labore id nostrud
- deserunt dolor eiusmod eu pariatur culpa mollit in irure
-
- Use Bootstrap’s JavaScript modal plugin to add dialogs to your site
- for lightboxes, user notifications, or completely custom content.
-
-
-
-
-
-
-
-
-
-
-
-
-
Basic Modal
-
-
-
- Toggle a modal via JavaScript by clicking the button above. You
- can use modal to add dialogs to your site for lightboxes, user
- notifications, or completely custom content.
-
- Add class{" "}
-
- .modal-{"{"}sm|lg|xl|full{"}"}
- {" "}
- with .modal-dialog to create a modal with different
- size.
-
-
-
- {/*Modal sm size */}
-
- {/* Button trigger for small size modal modal */}
-
- {/*small size modal */}
-
-
-
-
-
- Small Modal
-
-
-
-
- Biscuit chocolate cake gummies. Lollipop I love
- macaroon bear claw caramels. I love marshmallow
- tiramisu I love fruitcake I love gummi bears. Carrot
- cake topping liquorice. Pudding caramels liquorice
- sweet I love. Donut powder cupcake ice cream tootsie
- roll jelly.
-
- {/* Button trigger for large size modal */}
-
- {/*large size Modal */}
-
-
-
-
-
- Large Modal
-
-
-
-
- I love tart cookie cupcake. I love chupa chups
- biscuit. I love marshmallow apple pie wafer liquorice.
- Marshmallow cotton candy chocolate. Apple pie muffin
- tart. Marshmallow halvah pie marzipan lemon drops
- jujubes. Macaroon sugar plum cake icing toffee.
-
-
-
-
-
-
-
-
-
- {/*Modal Xl size */}
-
- {/* Button trigger for Extra Large modal */}
-
- {/*Extra Large Modal */}
-
-
-
-
-
- Extra Large Modal
-
-
-
-
- Cake cupcake sugar plum. Sesame snaps pudding cupcake
- candy canes icing cheesecake. Sweet roll pudding
- lollipop apple pie gummies dragée. Chocolate bar
- cookie caramels I love lollipop ice cream tiramisu
- lollipop sweet.
-
-
-
-
-
-
-
-
-
- {/*Modal full size */}
-
- {/* Button trigger for full size modal */}
-
- {/* full size modal*/}
-
-
-
-
-
- Full Screen Modal
-
-
-
-
- Cake cupcake sugar plum. Sesame snaps pudding cupcake
- candy canes icing cheesecake. Sweet roll pudding
- lollipop apple pie gummies dragée. Chocolate bar
- cookie caramels I love lollipop ice cream tiramisu
- lollipop sweet.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Modal Sizes end */}
- {/* Form and scrolling Components start */}
-
-
-
-
-
-
-
-
Modal with Login Form
-
Created Simple Login Form.
- {/* Button trigger for login form modal */}
-
- {/*login form Modal */}
-
-
-
-
-
- Login Form{" "}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Scrolling long Content
-
-
-
-
- If your content is longer you the page will autmatically adopt
- a scrollbar
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder.
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder.
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder.
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
-
- Powder cookie jelly beans sugar plum ice cream. Candy
- canes I love powder sugar plum tiramisu. Liquorice
- pudding chocolate cake cupcake topping biscuit. Lemon
- drops apple pie sesame snaps tootsie roll carrot cake
- soufflé halvah.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Scrolling long Content Inside Modal
-
-
-
-
-
- You can also create a scrollable modal that allows scroll the
- modal body by adding
- .modal-dialog-scrollable to{" "}
- .modal-dialog.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder.
-
-
- dragée dessert. Liquorice jujubes cake tart pie donut.
- Cotton candy candy canes lollipop liquorice chocolate
- marzipan muffin pie liquorice.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder.
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
- Tootsie roll oat cake I love bear claw I love caramels
- caramels halvah chocolate bar. Cotton candy gummi
- bears pudding pie apple pie cookie. Cheesecake jujubes
- lemon drops danish dessert I love caramels powder.
-
-
- Chocolate cake icing tiramisu liquorice toffee donut
- sweet roll cake. Cupcake dessert icing dragée dessert.
- Liquorice jujubes cake tart pie donut. Cotton candy
- candy canes lollipop liquorice chocolate marzipan
- muffin pie liquorice.
-
-
- Powder cookie jelly beans sugar plum ice cream. Candy
- canes I love powder sugar plum tiramisu. Liquorice
- pudding chocolate cake cupcake topping biscuit. Lemon
- drops apple pie sesame snaps tootsie roll carrot cake
- soufflé halvah.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled Animation
-
-
-
-
- For modals that simply appear rather than fade in to view,
- remove the .fade
- class from your modal markup.
-
- Chocolate bar jelly dragée cupcake chocolate bar I
- love donut liquorice. Powder I love marzipan donut
- candy canes jelly-o. Dragée liquorice apple pie candy
- biscuit danish lemon drops sugar plum.
-
-
- Well done!
- You successfully read this important alert message.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nulla ut nulla neque. Ut hendrerit nulla a euismod pretium.
- Fusce venenatis sagittis ex efficitur suscipit. In tempor
- mattis fringilla. Sed id tincidunt orci, et volutpat ligula.
- Aliquam sollicitudin sagittis ex, a rhoncus nisl feugiat
- quis. Lorem ipsum dolor sit amet, consectetur adipiscing
- elit. Nunc ultricies ligula a tempor vulputate. Suspendisse
- pretium mollis ultrices.
-
-
-
- Integer interdum diam eleifend metus lacinia, quis gravida
- eros mollis. Fusce non sapien sit amet magna dapibus ultrices.
- Morbi tincidunt magna ex, eget faucibus sapien bibendum non.
- Duis a mauris ex. Ut finibus risus sed massa mattis porta.
- Aliquam sagittis massa et purus efficitur ultricies. Integer
- pretium dolor at sapien laoreet ultricies. Fusce congue et
- lorem id convallis. Nulla volutpat tellus nec molestie
- finibus. In nec odio tincidunt eros finibus ullamcorper. Ut
- sodales, dui nec posuere finibus, nisl sem aliquam metus, eu
- accumsan lacus felis at odio. Sed lacus quam, convallis quis
- condimentum ut, accumsan congue massa. Pellentesque et quam
- vel massa pretium ullamcorper vitae eu tortor.
-
-
-
- Duis ultrices purus non eros fermentum hendrerit. Aenean
- ornare interdum viverra. Sed ut odio velit. Aenean eu diam
- dictum nibh rhoncus mattis quis ac risus. Vivamus eu congue
- ipsum. Maecenas id sollicitudin ex. Cras in ex vestibulum,
- posuere orci at, sollicitudin purus. Morbi mollis elementum
- enim, in cursus sem placerat ut.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nulla ut nulla neque. Ut hendrerit nulla a euismod
- pretium. Fusce venenatis sagittis ex efficitur suscipit.
- In tempor mattis fringilla. Sed id tincidunt orci, et
- volutpat ligula. Aliquam sollicitudin sagittis ex, a
- rhoncus nisl feugiat quis. Lorem ipsum dolor sit amet,
- consectetur adipiscing elit. Nunc ultricies ligula a
- tempor vulputate. Suspendisse pretium mollis ultrices.
-
-
- Integer interdum diam eleifend metus lacinia, quis gravida
- eros mollis. Fusce non sapien sit amet magna dapibus
- ultrices. Morbi tincidunt magna ex, eget faucibus sapien
- bibendum non. Duis a mauris ex. Ut finibus risus sed massa
- mattis porta. Aliquam sagittis massa et purus efficitur
- ultricies.
-
-
- Integer pretium dolor at sapien laoreet ultricies. Fusce
- congue et lorem id convallis. Nulla volutpat tellus nec
- molestie finibus. In nec odio tincidunt eros finibus
- ullamcorper. Ut sodales, dui nec posuere finibus, nisl sem
- aliquam metus, eu accumsan lacus felis at odio.
-
-
- Sed lacus quam, convallis quis condimentum ut, accumsan
- congue massa. Pellentesque et quam vel massa pretium
- ullamcorper vitae eu tortor.
-
- Placeholders are used to enhance your app experience.
-
-
-
-
-
-
-
-
-
-
-
Example
-
-
-
- In the example below, we take a typical card component and recreate
- it with placeholders applied to create a “loading card”. Size and
- proportions are the same between the two.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Width
-
-
-
- You can change the width through grid column classes,
- width utilities, or inline styles.
-
-
-
-
-
-
-
-
-
Color
-
-
-
- By default, the placeholder uses the{" "}
- currentColor. This can be overridden with an utility
- class or custom color.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Sizing
-
-
-
- The size of .placeholder is based on the typographic
- style of the parent element. Customize them with sizing modifiers:{" "}
- .placeholder-lg, .placeholder-sm, or
- .placeholder-xs.
-
-
-
-
-
-
-
-
-
-
Animation
-
-
-
- Animate placeholders with .placeholder-glow or{" "}
- .placeholder-wave to better convey the perception of
- something being actively loaded.
-
- For Default progress, No size class needed. you can use class{" "}
- .progress-sm or
- .progress-lg with .progress to change size
- of your progress bar.
-
- A container to show avatar images or initials.
-
-
-
-
-
-
-
-
-
-
-
Default Avatar
-
-
-
- Wrap your content with .avatar class and wrap your text
- in .avatar-content
- to create a avatar.You have to use inline attributes to set height
- width of image in default avatar.
-
-
-
-
-
-
-
- AS
-
-
-
-
-
-
-
-
-
-
-
Avatar Sizes
-
-
-
- use class{" "}
-
- .avatar-{"{"}sm|lg|xl{"}"}
- {" "}
- with .avatar to modify size of your avatar.
-
-
-
-
-
-
-
- AS
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Avatar Status
-
-
-
- use class .avatar-status and{" "}
-
- .bg-{"{"}color{"}"}
- {" "}
- after .avatar-content
-
- You can add descriptions to your slides, the description
- position can be set globally for all slides or you can set a
- different position for each slide. options are: top, bottom,
- left or right. You can adjust the style the way you want with
- basic CSS.
- The description can display html code.
-
- You can set the position of the description in different
- ways for example
-
- top, bottom, left or right
-
-
-
-
- Example Google link
-
- ipsum vehicula eros ultrices lacinia Vestibulum ante
- ipsum primis in faucibus orci luctus et ultrices posuere
- cubilia Curae Duis quis ipsum vehicula eros ultrices
- lacinia. Vestibulum ante ipsum primis in faucibus orci
- luctus et ultrices posuere
-
-
- Primis pharetra facilisis lorem quis penatibus ad nulla
- inceptos, dui per tempor taciti aliquet consequat
- sodales, curae tristique gravida auctor interdum
- malesuada sagittis. Felis pretium eros ligula natoque ad
- ante rutrum himenaeos, adipiscing urna mauris porta quam
- efficitur odio, sagittis morbi tellus nisi molestie mus
- faucibus.
-
-
- Primis pharetra facilisis lorem quis penatibus ad nulla
- inceptos, dui per tempor taciti aliquet consequat
- sodales, curae tristique gravida auctor interdum
- malesuada sagittis. Felis pretium eros ligula natoque ad
- ante rutrum himenaeos, adipiscing urna mauris porta quam
- efficitur odio, sagittis morbi tellus nisi molestie mus
- faucibus.
-
- You can set the position of the description in different
- ways for example top, bottom, left or right
-
-
- Duis quis ipsum vehicula eros ultrices lacinia.
- Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Videos Gallery
-
- You can add videos with optional autoplay for
- Vimeo,Youtube
- and
- self hosted videos. You can specify a default
- width for the videos or set different widths to each video in
- your gallery. The videos are 100% responsive and will play
- correctly on mobile devices.
-
- You can easily add iframes by simply entering the url, it could
- be a web page, a video, google maps, etc. also you can display
- any div of your page by entering the ID in the href attribute.
-
- Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum
- primis in faucibus orci luctus et ultrices posuere cubilia Curae;
- Donec nec sollicitudin felis. Donec vel nulla vel leo varius tempor.
- Duis suscipit pharetra quam id imperdiet. Praesent vitae eros metus.
- Donec placerat sagittis rhoncus. In condimentum eleifend ante et
- ornare. Curabitur pharetra nibh non purus gravida.
-
- Rating with rater-js - a pure javascript rating
- library.
-
-
-
-
-
-
-
-
-
-
-
-
-
Basic Rating
-
-
-
-
-
-
-
-
-
-
-
-
-
-
5 Star Rating with Step
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Unlimited Number of Stars
-
-
-
-
-
-
-
-
-
-
-
- {"{"}% endblock %{"}"}
- {"{"}% block styles %{"}"}
-
- {"{"}% endblock %{"}"}
- {"{"}% block js %{"}"}
- {"{"}% endblock %{"}"}
-
-
\ No newline at end of file
diff --git a/src/extra-component-sweetalert.jsx b/src/extra-component-sweetalert.jsx
deleted file mode 100644
index 15613b18..00000000
--- a/src/extra-component-sweetalert.jsx
+++ /dev/null
@@ -1,262 +0,0 @@
-<>
- {"{"}% set title = 'Sweet Alert' %{"}"}
- {"{"}% set filename = 'extra-component-sweetalert.html' %{"}"}
- {"{"}% extends 'src/layouts/master.html' %{"}"}
- {"{"}% block content %{"}"}
-
-
-
-
-
Sweet Alert
-
- A beautiful replacement for javascript alerts.
-
-
-
-
-
-
-
-
-
-
-
-
-
Basic Sweet Alert
-
- SweetAlert automatically centers itself on the page and looks
- great no matter if you're using a desktop computer, mobile or
- tablet. It's even highly customizable, as you can see below!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Toast
-
- SweetAlert can also show a message in the corner of your screen!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Types
-
- The type of the modal. SweetAlert comes with 5 built-in types
- which will show a corresponding icon animation: "warning",
- "error", "success" and "info". You can also set it as "input" to
- get a prompt modal. It can either be put in the object under the
- key "icon" or passed as the third parameter of the function.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Alert Input
-
- The type of the modal. SweetAlert comes with 5 built-in types
- which will show a corresponding icon animation: "warning",
- "error", "success" and "info". You can also set it as "input" to
- get a prompt modal. It can either be put in the object under the
- key "icon" or passed as the third parameter of the function.
-
- Use class .form-check-glow class with
-
- .form-check-input.form-check-{"{"}colorName{"}"}
-
- for glow effect to Checkboxes. Glow shadow color will be
- changed according to Colored Checkboxes.
-
- A group for input to display information in before or after input.
-
-
-
-
-
-
-
-
-
-
-
-
-
Basic Input Groups
-
-
-
-
- Add span with .input-group-text class{" "}
- before
- <input>
- for input-group-prepend and add span with{" "}
- .input-group-text class
- after
- <input> for input-group-append.
-
-
-
-
-
- @
-
-
-
-
-
-
-
-
- @example.com
-
-
-
-
-
- $
-
- .00
-
-
-
-
-
-
-
-
-
- {/* Basic Inputs Groups end */}
- {/* Multiple Inputs start */}
-
-
-
-
-
-
Multiple Inputs
-
-
-
-
- While multiple <input>s are supported
- visually, validation styles are only available for input
- groups with a single <input>.
-
- Give textual form controls like input upgrade with custom styles,
- sizing, focus states, and more.
-
-
-
-
-
-
-
-
-
-
-
Basic Inputs
-
-
-
-
-
-
-
-
-
-
-
- eg.someone@example.com
-
-
-
-
-
-
-
-
- Find helper text here for given textbox.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- email@mazer.com
-
-
-
-
-
-
-
- {/* Input Style start */}
-
-
-
-
-
-
Input Styles
-
-
-
-
-
- To set rounded border to input box, use .round{" "}
- class and to set square border to input box, use{" "}
- .square class alongwith
- .form-control class.
-
-
- {/* Basic File Browser end */}
- {/* Input with Icons start */}
-
-
-
-
-
-
Input with Icons
-
-
-
-
-
- For Input Box with icon use .position-relative{" "}
- class with
- .form-group and use class{" "}
- .has-icon-left or
- .has-icon-right class for icon on left side.
-
-
-
-
Left Icon
-
-
-
-
-
-
-
-
-
Right Icon
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Input with Icons end */}
- {/* Input Sizing start */}
-
-
-
-
-
-
Control Sizing Option
-
-
-
-
-
- For different sizes of Input, Use classes like{" "}
- .form-control-lg &
- .form-control-sm for Large, Small input box.
-
- You can indicate invalid and valid form fields with{" "}
- .is-invalid and
- .is-valid. Note that{" "}
- .invalid-feedback is also supported with these
- classes.
-
- Use class{" "}
-
- .form-check-{"{"}color{"}"}
- {" "}
- with .form-check to change radio color
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Switches
-
-
-
- A switch has the markup of a custom checkbox but uses the{" "}
- .form-switch class to render a toggle switch.
- Switches also support the disabled attribute.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
With Buttons
-
-
-
- A switch has the markup of a custom checkbox but uses the{" "}
- .form-switch class to render a toggle switch.
- Switches also support the disabled attribute.
-
Wow amazing design! Can you make another tutorial for
- this design?
-
-
-
-
-
-
-
-
-
Singh Eknoor
-
-
-
-
What a stunning design! You are so talented and creative!
-
-
-
-
-
-
-
-
-
Rani Jhadav
-
-
-
-
I love your design! It’s so beautiful and unique! How did you learn to do this?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Recent Messages
-
-
-
-
-
-
-
-
Hank Schrader
-
@johnducky
-
-
-
-
-
-
-
-
Dean Winchester
-
@imdean
-
-
-
-
-
-
-
-
John Dodol
-
@dodoljohn
-
-
-
-
-
-
-
-
-
-
Visitors Profile
-
-
-
-
-
-
-
-
-{% endblock %}
-{% block js %}
-
-
-
-{% endblock %}
\ No newline at end of file
diff --git a/src/layout-default.jsx b/src/layout-default.jsx
deleted file mode 100644
index b543fcf9..00000000
--- a/src/layout-default.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-<>
- {"{"}% set title = 'Layout Default' %{"}"}
- {"{"}% set filename = 'layout-default.html' %{"}"}
- {"{"}% extends 'src/layouts/master.html' %{"}"}
- {"{"}% block content %{"}"}
-
-
-
-
-
Layout Default
-
The default layout.
-
-
-
-
-
-
-
-
-
-
Default Layout
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,
- commodi? Ullam quaerat similique iusto temporibus, vero aliquam
- praesentium, odit deserunt eaque nihil saepe hic deleniti? Placeat
- delectus quibusdam ratione ullam!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nemo
- quasi labore expedita? Veritatis at maxime id voluptates excepturi
- molestiae possimus blanditiis dicta consequuntur maiores suscipit,
- eveniet neque obcaecati doloribus.
-
- Vertical Navbar is a layout option that you can use with Mazer.{" "}
-
-
- In case you want the navbar to be sticky on top while scrolling, add{" "}
- .navbar-fixed class alongside with{" "}
- .layout-navbar class.
-
-
-
-
-
-
Dummy Text
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis
- tincidunt tempus. Duis vitae facilisis enim, at rutrum lacus. Nam at
- nisl ut ex egestas placerat sodales id quam. Aenean sit amet nibh
- quis lacus pellentesque venenatis vitae at justo. Orci varius
- natoque penatibus et magnis dis parturient montes, nascetur
- ridiculus mus. Suspendisse venenatis tincidunt odio ut rutrum.
- Maecenas ut urna venenatis, dapibus tortor sed, ultrices justo.
- Phasellus scelerisque, nibh quis gravida venenatis, nibh mi lacinia
- est, et porta purus nisi eget nibh. Fusce pretium vestibulum
- sagittis. Donec sodales velit cursus convallis sollicitudin. Nunc
- vel scelerisque elit, eget facilisis tellus. Donec id molestie
- ipsum. Nunc tincidunt tellus sed felis vulputate euismod.
-
-
- Proin accumsan nec arcu sit amet volutpat. Proin non risus luctus,
- tempus quam quis, volutpat orci. Phasellus commodo arcu dui, ut
- convallis quam sodales maximus. Aenean sollicitudin massa a quam
- fermentum, et efficitur metus convallis. Curabitur nec laoreet
- ipsum, eu congue sem. Nunc pellentesque quis erat at gravida.
- Vestibulum dapibus efficitur felis, vel luctus libero congue eget.
- Donec mollis pellentesque arcu, eu commodo nunc porta sit amet. In
- commodo augue id mauris tempor, sed dignissim nulla facilisis. Ut
- non mattis justo, ut placerat justo. Vestibulum scelerisque cursus
- facilisis. Suspendisse velit justo, scelerisque ac ultrices eu,
- consectetur ac odio.
-
-
- In pharetra quam vel lobortis fermentum. Nulla vel risus ut sapien
- porttitor volutpat eu ac lorem. Vestibulum porta elit magna, ut
- ultrices sem fermentum ut. Vestibulum blandit eros ut imperdiet
- porttitor. Pellentesque tempus nunc sed augue auctor eleifend. Sed
- nisi sem, lobortis eget faucibus placerat, hendrerit vitae elit.
- Vestibulum elit orci, pretium vel libero at, imperdiet congue
- lectus. Praesent rutrum id turpis non aliquam. Cras dignissim, metus
- vitae aliquam faucibus, elit augue dignissim nulla, bibendum
- consectetur leo libero a tortor. Vestibulum non tincidunt nibh. Ut
- imperdiet elit vel vehicula ultricies. Nulla maximus justo sit amet
- fringilla laoreet. Aliquam malesuada diam in augue mattis aliquam.
- Pellentesque id eros dignissim, dapibus sem ac, molestie dolor.
- Mauris purus lacus, tempor sit amet vestibulum vitae, ultrices eu
- urna.
-
+// )
+// }
+
+// export default EditPage
\ No newline at end of file
diff --git a/src/pages/DoctorFormLayout.jsx b/src/pages/DoctorFormLayout.jsx
new file mode 100644
index 00000000..02a9bed2
--- /dev/null
+++ b/src/pages/DoctorFormLayout.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+// Importamos os dois novos componentes que criamos
+import DoctorList from '../components/doctors/DoctorList';
+import DoctorForm from '../components/doctors/DoctorForm';
+
+function FormLayout( ) {
+ // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
+ const [view, setView] = useState('form');
+
+
+ var myHeaders = new Headers();
+ myHeaders.append("Content-Type", "application/json");
+
+ // Função que será chamada para "salvar" o paciente
+ const handleSavePatient = (patientData) => {
+ console.log('Salvando médico:', patientData);
+
+ var raw = JSON.stringify(patientData)
+
+ var requestOptions = {
+ method:'POST',
+ header: myHeaders,
+ body:raw,
+ redirect:'follow'
+
+ }
+
+
+ fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
+ .then(response => response.text())
+ .then(result => console.log(result))
+ .catch(error => console.log('error', error));
+
+ alert(`Médico "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
+ // Após salvar, voltamos para a tela de lista
+ setView('list');
+ };
+
+ return (
+ <>
+
+
Cadastro de Médicos
+
+
+
+
+ {/* Aqui está a lógica principal: */}
+ {/* Se a view for 'list', mostramos a lista com o botão. */}
+ {/* Se for 'form', mostramos o formulário de cadastro. */}
+
+ {view === 'list' ? (
+ setView('form')} />
+ ) : (
+ setView('list')}
+ PatientDict={{}}
+
+ />
+ )}
+
- Using the most basic table up, here’s how
- .table-based tables look in Bootstrap. You can
- use any example of below table for your table and it can be
- use with any type of bootstrap tables.
-
- {/* Table with outer spacing */}
-
-
-
-
-
NAME
-
RATE
-
SKILL
-
-
-
-
-
Michael Right
-
$15/hr
-
UI/UX
-
-
-
Morgan Vanblum
-
$13/hr
-
Graphic concepts
-
-
-
Tiffani Blogz
-
$15/hr
-
Animation
-
-
-
Ashley Boul
-
$15/hr
-
Animation
-
-
-
Mikkey Mice
-
$15/hr
-
Animation
-
-
-
-
-
-
-
-
-
-
-
-
Table without outer spacing
-
-
-
-
- Using the most basic table up, here’s how
- .table-based tables look in Bootstrap. You can
- use any example of below table for your table and it can be
- use with any type of bootstrap tables.
-
-
- {/* Inverse table end */}
- {/* Table head options start */}
-
-
-
-
-
-
Table head options
-
-
-
-
- Similar to tables and dark tables, use the modifier classes{" "}
- .thead-light or{" "}
- .thead-dark to make{" "}
- <thead>s
- appear light or dark gray.
-
-
- {/* Table head options end */}
- {/* Striped rows start */}
-
-
-
-
-
-
Striped rows
-
-
-
-
- Use .table-striped{" "}
- to add zebra-striping to any table row within the{" "}
- <tbody>. This
- styling doesn't work in IE8 and below as{" "}
- :nth-child CSS selector isn't supported.
-
-
- {/* Striped rows end */}
- {/* Striped rows with inverse dark table start */}
-
-
-
-
-
-
Striped inverse dark
-
-
-
-
- Use .table-dark with .table-striped{" "}
- to add zebra-striping to any inverse table row within the{" "}
- <tbody>. This styling doesn't work in IE8
- and below as
- :nth-child CSS selector isn't supported.
-
-
- {/* Striped rows with inverse dark table end */}
- {/* Bordered table start */}
-
-
-
-
-
-
Bordered table
-
-
-
-
- Add .table-bordered for borders on all sides of
- the table and cells. For Inverse Dark Table, add{" "}
- .table-dark along with
- .table-bordered.
-
- Responsive tables allow tables to be scrolled horizontally
- with ease. Make any table responsive across all viewports by
- adding a div with the class{" "}
- .table-responsive
- around the table. Or, pick a maximum breakpoint with which to
- have a responsive table up to by adding{" "}
-
- {" "}
- .table-responsive{"{"}-sm|-md|-lg|-xl{"}"}
-
- . Read full documentation{" "}
-
- here.
-
-
-
-
- Vertical clipping/truncation
-
-
- Responsive tables make use of{" "}
-
- overflow-y: hidden
-
- , which clips off any content that goes beyond the bottom or
- top edges of the table. In particular, this can clip off
- dropdown menus and other third-party widgets.
-
- Javascript enhanced uploaders for easier file handling.
-
-
-
-
-
-
-
-
-
-
-
-
-
Basic File Uploader
-
-
-
-
- Using the basic file uploader up, upload here to see how
- .basic-filepond look.
-
- {/* Basic file uploader */}
-
-
-
-
-
-
-
-
-
ImgBB Uploader
-
-
-
-
- Using the basic file uploader up, upload here to see how
- .imgbb-filepond-based basic file uploader look.
- You must use
- name=image or by FormData fieldName for your
- input type=file to upload in imgBB.
-
- {/* imgBB file uploader */}
-
-
-
-
-
-
-
-
-
Multiple Files
-
-
-
-
- Using the basic table up, upload here to see how
- .multiple-files-filepond-based basic file
- uploader look. You can use
- allowMultiple or multiple attribute
- too to implement multiple upload.
-
- Using the basic table up, upload here to see how
- .with-validation-filepond-based basic file
- uploader look. You can use
-
- see here
-
- or{" "}
-
- required (to make your input required), data-max-file-size
- (to limit your input file size), data-max-files (to limit
- your uploaded files), etc (start with data-)
- {" "}
- attribute too to implement validation.
-
- {/* File uploader with validation */}
-
-
-
-
-
-
-
-
-
Image Preview
-
-
-
-
- Using the basic table up, upload here to see how
- .image-preview-filepond-based basic file uploader
- look. This preview for uploaded or dropped images.
-
- {/* File uploader with image preview */}
-
-
-
-
-
-
-
-
-
Image Exif Orientation
-
-
-
-
- Using the basic table up, upload here to see how
- .image-exif-filepond-based basic file uploader
- look. This helps in correctly orienting photos taken on mobile
- devices.
-
- {/* Auto image crop file uploader */}
-
-
-
-
-
-
-
-
-
Image Auto Crop
-
-
-
-
- Using the basic table up, upload here to see how
- .image-crop-filepond-based basic file uploader
- look. You can use
- imageCropAspectRatio or{" "}
- image-crop-aspect-ratio to set aspect ratio.
-
- {/* Auto crop image file uploader */}
-
-
-
-
-
-
-
-
-
Image Auto Filter
-
-
-
-
- Using the basic table up, upload here to see how
- .image-filter-filepond-based basic file uploader
- look.
-
- {/* Auto filter image file uploader */}
-
-
-
-
-
-
-
-
-
Image Auto Resize
-
-
-
-
- Using the basic table up, upload here to see how
- .image-resize-filepond-based basic file uploader
- look.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,
- commodi? Ullam quaerat similique iusto temporibus, vero aliquam
- praesentium, odit deserunt eaque nihil saepe hic deleniti? Placeat
- delectus quibusdam ratione ullam!
-
- 
- 
-
- uikit-design.psd
-
- 
-
- uikit-design.sketch
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-