Code Monkey home page Code Monkey logo

badger's Introduction

Badger

Build Status

A simple app for creating and printing out custom Ingress Agent identification badges. An end-user can set their codename and level, add a community logo, and a QR code (e.g. a link to their community for recruitment), then print the page out and laminate it.

Demo

http://therealklanni.github.io/badger

Community customization

The template can be customized to your community to simplify badge creation for your community members.

Instructions

Fork or clone this repository

git clone https://github.com/therealklanni/badger

Replace the ??.default-logo.png and ??.default-qr.png images with your own default images in the dist/ directory

<!-- Overwrite this image with your own default, or change the src to point to your image location -->
<img src="images/31a07d21.default-logo.png" alt="" class="editable badge-logo">

...

<!-- Overwrite this image with your own default, or change the src to point to your image location -->
<img src="images/77ee982d.default-qr.png" alt="" class="editable badge-qr">

Locate and modify the following lines in the dist/index.html file as follows

<!-- Replace the ID (numbers) below with your G+ Page ID, do not use your community ID -->
<link href="https://plus.google.com/108910164412297335014" rel="publisher">
<!-- Change the link here to your community link (shortened links such as goo.gl or tinyurl.com will not work here) -->
<div class="g-plusone" data-annotation="inline" data-width="225" data-href="http://therealklanni.github.io/badger/"></div>
<!-- cut -->
<div class="span3">

	<!-- Replace the ID (numbers) below with your G+ Page ID
	     optionally delete everything between the "cut" comments to remove -->
	<div class="g-page" data-width="180" data-href="//plus.google.com/108910164412297335014"></div>

</div>
<!-- cut -->
<!-- Replace the ID (numbers) below with your G+ Community ID -->
<div class="g-community" data-width="180" data-showtagline="true" data-href="//plus.google.com/communities/115566167479601650426"></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
	var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

Finally, set your default values ...

<script>
	// EDIT THIS PORTION FOR CUSTOM COMMUNITY DEFAULTS
	var community_defaults = {
		// Set your community name, e.g. "My Awesome Community"
		community: "COMMUNITY",
		// Set your community link, e.g. "goo.gl/xyzabc"
		link: "goo.gl/link",
		// Set to false to default to Resistance
		enlightened: true
	}
</script>

and upload everything from the dist/ folder to your web hosting.

That's it, you're done!

Contribute!

Merge requests are encouraged and appreciated!

You can also help out by testing the develop branch and report any bugs you find.

Getting started

In the directory where you have cloned this repository, run

npm install && bower install

to get started. Please work in develop and make changes only in the app directory.

Use grunt server to test your work.

Please only submit pull requests to the develop branch. I will do the builds in master after merging from develop.

Brought to you by

Open Your Mind - Phoenix, Arizona's Enlightened, opening minds in the valley since 2012!

Authors

Special thanks for assistance and contributions:

Brandon Graham, Nathan Brandt, @akkatracker, @Neofyt, @stillru

License

Copyright (C) 2013 Kevin Lanni

Licensed under the MIT License

badger's People

Contributors

mattdbr avatar neofyt avatar therealklanni avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

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

Recommend Topics

  • javascript

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

  • web

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

  • server

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

  • Machine learning

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

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

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

  • D3 photo D3

    Data-Driven Documents codes.