From 92d85824cf4dbd79e5a010bba36bcfbbbb3615ce Mon Sep 17 00:00:00 2001 From: Rajinderpal Singh <60106112+sairish2001@users.noreply.github.com> Date: Thu, 7 Jan 2021 12:02:26 +0530 Subject: [PATCH 1/4] Rajinderpal Singh's Final Report for DSC-X (OMG-Frames) My Final Report for Winter of Code 2020 for the Project OMG-Frames under the Organization DSC-X. --- DSC-X/rajinderpal_singh_WoC.md | 114 +++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 DSC-X/rajinderpal_singh_WoC.md diff --git a/DSC-X/rajinderpal_singh_WoC.md b/DSC-X/rajinderpal_singh_WoC.md new file mode 100644 index 0000000..9ca3359 --- /dev/null +++ b/DSC-X/rajinderpal_singh_WoC.md @@ -0,0 +1,114 @@ +# Developer – Winter of Code (WoC) 2020 +--- +##### **Rajinderpal Singh** +## DSC-X : OMG-Frames + +OMG-Frames aims to Generate Badges for the events that happens for across the Student Clubs, or any other events.My work is to create a Frontend for the entire project mainly Dashboard. +>**Apart from my work, I added new features which I thought to be in for better user experience.** + +**I am *Rajinderpal Singh*, an undergraduate student from *Guru Nanak Dev University,Amritsar*, as part of Winter of Code.** This project was mentored by Anubhav Singh + +## Contributions +Contributions are outlined as follows: + + * 20 commits (approx.) are made into the develop branch of iWasAt.events + +* Total of 3 Pull Requests made and got merged in develop branch. + + * First Pull Request + ![First Pull Request](https://i.imgur.com/QR3CiKv.png) #PR-6 + + * Second Pull Request ![Second Pull Request](https://i.imgur.com/EaHvExN.png) #PR-8 + + * Total ![Total](https://i.imgur.com/LAaiWWz.png) + +* Created 2 Issues in API Repository. + * Fogot Password? API wanted {#14} + * Delete Frame API {#11} + +* Closed 2 Issues, by working on it. + * Dashboard UI {#3} + * Performance issue in `gallery.html` page {#9} +* Created 3 issues in omg-frames Repository + * Implement update frame API {#11} + * Design a Favicon {#12} + * Make Share button Working { #13} +* 10 (approx.) New Features + +## New Features +* Created Frontend + * Bootstrap framework for responsive website + * index.html, dashboard.html, gallery.html , forgotpassword.html, reset.html + * CSS files for each page {css/} + + * JS files (main.js, imagedit.js, loginsignup.js), the `main.js` contains all the required functions, the `imageedit.js` contains implementation of crop feature into dashboard, and `loginsignup.js` contains all functions which has link with Backend in someway, along with all functions for AJAX request. {js/} +* Functionality added{ see working } + * Crop feature (Croppie.js). Now user can crop it's Picture after selecting. + + * Customized Croppie.js for showing instant result on canvas (oninput/onchange) + + * **Generate Strong Password** (12 characters long, includes alphabets, numbers, special characters), it generates a strong password and insert automatically into password field { function generatepassword() } + ![generatepassword](https://i.imgur.com/8ruldPM.png) + + * Fullscreen mode, now user can experience fullscreen feature.{ function enablefullscreen() } + + * User can see it’s Account information by clicking on My Account button in navbar (email, name, organization,role). + + * Colored custom popups for displaying response message after fetching from API request, just call `alertpopup(message,'open',colorofpopup);`.Red(`#dc3545`) on error, Green(`#28a745`) on success.{ function alertpopup() } + ![popups](https://i.imgur.com/9qBVSu7.png) + + * `loader()` function, to show/hide loading animation, just call `loader(‘show’)` or `loader(‘hide’)`{ function loader() } + + * Light/Dark Mode (index.html, dashboard.html, gallery.html), set mode in any page, will be applied to all pages automatically. + ![lightdark](https://i.imgur.com/gwKAX24.jpg) + + * Show/Hide Password.{ function showpassword() } in Login/SignUp form. + + * Form validation (jQuery form validation) with custom error messages and color + + * Download or Delete Saved frames by hovering on fetched frames in gallery.html. + ![gallerypage](https://i.imgur.com/j8Bm0R1.jpg) + + * Customized Bootstrap’s buttons, input field’s classes according to wireframe design. + + * Changed SVG logo to PNG (by making it’s background transparent) {logo.png} + * Changed Black color to white of logo for dark mode.{logodark.png} + + * As per requirement, user cannot use dashboard or visit gallery **without logging in**. + + * Created other required functions for proper working of project { js/ } + * `createordestroybutton()` for creating and destroying **Login/Logout button**. + + * `dashboardandgallerybutton()` for creating/destroying **View Dashboard and Gallery button** if Logged in and **Get Started button** if not Logged in. + + * Other functions for toggle closing/opening of Content.{ main.js } + + * Many More + + * Implemented All available API’s { loginsignup.js } + * Login + * SignUp + * Save Frame + * Get Frame + * Delete Frame + * Send-reset-email + * Update-password + +## Future Scope +Here is a list for future developers. +* Use `frabric.js` for live editing on canvas. +* Make frames fully customized so that user can change Event Text(Attendee, Speaker,etc.) , and can also change logo. +* Other editing features like Brightness, Contrast,etc. along with filters(for filters I suggest CSSgram). + +* Drag,Transform, contents inside canvas. + +* Enable user to download the frame in different Resolutions + +Feel free to come up with new ideas yourself. + +## Acknowledgments +I would like to express my gratitude to [Anubhav Singh](https://github.com/xprilion) for his patient guidance and thanks for going through all my PR's. +I would also like to thank [Awantika Nigam](https://github.com/awantika10) and [Arnab Sen](https://github.com/arnabsen1729),they are the main source of configuring bugs regarding new Pull Request. It has been a great experience working at OMG-Frames!. + + +WoC with DSC-X was a warm and unforgettable experience for me. Everytime I talk of Open Source, OMG-Frames will be remembered fondly. \ No newline at end of file From 1db8629d568211236bd13f418d37185f00ef9096 Mon Sep 17 00:00:00 2001 From: Rajinderpal Singh <60106112+sairish2001@users.noreply.github.com> Date: Thu, 7 Jan 2021 12:50:33 +0530 Subject: [PATCH 2/4] Delete rajinderpal_singh_WoC.md --- DSC-X/rajinderpal_singh_WoC.md | 114 --------------------------------- 1 file changed, 114 deletions(-) delete mode 100644 DSC-X/rajinderpal_singh_WoC.md diff --git a/DSC-X/rajinderpal_singh_WoC.md b/DSC-X/rajinderpal_singh_WoC.md deleted file mode 100644 index 9ca3359..0000000 --- a/DSC-X/rajinderpal_singh_WoC.md +++ /dev/null @@ -1,114 +0,0 @@ -# Developer – Winter of Code (WoC) 2020 ---- -##### **Rajinderpal Singh** -## DSC-X : OMG-Frames - -OMG-Frames aims to Generate Badges for the events that happens for across the Student Clubs, or any other events.My work is to create a Frontend for the entire project mainly Dashboard. ->**Apart from my work, I added new features which I thought to be in for better user experience.** - -**I am *Rajinderpal Singh*, an undergraduate student from *Guru Nanak Dev University,Amritsar*, as part of Winter of Code.** This project was mentored by Anubhav Singh - -## Contributions -Contributions are outlined as follows: - - * 20 commits (approx.) are made into the develop branch of iWasAt.events - -* Total of 3 Pull Requests made and got merged in develop branch. - - * First Pull Request - ![First Pull Request](https://i.imgur.com/QR3CiKv.png) #PR-6 - - * Second Pull Request ![Second Pull Request](https://i.imgur.com/EaHvExN.png) #PR-8 - - * Total ![Total](https://i.imgur.com/LAaiWWz.png) - -* Created 2 Issues in API Repository. - * Fogot Password? API wanted {#14} - * Delete Frame API {#11} - -* Closed 2 Issues, by working on it. - * Dashboard UI {#3} - * Performance issue in `gallery.html` page {#9} -* Created 3 issues in omg-frames Repository - * Implement update frame API {#11} - * Design a Favicon {#12} - * Make Share button Working { #13} -* 10 (approx.) New Features - -## New Features -* Created Frontend - * Bootstrap framework for responsive website - * index.html, dashboard.html, gallery.html , forgotpassword.html, reset.html - * CSS files for each page {css/} - - * JS files (main.js, imagedit.js, loginsignup.js), the `main.js` contains all the required functions, the `imageedit.js` contains implementation of crop feature into dashboard, and `loginsignup.js` contains all functions which has link with Backend in someway, along with all functions for AJAX request. {js/} -* Functionality added{ see working } - * Crop feature (Croppie.js). Now user can crop it's Picture after selecting. - - * Customized Croppie.js for showing instant result on canvas (oninput/onchange) - - * **Generate Strong Password** (12 characters long, includes alphabets, numbers, special characters), it generates a strong password and insert automatically into password field { function generatepassword() } - ![generatepassword](https://i.imgur.com/8ruldPM.png) - - * Fullscreen mode, now user can experience fullscreen feature.{ function enablefullscreen() } - - * User can see it’s Account information by clicking on My Account button in navbar (email, name, organization,role). - - * Colored custom popups for displaying response message after fetching from API request, just call `alertpopup(message,'open',colorofpopup);`.Red(`#dc3545`) on error, Green(`#28a745`) on success.{ function alertpopup() } - ![popups](https://i.imgur.com/9qBVSu7.png) - - * `loader()` function, to show/hide loading animation, just call `loader(‘show’)` or `loader(‘hide’)`{ function loader() } - - * Light/Dark Mode (index.html, dashboard.html, gallery.html), set mode in any page, will be applied to all pages automatically. - ![lightdark](https://i.imgur.com/gwKAX24.jpg) - - * Show/Hide Password.{ function showpassword() } in Login/SignUp form. - - * Form validation (jQuery form validation) with custom error messages and color - - * Download or Delete Saved frames by hovering on fetched frames in gallery.html. - ![gallerypage](https://i.imgur.com/j8Bm0R1.jpg) - - * Customized Bootstrap’s buttons, input field’s classes according to wireframe design. - - * Changed SVG logo to PNG (by making it’s background transparent) {logo.png} - * Changed Black color to white of logo for dark mode.{logodark.png} - - * As per requirement, user cannot use dashboard or visit gallery **without logging in**. - - * Created other required functions for proper working of project { js/ } - * `createordestroybutton()` for creating and destroying **Login/Logout button**. - - * `dashboardandgallerybutton()` for creating/destroying **View Dashboard and Gallery button** if Logged in and **Get Started button** if not Logged in. - - * Other functions for toggle closing/opening of Content.{ main.js } - - * Many More - - * Implemented All available API’s { loginsignup.js } - * Login - * SignUp - * Save Frame - * Get Frame - * Delete Frame - * Send-reset-email - * Update-password - -## Future Scope -Here is a list for future developers. -* Use `frabric.js` for live editing on canvas. -* Make frames fully customized so that user can change Event Text(Attendee, Speaker,etc.) , and can also change logo. -* Other editing features like Brightness, Contrast,etc. along with filters(for filters I suggest CSSgram). - -* Drag,Transform, contents inside canvas. - -* Enable user to download the frame in different Resolutions - -Feel free to come up with new ideas yourself. - -## Acknowledgments -I would like to express my gratitude to [Anubhav Singh](https://github.com/xprilion) for his patient guidance and thanks for going through all my PR's. -I would also like to thank [Awantika Nigam](https://github.com/awantika10) and [Arnab Sen](https://github.com/arnabsen1729),they are the main source of configuring bugs regarding new Pull Request. It has been a great experience working at OMG-Frames!. - - -WoC with DSC-X was a warm and unforgettable experience for me. Everytime I talk of Open Source, OMG-Frames will be remembered fondly. \ No newline at end of file From 2ff74e6280bbcd2f9125972b38d23c5320de9748 Mon Sep 17 00:00:00 2001 From: Rajinderpal Singh <60106112+sairish2001@users.noreply.github.com> Date: Thu, 7 Jan 2021 12:54:54 +0530 Subject: [PATCH 3/4] Report Updated! Follows markdown's convention My Final Report for Winter of Code 2020 for the Project OMG-Frames under the Organization DSC-X. --- DSC-X/rajinderpal_singh.md | 114 +++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 DSC-X/rajinderpal_singh.md diff --git a/DSC-X/rajinderpal_singh.md b/DSC-X/rajinderpal_singh.md new file mode 100644 index 0000000..0ce7b8d --- /dev/null +++ b/DSC-X/rajinderpal_singh.md @@ -0,0 +1,114 @@ +# Developer – Winter of Code (WoC) 2020 +--- +##### **Rajinderpal Singh** +## DSC-X : [OMG-Frames](https://sairish2001.github.io/omgframestesting.github.io/) + +OMG-Frames aims to Generate Badges for the events that happens for across the Student Clubs, or any other events.My work is to create a Frontend for the entire project mainly Dashboard. +>**Apart from my work, I added new features which I thought to be in for better user experience.** + +I am **[Rajinderpal Singh](https://github.com/sairish2001/)** ,an undergraduate student from **[Guru Nanak Dev University,Amritsar,](http://www.gndu.ac.in/)** as part of Winter of Code.This project was mentored by **[Anubhav Singh](https://github.com/xprilion/)**. + +## Contributions +Contributions are outlined as follows: + + * 20 [commits](https://github.com/dsc-x/omg-frames/commits/develop) (approx.) are made into the develop branch of OMG-Frames + +* Total of 3 Pull Requests made and got merged in develop branch. + + * First Pull Request + ![First Pull Request](https://i.imgur.com/QR3CiKv.png) [#PR-6](https://github.com/dsc-x/omg-frames/pull/5) + + * Second Pull Request ![Second Pull Request](https://i.imgur.com/EaHvExN.png) [#PR-8](https://github.com/dsc-x/omg-frames/pull/8) + + * Total ![Total](https://i.imgur.com/LAaiWWz.png) + +* Created 2 Issues in API Repository. + * Fogot Password? API wanted [{#14}](https://github.com/dsc-x/omg-frames-api/issues/14) + * Delete Frame API [{#11}](https://github.com/dsc-x/omg-frames-api/issues/11) + +* Closed 2 Issues, by working on it. + * Dashboard UI [{#3}](https://github.com/dsc-x/omg-frames/issues/3) + * Performance issue in `gallery.html` page [{#9}](https://github.com/dsc-x/omg-frames/issues/9) +* Created 3 issues in omg-frames Repository + * Implement update frame API [{#11}](https://github.com/dsc-x/omg-frames/issues/11) + * Design a Favicon [{#12}](https://github.com/dsc-x/omg-frames/issues/12) + * Make Share button Working [{#13}](https://github.com/dsc-x/omg-frames/issues/13) +* 10 (approx.) New Features + +## New Features +* Created Frontend + * [Bootstrap Framework](https://getbootstrap.com/) for responsive website + * [index.html](https://github.com/dsc-x/omg-frames/blob/develop/index.html), [dashboard.html](https://github.com/dsc-x/omg-frames/blob/develop/dashboard.html), [gallery.html](https://github.com/dsc-x/omg-frames/blob/develop/gallery.html), [forgotpassword.html](https://github.com/dsc-x/omg-frames/blob/develop/forgotpassword.html), [reset.html](https://github.com/dsc-x/omg-frames/blob/develop/reset.html) + * CSS files for each page [{css/}](https://github.com/dsc-x/omg-frames/tree/develop/css) + + * [{JS/}](https://github.com/dsc-x/omg-frames/tree/develop/js) files([main.js](https://github.com/dsc-x/omg-frames/blob/develop/js/main.js),[imageedit.js](https://github.com/dsc-x/omg-frames/blob/develop/js/imageedit.js), [loginsignup.js](https://github.com/dsc-x/omg-frames/blob/develop/js/loginsignup.js)), the `main.js` contains all the required functions, the `imageedit.js` contains implementation of crop feature into dashboard, and `loginsignup.js` contains all functions which has link with Backend in someway, along with all functions for AJAX request. +* Functionality added [{see working}](https://sairish2001.github.io/omgframestesting.github.io/) + * Crop feature [Croppie.js](https://foliotek.github.io/Croppie/). Now user can crop it's Picture after selecting. + + * [Customized Croppie.js](https://github.com/dsc-x/omg-frames/blob/develop/js/croppie.js) for showing instant result on canvas (oninput/onchange) + + * **Generate Strong Password** (12 characters long, includes alphabets, numbers, special characters), it generates a strong password and insert automatically into password field [{ function generatepassword() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L197) + ![generatepassword](https://i.imgur.com/8ruldPM.png) + + * Fullscreen mode, now user can experience fullscreen feature.[{ function enablefullscreen() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L224) + + * User can see it’s Account information by clicking on My Account button in navbar (email, name, organization,role). + + * Colored custom popups for displaying response message after fetching from API request, just call `alertpopup(message,'open',colorofpopup);`.Red(`#dc3545`) on error, Green(`#28a745`) on success.[{ function alertpopup() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L186) + ![popups](https://i.imgur.com/9qBVSu7.png) + + * `loader()` function, to show/hide loading animation, just call `loader(‘show’)` or `loader(‘hide’)`[{ function loader() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L88) + + * Light/Dark Mode (index.html, dashboard.html, gallery.html), set mode in any page, will be applied to all pages automatically. + ![lightdark](https://i.imgur.com/gwKAX24.jpg) + + * Show/Hide Password.[{ function showpassword() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L210) in Login/SignUp form. + + * Form validation [(jQuery form validation)](https://jqueryvalidation.org/) with custom error messages and color + + * [Download or Delete](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L190) Saved frames by hovering on fetched frames in gallery.html. + ![gallerypage](https://i.imgur.com/j8Bm0R1.jpg) + + * Customized Bootstrap’s buttons, input field’s classes according to wireframe design. + + * Changed SVG logo to PNG (by making it’s background transparent) [{logo.png}](https://github.com/dsc-x/omg-frames/blob/develop/images/logo.png) + * Changed Black color to white of logo for dark mode.[{logodark.png}](https://github.com/dsc-x/omg-frames/blob/develop/images/logodark.png) + + * As per requirement, user cannot use dashboard or visit gallery **without logging in**. + + * Created other required functions for proper working of project [{ js/ }](https://github.com/dsc-x/omg-frames/tree/develop/js) + * `createordestroybutton()` for creating and destroying **Login/Logout button**. + + * `dashboardandgallerybutton()` for creating/destroying **View Dashboard and Gallery button** if Logged in and **Get Started button** if not Logged in. + + * Other functions for toggle closing/opening of Content.[{ main.js }](https://github.com/dsc-x/omg-frames/blob/develop/js/main.js) + + * Many More + + * Implemented All available API’s [{ loginsignup.js }](https://github.com/dsc-x/omg-frames/blob/develop/js/loginsignup.js) + * [Login](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L117) + * [Sign Up](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L68) + * [Save Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L246) + * [Get Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L219) + * [Delete Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L162) + * [Send-reset-email](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L280) + * [Update-password](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L309) + +## Future Scope +Here is a list for future developers. +* Use [`frabric.js`](http://fabricjs.com/) for live editing on canvas. +* Make frames fully customized so that user can change Event Text(Attendee, Speaker,etc.) , and can also change logo. +* Other editing features like Brightness, Contrast,etc. along with filters(for filters I suggest [CSSgram](https://una.im/CSSgram/)). + +* Drag,Transform, contents inside canvas. + +* Enable user to download the frame in different Resolutions + +Feel free to come up with new ideas yourself. + +## Acknowledgments +I would like to express my gratitude to [Anubhav Singh](https://github.com/xprilion) for his patient guidance and thanks for going through all my PR's. +I would also like to thank [Awantika Nigam](https://github.com/awantika10) and [Arnab Sen](https://github.com/arnabsen1729),they are the main source of configuring bugs regarding new Pull Request. It has been a great experience working at OMG-Frames!. + + +WoC with DSC-X was a warm and unforgettable experience for me. Everytime I talk of Open Source, OMG-Frames will be remembered fondly. \ No newline at end of file From 9129e4ea15ad971d338446d4a0f123a510389fe3 Mon Sep 17 00:00:00 2001 From: Rajinderpal Singh <60106112+sairish2001@users.noreply.github.com> Date: Thu, 7 Jan 2021 13:52:16 +0530 Subject: [PATCH 4/4] Changed * from - for unordered list view --- DSC-X/rajinderpal_singh.md | 112 ++++++++++++++++++------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/DSC-X/rajinderpal_singh.md b/DSC-X/rajinderpal_singh.md index 0ce7b8d..3503898 100644 --- a/DSC-X/rajinderpal_singh.md +++ b/DSC-X/rajinderpal_singh.md @@ -11,98 +11,98 @@ I am **[Rajinderpal Singh](https://github.com/sairish2001/)** ,an undergraduate ## Contributions Contributions are outlined as follows: - * 20 [commits](https://github.com/dsc-x/omg-frames/commits/develop) (approx.) are made into the develop branch of OMG-Frames + - 20 [commits](https://github.com/dsc-x/omg-frames/commits/develop) (approx.) are made into the develop branch of OMG-Frames -* Total of 3 Pull Requests made and got merged in develop branch. +- Total of 3 Pull Requests made and got merged in develop branch. - * First Pull Request + - First Pull Request ![First Pull Request](https://i.imgur.com/QR3CiKv.png) [#PR-6](https://github.com/dsc-x/omg-frames/pull/5) - * Second Pull Request ![Second Pull Request](https://i.imgur.com/EaHvExN.png) [#PR-8](https://github.com/dsc-x/omg-frames/pull/8) + - Second Pull Request ![Second Pull Request](https://i.imgur.com/EaHvExN.png) [#PR-8](https://github.com/dsc-x/omg-frames/pull/8) - * Total ![Total](https://i.imgur.com/LAaiWWz.png) + - Total ![Total](https://i.imgur.com/LAaiWWz.png) -* Created 2 Issues in API Repository. - * Fogot Password? API wanted [{#14}](https://github.com/dsc-x/omg-frames-api/issues/14) - * Delete Frame API [{#11}](https://github.com/dsc-x/omg-frames-api/issues/11) +- Created 2 Issues in API Repository. + - Fogot Password? API wanted [{#14}](https://github.com/dsc-x/omg-frames-api/issues/14) + - Delete Frame API [{#11}](https://github.com/dsc-x/omg-frames-api/issues/11) -* Closed 2 Issues, by working on it. - * Dashboard UI [{#3}](https://github.com/dsc-x/omg-frames/issues/3) - * Performance issue in `gallery.html` page [{#9}](https://github.com/dsc-x/omg-frames/issues/9) -* Created 3 issues in omg-frames Repository - * Implement update frame API [{#11}](https://github.com/dsc-x/omg-frames/issues/11) - * Design a Favicon [{#12}](https://github.com/dsc-x/omg-frames/issues/12) - * Make Share button Working [{#13}](https://github.com/dsc-x/omg-frames/issues/13) -* 10 (approx.) New Features +- Closed 2 Issues, by working on it. + - Dashboard UI [{#3}](https://github.com/dsc-x/omg-frames/issues/3) + - Performance issue in `gallery.html` page [{#9}](https://github.com/dsc-x/omg-frames/issues/9) +- Created 3 issues in omg-frames Repository + - Implement update frame API [{#11}](https://github.com/dsc-x/omg-frames/issues/11) + - Design a Favicon [{#12}](https://github.com/dsc-x/omg-frames/issues/12) + - Make Share button Working [{#13}](https://github.com/dsc-x/omg-frames/issues/13) +- 10 (approx.) New Features ## New Features -* Created Frontend - * [Bootstrap Framework](https://getbootstrap.com/) for responsive website - * [index.html](https://github.com/dsc-x/omg-frames/blob/develop/index.html), [dashboard.html](https://github.com/dsc-x/omg-frames/blob/develop/dashboard.html), [gallery.html](https://github.com/dsc-x/omg-frames/blob/develop/gallery.html), [forgotpassword.html](https://github.com/dsc-x/omg-frames/blob/develop/forgotpassword.html), [reset.html](https://github.com/dsc-x/omg-frames/blob/develop/reset.html) - * CSS files for each page [{css/}](https://github.com/dsc-x/omg-frames/tree/develop/css) +- Created Frontend + - [Bootstrap Framework](https://getbootstrap.com/) for responsive website + - [index.html](https://github.com/dsc-x/omg-frames/blob/develop/index.html), [dashboard.html](https://github.com/dsc-x/omg-frames/blob/develop/dashboard.html), [gallery.html](https://github.com/dsc-x/omg-frames/blob/develop/gallery.html), [forgotpassword.html](https://github.com/dsc-x/omg-frames/blob/develop/forgotpassword.html), [reset.html](https://github.com/dsc-x/omg-frames/blob/develop/reset.html) + - CSS files for each page [{css/}](https://github.com/dsc-x/omg-frames/tree/develop/css) - * [{JS/}](https://github.com/dsc-x/omg-frames/tree/develop/js) files([main.js](https://github.com/dsc-x/omg-frames/blob/develop/js/main.js),[imageedit.js](https://github.com/dsc-x/omg-frames/blob/develop/js/imageedit.js), [loginsignup.js](https://github.com/dsc-x/omg-frames/blob/develop/js/loginsignup.js)), the `main.js` contains all the required functions, the `imageedit.js` contains implementation of crop feature into dashboard, and `loginsignup.js` contains all functions which has link with Backend in someway, along with all functions for AJAX request. -* Functionality added [{see working}](https://sairish2001.github.io/omgframestesting.github.io/) - * Crop feature [Croppie.js](https://foliotek.github.io/Croppie/). Now user can crop it's Picture after selecting. + - [{JS/}](https://github.com/dsc-x/omg-frames/tree/develop/js) files([main.js](https://github.com/dsc-x/omg-frames/blob/develop/js/main.js),[imageedit.js](https://github.com/dsc-x/omg-frames/blob/develop/js/imageedit.js), [loginsignup.js](https://github.com/dsc-x/omg-frames/blob/develop/js/loginsignup.js)), the `main.js` contains all the required functions, the `imageedit.js` contains implementation of crop feature into dashboard, and `loginsignup.js` contains all functions which has link with Backend in someway, along with all functions for AJAX request. +- Functionality added [{see working}](https://sairish2001.github.io/omgframestesting.github.io/) + - Crop feature [Croppie.js](https://foliotek.github.io/Croppie/). Now user can crop it's Picture after selecting. - * [Customized Croppie.js](https://github.com/dsc-x/omg-frames/blob/develop/js/croppie.js) for showing instant result on canvas (oninput/onchange) + - [Customized Croppie.js](https://github.com/dsc-x/omg-frames/blob/develop/js/croppie.js) for showing instant result on canvas (oninput/onchange) - * **Generate Strong Password** (12 characters long, includes alphabets, numbers, special characters), it generates a strong password and insert automatically into password field [{ function generatepassword() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L197) + - **Generate Strong Password** (12 characters long, includes alphabets, numbers, special characters), it generates a strong password and insert automatically into password field [{ function generatepassword() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L197) ![generatepassword](https://i.imgur.com/8ruldPM.png) - * Fullscreen mode, now user can experience fullscreen feature.[{ function enablefullscreen() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L224) + - Fullscreen mode, now user can experience fullscreen feature.[{ function enablefullscreen() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L224) - * User can see it’s Account information by clicking on My Account button in navbar (email, name, organization,role). + - User can see it’s Account information by clicking on My Account button in navbar (email, name, organization,role). - * Colored custom popups for displaying response message after fetching from API request, just call `alertpopup(message,'open',colorofpopup);`.Red(`#dc3545`) on error, Green(`#28a745`) on success.[{ function alertpopup() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L186) + - Colored custom popups for displaying response message after fetching from API request, just call `alertpopup(message,'open',colorofpopup);`.Red(`#dc3545`) on error, Green(`#28a745`) on success.[{ function alertpopup() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L186) ![popups](https://i.imgur.com/9qBVSu7.png) - * `loader()` function, to show/hide loading animation, just call `loader(‘show’)` or `loader(‘hide’)`[{ function loader() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L88) + - `loader()` function, to show/hide loading animation, just call `loader(‘show’)` or `loader(‘hide’)`[{ function loader() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L88) - * Light/Dark Mode (index.html, dashboard.html, gallery.html), set mode in any page, will be applied to all pages automatically. + - Light/Dark Mode (index.html, dashboard.html, gallery.html), set mode in any page, will be applied to all pages automatically. ![lightdark](https://i.imgur.com/gwKAX24.jpg) - * Show/Hide Password.[{ function showpassword() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L210) in Login/SignUp form. + - Show/Hide Password.[{ function showpassword() }](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/main.js#L210) in Login/SignUp form. - * Form validation [(jQuery form validation)](https://jqueryvalidation.org/) with custom error messages and color + - Form validation [(jQuery form validation)](https://jqueryvalidation.org/) with custom error messages and color - * [Download or Delete](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L190) Saved frames by hovering on fetched frames in gallery.html. + - [Download or Delete](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L190) Saved frames by hovering on fetched frames in gallery.html. ![gallerypage](https://i.imgur.com/j8Bm0R1.jpg) - * Customized Bootstrap’s buttons, input field’s classes according to wireframe design. + - Customized Bootstrap’s buttons, input field’s classes according to wireframe design. - * Changed SVG logo to PNG (by making it’s background transparent) [{logo.png}](https://github.com/dsc-x/omg-frames/blob/develop/images/logo.png) - * Changed Black color to white of logo for dark mode.[{logodark.png}](https://github.com/dsc-x/omg-frames/blob/develop/images/logodark.png) + - Changed SVG logo to PNG (by making it’s background transparent) [{logo.png}](https://github.com/dsc-x/omg-frames/blob/develop/images/logo.png) + - Changed Black color to white of logo for dark mode.[{logodark.png}](https://github.com/dsc-x/omg-frames/blob/develop/images/logodark.png) - * As per requirement, user cannot use dashboard or visit gallery **without logging in**. + - As per requirement, user cannot use dashboard or visit gallery **without logging in**. - * Created other required functions for proper working of project [{ js/ }](https://github.com/dsc-x/omg-frames/tree/develop/js) - * `createordestroybutton()` for creating and destroying **Login/Logout button**. + - Created other required functions for proper working of project [{ js/ }](https://github.com/dsc-x/omg-frames/tree/develop/js) + - `createordestroybutton()` for creating and destroying **Login/Logout button**. - * `dashboardandgallerybutton()` for creating/destroying **View Dashboard and Gallery button** if Logged in and **Get Started button** if not Logged in. + - `dashboardandgallerybutton()` for creating/destroying **View Dashboard and Gallery button** if Logged in and **Get Started button** if not Logged in. - * Other functions for toggle closing/opening of Content.[{ main.js }](https://github.com/dsc-x/omg-frames/blob/develop/js/main.js) + - Other functions for toggle closing/opening of Content.[{ main.js }](https://github.com/dsc-x/omg-frames/blob/develop/js/main.js) - * Many More + - Many More - * Implemented All available API’s [{ loginsignup.js }](https://github.com/dsc-x/omg-frames/blob/develop/js/loginsignup.js) - * [Login](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L117) - * [Sign Up](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L68) - * [Save Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L246) - * [Get Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L219) - * [Delete Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L162) - * [Send-reset-email](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L280) - * [Update-password](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L309) + - Implemented All available API’s [{ loginsignup.js }](https://github.com/dsc-x/omg-frames/blob/develop/js/loginsignup.js) + - [Login](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L117) + - [Sign Up](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L68) + - [Save Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L246) + - [Get Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L219) + - [Delete Frame](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L162) + - [Send-reset-email](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L280) + - [Update-password](https://github.com/dsc-x/omg-frames/blob/6c1e9c40dfcd8e21980094d9291784da1c7b6612/js/loginsignup.js#L309) ## Future Scope Here is a list for future developers. -* Use [`frabric.js`](http://fabricjs.com/) for live editing on canvas. -* Make frames fully customized so that user can change Event Text(Attendee, Speaker,etc.) , and can also change logo. -* Other editing features like Brightness, Contrast,etc. along with filters(for filters I suggest [CSSgram](https://una.im/CSSgram/)). +- Use [`frabric.js`](http://fabricjs.com/) for live editing on canvas. +- Make frames fully customized so that user can change Event Text(Attendee, Speaker,etc.) , and can also change logo. +- Other editing features like Brightness, Contrast,etc. along with filters(for filters I suggest [CSSgram](https://una.im/CSSgram/)). -* Drag,Transform, contents inside canvas. +- Drag,Transform, contents inside canvas. -* Enable user to download the frame in different Resolutions +- Enable user to download the frame in different Resolutions Feel free to come up with new ideas yourself. @@ -111,4 +111,4 @@ I would like to express my gratitude to [Anubhav Singh](https://github.com/xpril I would also like to thank [Awantika Nigam](https://github.com/awantika10) and [Arnab Sen](https://github.com/arnabsen1729),they are the main source of configuring bugs regarding new Pull Request. It has been a great experience working at OMG-Frames!. -WoC with DSC-X was a warm and unforgettable experience for me. Everytime I talk of Open Source, OMG-Frames will be remembered fondly. \ No newline at end of file +WoC with DSC-X was a warm and unforgettable experience for me. Everytime I talk of Open Source, OMG-Frames will be remembered fondly.