codewithus.github.io/index.html at master · codewithus/codewithus.github.io · 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
<html ng-app="app">
<head>
	<title>Text Shadow Generator</title>
	<link rel="stylesheet" type="text/css" href="./css/sty.css">
	<meta name="keywords" content="text shadow,css text shadow generator,css3 shadow">
	<meta name="dscription" content="css text shadow generator.">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script type="text/javascript" src="./scripts/app.js"></script>
</head>
<body ng-controller="main" ng-keydown="onKeyDown($event)">
	<div class="text-wrap" style="background:{{bg_color}};">
		<h3 style="text-shadow:{{sty_text}};color:{{txt_color}};" >{{text}}</h3>
	</div>
	<div class="container-main">
		<div class="gradient-list">
			<button ng-click="add()">Add new</button>
			<table>
				<tr ng-repeat="shadow in shadow_array" ng-class="($index==current) ? 'curr' : ''">
					<td class="element-area">{{shadow | makeformat}}<span style="background:{{shadow.c}};"></span></td>
					<td><button ng-click="edit_gradient($index)">Edit</button></td>
					<td><button ng-click="delete($index)">Delete</button></td>
				</tr>
			</table>
		</div>
		<div class="controlers">
			<label>Horizontal</label> <input type="range" max="200" min="-200" ng-model="shadow_array[current].h" class="vertical"><span>{{shadow_array[current].h}}</span><br>
			<label>Vertical</label> <input type="range" max="200" min="-200" ng-model="shadow_array[current].v" class="hor" ><span>{{shadow_array[current].v}}</span><br>
			<label>blur</label><input type="range" max="200" min="0" ng-model="shadow_array[current].b" class="blur"><span>{{shadow_array[current].b}}</span><br>
			<label>Color</label> <input type="color" ng-model="shadow_array[current].c" class="color" ng-input="c_clr()" >
			<br><label>Opacity</label> <input type="range" max="1" min="0" step="0.1" ng-model="shadow_array[current].o">
			<span>{{shadow_array[current].o}}</span> <br>
			<br><br>
		</div>
		<div class="columnside">
			Text <input type="text" ng-model="text">
			background color <br>
			<input type="color" ng-model="bg_color">
			Text color <br>
			<input type="color" ng-model="txt_color">
			<textarea id="code" readonly="readonly">text-shadow:{{sty_text}};</textarea>
		</div>
		<div class="footer"><a href="https://github.com/codewithus/codewithus.github.io" target="_blank">View on Github</a></div>
	</div>
</body>
</html>