diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..5df211d --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) DevDojo + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/Readme.md b/Readme.md index fff4ba8..6d119a2 100644 --- a/Readme.md +++ b/Readme.md @@ -4,7 +4,7 @@ This is the main repo for the Open Source Pines UI Library. This repo is simple to setup and get running on your local if you wish to submit a fix or make some additions to the library. -1. Download the contents of the Github repo and store it in a folder. +1. Download the contents of the GitHub repo and store it in a folder. 2. Make sure you have NodeJS installed along with the http-server package. 3. CD into your folder and run `http-serve` 4. Visit the localhost URL to see PinesUI diff --git a/data.json b/data.json index f291bb2..e9c5659 100644 --- a/data.json +++ b/data.json @@ -16,6 +16,7 @@ "full-screen-modal" : "Full Screen Modal", "hover-card" : "Hover Card", "image-gallery" : "Image Gallery", + "marquee": "Marquee", "menubar" : "Menu Bar", "modal" : "Modal", "monaco-editor" : "Monaco Editor", @@ -26,6 +27,8 @@ "quotes" : "Quotes", "radio-group": "Radio Group", "range-slider": "Range Slider", + "rating": "Rating", + "retro-grid": "Retro Grid", "select" : "Select", "slide-over" : "Slide-over", "switch" : "Switch", @@ -35,6 +38,7 @@ "text-input" : "Text Input", "textarea" : "Textarea", "textarea-auto-resize" : "Textarea (auto-resize)", + "toast": "Toast Notification", "tooltip" : "Tooltip", "typing-effect" : "Typing Effect", "video" : "Video" @@ -56,6 +60,7 @@ "full-screen-modal" : "A full screen modal element.", "hover-card" : "A hover element card preview.", "image-gallery" : "A simple image gallery element for showing images.", + "marquee" : "A marquee element that scrolls across the screen.", "modal" : "A simple modal element that can be used to show and hide content.", "monaco-editor" : "A simple code editor using the Monaco editor library.", "menubar" : "A visually persistent menu common in desktop applications, offering convenient access to a consistent set of commands.", @@ -66,6 +71,8 @@ "quotes" : "A blockquote element that can be used to display a quote.", "radio-group" : "A radio selection element that can be used to select one option.", "range-slider" : "A range slider element that uses the input type range.", + "rating" : "A rating component that allows users to rate items on a scale.", + "retro-grid" : "An animated scrolling retro grid element.", "select" : "A custom select input element that can be used to select an option.", "slide-over" : "A slide-over element that can be used to show content from the side.", "switch" : "A simple toggle switch element to enable or disable an option.", @@ -75,6 +82,7 @@ "textarea-auto-resize" : "A textarea form input element that automatically resizes to fit the content.", "text-animation" : "Simple text animation elements.", "text-input" : "A form input element that can be used to collect user input.", + "toast": "A toast notification that can be used to show a message. Click a button below to show the toast notification.", "tooltip": "A simple tooltip element that can be used to show additional information.", "typing-effect" : "This is an element that can be used to type text on to the screen.", "video" : "A customized video element that can be used to display a video." @@ -96,6 +104,7 @@ "full-screen-modal" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "hover-card" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "image-gallery" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", + "marquee" : "w-full box-border bg-gray-900 overflow-hidden flex items-center justify-center", "modal" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "monaco-editor" : "w-full h-full box-border flex overflow-hidden items-stretch justify-center", "menubar" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", @@ -106,6 +115,8 @@ "quotes" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "radio-group" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "range-slider" : "sm:p-10 p-4 box-border flex items-center justify-center", + "rating" : "sm:p-10 p-4 box-border flex items-center justify-center", + "retro-grid" : "w-full relative", "select" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "slide-over" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "switch" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", @@ -115,6 +126,7 @@ "textarea-auto-resize" : "w-full py-10 px-48 box-border flex items-center justify-center", "text-animation" : "w-full py-10 box-border flex items-center justify-center", "text-input" : "w-full py-10 px-48 box-border flex items-center justify-center", + "toast" : "w-full sm:p-10 p-4 box-border flex items-center overflow-scroll justify-center", "tooltip" : "w-full sm:p-10 p-4 box-border flex items-center justify-center", "typing-effect" : "w-full sm:p-10 p-4 flex items-center justify-center", "video" : "py-10 w-[640px] mx-auto box-border flex items-center justify-center" @@ -152,6 +164,7 @@ "modal" : ["01", "02"], "pagination" : ["01"], "progress" : ["01"], + "rating" : ["01"], "slide-over" : ["01"], "switch" : ["01"], "table" : ["01", "02"], diff --git a/elements/alert.html b/elements/alert.html index b8e4fe2..57f40c4 100644 --- a/elements/alert.html +++ b/elements/alert.html @@ -1,5 +1,5 @@ -
+
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
-
\ No newline at end of file +
diff --git a/elements/card-examples/example-02.html b/elements/card-examples/example-02.html index 8b18e61..c351764 100644 --- a/elements/card-examples/example-02.html +++ b/elements/card-examples/example-02.html @@ -1,8 +1,8 @@
- +
- +
Adam Wathan
@@ -16,9 +16,9 @@
Adam

Creator of @tailwindcss. Listener of Slayer. Austin 3:16. BTW, Pines UI is super cool!

- - - + + +
673 Following 168.6K Followers diff --git a/elements/command-examples/example-02.html b/elements/command-examples/example-02.html index 69b0230..e9481d9 100644 --- a/elements/command-examples/example-02.html +++ b/elements/command-examples/example-02.html @@ -13,7 +13,7 @@ " @keydown.escape.window="commandOpen = false" class="relative z-50 w-auto h-auto"> - +
diff --git a/elements/date-picker.html b/elements/date-picker.html index 7b4daf7..60343da 100644 --- a/elements/date-picker.html +++ b/elements/date-picker.html @@ -96,10 +96,10 @@ datePickerCalculateDays(); " x-cloak>
-
+
- +
@@ -108,16 +108,16 @@ x-transition @click.away="datePickerOpen = false" class="absolute top-0 left-0 max-w-lg p-4 mt-12 antialiased bg-white border rounded-lg shadow w-[17rem] border-neutral-200/70"> -
+
- -
@@ -141,9 +141,9 @@ :class="{ 'bg-neutral-200': datePickerIsToday(day) == true, 'text-gray-600 hover:bg-neutral-200': datePickerIsToday(day) == false && datePickerIsSelectedDate(day) == false, - 'bg-neutral-800 text-white hover:bg-opacity-75': datePickerIsSelectedDate(day) == true + 'bg-neutral-800 text-white hover:bg-neutral-800/70': datePickerIsSelectedDate(day) == true }" - class="flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7">
+ class="flex justify-center items-center w-7 h-7 text-sm leading-none text-center rounded-full cursor-pointer">
diff --git a/elements/dropdown-menu.html b/elements/dropdown-menu.html index 0446b39..24eeb44 100644 --- a/elements/dropdown-menu.html +++ b/elements/dropdown-menu.html @@ -3,97 +3,97 @@ }" class="relative"> -
-
+
My Account
-
+
- + Profile ⇧⌘P - + Billing⌘B - + Settings ⌘S - + Keyboard shortcuts ⌘K -
+
- + Team
- + Invite users - +
- \ No newline at end of file +
diff --git a/elements/full-screen-menu-examples/example-01.html b/elements/full-screen-menu-examples/example-01.html index 06ff968..dfc07b1 100644 --- a/elements/full-screen-menu-examples/example-01.html +++ b/elements/full-screen-menu-examples/example-01.html @@ -1,58 +1,58 @@
- +