browser-selection 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# Browser Selection
+
+## Overview
+
+Lightweight widget for selecting browser and operating system. Injects UI into a container and redirects user based on selected option.
+
+---
+
+## Features
+
+- Browser and OS selection dropdown
+- Dynamic UI injection into target container
+- Redirect based on selection
+- External CSS file
+- Auto-mount on page load
+
+---
+
+## Usage
+
+### 1. Add container
+
+```text
+<div id="browserling-dropdown-container"></div>
+```
+
+---
+
+### 2. Include styles
+
+```text
+<link rel="stylesheet" href="node_modules/browser-selection/dist/browser-selection-styles.css">
+```
+
+### 3. Include script
+
+Development (readable version):
+
+```text
+<script src="node_modules/browser-selection/dist/js/browser-selection.js"></script>
+```
+
+Production (recommended):
+
+```text
+<script src="node_modules/browser-selection/dist/js/browser-selection.min.js"></script>
+```
+
+The widget automatically mounts into:
+#browserling-dropdown-container
+
+---
+
+## Distribution
+
+This package is distributed via npm and contains prebuilt files in dist/.
+
+After installation via npm files are located in:
+
+```text
+node_modules/browser-selection/dist/
+```

package/dist/browser-selection-styles.css

@@ -0,0 +1 @@
+.wrapper{max-width:600px;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;font-family:"Plus Jakarta Sans",sans-serif;font-size:16px;color:#212529;background-color:rgba(0,0,0,0);margin:0;padding:0;line-height:1.5}@font-face{font-family:"Plus Jakarta Sans";src:url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}.dropdown{border:1px solid #cbd5e1;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;cursor:pointer;position:relative;background-color:#fff}.dropdown__arrow{position:absolute;z-index:100}.dropdown__item{position:relative;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.dropdown__item:hover{background-color:#cbd5e1}.dropdown__icon{display:inline-block;margin:11px 10px 0 11px}.dropdown__text{display:inline-block;position:absolute;top:12px;font-weight:500;font-size:14px;white-space:nowrap}.dropdown__slider{display:none;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;max-height:200px;overflow-x:hidden;border:1px solid #cbd5e1;position:absolute;background-color:#fff;z-index:9999}@media(max-width: 767px){.dropdown{width:100% !important}.dropdown__text,.dropdown__item,.dropdown__slider,.dropdown__selected{width:100% !important}}.group{display:flex;align-items:stretch}.group__input{display:flex;border-radius:8px 0 0 8px;align-items:center;position:relative;margin-bottom:1rem;gap:8px;padding:8px 8px 8px 16px;border:1px solid #e4e4e7;border-radius:8px;background-color:#fff}.group__input input{font:inherit;color:#333;width:100%;border:none;outline:none}.group__input button{flex-shrink:0;white-space:nowrap;display:inline-block;line-height:1.6rem;text-align:center;color:#fff;font-size:16px;font-weight:500;font-family:"Plus Jakarta Sans",sans-serif;background-color:#2b3b80;text-align:center;cursor:pointer;padding:.6rem 1.5rem;border-radius:8px;border-color:#2b3b80;transition:background-color .2s ease}.group__input button:hover{background-color:rgb(36.55,50.15,108.8)}@media(max-width: 576px){.group__input{flex-direction:column;align-items:stretch;padding:.75rem;gap:.75rem}}.group__list{padding:0;margin:0;border:1px solid #cbd5e1;border-radius:8px;max-height:456px}.group__list .list{border:none;border-radius:0;border-bottom:1px solid #cbd5e1}.group__list .lists{margin:0;padding:0;max-height:calc(350px - 40px);overflow-y:scroll}.group__list .list:last-child{border:none}.group__list-heading{font-weight:500;font-size:14px;color:#506466}.group__dropdown{display:flex;border-radius:8px}.group__dropdown .dropdown__item,.group__dropdown .dropdown__slider{border-radius:0}.group__dropdown div[id]:nth-child(1) .dropdown{border-radius:8px 0 0 8px}.group__dropdown div[id]:nth-child(2) .dropdown{border-radius:0}.group__dropdown div[id]:nth-child(3) .dropdown{border-radius:0 8px 8px 0}@media(max-width: 767px){.group{width:100% !important}.group__dropdown{flex-direction:column;gap:8px}.group__dropdown .dropdown{border-radius:6px !important}}