├── .github
    ├── FUNDING.yml
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── custom.md
    │   └── feature_request.md
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── favicon.ico
├── icons
    ├── github.svg
    ├── icon-144x144.png
    ├── icon-192x192.png
    ├── icon-48x48.png
    ├── icon-512x512.png
    ├── icon-72x72.png
    ├── icon-96x96.png
    ├── pwalogo.svg
    ├── screely.png
    └── screely2.png
├── index.css
├── index.html
├── index.js
├── manifest.json
├── package.json
├── sw.js
└── travis.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | open_collective: liyasthomas
2 | patreon: liyasthomas
3 | custom: https://www.paypal.me/liyascthomas
4 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/custom.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Custom issue template
 3 | about: Describe this issue template's purpose here.
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |  - "node"
4 | notifications:
5 |   webhooks: https://www.travisbuddy.com
6 | env:
7 | - MY_VAR=EverythignIsAwesome
8 | - NODE_ENV=TEST


--------------------------------------------------------------------------------
/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.md:
--------------------------------------------------------------------------------
 1 | [![Build Status](https://travis-ci.com/liyasthomas/banner.svg?branch=master)](https://travis-ci.com/liyasthomas/banner) [![GitHub release](https://img.shields.io/github/release/liyasthomas/banner/all.svg)](https://github.com/liyasthomas/banner/releases/latest) [![repo size](https://img.shields.io/github/repo-size/liyasthomas/banner.svg)](https://github.com/liyasthomas/banner/archive/master.zip) [![license](https://img.shields.io/github/license/liyasthomas/banner.svg)](https://github.com/liyasthomas/banner/blob/master/LICENSE) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/liyasthomas/banner/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)
 2 | 
 3 | # <img src="icons/icon-48x48.png" alt="banner" width="32"> Banner
 4 | 
 5 | ### 🚩 A simple and clean banner generator by [Liyas Thomas](https://github.com/liyasthomas)
 6 | 
 7 | <div align="center">
 8 |   <br>
 9 |   <img src="icons/screely.png" alt="banner" width="100%">
10 |   <img src="icons/screely2.png" alt="banner" width="100%">
11 |   <br>
12 | </div>
13 | 
14 | ### Features :sparkles:
15 | 
16 | :heart: **Lightweight and minimal**: Crafted with minimalistic UI design
17 | 
18 | :electric_plug: **Real-time demo**: WYSIWYG (what you see is what you get) banner editor 
19 | 
20 | :zap: **Make it your own**: Customize everything!
21 | 
22 | :robot: **AI**: Generate combination colors for background and foreground
23 | 
24 | :sparkles: **Choose custom colors**: Randomize or choose your own colors
25 | 
26 | :rocket: **Save**: Download generated banner to disk
27 | 
28 | ---
29 | 
30 | ## Demo
31 | 
32 | [https://liyasthomas.github.io/banner](https://liyasthomas.github.io/banner)
33 | 
34 | 1. Give a heading
35 | 2. Customize everything!
36 | 3. Download banner
37 | 
38 | You're done!
39 | 
40 | ---
41 | 
42 | ## Built with
43 | 
44 | * **[Chromium](https://github.com/chromium/chromium)** - Thanks for being so fast!
45 | * HTML - For the web framework
46 | * CSS - For styling components
47 | * JavaScript - For magic!
48 | 
49 | ---
50 | 
51 | ## Contributing
52 | 
53 | 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.
54 | 
55 | ---
56 | 
57 | ## Continuous Integration
58 | 
59 | We use [Travis CI](https://travis-ci.com) for continuous integration. Check out our [Travis CI Status](https://travis-ci.com/liyasthomas/banner).
60 | 
61 | ---
62 | 
63 | ## Versioning
64 | 
65 | 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/banner/releases).
66 | 
67 | ---
68 | 
69 | ## Change log
70 | 
71 | See the [CHANGELOG](CHANGELOG.md) file for details.
72 | 
73 | ---
74 | 
75 | ## Authors
76 | 
77 | ### Lead Developers
78 | * [**Liyas Thomas**](https://github.com/liyasthomas) - *Author*
79 | 
80 | ### Thanks
81 | * [Dribbble](https://dribbble.com)
82 | 
83 | See the list of [contributors](https://github.com/liyasthomas/banner/graphs/contributors) who participated in this project.
84 | 
85 | ---
86 | 
87 | ## License
88 | 
89 | This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
90 | 
91 | ---
92 | 
93 | ## Acknowledgments
94 | 
95 | * Hat tip to anyone who's code was used
96 | * Inspirations:
97 | 	* [Dribbble](https://dribbble.com)
98 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/favicon.ico


--------------------------------------------------------------------------------
/icons/github.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" width="24px" height="24px">
 4 | <style type="text/css">
 5 | 	.st0{opacity:0.3;enable-background:new    ;}
 6 | </style>
 7 | <circle class="st0" cx="12" cy="12" r="10"/>
 8 | <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1  c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1  c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6  c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4  c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3  C22,6.1,16.9,1.4,10.9,2.1z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/icons/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/icon-144x144.png


--------------------------------------------------------------------------------
/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/icon-192x192.png


--------------------------------------------------------------------------------
/icons/icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/icon-48x48.png


--------------------------------------------------------------------------------
/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/icon-512x512.png


--------------------------------------------------------------------------------
/icons/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/icon-72x72.png


--------------------------------------------------------------------------------
/icons/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/icon-96x96.png


--------------------------------------------------------------------------------
/icons/pwalogo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="1952" height="734.935" viewBox="0 0 1952.00 734.93" enable-background="new 0 0 1952.00 734.93" xml:space="preserve">
 4 | 	<g>
 5 | 		<path fill="#FFFFFF" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 1436.62,603.304L 1493.01,460.705L 1655.83,460.705L 1578.56,244.39L 1675.2,0.000528336L 1952,734.933L 1747.87,734.933L 1700.57,603.304L 1436.62,603.304 Z "/>
 6 | 		<path fill="#5A0FC8" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 1262.47,734.935L 1558.79,0.00156593L 1362.34,0.0025425L 1159.64,474.933L 1015.5,0.00351906L 864.499,0.00351906L 709.731,474.933L 600.585,258.517L 501.812,562.819L 602.096,734.935L 795.427,734.935L 935.284,309.025L 1068.63,734.935L 1262.47,734.935 Z "/>
 7 | 		<path fill="#FFFFFF" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 186.476,482.643L 307.479,482.643C 344.133,482.643 376.772,478.552 405.396,470.37L 436.689,373.962L 524.148,104.516C 517.484,93.9535 509.876,83.9667 501.324,74.5569C 456.419,24.852 390.719,0.000406265 304.222,0.000406265L -3.8147e-006,0.000406265L -3.8147e-006,734.933L 186.476,734.933L 186.476,482.643 Z M 346.642,169.079C 364.182,186.732 372.951,210.355 372.951,239.95C 372.951,269.772 365.238,293.424 349.813,310.906C 332.903,330.331 301.766,340.043 256.404,340.043L 186.476,340.043L 186.476,142.598L 256.918,142.598C 299.195,142.598 329.103,151.425 346.642,169.079 Z "/>
 8 | 	</g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/icons/screely.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/screely.png


--------------------------------------------------------------------------------
/icons/screely2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liyasthomas/banner/61aa9eb4cb5ec66eaac5d64b37e260970a35a2b1/icons/screely2.png


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --bg-color: #000;
  3 |   --fg-color: #fff;
  4 |   --bbg-color: #f00;
  5 |   --bw-size: 0;
  6 |   --tsx-size: 0;
  7 |   --tsy-size: 0;
  8 |   --tsb-size: 0;
  9 |   --ts-color: rgba(0, 0, 0, 0.25);
 10 | }
 11 | 
 12 | * {
 13 |   box-sizing: border-box;
 14 |   outline: 0;
 15 |   border: 0;
 16 |   font-weight: 700;
 17 |   font-family: "Poppins", "Roboto", "Noto", sans-serif;
 18 | }
 19 | 
 20 | ::selection {
 21 |   background-color: var(--fg-color);
 22 |   color: var(--bg-color);
 23 | }
 24 | 
 25 | @keyframes fadein {
 26 |   from {
 27 |     opacity: 0;
 28 |   }
 29 | 
 30 |   to {
 31 |     opacity: 1;
 32 |   }
 33 | }
 34 | 
 35 | a {
 36 |   display: inline-flex;
 37 |   color: inherit;
 38 |   text-decoration: none;
 39 | }
 40 | 
 41 | body {
 42 |   margin: 0;
 43 |   width: 100%;
 44 |   height: 100vh;
 45 |   color: #000;
 46 |   font-size: 18px;
 47 |   line-height: 1.5;
 48 |   animation: fadein 0.2s;
 49 |   -webkit-tap-highlight-color: transparent;
 50 |   -webkit-touch-callout: none;
 51 |   -webkit-user-select: none;
 52 |   user-select: none;
 53 | }
 54 | 
 55 | h1,
 56 | h2,
 57 | h3 {
 58 |   margin: 0;
 59 |   font-weight: 700;
 60 | }
 61 | 
 62 | header,
 63 | footer {
 64 |   display: flex;
 65 |   padding: 16px;
 66 |   width: 100%;
 67 |   align-items: center;
 68 |   justify-content: space-between;
 69 | }
 70 | 
 71 | .content {
 72 |   display: flex;
 73 |   display: flex;
 74 |   width: 100%;
 75 |   height: 100%;
 76 |   justify-content: center;
 77 | }
 78 | 
 79 | .wrapper {
 80 |   position: sticky;
 81 |   top: 0;
 82 |   z-index: 99;
 83 |   display: inline-flex;
 84 |   background-color: #fff;
 85 |   flex-grow: 1;
 86 | }
 87 | 
 88 | .capture {
 89 |   position: sticky;
 90 |   top: 16px;
 91 |   display: flex;
 92 |   flex-direction: column;
 93 |   margin: 16px;
 94 |   padding: 32px;
 95 |   height: 30vw;
 96 |   border: var(--bw-size) solid var(--bbg-color);
 97 |   background-color: var(--bg-color);
 98 |   background-position: center center;
 99 |   background-size: cover;
100 |   background-repeat: no-repeat;
101 |   color: var(--fg-color);
102 |   text-align: center;
103 |   justify-content: center;
104 |   flex-grow: 1;
105 |   flex-shrink: 0;
106 | }
107 | 
108 | [contenteditable="true"]:empty:before {
109 |   display: block;
110 |   content: attr(placeholder);
111 |   opacity: 0.5;
112 | }
113 | 
114 | input[type="number"] {
115 |   padding: 2px 2px 2px 8px;
116 |   width: 56px;
117 | }
118 | 
119 | input[type="file"] {
120 |   display: inline-flex;
121 |   width: 96px;
122 |   height: 40px;
123 |   cursor: pointer;
124 | }
125 | 
126 | input[type="file"]:before {
127 |   padding: 2px 16px;
128 |   content: "Upload";
129 | }
130 | 
131 | input[type="file"]::-webkit-file-upload-button {
132 |   visibility: hidden;
133 | }
134 | 
135 | input {
136 |   border-radius: 4px;
137 |   background: #000;
138 |   color: #fff;
139 |   font-size: 18px;
140 |   line-height: 2;
141 | }
142 | 
143 | .heading {
144 |   text-shadow: var(--tsx-size) var(--tsy-size) var(--tsb-size) var(--ts-color);
145 |   font-weight: 700;
146 |   font-size: 60px;
147 |   line-height: 1;
148 | }
149 | 
150 | .controls {
151 |   margin: 16px;
152 | }
153 | 
154 | .color {
155 |   padding: 16px;
156 |   width: 32px;
157 |   height: 32px;
158 |   border: 3px solid rgba(0, 0, 0, 0.3);
159 |   border-radius: 50%;
160 |   cursor: pointer;
161 | }
162 | 
163 | #bg {
164 |   background-color: var(--bg-color);
165 | }
166 | 
167 | #fg {
168 |   background-color: var(--fg-color);
169 | }
170 | 
171 | #bbg {
172 |   background-color: var(--bbg-color);
173 | }
174 | 
175 | #tsc {
176 |   background-color: var(--ts-color);
177 | }
178 | 
179 | button {
180 |   display: inline-flex;
181 |   margin: 4px 0;
182 |   padding: 8px 16px;
183 |   border-radius: 4px;
184 |   background-color: #000;
185 |   color: #fff;
186 |   font-size: 18px;
187 |   cursor: pointer;
188 |   align-items: center;
189 |   justify-content: center;
190 |   flex-grow: 1;
191 | }
192 | 
193 | .flex {
194 |   display: flex;
195 |   padding: 16px 0;
196 |   align-items: center;
197 |   justify-content: space-between;
198 |   flex-grow: 1;
199 | }
200 | 
201 | .tabs {
202 |   display: flex;
203 |   flex-direction: column;
204 |   border-radius: 4px;
205 |   background-color: #eee;
206 |   flex-grow: 1;
207 | }
208 | 
209 | .rows {
210 |   display: flex;
211 | }
212 | 
213 | .tab {
214 |   display: inline-flex;
215 |   padding: 8px 16px;
216 |   border-radius: 4px;
217 |   cursor: pointer;
218 |   align-items: center;
219 |   justify-content: center;
220 |   flex-grow: 1;
221 | }
222 | 
223 | .current {
224 |   background-color: #000;
225 |   color: #fff;
226 | }
227 | 
228 | @media (max-width: 880px) {
229 |   .content {
230 |     flex-direction: column;
231 |   }
232 | }
233 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta
  7 |       name="viewport"
  8 |       content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no"
  9 |     />
 10 |     <title>Banner - A simple and clean banner generator</title>
 11 |     <meta name="description" content="A simple and clean banner generator" />
 12 |     <link rel="canonical" href="https://liyasthomas.github.io/banner/" />
 13 |     <link rel="icon" href="favicon.ico" />
 14 |     <meta itemprop="name" content="Banner" />
 15 |     <meta
 16 |       itemprop="description"
 17 |       content="A simple and clean banner generator"
 18 |     />
 19 |     <meta itemprop="image" content="icons/icon-192x192.png" />
 20 | 
 21 |     <!-- See https://goo.gl/OOhYW5 -->
 22 |     <link rel="manifest" href="manifest.json" />
 23 | 
 24 |     <!-- See https://goo.gl/qRE0vM -->
 25 |     <meta name="theme-color" content="#ffffff" />
 26 |     <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
 27 |     <meta name="mobile-web-app-capable" content="yes" />
 28 |     <meta name="application-name" content="Banner" />
 29 |     <!-- Add to homescreen for Safari on iOS -->
 30 |     <meta name="apple-mobile-web-app-capable" content="yes" />
 31 |     <meta
 32 |       name="apple-mobile-web-app-status-bar-style"
 33 |       content="white-translucent"
 34 |     />
 35 |     <meta name="apple-mobile-web-app-title" content="Banner" />
 36 |     <!-- Homescreen icons -->
 37 |     <link rel="apple-touch-icon" href="icons/icon-48x48.png" />
 38 |     <link rel="apple-touch-icon" sizes="72x72" href="icons/icon-72x72.png" />
 39 |     <link rel="apple-touch-icon" sizes="96x96" href="icons/icon-96x96.png" />
 40 |     <link
 41 |       rel="apple-touch-icon"
 42 |       sizes="144x144"
 43 |       href="icons/icon-144x144.png"
 44 |     />
 45 |     <link
 46 |       rel="apple-touch-icon"
 47 |       sizes="192x192"
 48 |       href="icons/icon-192x192.png"
 49 |     />
 50 |     <!-- Tile icon for Windows 8 (144x144 + tile color) -->
 51 |     <meta name="msapplication-TileImage" content="icons/icon-144x144.png" />
 52 |     <meta name="msapplication-TileColor" content="#ffffff" />
 53 |     <meta name="msapplication-tap-highlight" content="no" />
 54 |     <!-- OpenGraph -->
 55 |     <meta property="og:site_name" content="Banner" />
 56 |     <meta property="og:url" content="https://liyasthomas.github.io/banner" />
 57 |     <meta property="og:type" content="website" />
 58 |     <meta property="og:title" content="Banner" />
 59 |     <meta
 60 |       property="og:description"
 61 |       content="A simple and clean banner generator"
 62 |     />
 63 |     <meta property="og:image" content="icons/icon-144x144.png" />
 64 |     <!-- Twitter -->
 65 |     <meta name="twitter:card" content="summary" />
 66 |     <meta name="twitter:site" content="@liyasthomas" />
 67 |     <meta name="twitter:creator" content="@liyasthomas" />
 68 |     <meta name="twitter:url" content="https://liyasthomas.github.io/banner" />
 69 |     <meta name="twitter:title" content="Banner" />
 70 |     <meta
 71 |       name="twitter:description"
 72 |       content="A simple and clean banner generator"
 73 |     />
 74 |     <meta name="twitter:image" content="icons/icon-144x144.png" />
 75 |     <!-- Web Fonts -->
 76 |     <link
 77 |       href="https://fonts.googleapis.com/css?family=Poppins:700&display=swap"
 78 |       rel="stylesheet"
 79 |     />
 80 |     <link rel="stylesheet" href="index.css" />
 81 | 
 82 |     <script>
 83 |       if ("serviceWorker" in navigator) {
 84 |         window.addEventListener("load", function () {
 85 |           navigator.serviceWorker
 86 |             .register("sw.js")
 87 |             .then(function (registration) {
 88 |               console.log(
 89 |                 "ServiceWorker registration successful with scope: ",
 90 |                 registration.scope
 91 |               );
 92 |             })
 93 |             .catch(function (err) {
 94 |               console.log("ServiceWorker registration failed: ", err);
 95 |             });
 96 |         });
 97 |       }
 98 |     </script>
 99 | 
100 |     <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
101 |     <script src="https://unpkg.com/vanilla-picker"></script>
102 |   </head>
103 |   <body>
104 |     <main role="main" class="container">
105 |       <header>
106 |         <h2><a href="https://liyasthomas.github.io/banner">Banner</a></h2>
107 |         <div>
108 |           <a
109 |             href="https://github.com/liyasthomas/banner"
110 |             style="margin-right: 24px;"
111 |             target="_blank"
112 |           >
113 |             <img
114 |               src="icons/github.svg"
115 |               alt="GitHub"
116 |               style="margin-right: 8px;"
117 |             />GitHub
118 |           </a>
119 |           <button id="installPWA" onclick="installPWA()">
120 |             <img src="icons/pwalogo.svg" alt="PWA" style="height: 24px;" />
121 |           </button>
122 |         </div>
123 |       </header>
124 |       <section class="content">
125 |         <div class="wrapper">
126 |           <div id="capture" class="capture">
127 |             <div
128 |               id="heading"
129 |               class="heading"
130 |               placeholder="edit me"
131 |               contenteditable="true"
132 |             >
133 |               edit me
134 |             </div>
135 |           </div>
136 |         </div>
137 |         <div class="controls">
138 |           <div class="actions">
139 |             <button id="download" onclick="download()">Download 🚀</button>
140 |             <button id="random" onclick="randomize()">Randomize ✨</button>
141 |           </div>
142 |           <div class="flex">
143 |             <h3>Background color</h3>
144 |             <div id="bg" class="color"></div>
145 |           </div>
146 |           <div class="flex">
147 |             <h3>Foreground color</h3>
148 |             <div id="fg" class="color"></div>
149 |           </div>
150 |           <div class="flex">
151 |             <h3>Border color</h3>
152 |             <div id="bbg" class="color"></div>
153 |           </div>
154 |           <div class="flex">
155 |             <h3>Border width</h3>
156 |             <input
157 |               id="borderw"
158 |               type="number"
159 |               oninput="borderwidth(this)"
160 |               value="0"
161 |               min="0"
162 |             />
163 |           </div>
164 |           <div class="flex">
165 |             <h3>Font size</h3>
166 |             <input
167 |               id="fontsize"
168 |               type="number"
169 |               oninput="fontsize(this)"
170 |               value="60"
171 |               min="14"
172 |               max="200"
173 |             />
174 |           </div>
175 |           <div class="flex">
176 |             <h3>Text shadow</h3>
177 |           </div>
178 |           <div class="flex">
179 |             X<input id="tsx" type="number" oninput="tsx(this)" value="0" />
180 |             Y<input id="tsy" type="number" oninput="tsy(this)" value="0" />
181 |             Blur<input
182 |               id="tsb"
183 |               type="number"
184 |               oninput="tsb(this)"
185 |               value="0"
186 |               min="0"
187 |             />
188 |             <div id="tsc" class="color"></div>
189 |           </div>
190 |           <div class="flex">
191 |             <h3>Text alignment</h3>
192 |           </div>
193 |           <div class="flex">
194 |             <div class="tabs">
195 |               <div class="rows">
196 |                 <div
197 |                   class="tab"
198 |                   onclick="textalign(this, 'left', 'flex-start')"
199 |                 >
200 |                   ┏
201 |                 </div>
202 |                 <div
203 |                   class="tab"
204 |                   onclick="textalign(this, 'center', 'flex-start')"
205 |                 >
206 |                   ┳
207 |                 </div>
208 |                 <div
209 |                   class="tab"
210 |                   onclick="textalign(this, 'right', 'flex-start')"
211 |                 >
212 |                   ┓
213 |                 </div>
214 |               </div>
215 |               <div class="rows">
216 |                 <div class="tab" onclick="textalign(this, 'left', 'center')">
217 |                   ┣
218 |                 </div>
219 |                 <div
220 |                   class="tab current"
221 |                   onclick="textalign(this, 'center', 'center')"
222 |                 >
223 |                   ╋
224 |                 </div>
225 |                 <div class="tab" onclick="textalign(this, 'right', 'center')">
226 |                   ┫
227 |                 </div>
228 |               </div>
229 |               <div class="rows">
230 |                 <div class="tab" onclick="textalign(this, 'left', 'flex-end')">
231 |                   ┗
232 |                 </div>
233 |                 <div
234 |                   class="tab"
235 |                   onclick="textalign(this, 'center', 'flex-end')"
236 |                 >
237 |                   ┻
238 |                 </div>
239 |                 <div class="tab" onclick="textalign(this, 'right', 'flex-end')">
240 |                   ┛
241 |                 </div>
242 |               </div>
243 |             </div>
244 |           </div>
245 |           <div class="flex">
246 |             <h3>Background image</h3>
247 |           </div>
248 |           <div class="flex">
249 |             <span
250 |               id="resetbg"
251 |               style="display: none; cursor: pointer;"
252 |               onclick="resetbg()"
253 |               >(reset)</span
254 |             >
255 |             <input type="file" id="getbg" name="background-image" />
256 |           </div>
257 |           <div class="flex">
258 |             <h3>Height ratio</h3>
259 |             <input
260 |               id="height"
261 |               type="number"
262 |               oninput="cheight(this)"
263 |               value="30"
264 |               min="20"
265 |               max="100"
266 |               step="5"
267 |             />
268 |           </div>
269 |         </div>
270 |       </section>
271 |     </main>
272 |     <script src="index.js"></script>
273 |   </body>
274 | </html>
275 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const capture = document.getElementById("capture");
  2 | const bg = document.getElementById("bg");
  3 | const fg = document.getElementById("fg");
  4 | const bbg = document.getElementById("bbg");
  5 | const heading = document.getElementById("heading");
  6 | const borderw = document.getElementById("borderw");
  7 | const tsc = document.getElementById("tsc");
  8 | const root = document.querySelector(":root");
  9 | let picker1 = new Picker({
 10 |   parent: bg,
 11 |   color: getComputedStyle(document.documentElement).getPropertyValue(
 12 |     "--bg-color"
 13 |   ),
 14 |   popup: "left",
 15 |   onChange({ rgbaString }) {
 16 |     root.style.setProperty("--bg-color", rgbaString);
 17 |   },
 18 | });
 19 | let picker2 = new Picker({
 20 |   parent: fg,
 21 |   color: getComputedStyle(document.documentElement).getPropertyValue(
 22 |     "--fg-color"
 23 |   ),
 24 |   popup: "left",
 25 |   onChange({ rgbaString }) {
 26 |     root.style.setProperty("--fg-color", rgbaString);
 27 |   },
 28 | });
 29 | let picker3 = new Picker({
 30 |   parent: bbg,
 31 |   color: getComputedStyle(document.documentElement).getPropertyValue(
 32 |     "--bbg-color"
 33 |   ),
 34 |   popup: "left",
 35 |   onChange({ rgbaString }) {
 36 |     root.style.setProperty("--bbg-color", rgbaString);
 37 |   },
 38 | });
 39 | let picker4 = new Picker({
 40 |   parent: tsc,
 41 |   color: getComputedStyle(document.documentElement).getPropertyValue(
 42 |     "--ts-color"
 43 |   ),
 44 |   popup: "left",
 45 |   onChange({ rgbaString }) {
 46 |     root.style.setProperty("--ts-color", rgbaString);
 47 |   },
 48 | });
 49 | const generateRandomHexColor = () =>
 50 |   `#${(0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6)}`;
 51 | const randomize = () => {
 52 |   root.style.setProperty("--bg-color", generateRandomHexColor());
 53 |   root.style.setProperty("--fg-color", generateRandomHexColor());
 54 |   root.style.setProperty("--bbg-color", generateRandomHexColor());
 55 |   picker1.setColor(
 56 |     getComputedStyle(document.documentElement).getPropertyValue("--bg-color")
 57 |   );
 58 |   picker2.setColor(
 59 |     getComputedStyle(document.documentElement).getPropertyValue("--fg-color")
 60 |   );
 61 |   picker3.setColor(
 62 |     getComputedStyle(document.documentElement).getPropertyValue("--bbg-color")
 63 |   );
 64 | };
 65 | randomize();
 66 | const download = () => {
 67 |   html2canvas(capture, {
 68 |     scale: 1.5,
 69 |     backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--bg-color")
 70 |   }).then((canvas) => {
 71 |     saveAs(canvas.toDataURL(), "banner.png");
 72 |   });
 73 | };
 74 | const saveAs = (uri, filename) => {
 75 |   const link = document.createElement("a");
 76 |   if (typeof link.download === "string") {
 77 |     link.href = uri;
 78 |     link.download = filename;
 79 |     document.body.appendChild(link);
 80 |     link.click();
 81 |     document.body.removeChild(link);
 82 |   } else {
 83 |     window.open(uri);
 84 |   }
 85 | };
 86 | const borderwidth = ({ value }) =>
 87 |   root.style.setProperty("--bw-size", `${value}px`);
 88 | const fontsize = ({ value }) => (heading.style.fontSize = value + `px`);
 89 | const cheight = ({ value }) => (capture.style.height = value + `vw`);
 90 | const tsx = ({ value }) => root.style.setProperty("--tsx-size", `${value}px`);
 91 | const tsy = ({ value }) => root.style.setProperty("--tsy-size", `${value}px`);
 92 | const tsb = ({ value }) => root.style.setProperty("--tsb-size", `${value}px`);
 93 | const readURL = () => {
 94 |   const file = document.getElementById("getbg").files[0];
 95 |   const reader = new FileReader();
 96 |   reader.onloadend = () => {
 97 |     capture.style.backgroundImage = `url(${reader.result})`;
 98 |   };
 99 |   if (file) {
100 |     reader.readAsDataURL(file);
101 |     document.getElementById("resetbg").style.display = "inline-flex";
102 |   }
103 | };
104 | document.getElementById("getbg").addEventListener("change", readURL, true);
105 | const resetbg = () => {
106 |   capture.style.backgroundImage = ``;
107 |   document.getElementById("resetbg").style.display = "none";
108 | };
109 | const textalign = ({ classList }, h, v) => {
110 |   document.querySelector(".current").classList.toggle("current");
111 |   capture.style.textAlign = h;
112 |   capture.style.justifyContent = v;
113 |   classList.add("current");
114 | };
115 | let pwaInstalled = localStorage.getItem("pwaInstalled") == "yes";
116 | if (window.matchMedia("(display-mode: standalone)").matches) {
117 |   localStorage.setItem("pwaInstalled", "yes");
118 |   pwaInstalled = true;
119 | }
120 | if (window.navigator.standalone === true) {
121 |   localStorage.setItem("pwaInstalled", "yes");
122 |   pwaInstalled = true;
123 | }
124 | if (pwaInstalled) {
125 |   document.getElementById("installPWA").style.display = "none";
126 | } else {
127 |   document.getElementById("installPWA").style.display = "inline-flex";
128 | }
129 | let deferredPrompt = null;
130 | window.addEventListener("beforeinstallprompt", (e) => {
131 |   deferredPrompt = e;
132 | });
133 | async function installPWA() {
134 |   if (deferredPrompt) {
135 |     deferredPrompt.prompt();
136 |     deferredPrompt.userChoice.then(({ outcome }) => {
137 |       if (outcome === "accepted") {
138 |         console.log("Your PWA has been installed");
139 |       } else {
140 |         console.log("User chose to not install your PWA");
141 |       }
142 |       deferredPrompt = null;
143 |     });
144 |   }
145 | }
146 | window.addEventListener("appinstalled", (evt) => {
147 |   localStorage.setItem("pwaInstalled", "yes");
148 |   pwaInstalled = true;
149 |   document.getElementById("installPWA").style.display = "none";
150 | });
151 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "Banner",
 3 | 	"short_name": "Banner",
 4 | 	"description": "A simple and clean banner generator",
 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": ".\/?utm_source=bannerpwa&utm_medium=pwa&utm_campaign=pwapp",
38 | 	"display": "standalone",
39 | 	"orientation": "any",
40 | 	"theme_color": "#ffffff",
41 | 	"background_color": "#ffffff"
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "Banner",
 3 | 	"repository": {
 4 | 		"type": "git",
 5 | 		"url": "https://github.com/liyasthomas/banner.git"
 6 | 	},
 7 | 	"description": "A simple and clean banner generator",
 8 | 	"author": "liyasthomas",
 9 | 	"version": "0.1.9",
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 |     '/banner/index.css',
 39 |     '/banner/index.js',
 40 | 	{
 41 | 		url: '/banner/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 |     '/banner/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 | 


--------------------------------------------------------------------------------