-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (156 loc) · 9.04 KB
/
index.html
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/output.css" />
<link rel="stylesheet" href="css/input.css">
<!-- <link rel="stylesheet" href="style/custom.css" /> -->
</head>
<body class="">
<header class="flex justify-center">
<h1 class="text-3xl font-bold text-white m-7">Created: By MeteorDev</h1>
</header>
<div class=" mx-auto bg-slate-800 grid lg:w-[350px] pt-10 rounded-[38px] md:w-[400px] sm:w-[200px]">
<div id="content-result" class="text-white p-3 text-right ">
<h2 id="result" class="text-6xl mr-10 ">0.0</h2>
</div>
<div id="valores"
class="w-full grid grid-cols-4 bg-gradient-to-b text-2xl from-slate-500 to-slate-500 rounded-b-[38px]">
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="clean()" class="p-7 w-full">
AC
</button>
</div>
<div
class=" flex justify-center items-center col-span-2 border-b border-r text-4xl hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`delete`)" class="p-7 w-full flex justify-center ">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor"
d="M6.535 3h14.464a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6.535a1 1 0 0 1-.833-.445l-5.333-8a1 1 0 0 1 0-1.11l5.333-8A1 1 0 0 1 6.535 3m.535 2l-4.667 7l4.667 7H20V5zM13 10.586l2.828-2.829l1.414 1.415L14.414 12l2.828 2.828l-1.414 1.415l-2.829-2.829l-2.828 2.829l-1.414-1.415L11.585 12L8.757 9.172l1.414-1.415z" />
</svg>
</button>
</div>
<div
class=" flex justify-center items-center border-b hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`/`)" class="p-7 w-full ">
÷
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(7)" class="p-7 w-full">
7
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(8)" class="p-7 w-full ">
8
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(9)" class="p-7 w-full ">
9
</button>
</div>
<div
class=" flex justify-center items-center border-b hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`*`)" class="p-7 w-full ">
x
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(4)" class="p-7 w-full ">
4
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(5)" class="p-7 w-full ">
5
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(6)" class="p-7 w-full ">
6
</button>
</div>
<div
class=" flex justify-center items-center border-b hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`-`)" class=" ">
-
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(1)" class="p-7 w-full ">
1
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(2)" class="p-7 w-full ">
2
</button>
</div>
<div
class=" flex justify-center items-center border-b border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(3)" class="p-7 w-full ">
3
</button>
</div>
<div
class=" flex justify-center items-center border-b hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`+`)" class="p-7 w-full ">
+
</button>
</div>
<div
class=" flex justify-center items-center border-r rounded-bl-[38px] hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(0)" class="p-7 w-full ">
0
</button>
</div>
<div
class=" flex justify-center items-center border-r hover:bg-slate-400 hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`.`)" class="p-7 w-full ">
.
</button>
</div>
<div
class=" flex justify-center items-center col-span-2 hover:bg-slate-400 rounded-br-[38px] hover:opacity-80 text-white font-light ">
<button onclick="insertNum(`=`)" class=" w-full h-full ">
=
</button>
</div>
</div>
</div>
<footer class="mx-auto text-center text-white text-4xl font-bold pt-10">
<div class="mx-auto flex justify-between w-[400px] p-5">
<a href="https://github.com/Meteoro01" target="_blank" class=""><svg xmlns="http://www.w3.org/2000/svg"
width="1em" height="1em" viewBox="0 0 1024 1024">
<path fill="currentColor"
d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5C64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9c26.4 39.1 77.9 32.5 104 26c5.7-23.5 17.9-44.5 34.7-60.8c-140.6-25.2-199.2-111-199.2-213c0-49.5 16.3-95 48.3-131.7c-20.4-60.5 1.9-112.3 4.9-120c58.1-5.2 118.5 41.6 123.2 45.3c33-8.9 70.7-13.6 112.9-13.6c42.4 0 80.2 4.9 113.5 13.9c11.3-8.6 67.3-48.8 121.3-43.9c2.9 7.7 24.7 58.3 5.5 118c32.4 36.8 48.9 82.7 48.9 132.3c0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9c177.1-59.7 304.6-227 304.6-424.1c0-247.2-200.4-447.3-447.5-447.3" />
</svg></a>
<a href="https://www.instagram.com/meteorodev/?show_story_unavailable=1" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3" />
</svg>
</a>
<a href="https://www.linkedin.com/in/luis-alfredo-saavedra-falcon-11147723a/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
<path fill="currentColor"
d="M216 24H40a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16m0 192H40V40h176zM96 112v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m88 28v36a8 8 0 0 1-16 0v-36a20 20 0 0 0-40 0v36a8 8 0 0 1-16 0v-64a8 8 0 0 1 15.79-1.78A36 36 0 0 1 184 140m-84-56a12 12 0 1 1-12-12a12 12 0 0 1 12 12" />
</svg>
</a>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>