Giter Club home page Giter Club logo

dino's Introduction

DINO!

DINO!

Dino is a Chrome extension designed to help people with dyslexia and color blindness navigate and interact with web pages more easily.

Installation

To use Dino in your Chrome browser, follow these steps:

  1. Download the source code from this repository or click here to download it and then unzip the files.

  2. Open Google Chrome and click on the extensions icon in the top-right corner of the browser. Alternatively, you can go to settings and then select extensions from the left tab.

  3. Toggle the Developer Mode button on the top-right corner to enable it.

  4. Click on the load unpacked button on the top-left corner and select the unzipped folder containing the folder named Dino-main.

  5. That's it! Now simply click on Dino from your extensions to run it.

Features

Dino offers a number of features to enhance your web experience, including:

  • PREFERENCES
    • preference is a technical term usually used in relation to choosing between alternatives.

image


  • FONT SIZE
    • Change the font size of the web page using various sizes available, ranging from 12px to 60px.

image


image


  • IMAGES
    • Remove images and read out alt texts of images.

image


  • LISTEN TO WEB PAGE
    • Read out the whole page or just the selected text.

image


  • PARAGRAPHS
    • Highlight paragraph border, highlight paragraph background.

image


  • LINKS
    • Highlight links present on the webpage and show borders to the links.

image


  • COLORS
    • Change background color and font color.

image


  • DICTIONARY
    • Get definition of the selected word on the webpage.

image


  • TRANSLATION
    • Enter the text to get translated.

image


  • AUTO SCROLLING
    • Where when you Enter to Start Scrolling and again press Enter to stop the Scrolling.

image


  • MAGNIFIER
    • Magnify/demagnify the current webpage.

image


  • REMOVE EMPHASIS
    • Remove all italicized text and underscore from the webpage.

image


  • CASE CONVERTER
    • Where you convert word into Uppercase and Lowercase.

image


Permissions

Permissions include tabs and active tabs which helps to manipulate the styles of the web page. NO DATA IS USED BY US.

Project Admin

Diganta Kr Banik
Diganta Kr Banik

Co Maintainer

Kushal Mitra
Kushal Mitra

Contributing

Raise an issue

You can raise an issue to report a bug or to request a new feature. Before raising an issue, please make sure that the issue you are raising is not already present among the existing issues.

How to make a PR

  1. Fork the repo.

  2. After forking, clone the repo to your local machine. To clone the repo to your local machine, run the following command in your terminal:

    git clone https://github.com/<your-github-username>/Dino
  3. Add a remote upstream to the original repo. To add a remote upstream, run the following command in your terminal:

    git remote add upstream https://github/devloper-diganta/Dino
  4. Create a new branch. To create a new branch, run the following command in your terminal:

    git checkout -b <your-branch-name>
  5. Make changes in source code.

  6. Add your changes To add your changes, run the following command in your terminal:

    git add <File1 changed> <File2 changed> ...
  7. Commit your changes. To commit your changes, run the following command in your terminal:

    git commit -m "<your-commit-message>"
  8. Push your changes. To push your changes, run the following command in your terminal:

    git push origin <your-branch-name>
  9. Create a PR.

Alternatively Using GitHub Deslktop:

  1. Open GitHub Desktop and log in to your GitHub account.

  2. Make sure you are on the "Current Repository" view. If not, go to "File" and select "Add Local Repository" to add your repository.

  3. In the "Current Repository" view, ensure you are on the branch that you want to submit a pull request for. If you're not on the correct branch, use the "Branch" menu to switch to the correct branch.

  4. Once you're on the correct branch, make your changes and commit them to the branch. You can do this by clicking the "+" button in the upper-left corner of the GitHub Desktop window, making your changes, and then entering a commit message.

  5. After you've made your changes and committed them, click the "Push origin" button in the top-right corner of the GitHub Desktop window. This will push your changes to the remote repository on GitHub.

  6. Now, go to the GitHub website, navigate to your fork of the repository, and you should see a button to "Compare & pull request" between your fork and the original repository, click on it.

  7. On the pull request page, you can review your changes and add any additional information, such as a title and a description, that you want to include with your pull request.

  8. Once you're satisfied with your pull request, click the "Create pull request" button to submit it.

Note: In order to create a pull request, you must have a fork of the original repository in your GitHub account and you must have made the changes in that forked repository.

That's it! You have made your contribution to the project.๐Ÿ™Œ

Sit back patiently and relax while the project maintainers review your PR. ๐Ÿš€

Contributors

License

MIT

dino's People

Contributors

07apollo07 avatar a91y avatar amanshenoy008 avatar anishdubey27 avatar bhagatharsh avatar deephansda avatar developer-diganta avatar dheerajchhatanidc avatar durgesh4993 avatar gyaniroman23 avatar madhav6ram avatar manavlohia945 avatar mohakgupt avatar neha00011 avatar nehaaa3121 avatar nerdy-nakul avatar officialarmannqureshi avatar papri24majumder avatar prekshathakkar51 avatar rahulj9a avatar sanya2911 avatar sattyamsamania avatar sujay-web-dev avatar sumit9953 avatar suvamita avatar sxxaq avatar ujwal19k avatar vatsalmadhur avatar vijay-kumar-yadav avatar web-dev-kushal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

dino's Issues

Create A Web Page Mockup for Dino

Subject of the issue

Since Dino is a chrome extension, it would be great to have a webpage dedicated to it. We'll host it via GitHub pages.

Your environment

N.A.

Steps to reproduce

N.A.

Expected behaviour

N.A.

Actual behaviour

N.A.

Add Reset Button to all the functions.

Subject of the issue

Describe your issue here.

Your environment

  • version of angular-translate
  • version of angular
  • which browser and its version

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Add an option to select type of highlight for paragraph

Subject of the issue

Currently the paragraph highlighter only adds a border to highlight paras. We can have 2 options:

  1. Add border to paragraph (the current behavior)
  2. Add background to paragraph (where the color would be added to the paragraph)
    Feel free to ask any question.

Starter code for website of Dino

Subject of the issue

Construct the code for the website as per the design mockup.

Prefer HTML,CSS and JS rather than any framework (up for discussion if you want)

Add button to increase/decrease word space.

Subject of the issue

Add a button to increase/decrease word space among words. Do try to note if there is an existing value for the css and if present, keep a copy of it( helps for default value).

Add a dyslexic ruler option.

Subject of the issue

Add a dysexic ruler. It would ressemble a ruler and can be moved with the mouse. This would help readers concentrate on each line at a time. Check the image for reference.
image

add a back button for font changed color

Add a revert back button when we change the font color of a web page

Your environment

  • version of angular-translate
  • version of angular
  • which browser and its version

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Correct popup.html

Subject of the issue

popup.html due to some changes, shows the same content twice. This needs to be corrected.

Position of '+' and '-' buttons.

Screenshot 2023-01-12 at 8 04 56 PM

### Subject of the issue

In the Magnifier section,i suggest to make the '+' button towards the right side and '-' on the left as generally people assume its this way only.

Your environment

  • version of angular-translate
  • version of angular
  • which browser and its version

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Add customized cursor to extension

Subject of the issue

Describe your issue here.
Add customized cursor to extension which will be related to theme of DINO.

Expected behaviour

Tell us what should happen
I will use CSS to add a cool cursor.

Actual behaviour

Tell us what happens instead
Normal cursor is seen

Add a option to change underlines and italics to bold.

Subject of the issue

https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide#:~:text=Use%20sans%20serif%20fonts%2C%20such,may%20request%20a%20larger%20font.
You can find from this article that it is better to avoid using italics and underlines to produce a dyslexic friendly web page. So we can add an option that would allow italics and underlines to be converted to bold.
I guess we can have 3 buttons in this section, one which changes the italics to bolds and one which changes underlines to bolds. The third button could revert the action. So you also have to store which were italics and which were bold.

Add a loader while dictionary loads

Subject of the issue

After selecting a word, when we click on the Get Definition button there is a delay due to API call. Try to add a small loader or an appropriate waiting message while the meaning is being fetched.

image

Documentation Improvement

Subject of the issue

Modification of CONTRIBUTING.md

Problem Statement:

There are many first time contributors who might be unable to use the terminal efficiently.

Solution:

We can make some changes in the CONTRIBUTING.md file and add a step by step process how a person can contribute to the project with the help of GITHUB DESKTOP application, without the need to write a single command manually.

I would like to work on the same issue.

Add a feature to read only highlighted text

Subject of the issue

Currently, there is only an option to read the entire web page. It would be good to have an option to read aloud any highlighted text that the user wants.

I want to add Tahoma font-face

Description

For people with dyslexia ,Tahoma font is the best readable font for people having a dyslexia disorder along with this also due to enough spacing between letters. Therefore ,I want to add Tahoma Font to your project.

Screenshot

Issue-1

Types of changes

  • New feature added
  • Bug fix
  • Breaking change

SWOC PARTICIPANT

  • Name : Mohammad Nazim Qureshi
  • Discord : atoz #5954
  • Devfolio username :officialarmannq

Add a feature to increase the volume above 100%

Subject of the issue

A feature which could increase the volume above 100% just like volume boosters. You can refer to the answers here

Your environment

N.A.

Steps to reproduce

N.A.

Expected behaviour

N.A.

Actual behaviour

N.A.

Feature addon: Adding more font styles

Subject of the issue

I just joined this repo via SWOC.
I was reading the readme file and there was a mentioned link for font styles.
when I tried the extension only some fonts where available.
I want more font styles to be added.

Enhancement: Replace specific font sizes with slider

Subject of the issue

Currently, there are just fixed font sizes. A better alternative to that would be adding a slider that changes the font size with the value from the slider

image
The highlighted part should be replaced with a slider

Color of Sliders.

Subject of the issue

When turning on the extension,the background color goes blue which contradicts the slider color present in the 'Rate' and 'Magnifier' section.

Your environment

  • version of angular-translate
  • version of angular
  • which browser and its version

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Adding a Favicon

Subject of the issue

Favicon

Your environment

The site will have a icon like this

image
image

Steps to reproduce

Will Design a logo similar to that of Dino!

Expected behaviour

Get a icon on the site

Actual behaviour

Display the icon on the site

Add a search option in the extension to search for features.

Subject of the issue

Add a search option at the very top (after extension name) that allows users to directly search and get the filtered results on the extension. For example, if I type Font-size, the font size option should appear on the extension or the user should be directed to that part, whichever you feel is easy to implement.
For searching, I suggest using fuzzy search technique as it allows users to search for misspelled options too. You can use FuseJS by incorporating the CDN for that or by downloading the module.
Read more about FuseJS here

Add English Dictionary

Subject of the issue

Add a feature that allows users to select a word from the webpage and then it gives back its dictionary meaning.

Dark mode of Dino

Subject of the issue

Dino is an chrome extension so it must also offer a dark mode for its UI.

Expected behaviour

Till now we don't have any Dark mode option in the entire project.
I want to provide a button through which the user can switch to dark mode if required.

Actual behaviour

No dark mode yet.

Add an option to save preferences in local storage

Subject of the issue

The user can have an option to save the preferences that he/she has used. This can be done using localStorage. Feel free to discuss the approach if you want to contribute to this issue.

Cursor Option Addition

Subject of the issue

Add an option to change cursor sizesbetween extra large, large, normal and small.

Improvement of Dino Website UI

Improve UI of the Website

Improvement of the UI and adding prototype. I have updated the UI of the website. You had asked me to improve "Know more" section and make a new Issue.

Tools used

  • Figma
  • Canva

Add different color for color blind people

As mentioned, the Dino chrome extension is for both dyslexia and color-blind people. So, I want to add different colors for color-blind people to highlight links, paragraphs, and background colors.
image

Add reader option

image

Like in microsoft forms if user clicks on the button it will read adjacent text for them. Making it lot easier for them to work with extension.

Assign me this don't worry about icon I will add icon so that it has a transparent background and matching with the theme.

Microsoft form example:
image

Add Stop speaking button

Subject of the issue

Once the page start speak there is no way to stop it

Your environment

  • Chrome

Steps to reproduce

Add a stop button

Expected behaviour

User should be able to stop page to speak

Actual behaviour

Unable to stop speaking

Add an option to select type of highlight for links

Subject of the issue

Currently the link highlighter only adds a background to highlight links. We can have 2 options:

  1. Add border to link
  2. Add background to links(the current behavior)
    Feel free to ask any question.

add convert to lowercase button

Subject of the issue

Describe your issue here.

Your environment

  • version of angular-translate
  • version of angular
  • which browser and its version

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Fix the typo in readme.md

Subject of the issue

Fix the typo in readme.md and edit the 3rd and 4th steps of Installation procedure.

issue2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.