-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
134 lines (130 loc) · 6.95 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
<!DOCTYPE html>
<html lang="en">
<!-- ======================================================= -->
<!-- SEO TAG'S -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="I will create CSS shadows for you in a completely graphic, completely professional and clean way, and finally I will deliver the CSS codes to you." />
<meta name="keywords" content="shadow generator, shadowgenerator,online shadow generator,online, shdow, generation,css shdow, box-shadow, سی اس اس, سایه ساز, سایه ساز سی اس اس">
<meta name="subject" content="I will create CSS shadows for you in a completely">
<meta name="copyright" content="Aliakbar Zohour" />
<meta name="language" content="en" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Aliakbar Zohour, [email protected]" />
<!-- ======================================================= -->
<title>Welcome To Shadow Generator</title>
<!-- Google Font ( Fredoka font ) -->
<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=Fredoka:wght@300;400;500;600&display=swap" rel="stylesheet" />
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<!-- Style's -->
<link rel="stylesheet" href="./style/style.css" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./Media/Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./Media/Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./Media/Favicon/favicon-16x16.png">
<link rel="manifest" href="./Media/Favicon/site.webmanifest">
</head>
<body>
<!-- ================================================================= -->
<!-- Loading page -->
<div class="loading_page">
<h1>
Loading
<div class="dots">
<span class="dot z"></span> <span class="dot f"></span
><span class="dot s"></span>
<span class="dot t"><span class="dot l"></span></span>
</div>
</h1>
</div>
<!-- ================================================================= -->
<!-- Shadow Generator Tag's -->
<div class="titles">
<h1 class="title">Shadow Generator</h1>
<p>
Hello . This program is made so that you can create professional shadows and copy the codes without the knowledge of hex codes and CSS shadows.
</p>
</div>
<div class="container">
<div class="result">
<div id="element"></div>
</div>
<!-- Controler's -->
<div class="sliders">
<!-- Horizontal Shadow -->
<div class="slider-wrapper">
<label for="h-shadow">Horizontal Shadow : </label>
<input type="range" id="h-shadow" max="100" min="-100" value="0" />
</div>
<!-- Vertical Shadow -->
<div class="slider-wrapper">
<label for="v-shadow">Vertical Shadow : </label>
<input type="range" id="v-shadow" max="100" min="-100" value="0" />
</div>
<!-- Blur Radius -->
<div class="slider-wrapper">
<label for="blur-radius">Blur Radius : </label>
<input type="range" id="blur-radius" max="100" min="0" value="0" />
</div>
<!-- Spread Radius -->
<div class="slider-wrapper">
<label for="spread-radius">Spread Radius : </label>
<input type="range" id="spread-radius" max="50" min="-50" value="0" />
</div>
<!-- Change Color -->
<div class="slider-wrapper">
<label for="shadow-color">Shadow Color : </label>
<input type="color" id="shadow-color" />
</div>
<!-- Shadow opacity -->
<div class="slider-wrapper">
<label for="shadow-opacity">Shadow opacity : </label>
<input type="range" id="shadow-opacity" max="1" min="0" step="0.1" value="1" />
</div>
<!-- Shadow inset/outset -->
<div class="input-wrapper">
<label for="shadow-inset">Shadow Inset : </label>
<input type="checkbox" id="shadow-inset" />
</div>
<!-- Code Wrapper -->
<div class="code-wrapper">
<!-- Shadow generated Code -->
<textarea rows="2" id="code"></textarea>
<!-- ============================================================================ -->
<!-- Bootstrap Notification -->
<button type="button" class="btn btn-danger" id="liveToastBtn" onclick="copyCode()">
Copy
</button>
<!-- Notification -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<!-- From ... -->
<strong class="me-auto">Shadow Generator</strong>
<!-- Data -->
<small>now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<!-- Notic -->
<div class="toast-body">Code is Copied !</div>
</div>
</div>
<!-- ============================================================================ -->
</div>
</div>
</div>
<div class="footer p-3 m-0">
<a href="https://linkedin.com/in/aliakbarzohour">
<h5>By Aliakbar Zohour</h5>
</a>
</div>
<!-- Bootstrap Javascript Code's -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Javascript Code's -->
<script src="./js/index.js" defer></script>
</body>
</html>