-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (82 loc) · 3.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu+Mono&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/styles.css" />
<script src="./assets/main.js" defer></script>
<title>CSS Preview: Border Radius</title>
</head>
<body>
<a href="https://github.com/lucasmedeiros7" target="_blank" rel="noopener noreferrer" title="Github - Lucas Medeiros">
<svg
class="github-svg"
width="80"
height="81"
viewBox="0 0 80 81"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_60_134)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 0.5L36.8 37.3H38.4649L40.6634 35.1173C36.5123 32.217 38.08 29.172 38.08 29.172C39.04 26.964 38.56 25.652 38.56 25.652C38.144 23.54 39.488 24.916 39.488 24.916C40.736 26.388 40.16 28.436 40.16 28.436C39.4359 31.3047 41.2086 32.719 42.4821 33.3117L42.784 33.012C43.808 32.244 44.768 31.988 45.504 32.052C42.816 28.66 40.8 24.308 46.016 19.06C47.52 17.588 49.28 16.884 51.104 16.82C51.296 16.308 52.224 14.452 54.848 13.332C54.848 13.332 56.352 14.1 57.216 18.484C58.592 19.252 59.904 20.276 61.088 21.428C62.24 22.58 63.264 23.924 64.032 25.332C68.416 26.164 69.216 27.668 69.216 27.668C68.064 30.292 66.208 31.22 65.728 31.412C65.632 33.268 64.96 34.996 63.456 36.5C58.208 41.748 53.856 39.7 50.464 37.012C50.528 37.908 50.144 39.188 48.864 40.468L45.12 44.18C44.9488 44.3512 44.9684 44.713 45.0483 45.0588L45.44 45.94L80 80.5V0.5H0Z"
fill="#F35627"
/>
</g>
<defs>
<clipPath id="clip0_60_134">
<rect
width="80"
height="80"
fill="white"
transform="translate(0 0.5)"
/>
</clipPath>
</defs>
</svg>
</a>
<main class="main-container">
<header class="title-container">
<h1>[Previewer]</h1>
<h2>border-radius:</h2>
</header>
<div class="generated-css">
<span
>border-radius: <span id="border-radius-values">0 0 0 0</span>;</span
>
</div>
<div class="preview-container">
<div class="top-inputs">
<div>
<label for="top-left">Top Left</label>
<input type="number" id="top-left" />
</div>
<div>
<label for="top-right">Top Right</label>
<input type="number" id="top-right" />
</div>
</div>
<div class="box"></div>
<div class="bottom-inputs">
<div>
<label for="bottom-left">Bottom Left</label>
<input type="number" id="bottom-left" />
</div>
<div>
<label for="bottom-right">Bottom Right</label>
<input type="number" id="bottom-right" />
</div>
</div>
</div>
</main>
</body>
</html>