├── .DS_Store ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.markdown ├── README.md ├── favicon.ico ├── icons ├── .DS_Store ├── github.svg ├── icon-144x144.png ├── icon-192x192.png ├── icon-48x48.png ├── icon-512x512.png ├── icon-72x72.png ├── icon-96x96.png ├── logo.svg └── pwalogo.svg ├── index.css ├── index.html ├── index.js ├── manifest.json ├── package.json ├── sw.js └── travis.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/.DS_Store -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | # Title 3 | ### Description by [Liyas Thomas](https://github.com/liyasthomas) 4 | 5 | --- 6 | 7 | # 1.0.0 8 | 9 | ## This is it, Title 1.0.0! 10 | We are finally out of beta, therefore many bugs were fixed and camera received a brand new look. 11 | 12 | * **NEW**: Camera redesign 13 | * **NEW**: Camera redesign 14 | * **NEW**: macOS and iOS support 15 | * **IMPROVEMENT**: Major improvements 16 | * **IMPROVEMENT**: Updated libraries 17 | * **FIX**: Fixed many bugs and crashes 18 | * **FIX**: Graphic glitches 19 | * **FIX**: Statusbar too dark 20 | * **TRANSLATION**: Updated translations 21 | * **REVERT**: Brought back the "Help" button 22 | * **OTHER**: Removed all analytics 23 | 24 | --- 25 | 26 | # 0.9.0 27 | 28 | ## I worked a lot on Web apps, WebAR, WebGL & PWAs 29 | So I think Lvr is now ready to be released :) 30 | 31 | I will keep the usual branch model. 32 | 33 | * Stable release on `master` branch 34 | 35 | --- 36 | 37 | ## Thanks 38 | * [Google](https://www.google.com) - for [Polymer](https://polymer-project.org) 39 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at liyascthomas@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ### Write something nice here! 4 | 5 | >First off, thank you for considering contributing to Active Admin. It's people like you that make Active Admin such a great tool. 6 | 7 | [source: [Active Admin](https://github.com/activeadmin/activeadmin/blob/master/CONTRIBUTING.md)] **Need more inspiration?** [1] [Read The Docs](http://read-the-docs.readthedocs.org/en/latest/contribute.html) [2] [Mustache.js](https://github.com/janl/mustache.js/#contributing) 8 | 9 | ### Tell them why they should read your guidelines. 10 | 11 | >Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests. 12 | 13 | [source: [Hoodie](https://github.com/hoodiehq/hoodie/blob/master/CONTRIBUTING.md)] 14 | 15 | ### Explain what kinds of contributions you are looking for. 16 | 17 | Keep an open mind! Improving documentation, bug triaging, or writing tutorials are all examples of helpful contributions that mean less work for you. 18 | 19 | > Elasticsearch is an open source project and we love to receive contributions from our community — you! There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug reports and feature requests or writing code which can be incorporated into Elasticsearch itself. 20 | 21 | [source: [Elasticsearch](https://github.com/elastic/elasticsearch/blob/master/CONTRIBUTING.md)] **Need more inspiration?** [1] [Devise](https://github.com/plataformatec/devise/wiki/Contributing) [2] [Geocoder](https://github.com/alexreisner/geocoder#known-issue) (“known issue”) 22 | 23 | ### Explain contributions you are NOT looking for (if any). 24 | 25 | Again, defining this up front means less work for you. If someone ignores your guide and submits something you don’t want, you can simply close it and point to your policy. 26 | 27 | > Please, don't use the issue tracker for [support questions]. Check whether the #pocoo IRC channel on Freenode can help with your issue. If your problem is not strictly Werkzeug or Flask specific, #python is generally more active. Stack Overflow is also worth considering. 28 | 29 | [source: [Flask](https://github.com/pallets/flask/blob/master/CONTRIBUTING.rst)] **Need more inspiration?** [1] [cucumber-ruby](https://github.com/cucumber/cucumber-ruby/blob/master/CONTRIBUTING.md#about-to-create-a-new-github-issue) [2] [Read the Docs](http://read-the-docs.readthedocs.org/en/latest/open-source-philosophy.html#unsupported) 30 | 31 | # Ground Rules 32 | ### Set expectations for behavior (yours, and theirs). 33 | This includes not just how to communicate with others (being respectful, considerate, etc) but also technical responsibilities (importance of testing, project dependencies, etc). Mention and link to your code of conduct, if you have one. 34 | 35 | > Responsibilities 36 | > * Ensure cross-platform compatibility for every change that's accepted. Windows, Mac, Debian & Ubuntu Linux. 37 | > * Ensure that code that goes into core meets all requirements in this checklist: https://gist.github.com/audreyr/4feef90445b9680475f2 38 | > * Create issues for any major changes and enhancements that you wish to make. Discuss things transparently and get community feedback. 39 | > * Don't add any classes to the codebase unless absolutely needed. Err on the side of using functions. 40 | > * Keep feature versions as small as possible, preferably one new feature per version. 41 | > * Be welcoming to newcomers and encourage diverse new contributors from all backgrounds. See the [Python Community Code of Conduct](https://www.python.org/psf/codeofconduct/). 42 | 43 | [source: [cookiecutter](https://github.com/audreyr/cookiecutter/blob/master/CONTRIBUTING.rst)] **Need more inspiration?** [1] [Celery](https://github.com/celery/celery/blob/master/CONTRIBUTING.rst#community-code-of-conduct) [2] [geocoder](https://github.com/alexreisner/geocoder#contributing) 44 | 45 | # Your First Contribution 46 | Help people who are new to your project understand where they can be most helpful. This is also a good time to let people know if you follow a label convention for flagging beginner issues. 47 | 48 | > Unsure where to begin contributing to Atom? You can start by looking through these beginner and help-wanted issues: 49 | > Beginner issues - issues which should only require a few lines of code, and a test or two. 50 | > Help wanted issues - issues which should be a bit more involved than beginner issues. 51 | > Both issue lists are sorted by total number of comments. While not perfect, number of comments is a reasonable proxy for impact a given change will have. 52 | 53 | [source: [Atom](https://github.com/atom/atom/blob/master/CONTRIBUTING.md#your-first-code-contribution)] **Need more inspiration?** [1] [Read the Docs](http://docs.readthedocs.org/en/latest/contribute.html#contributing-to-development) [2] [Django](https://docs.djangoproject.com/en/dev/internals/contributing/new-contributors/#first-steps) (scroll down to "Guidelines" as well) 54 | 55 | ### Bonus points: Add a link to a resource for people who have never contributed to open source before. 56 | Here are a couple of friendly tutorials you can include: http://makeapullrequest.com/ and http://www.firsttimersonly.com/ 57 | 58 | > Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). 59 | 60 | [source: [React](https://github.com/facebook/react/blob/master/CONTRIBUTING.md#pull-requests)] 61 | 62 | As a side note, it helps to use newcomer-friendly language throughout the rest of your document. Here are a couple of examples from [Active Admin](https://github.com/activeadmin/activeadmin/blob/master/CONTRIBUTING.md): 63 | 64 | >At this point, you're ready to make your changes! Feel free to ask for help; everyone is a beginner at first :smile_cat: 65 | > 66 | >If a maintainer asks you to "rebase" your PR, they're saying that a lot of code has changed, and that you need to update your branch so it's easier to merge. 67 | 68 | # Getting started 69 | ### Give them a quick walkthrough of how to submit a contribution. 70 | How you write this is up to you, but some things you may want to include: 71 | 72 | * Let them know if they need to sign a CLA, agree to a DCO, or get any other legal stuff out of the way 73 | * If tests are required for contributions, let them know, and explain how to run the tests 74 | * If you use anything other than GitHub to manage issues (ex. JIRA or Trac), let them know which tools they’ll need to contribute 75 | 76 | >For something that is bigger than a one or two line fix: 77 | 78 | >1. Create your own fork of the code 79 | >2. Do the changes in your fork 80 | >3. If you like the change and think the project could use it: 81 | * Be sure you have followed the code style for the project. 82 | * Sign the Contributor License Agreement, CLA, with the jQuery Foundation. 83 | * Note the jQuery Foundation Code of Conduct. 84 | * Send a pull request indicating that you have a CLA on file. 85 | 86 | [source: [Requirejs](http://requirejs.org/docs/contributing.html)] **Need more inspiration?** [1] [Active Admin](https://github.com/activeadmin/activeadmin/blob/master/CONTRIBUTING.md#1-where-do-i-go-from-here) [2] [Node.js](https://github.com/nodejs/node/blob/master/CONTRIBUTING.md#code-contributions) [3] [Ember.js](https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md#pull-requests) 87 | 88 | ### If you have a different process for small or "obvious" fixes, let them know. 89 | 90 | > Small contributions such as fixing spelling errors, where the content is small enough to not be considered intellectual property, can be submitted by a contributor as a patch, without a CLA. 91 | > 92 | >As a rule of thumb, changes are obvious fixes if they do not introduce any new functionality or creative thinking. As long as the change does not affect functionality, some likely examples include the following: 93 | >* Spelling / grammar fixes 94 | >* Typo correction, white space and formatting changes 95 | >* Comment clean up 96 | >* Bug fixes that change default return values or error codes stored in constants 97 | >* Adding logging messages or debugging output 98 | >* Changes to ‘metadata’ files like Gemfile, .gitignore, build scripts, etc. 99 | >* Moving source files from one directory or package to another 100 | 101 | [source: [Chef](https://github.com/chef/chef/blob/master/CONTRIBUTING.md#chef-obvious-fix-policy)] **Need more inspiration?** [1] [Puppet](https://github.com/puppetlabs/puppet/blob/master/CONTRIBUTING.md#making-trivial-changes) 102 | 103 | # How to report a bug 104 | ### Explain security disclosures first! 105 | At bare minimum, include this sentence: 106 | > If you find a security vulnerability, do NOT open an issue. Email XXXX instead. 107 | 108 | If you don’t want to use your personal contact information, set up a “security@” email address. Larger projects might have more formal processes for disclosing security, including encrypted communication. (Disclosure: I am not a security expert.) 109 | 110 | > Any security issues should be submitted directly to security@travis-ci.org 111 | > In order to determine whether you are dealing with a security issue, ask yourself these two questions: 112 | > * Can I access something that's not mine, or something I shouldn't have access to? 113 | > * Can I disable something for other people? 114 | > 115 | > If the answer to either of those two questions are "yes", then you're probably dealing with a security issue. Note that even if you answer "no" to both questions, you may still be dealing with a security issue, so if you're unsure, just email us at security@travis-ci.org. 116 | 117 | [source: [Travis CI](https://github.com/travis-ci/travis-ci/blob/master/CONTRIBUTING.md)] **Need more inspiration?** [1] [Celery](https://github.com/celery/celery/blob/master/CONTRIBUTING.rst#security) [2] [Express.js](https://github.com/expressjs/express/blob/master/Security.md) 118 | 119 | ### Tell your contributors how to file a bug report. 120 | You can even include a template so people can just copy-paste (again, less work for you). 121 | 122 | > When filing an issue, make sure to answer these five questions: 123 | > 124 | > 1. What version of Go are you using (go version)? 125 | > 2. What operating system and processor architecture are you using? 126 | > 3. What did you do? 127 | > 4. What did you expect to see? 128 | > 5. What did you see instead? 129 | > General questions should go to the golang-nuts mailing list instead of the issue tracker. The gophers there will answer or ask you to file an issue if you've tripped over a bug. 130 | 131 | [source: [Go](https://github.com/golang/go/blob/master/CONTRIBUTING.md#filing-issues)] **Need more inspiration?** [1] [Celery](https://github.com/celery/celery/blob/master/CONTRIBUTING.rst#other-bugs ) [2] [Atom](https://github.com/atom/atom/blob/master/CONTRIBUTING.md#reporting-bugs) (includes template) 132 | 133 | # How to suggest a feature or enhancement 134 | ### If you have a particular roadmap, goals, or philosophy for development, share it here. 135 | This information will give contributors context before they make suggestions that may not align with the project’s needs. 136 | 137 | > The Express philosophy is to provide small, robust tooling for HTTP servers, making it a great solution for single page applications, web sites, hybrids, or public HTTP APIs. 138 | > 139 | > Express does not force you to use any specific ORM or template engine. With support for over 14 template engines via Consolidate.js, you can quickly craft your perfect framework. 140 | 141 | [source: [Express](https://github.com/expressjs/express#philosophy)] **Need more inspiration?** [Active Admin](https://github.com/activeadmin/activeadmin#goals) 142 | 143 | ### Explain your desired process for suggesting a feature. 144 | If there is back-and-forth or signoff required, say so. Ask them to scope the feature, thinking through why it’s needed and how it might work. 145 | 146 | > If you find yourself wishing for a feature that doesn't exist in Elasticsearch, you are probably not alone. There are bound to be others out there with similar needs. Many of the features that Elasticsearch has today have been added because our users saw the need. Open an issue on our issues list on GitHub which describes the feature you would like to see, why you need it, and how it should work. 147 | 148 | [source: [Elasticsearch](https://github.com/elastic/elasticsearch/blob/master/CONTRIBUTING.md#feature-requests)] **Need more inspiration?** [1] [Hoodie](https://github.com/hoodiehq/hoodie/blob/master/CONTRIBUTING.md#feature-requests) [2] [Ember.js](https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md#requesting-a-feature) 149 | 150 | # Code review process 151 | ### Explain how a contribution gets accepted after it’s been submitted. 152 | Who reviews it? Who needs to sign off before it’s accepted? When should a contributor expect to hear from you? How can contributors get commit access, if at all? 153 | 154 | > The core team looks at Pull Requests on a regular basis in a weekly triage meeting that we hold in a public Google Hangout. The hangout is announced in the weekly status updates that are sent to the puppet-dev list. Notes are posted to the Puppet Community community-triage repo and include a link to a YouTube recording of the hangout. 155 | > After feedback has been given we expect responses within two weeks. After two weeks we may close the pull request if it isn't showing any activity. 156 | 157 | [source: [Puppet](https://github.com/puppetlabs/puppet/blob/master/CONTRIBUTING.md#submitting-changes)] **Need more inspiration?** [1] [Meteor](https://meteor.hackpad.com/Responding-to-GitHub-Issues-SKE2u3tkSiH ) [2] [Express.js](https://github.com/expressjs/express/blob/master/Contributing.md#becoming-a-committer) 158 | 159 | # Community 160 | If there are other channels you use besides GitHub to discuss contributions, mention them here. You can also list the author, maintainers, and/or contributors here, or set expectations for response time. 161 | 162 | > You can chat with the core team on https://gitter.im/cucumber/cucumber. We try to have office hours on Fridays. 163 | 164 | [source: [cucumber-ruby](https://github.com/cucumber/cucumber-ruby/blob/master/CONTRIBUTING.md#talking-with-other-devs)] **Need more inspiration?** 165 | [1] [Chef](https://github.com/chef/chef/blob/master/CONTRIBUTING.md#-developer-office-hours) [2] [Cookiecutter](https://github.com/audreyr/cookiecutter#community) 166 | 167 | # BONUS: Code, commit message and labeling conventions 168 | These sections are not necessary, but can help streamline the contributions you receive. 169 | 170 | ### Explain your preferred style for code, if you have any. 171 | 172 | **Need inspiration?** [1] [Requirejs](http://requirejs.org/docs/contributing.html#codestyle) [2] [Elasticsearch](https://github.com/elastic/elasticsearch/blob/master/CONTRIBUTING.md#contributing-to-the-elasticsearch-codebase) 173 | 174 | ### Explain if you use any commit message conventions. 175 | 176 | **Need inspiration?** [1] [Angular](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#submit) [2] [Node.js](https://github.com/nodejs/node/blob/master/CONTRIBUTING.md#step-3-commit) 177 | 178 | ### Explain if you use any labeling conventions for issues. 179 | 180 | **Need inspiration?** [1] [StandardIssueLabels](https://github.com/wagenet/StandardIssueLabels#standardissuelabels) [2] [Atom](https://github.com/atom/atom/blob/master/CONTRIBUTING.md#issue-and-pull-request-labels) 181 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Liyas Thomas 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Giphy Search Api 2 | _A Pen created at CodePen.io. Original URL: [https://codepen.io/liyasthomas/pen/qBWJzzj](https://codepen.io/liyasthomas/pen/qBWJzzj). 3 | 4 | search your favorite gif easyly with giphy api -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ``` 2 | When I wrote this, only God and I understood what I was doing. Now, only God knows. 3 | ``` 4 |
5 | Liyas Thomas 6 |
7 |

Liyas Thomas

8 | Built with ❤︎ by 9 | liyasthomas and 10 | contributors 11 | 12 |
13 | 14 | --- 15 | 16 | [![Build Status](https://travis-ci.org/liyasthomas/colorbook.svg?branch=master)](https://travis-ci.org/liyasthomas/colorbook) [![GitHub release](https://img.shields.io/github/release/liyasthomas/colorbook/all.svg)](https://github.com/liyasthomas/colorbook/releases/latest) [![repo size](https://img.shields.io/github/repo-size/liyasthomas/colorbook.svg)](https://github.com/liyasthomas/colorbook/archive/master.zip) [![license](https://img.shields.io/github/license/liyasthomas/colorbook.svg)](https://github.com/liyasthomas/colorbook/blob/master/LICENSE) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/liyasthomas/colorbook/issues) [![Website](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=website)](https://liyas-thomas.firebaseapp.com) [![Donate](https://img.shields.io/badge/$-donate-ff69b4.svg)](https://www.paypal.me/liyascthomas) 17 | 18 | # colorbook Colorbook 19 | 20 | ### 🎨 Color scheme for UI design by [Liyas Thomas](https://github.com/liyasthomas) 21 | 22 |
23 |
24 | colorbook 25 | colorbook 26 |
27 |
28 | 29 | ### Features :sparkles: 30 | 31 | :heart: **Lightweight and minimal**: Crafted with minimalistic UI design 32 | 33 | :electric_plug: **Real-time demo**: Pick a color, view a demo 34 | 35 | :zap: **Copy color codes to the clipboard**: Click on any color code to copy to clipboard! 36 | 37 | :sparkles: **Choose custom colors**: Choose your own colors 38 | 39 | :robot: **AI**: Generate combination colors for background and foreground 40 | 41 | --- 42 | 43 | ## Demo 44 | 45 | [https://liyasthomas.github.io/colorbook](https://liyasthomas.github.io/colorbook) 46 | 47 | 1. Pick a color 48 | 2. View demo 49 | 3. Copy color codes 50 | 51 | You're done! 52 | 53 | --- 54 | 55 | ## Built with 56 | 57 | * **[Chromium](https://github.com/chromium/chromium)** - Thanks for being so fast! 58 | * HTML - For the web framework 59 | * CSS - For styling components 60 | * JavaScript - For magic! 61 | 62 | --- 63 | 64 | ## Contributing 65 | 66 | Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our [CODE OF CONDUCT](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us. 67 | 68 | --- 69 | 70 | ## Continuous Integration 71 | 72 | We use [Travis CI](https://travis-ci.com) for continuous integration. Check out our [Travis CI Status](https://travis-ci.org/liyasthomas/colorbook). 73 | 74 | --- 75 | 76 | ## Versioning 77 | 78 | This project is developed by [Liyas Thomas](https://github.com/liyasthomas) using the [Semantic Versioning specification](https://semver.org). For the versions available, see the [releases on this repository](https://github.com/liyasthomas/colorbook/releases). 79 | 80 | --- 81 | 82 | ## Change log 83 | 84 | See the [CHANGELOG](CHANGELOG.md) file for details. 85 | 86 | --- 87 | 88 | ## Authors 89 | 90 | ### Lead Developers 91 | * [**Liyas Thomas**](https://github.com/liyasthomas) - *Author* 92 | 93 | ### Testing and Debugging 94 | * [Liyas Thomas](https://github.com/liyasthomas) 95 | 96 | ### Contributors 97 | * [Liyas Thomas](https://github.com/liyasthomas) 98 | 99 | ### Thanks 100 | * [StackOverflow](https://stackoverflow.com) 101 | 102 | See the list of [contributors](https://github.com/liyasthomas/colorbook/graphs/contributors) who participated in this project. 103 | 104 | --- 105 | 106 | ## License 107 | 108 | This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details. 109 | 110 | --- 111 | 112 | ## Acknowledgments 113 | 114 | * Hat tip to anyone who's code was used 115 | * Inspirations: 116 | * [Dribbble](https://dribbble.com) 117 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/favicon.ico -------------------------------------------------------------------------------- /icons/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/.DS_Store -------------------------------------------------------------------------------- /icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/icon-144x144.png -------------------------------------------------------------------------------- /icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/icon-192x192.png -------------------------------------------------------------------------------- /icons/icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/icon-48x48.png -------------------------------------------------------------------------------- /icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/icon-512x512.png -------------------------------------------------------------------------------- /icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/icon-72x72.png -------------------------------------------------------------------------------- /icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyasthomas/helloish/95b7262de1d56ce8b5d63f6fe1deaf05fb916789/icons/icon-96x96.png -------------------------------------------------------------------------------- /icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | 22 | 24 | 25 | 29 | 30 | 33 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /icons/pwalogo.svg: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #fff; 3 | --fg-color: #121212; 4 | --fg-light-color: #b2b2b2; 5 | } 6 | 7 | [data-theme="dark"] { 8 | --bg-color: #121212; 9 | --fg-color: #fff; 10 | --fg-light-color: #b2b2b2; 11 | } 12 | 13 | ::selection { 14 | background: var(--fg-light-color); 15 | color: var(--fg-color); 16 | } 17 | 18 | ::-webkit-scrollbar { 19 | width: 0; 20 | height: 0 21 | } 22 | 23 | * { 24 | box-sizing: border-box; 25 | outline: 0; 26 | border: 0; 27 | font-family: 'Poppins', 'Roboto', 'Noto', sans-serif; 28 | } 29 | 30 | a { 31 | color: var(--fg-color); 32 | fill: var(--fg-color); 33 | text-decoration: none; 34 | } 35 | 36 | @keyframes fadein { 37 | from { 38 | opacity: 0; 39 | } 40 | 41 | to { 42 | opacity: 1; 43 | } 44 | } 45 | 46 | body { 47 | margin: 0; 48 | width: 100%; 49 | height: 100vh; 50 | background-color: var(--bg-color); 51 | color: var(--fg-color); 52 | font-weight: 500; 53 | font-size: 18px; 54 | animation: fadein .2s; 55 | -webkit-tap-highlight-color: transparent; 56 | -webkit-touch-callout: none; 57 | -webkit-user-select: none; 58 | user-select: none; 59 | } 60 | 61 | h1, 62 | h2, 63 | h3, 64 | h4, 65 | h5 { 66 | margin: 0; 67 | } 68 | 69 | .logo { 70 | margin: 0; 71 | font-size: 40px; 72 | } 73 | 74 | .description { 75 | font-size: 14px; 76 | opacity: .3; 77 | } 78 | 79 | .flex { 80 | display: flex; 81 | align-items: center; 82 | justify-content: space-between; 83 | } 84 | 85 | input, 86 | select, 87 | button { 88 | font-weight: 700; 89 | font-size: 16px; 90 | cursor: pointer; 91 | } 92 | 93 | input { 94 | padding: 8px 16px; 95 | border-radius: 32px; 96 | background: #e8f0fe; 97 | color: #121212; 98 | } 99 | 100 | select { 101 | height: 32px; 102 | background: transparent; 103 | color: var(--fg-light-color); 104 | } 105 | 106 | button { 107 | display: inline-flex; 108 | margin: 4px; 109 | padding: 8px 16px; 110 | border-radius: 32px; 111 | background: transparent; 112 | color: var(--fg-light-color); 113 | align-items: center; 114 | justify-content: center; 115 | } 116 | 117 | footer { 118 | position: absolute; 119 | right: 10%; 120 | bottom: 0px; 121 | left: 10%; 122 | padding: 16px 0; 123 | } 124 | 125 | header { 126 | display: flex; 127 | flex-direction: column; 128 | margin: 0 10%; 129 | padding: 16px 0; 130 | } 131 | 132 | /*=========== Image Grid ============*/ 133 | #imgArea { 134 | position: absolute; 135 | top: 113px; 136 | right: 10%; 137 | bottom: 89px; 138 | left: 10%; 139 | overflow-y: scroll; 140 | } 141 | 142 | #images { 143 | position: relative; 144 | column-count: 4; 145 | column-gap: 16px; 146 | } 147 | 148 | #imgArea img { 149 | display: inline-block; 150 | margin-bottom: 16px; 151 | width: 100%; 152 | border-radius: 16px; 153 | cursor: pointer; 154 | transition-duration: 0.2s; 155 | } 156 | 157 | .fade { 158 | position: fixed; 159 | right: 0; 160 | left: 0; 161 | z-index: 9; 162 | height: 64px; 163 | } 164 | 165 | .bottom { 166 | bottom: 89px; 167 | background: linear-gradient(to top, var(--bg-color), transparent); 168 | } 169 | 170 | @media screen and (max-width: 1023px) and (min-width: 768px) { 171 | #images { 172 | column-count: 3; 173 | } 174 | } 175 | 176 | @media screen and (min-width:767px) and (max-width:1080px){ 177 | #imgArea{ 178 | top:200px; 179 | } 180 | } 181 | 182 | @media screen and (max-width: 767px) { 183 | #images { 184 | column-count: 2; 185 | } 186 | 187 | .logo { 188 | font-size: 20px; 189 | } 190 | 191 | .flex { 192 | flex-direction: column; 193 | align-items: flex-start; 194 | } 195 | 196 | .hide-on-mobile { 197 | display: none; 198 | } 199 | 200 | header { 201 | margin: 0 16px; 202 | } 203 | 204 | footer, 205 | #imgArea { 206 | right: 16px; 207 | left: 16px; 208 | } 209 | 210 | input { 211 | padding: 8px 16px; 212 | font-size: 12px; 213 | width: 100%; 214 | } 215 | 216 | #imgArea { 217 | top: 190px; 218 | } 219 | } 220 | 221 | #imgArea img:hover {} 222 | 223 | #imgArea a { 224 | position: fixed; 225 | margin: 4px; 226 | margin-left: 16px; 227 | width: 30px; 228 | height: 30px; 229 | border-radius: 50%; 230 | background-position: center; 231 | background-size: cover; 232 | background-repeat: no-repeat; 233 | filter: invert(1); 234 | transition-duration: 0.2s; 235 | } 236 | 237 | #imgArea a:hover { 238 | transform: scale(1.4); 239 | } 240 | 241 | #imgArea a:active .tooltip { 242 | visibility: visible; 243 | } 244 | 245 | .tooltip { 246 | position: absolute; 247 | top: 0; 248 | left: 100%; 249 | z-index: 1; 250 | visibility: hidden; 251 | padding: 8px; 252 | border-radius: 16px; 253 | background-color: var(--fg-color); 254 | color: var(--bg-color); 255 | font-size: 12px; 256 | } 257 | 258 | #shareFb { 259 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptMyA4aC0xLjM1Yy0uNTM4IDAtLjY1LjIyMS0uNjUuNzc4djEuMjIyaDJsLS4yMDkgMmgtMS43OTF2N2gtM3YtN2gtMnYtMmgydi0yLjMwOGMwLTEuNzY5LjkzMS0yLjY5MiAzLjAyOS0yLjY5MmgxLjk3MXYzeiIvPjwvc3ZnPg==); 260 | } 261 | 262 | #shareTwitter { 263 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptNi4wNjYgOS42NDVjLjE4MyA0LjA0LTIuODMgOC41NDQtOC4xNjQgOC41NDQtMS42MjIgMC0zLjEzMS0uNDc2LTQuNDAyLTEuMjkxIDEuNTI0LjE4IDMuMDQ1LS4yNDQgNC4yNTItMS4xODktMS4yNTYtLjAyMy0yLjMxNy0uODU0LTIuNjg0LTEuOTk1LjQ1MS4wODYuODk1LjA2MSAxLjI5OC0uMDQ5LTEuMzgxLS4yNzgtMi4zMzUtMS41MjItMi4zMDQtMi44NTMuMzg4LjIxNS44My4zNDQgMS4zMDEuMzU5LTEuMjc5LS44NTUtMS42NDEtMi41NDQtLjg4OS0zLjgzNSAxLjQxNiAxLjczOCAzLjUzMyAyLjg4MSA1LjkyIDMuMDAxLS40MTktMS43OTYuOTQ0LTMuNTI3IDIuNzk5LTMuNTI3LjgyNSAwIDEuNTcyLjM0OSAyLjA5Ni45MDcuNjU0LS4xMjggMS4yNy0uMzY4IDEuODI0LS42OTctLjIxNS42NzEtLjY3IDEuMjMzLTEuMjYzIDEuNTg5LjU4MS0uMDcgMS4xMzUtLjIyNCAxLjY0OS0uNDUzLS4zODQuNTc4LS44NyAxLjA4NC0xLjQzMyAxLjQ4OXoiLz48L3N2Zz4=); 264 | } 265 | 266 | #shareLink { 267 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptMSAxNS44ODl2LTIuMjIzcy0zLjc4LS4xMTQtNyAzLjMzM2MxLjUxMy02LjU4NyA3LTcuNzc4IDctNy43Nzh2LTIuMjIxbDUgNC40MjUtNSA0LjQ2NHoiLz48L3N2Zz4=); 268 | } 269 | 270 | #shareAll { 271 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptNyAxNGgtNXY1aC00di01aC01di00aDV2LTVoNHY1aDV2NHoiLz48L3N2Zz4=); 272 | } 273 | 274 | .theme-switch { 275 | position: relative; 276 | display: inline-block; 277 | width: 32px; 278 | height: 16px; 279 | } 280 | 281 | .theme-switch input { 282 | display: none; 283 | } 284 | 285 | .slider { 286 | position: absolute; 287 | top: 0; 288 | right: 0; 289 | bottom: 0; 290 | left: 0; 291 | border-radius: 8px; 292 | background-color: var(--fg-light-color); 293 | cursor: pointer; 294 | transition: .2s; 295 | opacity: .5; 296 | } 297 | 298 | .slider:before { 299 | position: absolute; 300 | bottom: 0; 301 | left: 0; 302 | width: 16px; 303 | height: 16px; 304 | border-radius: 8px; 305 | background-color: var(--fg-color); 306 | content: ""; 307 | transition: .2s; 308 | } 309 | 310 | input:checked+.slider { 311 | background-color: var(--fg-light-color); 312 | } 313 | 314 | input:checked+.slider:before { 315 | transform: translateX(16px); 316 | } 317 | 318 | .trigger { 319 | cursor: pointer; 320 | } 321 | 322 | .modal { 323 | position: fixed; 324 | top: 0; 325 | left: 0; 326 | z-index: 99; 327 | visibility: hidden; 328 | width: 100%; 329 | height: 100%; 330 | background-color: rgba(0, 0, 0, .6); 331 | opacity: 0; 332 | transition: all .2s; 333 | transform: scale(1.05); 334 | } 335 | 336 | .show-modal { 337 | visibility: visible; 338 | opacity: 1; 339 | transition: all .2s; 340 | transform: scale(1); 341 | } 342 | 343 | .modal-content { 344 | position: absolute; 345 | top: 50%; 346 | left: 50%; 347 | overflow: auto; 348 | padding: 16px 32px; 349 | max-width: 80%; 350 | max-height: 80%; 351 | border-radius: 8px; 352 | background-color: var(--bg-color); 353 | filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)); 354 | transform: translate(-50%, -50%); 355 | } 356 | 357 | .close-button { 358 | position: fixed; 359 | top: 16px; 360 | right: 16px; 361 | display: inline-flex; 362 | width: 32px; 363 | height: 32px; 364 | border-radius: 50%; 365 | color: var(--fg-color); 366 | cursor: pointer; 367 | transition: all .2s; 368 | align-items: center; 369 | justify-content: center; 370 | } 371 | 372 | .img { 373 | position: relative; 374 | } 375 | 376 | .sharer { 377 | position: absolute; 378 | transition: all .2s ease; 379 | } 380 | 381 | .sharer a { 382 | cursor: pointer; 383 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Helloish 👻👋 - AWKWARD GIFS OF PEOPLE SAYING HELLO 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 64 | 65 | 66 | 76 | 77 | 78 | 79 |
80 |
81 |
82 | 83 |

Helloish 👻👋

84 | 85 |

AWKWARD GIFS OF PEOPLE SAYING HELLO

86 |
87 |
🌗 88 | 92 | 93 | 99 | 100 |
101 |
102 |
103 |
104 |
scroll for 106 | more
107 |
108 |
109 | 110 | 111 | Copied 112 | 113 |
114 |
115 | 155 |
156 | ✖ 157 |
158 |

License

159 |

Made with GIPHY API

160 |

• FAQ

161 |

• Docs

162 |

• API Terms of 163 | Service

164 |

• User Terms of 165 | Service

166 |
167 |
168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* 2 | http://api.giphy.com/v1/gifs/search?q=coding%20train&api_key=dc6zaTOxFJmzC&limit=5 3 | */ 4 | const api = 'https://api.giphy.com/v1/'; 5 | const apiKey = '&api_key=59tpzgCcHAbMjPRqDAUklk79IyBTdF75'; 6 | let playOrPause = 'Auto play: ON'; 7 | let links = []; 8 | 9 | function loadJSON (url, callback) { 10 | const xhr = new XMLHttpRequest(); 11 | xhr.open('GET', url, true) 12 | xhr.responseType = 'json' 13 | xhr.onload = () => { 14 | const status = xhr.status; 15 | if (status === 200) { 16 | callback(xhr.response, null) 17 | } else { 18 | callback(xhr.response, status) 19 | } 20 | } 21 | xhr.send() 22 | } 23 | 24 | function getRandomColor () { 25 | const letters = '0123456789ABCDEF'; 26 | let color = '#'; 27 | for (let i = 0; i < 6; i++) { 28 | color += letters[Math.floor(Math.random() * 16)] 29 | } 30 | return color 31 | } 32 | 33 | function addImage (title, gifImage, gifSmall, gifFull, ratio_WidthHeight) { 34 | const newImage = document.createElement('IMG'); 35 | newImage.src = playOrPause == 'Auto play: ON' ? gifSmall : gifImage 36 | newImage.title = title 37 | newImage.textContent = links.length 38 | newImage.classList.add('img') 39 | if (searchType() == 'gifs/search?' || searchType() == 'gifs/trending?') { newImage.style.backgroundColor = getRandomColor() } else newImage.style.backgroundColor = 'transparent' 40 | 41 | const addTo = getMinHeightElement(['images']); 42 | document.getElementById(addTo.id).appendChild(newImage) 43 | 44 | links.push({ image: gifImage, small: gifSmall, full: gifFull }) 45 | console.log(links.length) 46 | } 47 | 48 | function getMinHeightElement (arr) { 49 | let min = document.getElementById(arr[0]).offsetHeight; 50 | let result = arr[0]; 51 | for (let i = 1; i < arr.length; i++) { 52 | const h = document.getElementById(arr[i]).offsetHeight; 53 | if (h < min) { 54 | min = h 55 | result = arr[i] 56 | } 57 | } 58 | return { id: result, value: min } 59 | } 60 | 61 | function searchType () { 62 | return document.getElementById('sType').selectedOptions[0].value 63 | } 64 | 65 | function searchGiphy (giphyName) { 66 | const query = `&q=${giphyName}`; 67 | const limit = `&limit=${25}`; 68 | const url = api + searchType() + apiKey + limit + query; 69 | loadJSON(url, ({data}, status) => { 70 | if (status === null) { 71 | if (data.length < 1) { 72 | window.alert('Dont have data for this giphy name') 73 | } else { 74 | deleteImages() 75 | for (let i = 0; i < data.length; i++) { 76 | addImage( 77 | data[i].title, 78 | data[i].images.fixed_height_still.url, 79 | data[i].images.fixed_height_small.url, 80 | data[i].images.original.url, 81 | data[i].images.fixed_height_small.height / 82 | data[i].images.fixed_height_small.width 83 | ) 84 | } 85 | } 86 | } 87 | }) 88 | 89 | if (searchType() == 'gifs/search?') { 90 | for (let i = 25; i < window_WidthHeight().height / 20; i++) { 91 | addRandom(giphyName, 'gifs') 92 | } 93 | } 94 | } 95 | 96 | function addRandom (giphyName, type) { 97 | const tag = `&tag=${giphyName}`; 98 | const url = `${api + type}/random?${apiKey}${tag}`; 99 | loadJSON(url, ({data}, status) => { 100 | if (status === null) { 101 | addImage( 102 | data.title, 103 | data.images.fixed_height_still.url, 104 | data.images.fixed_height_small.url, 105 | data.images.original.url, 106 | data.images.fixed_height_small.height / 107 | data.images.fixed_height_small.width 108 | ) 109 | } 110 | }) 111 | } 112 | 113 | function changeImage () { 114 | const x = document.getElementById('inputS').value; 115 | if ( 116 | (x != '' && 117 | searchType() != 'gifs/trending?' && 118 | searchType() != 'stickers/trending?') || 119 | searchType() == 'gifs/trending?' || 120 | searchType() == 'stickers/trending?' 121 | ) { searchGiphy(x) } 122 | } 123 | 124 | function deleteImages () { 125 | console.clear() 126 | links = [] 127 | const imas = document.getElementsByClassName('img'); 128 | for (let i = imas.length - 1; i >= 0; i--) { 129 | imas[i].parentNode.removeChild(imas[i]) 130 | } 131 | } 132 | 133 | function playPauseImage () { 134 | playOrPause = playOrPause == 'Auto play: OFF' ? 'Auto play: ON' : 'Auto play: OFF' 135 | const imgs = document.getElementsByClassName('img'); 136 | for (let i = imgs.length - 1; i >= 0; i--) { 137 | const linksI = links[imgs[i].textContent]; 138 | imgs[i].src = playOrPause == 'Auto play: ON' ? linksI.small : linksI.image 139 | } 140 | const but = document.getElementById('playPauseBut'); 141 | but.textContent = playOrPause 142 | } 143 | 144 | function window_WidthHeight () { 145 | const w = 146 | window.innerWidth || 147 | document.documentElement.clientWidth || 148 | document.body.clientWidth; 149 | const h = 150 | window.innerHeight || 151 | document.documentElement.clientHeight || 152 | document.body.clientHeight; 153 | return { width: w, height: h } 154 | } 155 | 156 | function copyToClipboard (str) { 157 | // https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f 158 | const el = document.createElement('textarea'); 159 | el.value = str 160 | el.setAttribute('readonly', '') 161 | el.style.position = 'absolute' 162 | el.style.left = '-9999px' 163 | document.body.appendChild(el) 164 | const selected = 165 | document.getSelection().rangeCount > 0 166 | ? document.getSelection().getRangeAt(0) 167 | : false; 168 | el.select() 169 | document.execCommand('copy') 170 | document.body.removeChild(el) 171 | if (selected) { 172 | document.getSelection().removeAllRanges() 173 | document.getSelection().addRange(selected) 174 | } 175 | } 176 | 177 | window.onload = () => { 178 | const w = window_WidthHeight().width; 179 | const h = window_WidthHeight().height; 180 | 181 | // scroll page with up/down arrows of keyboard 182 | document.body.onkeydown = function(e) { 183 | let code = e.keyCode; 184 | let imgArea = document.getElementById('imgArea'); 185 | 186 | if (code === 40) { 187 | imgArea.scrollTo(0, imgArea.scrollTop + 35); 188 | } 189 | else if (code === 38) { 190 | imgArea.scrollTo(0, imgArea.scrollTop - 35); 191 | } 192 | } 193 | 194 | // add more gifs when scroll 195 | document.getElementById('imgArea').addEventListener('scroll', ({target}) => { 196 | const ele = target; 197 | if (ele.scrollHeight - ele.scrollTop <= ele.clientHeight + h / 4) { 198 | const x = document.getElementById('inputS').value; 199 | if (searchType() == 'gifs/search?') addRandom(x, 'gifs') 200 | } 201 | }) 202 | 203 | // event 204 | document 205 | .getElementById('inputS') 206 | .addEventListener('change', e => changeImage()) 207 | document 208 | .getElementById('sType') 209 | .addEventListener('change', e => changeImage()) 210 | document 211 | .getElementById('playPauseBut') 212 | .addEventListener('click', e => playPauseImage()) 213 | 214 | document.getElementById('shareFb').addEventListener('click', ({target}) => { 215 | window.open(`https://facebook.com/sharer/sharer.php?t=Helloish 👻👋 • AWKWARD GIFS OF PEOPLE SAYING HELLO&u=${target.getAttribute('data')}`) 216 | }) 217 | document.getElementById('shareTwitter').addEventListener('click', ({target}) => { 218 | window.open(`https://twitter.com/intent/tweet?text=Helloish 👻👋 • AWKWARD GIFS OF PEOPLE SAYING HELLO&url=${target.getAttribute('data')}`) 219 | }) 220 | if (navigator.share) { 221 | document.getElementById('shareAll').style.display = "block"; 222 | } else { 223 | document.getElementById('shareAll').style.display = "none"; 224 | } 225 | document.getElementById('shareAll').addEventListener('click', ({target}) => { 226 | if (navigator.share) { 227 | navigator.share({ 228 | title: `Helloish 👻👋`, 229 | text: `Helloish 👻👋`, 230 | url: target.getAttribute('data') 231 | }).then(() => {}) 232 | .catch(console.error); 233 | } else { 234 | console.log("No native share support!") 235 | } 236 | }) 237 | document.getElementById('shareLink').addEventListener('click', ({target}) => { 238 | copyToClipboard(target.getAttribute('data')) 239 | }) 240 | 241 | // event 242 | imgArea.addEventListener('mouseover', ({target}) => { 243 | if (target.matches('img')) { 244 | const eles = document.getElementsByClassName('a'); 245 | let realImagePosition = target.getBoundingClientRect(); 246 | for (let i = 0; i < eles.length; i++) { 247 | eles[i].style.top = `${realImagePosition.y + 16}px` 248 | eles[i].style.left = `${realImagePosition.x + 32 * i}px` 249 | eles[i].setAttribute('data', target.src) 250 | } 251 | 252 | if (playOrPause == 'Auto play: OFF') { target.src = links[target.textContent].small } 253 | } 254 | }) 255 | imgArea.addEventListener('mouseout', ({target}) => { 256 | if (target.matches('img') && playOrPause == 'Auto play: OFF') { 257 | target.src = links[target.textContent].image 258 | } 259 | }) 260 | 261 | imgArea.addEventListener('click', ({target}) => { 262 | if (target.matches('img')) { 263 | window.open(links[target.textContent].full) 264 | } 265 | }) 266 | 267 | // add firt random gif 268 | for (let i = 0; i < h / 20; i++) { 269 | addRandom('hello', 'gifs') 270 | } 271 | } 272 | 273 | const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]') 274 | if (localStorage.getItem('marcdownTheme') == 'dark') { 275 | document.documentElement.setAttribute('data-theme', 'dark') 276 | document.querySelector('meta[name=theme-color]').setAttribute('content', '#282a36') 277 | toggleSwitch.checked = true 278 | localStorage.setItem('marcdownTheme', 'dark') 279 | } else { 280 | document.documentElement.setAttribute('data-theme', 'light') 281 | document.querySelector('meta[name=theme-color]').setAttribute('content', '#DAE5ED') 282 | toggleSwitch.checked = false 283 | localStorage.setItem('marcdownTheme', 'light') 284 | } 285 | const switchTheme = ({ 286 | target 287 | }) => { 288 | if (target.checked) { 289 | document.documentElement.setAttribute('data-theme', 'dark') 290 | document.querySelector('meta[name=theme-color]').setAttribute('content', '#282a36') 291 | localStorage.setItem('marcdownTheme', 'dark') 292 | } else { 293 | document.documentElement.setAttribute('data-theme', 'light') 294 | document.querySelector('meta[name=theme-color]').setAttribute('content', '#DAE5ED') 295 | localStorage.setItem('marcdownTheme', 'light') 296 | } 297 | } 298 | toggleSwitch.addEventListener('change', switchTheme, false) 299 | 300 | const modal = document.querySelector('.modal') 301 | const trigger = document.querySelector('.trigger') 302 | const closeButton = document.querySelector('.close-button') 303 | const toggleModal = () => modal.classList.toggle('show-modal') 304 | const windowOnClick = ({ 305 | target 306 | }) => { 307 | if (target === modal) { 308 | toggleModal() 309 | } 310 | } 311 | trigger.addEventListener('click', toggleModal) 312 | closeButton.addEventListener('click', toggleModal) 313 | window.addEventListener('click', windowOnClick) 314 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Helloish", 3 | "short_name": "Helloish", 4 | "description": "AWKWARD GIFS OF PEOPLE SAYING HELLO", 5 | "icons": [ 6 | { 7 | "src": "icons/icon-48x48.png", 8 | "sizes": "48x48", 9 | "type": "image/png" 10 | }, 11 | { 12 | "src": "icons/icon-72x72.png", 13 | "sizes": "72x72", 14 | "type": "image/png" 15 | }, 16 | { 17 | "src": "icons/icon-96x96.png", 18 | "sizes": "96x96", 19 | "type": "image/png" 20 | }, 21 | { 22 | "src": "icons/icon-144x144.png", 23 | "sizes": "144x144", 24 | "type": "image/png" 25 | }, 26 | { 27 | "src": "icons/icon-192x192.png", 28 | "sizes": "192x192", 29 | "type": "image/png" 30 | }, 31 | { 32 | "src": "icons/icon-512x512.png", 33 | "sizes": "512x512", 34 | "type": "image/png" 35 | } 36 | ], 37 | "start_url": "index.html", 38 | "display": "standalone", 39 | "theme_color": "#ffffff", 40 | "background_color": "#ffffff" 41 | } 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Colorbook", 3 | "repository": { 4 | "type": "git", 5 | "url": "https://github.com/liyasthomas/colorbook.git" 6 | }, 7 | "description": "Color schemes for UI design", 8 | "author": "liyasthomas", 9 | "version": "0.0.1", 10 | "devDependencies": { 11 | "jshint": "^2.10.2" 12 | }, 13 | "scripts": { 14 | "test": "jshint travis.js" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'); 2 | if (workbox) { 3 | console.log(`Yay! Workbox is loaded 🎉`); 4 | } else { 5 | console.log(`Boo! Workbox didn't load 😬`); 6 | } 7 | workbox.routing.registerRoute( 8 | new RegExp('.*\.js'), 9 | new workbox.strategies.NetworkFirst() 10 | ); 11 | workbox.routing.registerRoute( 12 | // Cache CSS files. 13 | /\.css$/, 14 | // Use cache but update in the background. 15 | new workbox.strategies.StaleWhileRevalidate({ 16 | // Use a custom cache name. 17 | cacheName: 'css-cache', 18 | }) 19 | ); 20 | workbox.routing.registerRoute( 21 | // Cache image files. 22 | /\.(?:png|jpg|jpeg|svg|gif)$/, 23 | // Use the cache if it's available. 24 | new workbox.strategies.CacheFirst({ 25 | // Use a custom cache name. 26 | cacheName: 'image-cache', 27 | plugins: [ 28 | new workbox.expiration.Plugin({ 29 | // Cache only 20 images. 30 | maxEntries: 20, 31 | // Cache for a maximum of a week. 32 | maxAgeSeconds: 7 * 24 * 60 * 60, 33 | }) 34 | ], 35 | }) 36 | ); 37 | workbox.precaching.precacheAndRoute([ 38 | '/colorbook/index.css', 39 | '/colorbook/index.js', 40 | { 41 | url: '/colorbook/index.html', 42 | revision: '383676' 43 | }, 44 | ]); 45 | var CACHE_VERSION = 1; 46 | var CURRENT_CACHES = { 47 | prefetch: 'prefetch-cache-v' + CACHE_VERSION 48 | }; 49 | self.addEventListener('install', function (event) { 50 | var now = Date.now(); 51 | var urlsToPrefetch = [ 52 | '/colorbook/index.html' 53 | ]; 54 | // All of these logging statements should be visible via the "Inspect" interface 55 | // for the relevant SW accessed via chrome://serviceworker-internals 56 | console.log('Handling install event. Resources to prefetch:', urlsToPrefetch); 57 | event.waitUntil( 58 | caches.open(CURRENT_CACHES.prefetch).then(function (cache) { 59 | var cachePromises = urlsToPrefetch.map(function (urlToPrefetch) { 60 | // This constructs a new URL object using the service worker's script location as the base 61 | // for relative URLs. 62 | var url = new URL(urlToPrefetch, location.href); 63 | // Append a cache-bust=TIMESTAMP URL parameter to each URL's query string. 64 | // This is particularly important when precaching resources that are later used in the 65 | // fetch handler as responses directly, without consulting the network (i.e. cache-first). 66 | // If we were to get back a response from the HTTP browser cache for this precaching request 67 | // then that stale response would be used indefinitely, or at least until the next time 68 | // the service worker script changes triggering the install flow. 69 | url.search += (url.search ? '&' : '?') + 'cache-bust=' + now; 70 | // It's very important to use {mode: 'no-cors'} if there is any chance that 71 | // the resources being fetched are served off of a server that doesn't support 72 | // CORS (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). 73 | // In this example, www.chromium.org doesn't support CORS, and the fetch() 74 | // would fail if the default mode of 'cors' was used for the fetch() request. 75 | // The drawback of hardcoding {mode: 'no-cors'} is that the response from all 76 | // cross-origin hosts will always be opaque 77 | // (https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#cross-origin-resources) 78 | // and it is not possible to determine whether an opaque response represents a success or failure 79 | // (https://github.com/whatwg/fetch/issues/14). 80 | var request = new Request(url, { 81 | mode: 'no-cors' 82 | }); 83 | return fetch(request).then(function (response) { 84 | if (response.status >= 400) { 85 | throw new Error('request for ' + urlToPrefetch + 86 | ' failed with status ' + response.statusText); 87 | } 88 | // Use the original URL without the cache-busting parameter as the key for cache.put(). 89 | return cache.put(urlToPrefetch, response); 90 | }).catch(function (error) { 91 | console.error('Not caching ' + urlToPrefetch + ' due to ' + error); 92 | }); 93 | }); 94 | return Promise.all(cachePromises).then(function () { 95 | console.log('Pre-fetching complete.'); 96 | }); 97 | }).catch(function (error) { 98 | console.error('Pre-fetching failed:', error); 99 | }) 100 | ); 101 | }); 102 | self.addEventListener('activate', function (event) { 103 | // Delete all caches that aren't named in CURRENT_CACHES. 104 | // While there is only one cache in this example, the same logic will handle the case where 105 | // there are multiple versioned caches. 106 | var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) { 107 | return CURRENT_CACHES[key]; 108 | }); 109 | event.waitUntil( 110 | caches.keys().then(function (cacheNames) { 111 | return Promise.all( 112 | cacheNames.map(function (cacheName) { 113 | if (expectedCacheNames.indexOf(cacheName) === -1) { 114 | // If this cache name isn't present in the array of "expected" cache names, then delete it. 115 | console.log('Deleting out of date cache:', cacheName); 116 | return caches.delete(cacheName); 117 | } 118 | }) 119 | ); 120 | }) 121 | ); 122 | }); 123 | self.addEventListener('fetch', function (event) { 124 | console.log('Handling fetch event for', event.request.url); 125 | event.respondWith( 126 | // caches.match() will look for a cache entry in all of the caches available to the service worker. 127 | // It's an alternative to first opening a specific named cache and then matching on that. 128 | caches.match(event.request).then(function (response) { 129 | if (response) { 130 | console.log('Found response in cache:', response); 131 | return response; 132 | } 133 | console.log('No response found in cache. About to fetch from network...'); 134 | // event.request will always have the proper mode set ('cors, 'no-cors', etc.) so we don't 135 | // have to hardcode 'no-cors' like we do when fetch()ing in the install handler. 136 | return fetch(event.request).then(function (response) { 137 | console.log('Response from network is:', response); 138 | return response; 139 | }).catch(function (error) { 140 | // This catch() will handle exceptions thrown from the fetch() operation. 141 | // Note that a HTTP error response (e.g. 404) will NOT trigger an exception. 142 | // It will return a normal response object that has the appropriate error code set. 143 | console.error('Fetching failed:', error); 144 | throw error; 145 | }); 146 | }) 147 | ); 148 | }); 149 | -------------------------------------------------------------------------------- /travis.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | http.createServer(function (req, res) { 3 | res.writeHead(200, { 4 | 'Content-Type': 'text/plain' 5 | }); 6 | res.end('Travis!\n'); // build should pass now! 7 | }).listen(1337, '127.0.0.1'); 8 | console.log('Server running at http://127.0.0.1:1337/'); 9 | --------------------------------------------------------------------------------