{"id":18563579,"url":"https://github.com/ishanoshada/webifypy","last_synced_at":"2025-04-10T03:32:49.660Z","repository":{"id":203537208,"uuid":"709799871","full_name":"Ishanoshada/WebifyPy","owner":"Ishanoshada","description":"A Python package for web development","archived":false,"fork":false,"pushed_at":"2023-10-30T08:26:03.000Z","size":43,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T16:03:22.754Z","etag":null,"topics":["front-end","python","python-package","web-development"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/WebifyPy","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ishanoshada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-25T12:28:08.000Z","updated_at":"2024-05-24T16:40:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"2591a65e-d158-4b15-b3a3-54d3095cbcb7","html_url":"https://github.com/Ishanoshada/WebifyPy","commit_stats":{"total_commits":33,"total_committers":1,"mean_commits":33.0,"dds":0.0,"last_synced_commit":"8f9e32779e282040cd8d34d9ce55b17e2789bbb4"},"previous_names":["ishanoshada/webifypy"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ishanoshada%2FWebifyPy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ishanoshada%2FWebifyPy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ishanoshada%2FWebifyPy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ishanoshada%2FWebifyPy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ishanoshada","download_url":"https://codeload.github.com/Ishanoshada/WebifyPy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248151441,"owners_count":21056097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","python","python-package","web-development"],"created_at":"2024-11-06T22:12:57.781Z","updated_at":"2025-04-10T03:32:49.343Z","avatar_url":"https://github.com/Ishanoshada.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebifyPy\n\nWebifyPy is a versatile Python module designed to simplify HTML form and component creation. It offers a comprehensive set of classes that enable effortless development of common web elements.\n\n## Installation\n\nGet started with WebifyPy by installing it via pip:\n\n```bash\npip install WebifyPy\n```\n\n## Usage\n\n\n### Components for Easy UI Building\n\n```python\nfrom WebifyPy.components import Div, Header, Paragraph\n\n# Create a div with a header and a paragraph\ncontent = Div(\n    content=[Header(level=2, text=\"Welcome to WebifyPy\"), Paragraph(content=\"WebifyPy is a Python module for generating HTML forms and components.\")]\n)\n\n# Render the content\ncontent_html = content.render()\n```\n\n### Streamlined Form Creation\n\n```python\nfrom WebifyPy.forms import Form, InputField\nfrom WebifyPy.components import Button\n\n\n# Create a form\nform = Form(action=\"/submit\", method=\"POST\")\n\n# Add fields to the form\nusername_field = InputField(name=\"username\", type=\"text\")\npassword_field = InputField(name=\"password\", type=\"password\")\nsubmit_button = Button(label=\"Submit\")\n\nform.add_field(username_field)\nform.add_field(password_field)\nform.add_field(submit_button)\n\n# Render the form\nform_html = form.render()\n```\n\n### Pre-Styled Components for Quick Design\n\n```python\nfrom WebifyPy.pre_components import Alert, Card\n\n# Create an alert\nalert = Alert(message=\"This is a sample alert.\", alert_type=\"success\")\n\n# Create a card with content\ncard = Card(title=\"Sample Card\", content=\"This is a sample card.\")\n\n# Render the alert and card\nalert_html = alert.render()\ncard_html = card.render()\n```\n\n### Style Elements with Ease\n\n```python\nfrom WebifyPy.styled_components import StyledButton\n\n# Create a styled button\nstyled_button = StyledButton(label=\"Click me\")\n\n# Render the styled button\nstyled_button_html = styled_button.render()\n\n```\n\n### Interactive JavaScript Components\n\n```python\nfrom WebifyPy.js_components import CounterComponent\n\n# Create a counter component\ncounter = CounterComponent()\n\n# Render the counter component\ncounter_html = counter.render()\n\n```\n\n### Styling\n\n```python\nfrom WebifyPy.styling import CSS\n\n# Define the styles you want to apply\nstyles = '''\n    .button {\n        background-color: #007bff;\n        color: #fff;\n        padding: 10px 20px;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n'''\n\n# Create a CSS instance with the styles\ncss_styles = CSS(styles)\n\n# Apply the styles to a component (for example, a ButtonComponent)\nbutton_component = ButtonComponent()\ncss_styles.apply(button_component)\n```\n\n\n\n\n## Usage Examples Components \n\n### FormComponent\n\n```python\nfrom WebifyPy.components import FormComponent\n\n# Create a form component\nform_component = FormComponent(action=\"/submit\", method=\"POST\")\nform_html = form_component.render()\n```\n\n### InputField\n\n```python\nfrom WebifyPy.components import InputField\n\n# Create an input field\ninput_field = InputField(name=\"username\", type=\"text\")\ninput_html = input_field.render()\n```\n\n### Button\n\n```python\nfrom WebifyPy.components import Button\n\n# Create a button\nbutton = Button(label=\"Submit\")\nbutton_html = button.render()\n```\n\n### TextArea\n\n```python\nfrom WebifyPy.components import TextArea\n\n# Create a text area\ntext_area = TextArea(name=\"my_text\", rows=4, cols=50)\ntext_area_html = text_area.render()\n```\n\n### Image\n\n```python\nfrom WebifyPy.components import Image\n\n# Create an image\nimage = Image(src=\"image.jpg\", alt=\"Sample Image\")\nimage_html = image.render()\n```\n\nThese examples demonstrate how to create instances of different components and generate their corresponding HTML code using the `render` method. You can customize the attributes (like `name`, `type`, `label`, etc.) based on your specific requirements.\n\n\n### Using Forms\n\n#### Form\nThe `Form` class allows you to create a form with specified action and method.\n\n```python\nfrom WebifyPy.forms import Form\n\n# Create a form\nform = Form(action=\"/submit\", method=\"POST\")\n\n# Add fields to the form\nusername_field = InputField(name=\"username\", type=\"text\", label=\"Username\")\npassword_field = InputField(name=\"password\", type=\"password\", label=\"Password\")\n\nform.add_field(username_field)\nform.add_field(password_field)\n\n# Render the form\nform_html = form.render()\n```\n\n#### InputField\nThe `InputField` class generates an input field with specified name and type.\n\n```python\nfrom WebifyPy.forms import InputField\n\n# Create an input field\nusername_field = InputField(name=\"username\", type=\"text\")\n\n# Render the input field\ninput_html = username_field.render()\n```\n\n#### TextArea\nThe `TextArea` class generates a text area element with specified attributes.\n\n```python\nfrom WebifyPy.forms import TextArea\n\n# Create a text area\nmessage_area = TextArea(name=\"message\", rows=5, cols=30, label=\"Message\")\n\n# Render the text area\ntextarea_html = message_area.render()\n```\n\n#### Checkbox\nThe `Checkbox` class generates an input checkbox element with specified attributes.\n\n```python\nfrom WebifyPy.forms import Checkbox\n\n# Create a checkbox\nsubscribe_checkbox = Checkbox(name=\"subscribe\", value=\"yes\", label=\"Subscribe to newsletter\")\n\n# Render the checkbox\ncheckbox_html = subscribe_checkbox.render()\n```\n\n#### Radio\nThe `Radio` class generates an input radio button element with specified attributes.\n\n```python\nfrom WebifyPy.forms import Radio\n\n# Create a radio button\ngender_radio = Radio(name=\"gender\", value=\"male\", label=\"Male\")\n\n# Render the radio button\nradio_html = gender_radio.render()\n```\n\nThese examples showcase how to use various form elements provided by the `forms` module in WebifyPy. You can customize these elements further by adjusting their attributes as needed.\n\n\n### Using styled_components \n\n1. **StyledButton**\n\n   This class creates a styled button.\n\n   ```python\n   from WebifyPy.styled_components import StyledButton\n\n   # Create a StyledButton instance\n   button = StyledButton(\"Click Me\")\n\n   # Render the button\n   button_html = button.render()\n   ```\n\n2. **StyledInput**\n\n   This class creates a styled input field.\n\n   ```python\n   from WebifyPy.styled_components import StyledInput\n\n   # Create a StyledInput instance\n   input_field = StyledInput(\"Enter your name\")\n\n   # Render the input field\n   input_html = input_field.render()\n   ```\n\n3. **StyledCard**\n\n   This class creates a styled card with a title and content.\n\n   ```python\n   from WebifyPy.styled_components import StyledCard\n\n   # Create a StyledCard instance\n   card = StyledCard(\"Card Title\", \"Card Content\")\n\n   # Render the card\n   card_html = card.render()\n   ```\n\n4. **StyledNavbar**\n\n   This class creates a styled navigation bar with a brand and links.\n\n   ```python\n   from WebifyPy.styled_components import StyledNavbar\n\n   # Define brand and links\n   brand = \"My Website\"\n   links = [{\"url\": \"#\", \"text\": \"Home\"}, {\"url\": \"#\", \"text\": \"About\"}, {\"url\": \"#\", \"text\": \"Contact\"}]\n\n   # Create a StyledNavbar instance\n   navbar = StyledNavbar(brand, links)\n\n   # Render the navbar\n   navbar_html = navbar.render()\n   ```\n\n5. **StyledAlert**\n\n   This class creates a styled alert with a message and alert type.\n\n   ```python\n   from WebifyPy.styled_components import StyledAlert\n\n   # Create a StyledAlert instance\n   alert = StyledAlert(\"This is a success message\", alert_type=\"success\")\n\n   # Render the alert\n   alert_html = alert.render()\n   ```\n\nThese examples demonstrate how to create instances of the styled components and render them to generate styled HTML elements. You can customize the content and styles according to your specific requirements.\n\n\n## using js_components\n\n### 1. Counter Component:\n\n```python\nfrom WebifyPy.js_components import CounterComponent\n\n# Create a CounterComponent instance\ncounter = CounterComponent()\n\n# Render the component\ncounter_html = counter.render()\n```\n\n### 2. Toggle Switch Component:\n\n```python\nfrom WebifyPy.js_components import ToggleSwitchComponent\n\n# Create a ToggleSwitchComponent instance with default state as True\ntoggle_switch = ToggleSwitchComponent(default_state=True)\n\n# Render the component\ntoggle_switch_html = toggle_switch.render()\n```\n\n### 3. Tooltip Component:\n\n```python\nfrom WebifyPy.js_components import TooltipComponent\n\n# Create a TooltipComponent instance\ntooltip = TooltipComponent(\"Hover over me\", \"This is a tooltip.\")\n\n# Render the component\ntooltip_html = tooltip.render()\n```\n\n### 4. Dropdown Component:\n\n```python\nfrom WebifyPy.js_components import DropdownComponent\n\n# Define options for the dropdown\noptions = [\"Option 1\", \"Option 2\", \"Option 3\"]\n\n# Create a DropdownComponent instance\ndropdown = DropdownComponent(options)\n\n# Render the component\ndropdown_html = dropdown.render()\n```\n\n### 5. Alert Component:\n\n```python\nfrom WebifyPy.js_components import AlertComponent\n\n# Create an AlertComponent instance with a success message\nalert = AlertComponent(\"This is a success message\", alert_type=\"success\")\n\n# Render the component\nalert_html = alert.render()\n```\n\nPlease note that these examples demonstrate how to create instances of various components and render them. You can customize the component parameters and integrate them into your web application as needed.\n\n\n\n## Classes Reference\n\n\n### components\n\n\n| Class Name       | Description                                        |\n|------------------|----------------------------------------------------|\n| FormComponent    | Renders a form element with custom action and method. |\n| InputField       | Renders an input field with custom name and type.    |\n| Button           | Renders a button with custom label.                  |\n| TextArea         | Renders a text area with custom name, rows, and columns. |\n| Image            | Renders an image with custom source and alt text.    |\n| Link             | Renders a hyperlink with custom href and text.       |\n| Header           | Renders a header with custom level and text.         |\n| List             | Renders an unordered list with custom items.        |\n| Dropdown         | Renders a dropdown menu with custom options.        |\n| Checkbox         | Renders a checkbox with custom name and value.      |\n| Radio            | Renders a radio button with custom name and value.   |\n| Table            | Renders a table with custom headers and rows.       |\n| Div              | Renders a div element with custom content.          |\n| Span             | Renders a span element with custom content.         |\n| Paragraph        | Renders a paragraph with custom content.           |\n| Heading          | Renders a heading with custom level and content.    |\n| Strong           | Renders a strong (bold) text element with custom content. |\n| Emphasis         | Renders an emphasis (italic) text element with custom content. |\n| Anchor           | Renders an anchor (link) with custom href and text.  |\n| ImageLink        | Renders an image within a link with custom href, source, and alt text. |\n| UnorderedList    | Renders an unordered list with custom items.        |\n| OrderedList      | Renders an ordered list with custom items.          |\n| Blockquote       | Renders a blockquote element with custom content.    |\n| Code             | Renders a code element with custom content.         |\n| Preformatted     | Renders preformatted text with custom content.      |\n| HorizontalRule   | Renders a horizontal rule (line).                  |\n| Navigation       | Renders a navigation bar with custom links.         |\n| Section          | Renders a section element with custom content.      |\n| Article          | Renders an article element with custom content.      |\n| Footer           | Renders a footer element with custom content.       |\n\n\n### forms\n\n| Class Name      | Description                                             |\n|-----------------|---------------------------------------------------------|\n| FormComponent    | A component that renders a form with specified action and method. |\n| InputField       | A component that renders an input field with specified attributes. |\n| ToggleSwitchField | A component that renders a toggle switch as an input field. |\n| CheckboxField    | A component that renders a checkbox input field with specified attributes. |\n| RadioField       | A component that renders a radio button input field with specified attributes. |\n| SelectField      | A component that renders a select input field with specified options. |\n| TextAreaField    | A component that renders a text area input field with specified attributes. |\n| FileUploadField  | A component that renders a file upload input field with specified attributes. |\n| HiddenField      | A component that renders a hidden input field with specified attributes. |\n| SubmitButtonField| A component that renders a submit button input field with specified label. |\n| RangeInputField  | A component that renders a range input field with specified attributes. |\n| ColorInputField  | A component that renders a color input field with specified attributes. |\n| DateInputField   | A component that renders a date input field with specified attributes. |\n| EmailInputField  | A component that renders an email input field with specified attributes. |\n| PasswordInputField | A component that renders a password input field with specified attributes. |\n| TelephoneInputField | A component that renders a telephone input field with specified attributes. |\n| URLInputField    | A component that renders a URL input field with specified attributes. |\n| SearchInputField | A component that renders a search input field with specified attributes. |\n| CheckboxGroupField | A component that renders a group of checkboxes with specified attributes. |\n| RadioGroupField  | A component that renders a group of radio buttons with specified attributes. |\n\n### pre_components\n\n\n| Class Name           | Description                                                        |\n|----------------------|--------------------------------------------------------------------|\n| BootstrapComponents  | Provides methods to render Bootstrap components like buttons and modals. |\n| Alert                | Renders an alert message with customizable type and message.        |\n| Modal                | Renders a modal with custom title and content.                      |\n| Card                 | Renders a card element with custom title and content.               |\n| Navbar               | Renders a navigation bar with custom brand and links.               |\n| Pagination           | Renders a pagination component with total pages and current page.   |\n| Progress             | Renders a progress bar with customizable value and maximum.         |\n| Badge                | Renders a badge with custom text and badge type.                    |\n| Jumbotron            | Renders a jumbotron with custom title and content.                  |\n| AlertDismissable     | Renders a dismissable alert message with customizable type and message. |\n| ListGroup            | Renders a list group with custom items.                              |\n| Carousel             | Renders a carousel with a list of images.                            |\n| Breadcrumb           | Renders a breadcrumb navigation with custom links.                   |\n| Toast                | Renders a toast notification with customizable type and message.    |\n| Popover              | Renders a popover with custom title and content.                     |\n| Tooltip              | Renders a tooltip with custom title.                                 |\n| Collapse             | Renders a collapsible element with custom button text and content.   |\n| Accordion            | Renders an accordion with collapsible items.                          |\n| Tab                  | Renders a tab element with multiple content panes.                    |\n| Dropdown             | Renders a dropdown menu with custom options.                          |\n| InputGroup           | Renders an input element with custom type and placeholder.            |\n| NavbarBrand          | Renders a navbar brand with custom brand text.                        |\n| CardDeck             | Renders a card deck with a list of cards.                             |\n| CardGroup            | Renders a card group with a list of cards.                            |\n| Tabs                 | Renders tabs with multiple content panes.                             |\n| Form                 | Renders a form element with custom action and method.                 |\n\n\n### styled_components\n\n\n| Class Name         | Description                                                        |\n|--------------------|--------------------------------------------------------------------|\n| StyledButton       | Renders a styled button element with custom CSS.                    |\n| StyledInput        | Renders a styled input element with custom CSS.                     |\n| StyledCard         | Renders a styled card element with custom title and content.        |\n| StyledNavbar       | Renders a styled navigation bar with custom brand and links.         |\n| StyledAlert        | Renders a styled alert message with customizable type and message.   |\n| StyledModal        | Renders a styled modal with custom title and content.                |\n| StyledForm         | Renders a styled form element with custom action and method.         |\n| StyledAccordion    | Renders a styled accordion with collapsible sections.               |\n| StyledTabs         | Renders styled tabs with multiple content panes.                    |\n| StyledDropdown     | Renders a styled dropdown menu with custom options.                 |\n| StyledCheckbox     | Renders a styled checkbox input with custom label.                  |\n| StyledRadio        | Renders a styled radio button input with custom label.              |\n| StyledTextarea     | Renders a styled textarea element with custom placeholder.           |\n| StyledImage        | Renders an image with custom source and alternate text.             |\n| StyledProgressBar  | Renders a styled progress bar with customizable progress value.      |\n| StyledTooltip      | Renders a styled tooltip with custom text and content.              |\n| StyledBadge        | Renders a styled badge with custom text.                             |\n\n\n### js_components\n\n\n| Class Name                | Description                              |\n|---------------------------|------------------------------------------|\n| CounterComponent          | Renders a counter with increment and decrement buttons. |\n| ToggleSwitchComponent     | Renders a toggle switch with an optional default state. |\n| TooltipComponent          | Renders a tooltip with specified text and content. |\n| DropdownComponent         | Renders a dropdown with specified options. |\n| AlertComponent            | Renders an alert with a specified message and type. |\n| CopyToClipboardComponent  | Renders a button to copy specified content to the clipboard. |\n| ScrollToTopComponent      | Renders a button to scroll to the top of the page. |\n| DarkModeToggleComponent    | Renders a dark mode toggle switch. |\n| HTTPRequestComponent      | Base class for making HTTP requests with specified URL and method. |\n| GETRequestComponent       | Renders a button to make a GET request to a specified URL. Inherits from HTTPRequestComponent. |\n| POSTRequestComponent      | Renders a button to make a POST request to a specified URL. Inherits from HTTPRequestComponent. |\n| PUTRequestComponent       | Renders a button to make a PUT request to a specified URL. Inherits from HTTPRequestComponent. |\n| DELETERequestComponent    | Renders a button to make a DELETE request to a specified URL. Inherits from HTTPRequestComponent. |\n| ImageSliderComponent      | Renders an image slider with specified images. |\n| AccordionComponent        | Renders an accordion with specified sections. |\n| CountdownTimerComponent   | Renders a countdown timer to a specified target date. |\n| RandomQuoteComponent      | Renders a random quote from a specified list of quotes. |\n| InteractiveMapComponent   | Renders an interactive map with specified latitude, longitude, zoom level, and API key. |\n| ModalComponent            | Renders a modal window with specified content. |\n| LightboxComponent         | Renders a lightbox gallery with specified images. |\n| ImageZoomComponent        | Renders an image with zoom functionality. |\n| CarouselComponent         | Renders a carousel with specified images. |\n| ProgressBarComponent      | Renders a progress bar with specified maximum value. |\n\n\n\n### styling \n\n| Class Name      | Description                                                  |\n|-----------------|--------------------------------------------------------------|\n| `CSS`           | Represents a set of CSS styles to be applied to a component. |\n| `Theme`         | Represents a theme to be applied to a component.             |\n| `CSSInJS`       | Represents a CSS-in-JS library to be used with a component.  |\n| `StyledComponent` | Represents a component with specific styles applied.       |\n| `SASS`          | Represents SASS code to be applied to a component.           |\n| `Less`          | Represents Less code to be applied to a component.           |\n| `TailwindCSS`   | Represents Tailwind CSS classes to be applied.              |\n| `Bootstrap`     | Represents a specific version of Bootstrap to be used.     |\n\n\n## Example Application's \n\n I'll provide you with a sample HTML application that incorporates all the components from the `js_components` module. Alongside the code, I'll add comments for documentation purposes.\n\n```python\nfrom WebifyPy.js_components import CounterComponent, ToggleSwitchComponent, TooltipComponent, DropdownComponent, AlertComponent\n\n# Create instances of the components\ncounter = CounterComponent()\ntoggle_switch = ToggleSwitchComponent()\ntooltip = TooltipComponent(\"Hover over me\", \"This is a tooltip.\")\noptions = [\"Option 1\", \"Option 2\", \"Option 3\"]\ndropdown = DropdownComponent(options)\nalert_success = AlertComponent(\"This is a success message\", alert_type=\"success\")\nalert_error = AlertComponent(\"This is an error message\", alert_type=\"danger\")\n\n# Render the components\ncounter_html = counter.render()\ntoggle_switch_html = toggle_switch.render()\ntooltip_html = tooltip.render()\ndropdown_html = dropdown.render()\nalert_success_html = alert_success.render()\nalert_error_html = alert_error.render()\n\n# Create the HTML application\nhtml_application = f'''\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eWebifyPy Components\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003c!-- Counter Component --\u003e\n    {counter_html}\n\n    \u003chr\u003e\n\n    \u003c!-- Toggle Switch Component --\u003e\n    {toggle_switch_html}\n\n    \u003chr\u003e\n\n    \u003c!-- Tooltip Component --\u003e\n    {tooltip_html}\n\n    \u003chr\u003e\n\n    \u003c!-- Dropdown Component --\u003e\n    {dropdown_html}\n\n    \u003chr\u003e\n\n    \u003c!-- Alert Components --\u003e\n    {alert_success_html}\n    {alert_error_html}\n\n\u003c/body\u003e\n\u003c/html\u003e\n'''\n\n# Save the HTML application to a file\nwith open('webifypy_components.html', 'w') as f:\n    f.write(html_application)\n\n# Provide the file path for the user\nwebifypy_html_path = 'webifypy_components.html'\n```\n\n**Documentation:**\n\n1. **Component Instances:**\n   - `counter`: An instance of the CounterComponent.\n   - `toggle_switch`: An instance of the ToggleSwitchComponent.\n   - `tooltip`: An instance of the TooltipComponent.\n   - `options`: A list of options for the DropdownComponent.\n   - `dropdown`: An instance of the DropdownComponent.\n   - `alert_success`: An instance of the AlertComponent with a success message.\n   - `alert_error`: An instance of the AlertComponent with an error message.\n\n2. **Rendering:**\n   - Each component is rendered using its `render()` method, which generates the HTML code for the component.\n\n3. **HTML Application:**\n   - The rendered components are combined into an HTML document.\n   - Each component is separated by a horizontal rule (`\u003chr\u003e`) for clarity.\n\n4. **Saving to File:**\n   - The HTML application is saved to a file named `webifypy_components.html`.\n\n5. **File Path:**\n   - The file path (`webifypy_html_path`) where the HTML application is saved is provided to the user.\n\nAfter running the script, you will find the generated HTML file (`webifypy_components.html`) in your working directory.\n\n\n## WebifyPy Flask Application Example\n\nThis is an example Flask application that demonstrates how to use WebifyPy components for creating login and signup forms.\n\n```Python\nfrom flask import Flask, render_template, request\nfrom WebifyPy.pre_components import Form, InputGroup\nfrom WebifyPy.styled_components import StyledForm, StyledInput, StyledButton as StyledButton, StyledCard, StyledAlert\n\napp = Flask(__name__)\n\n# Set a secret key for sessions\napp.secret_key = 'your_secret_key_here'\n\n\n# Create a login form using WebifyPy components\nlogin_form = Form(action=\"/login\", method=\"post\")\nlogin_form.add_field(InputGroup(input_type=\"text\", placeholder=\"Username\"))\nlogin_form.add_field(InputGroup(input_type=\"password\", placeholder=\"Password\"))\nlogin_form.add_field(StyledButton(label=\"Login\"))\n\n# Create a signup form using WebifyPy components\nsignup_form = Form(action=\"/signup\", method=\"post\")\nsignup_form.add_field(InputGroup(input_type=\"text\", placeholder=\"Username\"))\nsignup_form.add_field(InputGroup(input_type=\"password\", placeholder=\"Password\"))\nsignup_form.add_field(StyledButton(label=\"Signup\"))\n\n# Create a styled login form\nstyled_login_form = StyledForm(action=\"/login\", method=\"post\")\nstyled_login_form_html = styled_login_form.render()\n\n# Create a styled signup form\nstyled_signup_form = StyledForm(action=\"/signup\", method=\"post\")\nstyled_signup_form_html = styled_signup_form.render()\n\nprint(styled_signup_form_html)\n\n@app.route('/')\ndef home():\n    return render_template('index.html')\n\n\n@app.route('/login', methods=['POST'])\ndef login():\n    username = request.form['username']\n    password = request.form['password']\n\n    # Add your login logic here\n    # For example, you can check if the username and password are valid\n\n    return render_template('index.html', login_form=styled_login_form_html)\n\n\n@app.route('/signup', methods=['POST'])\ndef signup():\n    username = request.form['username']\n    password = request.form['password']\n\n    # Add your signup logic here\n    # For example, you can create a new user with the provided username and password\n\n    return render_template('index.html', signup_form=styled_signup_form_html)\n\n\nif __name__ == '__main__':\n    app.run(debug=True)\n```\n\n\n\nUsage:\n1. Run the application by executing `python app.py` in your terminal.\n2. Access the application at http://localhost:5000.\n\nRoutes:\n- `/`: Renders the login and signup forms.\n\nRoutes for Form Submission:\n- `/login`: Handles login form submission.\n- `/signup`: Handles signup form submission.\n\nDependencies:\n- Flask: Make sure to have Flask installed in your Python environment.\n\nWebifyPy Components Used:\n- Form\n- InputGroup\n- StyledForm\n- StyledInput\n- StyledButton\n- StyledCard\n- StyledAlert\n\nNote:\n- This is a basic example and does not include actual user authentication or database interactions. You'll need to implement those based on your specific requirements.\n\n\n**Repository Views** ![Views](https://profile-counter.glitch.me/WebifyPy/count.svg)\n\n\n## Author\n\n[Ishan Oshada](https://github.com/ishanoshada)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishanoshada%2Fwebifypy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fishanoshada%2Fwebifypy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishanoshada%2Fwebifypy/lists"}