Raspberry-Pi-RFID/rfid2.html at master · arthurlinux/Raspberry-Pi-RFID · GitHub

1
2
3
4
5
6
7
8
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<title>RFID</title>
	<meta charset="utf-8">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
	<link href='https://cdn.luigifreitas.me/animate.css' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script src="https://luigifreitas.me/socket.io/socket.io.js"></script>

	<style>
		body {
			left: 0%;
			top: 0%;
			width: 100%;
			height: 100%;
			overflow:hidden;
			position: absolute;
			background-color: #ededed;
		}
		.box {
			position: absolute;
			width: 25%;
			left: 37.5%;
			top: 20%;
			background-color: black;

			padding-left: 0%;
			border-radius: 8px;
			background-color: white;
			border: 1px solid #b6b6b6;

			box-shadow: 0px 1px 0px .5px #b6b6b6;
		}
		.box:after {
			padding-top: 80%;
			display: block;
			content: '';
		}
		.help {
			width: 100%;
			height: 50%;
			color: #606060;
			font-family: "Open Sans";
			font-weight: 300;
			font-size: 25px;
			position: absolute;
			bottom: -27%;
			text-align: center;
			-webkit-transitio: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
		.icon {
			width: 100%;
			height: 76%;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: 50%;
			position: absolute;
			background-image: url("/rfid.png");
			-webkit-transitio: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}

		.one {
			-webkit-filter: hue-rotate(300deg);
		}
	</style>


	<body>
		<div class="box">
			<div class="icon"></div>
			<div class="help">
				Scan your NFC Card.
			</div>
		</div>
	</body>

	<script>
	// Connects with Server

	var socket = io(window.location.hostname + ":8500");


	socket.on('rfid', function(data){

		$(".icon").addClass('one');
		$(".help").text("Hello, " + data + "!");
		setTimeout(function() {
			$(".icon").removeClass('one');
			$(".help").text("Scan your NFC Card.");
		}, 2500);
	});


	</script>