Skip to content

Instantly share code, notes, and snippets.

@maggocnx

maggocnx/index.html

Last active April 23, 2016 09:13
Show Gist options
  • Save maggocnx/5d2f3faa83a22d35c834429a053ef3aa to your computer and use it in GitHub Desktop.
Save maggocnx/5d2f3faa83a22d35c834429a053ef3aa to your computer and use it in GitHub Desktop.
Download ZIP
Printing
Raw
index.html
<!DOCTYPE html>
<html ng-app="epaykiosk" >
<head >
<title>EpayKiosk</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-io-barcode/build/angular-io-barcode.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
background-color: #000;
overflow: hidden;
}
.product{
width: 390px;
margin-top: 20px;
margin-right: 50px;
margin-left: 150px;
}
.overlay {
position: absolute;
background-color: #444;
width: 500px;
height: 700px;
top : 100px;
left :390px;
color: #fff;
padding : 50px;
font-size: 1.2em;
}
.print{
display: none;
margin : 20px;
font-size: 0.8em;
margin-bottom: 1000px;
}
@media print {
.ui {
display: none;
}
.print{
display: block;
}
}
</style>
</head>
<body ng-controller="testCtrl" >
<div class="ui" ng-hide="printing">
<div class="row">
<img src="img/title.jpg" width="1300px">
</div>
<div class="row">
<img class="product" src="img/iTunes_15.png" ng-click="select(15)">
<img class="product" src="img/iTunes_25.png" ng-click="select(25)">
<img class="product" src="img/iTunes_50.png" ng-click="select(50)">
<img class="product" src="img/iTunes_100.png" ng-click="select(100)">
</div>
<div class="overlay" ng-show="overlay">
<h3>iTunes {{value}} Euro</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur odit a, itaque omnis architecto quae ducimus, labore rerum hic delectus quos asperiores quibusdam libero porro corporis officiis eaque voluptate repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur odit a, itaque omnis architecto quae ducimus, labore rerum hic delectus quos asperiores quibusdam libero porro corporis officiis eaque voluptate repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur odit a, itaque omnis architecto quae ducimus, labore rerum hic delectus quos asperiores quibusdam libero porro corporis officiis eaque voluptate repudiandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem reiciendis dolore delectus sunt sequi est eveniet, illum, asperiores laudantium, nisi nihil fugit! Mollitia suscipit natus nostrum, sit ex, omnis qui.</p>
<center>
<button class="btn btn-lg btn-success" ng-click="printTicket()" >Aktzeptieren und Drucken</button>
</center>
</div>
</div>
<div class="overlay" ng-show="info">{{info}}</div>
<div class="print" >
<div class="row">
<div class="col-md-3">
<img ng-src="img/iTunes_{{value}}.png" width="300" alt="">
</div>
<div class="col-md-6">
<h1>iTunes {{value}} Euro</h1>
</div>
</div>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur odit a, itaque omnis architecto quae ducimus, labore rerum hic delectus quos asperiores quibusdam libero porro corporis officiis eaque voluptate repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur odit a, itaque omnis architecto quae ducimus, labore rerum hic delectus quos asperiores quibusdam libero porro corporis officiis eaque voluptate repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur odit a, itaque omnis architecto quae ducimus, labore rerum hic delectus quos asperiores quibusdam libero porro corporis officiis eaque voluptate repudiandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem reiciendis dolore delectus sunt sequi est eveniet, illum, asperiores laudantium, nisi nihil fugit! Mollitia suscipit natus nostrum, sit ex, omnis qui.</p>
</div>
<io-barcode code="{{code}}" type="CODE128B" options="options"></io-barcode>
</div>
</body>
<script>
angular.module('epaykiosk',['io-barcode'])
.controller("testCtrl", function($scope, $timeout){
$scope.overlay = false;
$scope.printing = false;
$scope.code = 000;
$scope.options = {
width: 3,
height: 100,
displayValue: true,
font: 'monospace',
textAlign: 'center',
fontSize: 15,
}
$scope.select = function(val){
$scope.code = Math.floor(100000 + Math.random() * 900000);
$scope.value = val;
$scope.overlay = true;
}
$scope.printTicket = function(){
window.print();
$scope.overlay = false;
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment