-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (114 loc) · 5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"
integrity="sha512-zInFF17qBFVvvvFpIfeBzo7Tj7+rQxLeTJDmbxjBz5/zIr89YVbTNelNhdTT+/DCrxoVzBeUPVFJsczKbB7sew=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="styles.css">
<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=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Rutrends Colors</title>
</head>
<body>
<div class="col">
<h2 data-type="copy"></h2>
<button data-type="lock">
<i class="fa-solid fa-lock-open" data-type="lock"></i>
</button>
</div>
<div class="col">
<h2 data-type="copy"></h2>
<button data-type="lock">
<i class="fa-solid fa-lock-open" data-type="lock"></i>
</button>
</div>
<div class="col">
<h2 data-type="copy"></h2>
<button data-type="lock">
<i class="fa-solid fa-lock-open" data-type="lock"></i>
</button>
</div>
<div class="col">
<h2 data-type="copy"></h2>
<button data-type="lock">
<i class="fa-solid fa-lock-open" data-type="lock"></i>
</button>
</div>
<div class="col">
<h2 data-type="copy"></h2>
<button data-type="lock">
<i class="fa-solid fa-lock-open" data-type="lock"></i>
</button>
</div>
<footer>
<div>
Made with ❤️ by <a style="color:rgb(83, 186, 49)" href="https://github.com/Karenin"
target="_blank">Karenin</a>
<button type="button" id="footerButton" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
инструкция
</button>
</div>
<modal id="exampleModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="exampleModalLabel">
<h3 class="modal-title" id="exampleModalLabel">Rutrends - Colors</h3>
</div>
<div class="modal-body">
<h1>Инструкция и описание генератора цветов</h1>
<quote>
<p>Это приложение,
<abbr title="Web Application">(WA)</abbr>предоставляет широкий спектр цветов и различные
инструменты для настройки
</p>
</quote>
<br>
<h2>Инструкция:</h2>
<br <ul>
<li>
<p>Для того, чтобы сгенерировать цвета, нажмите на кнопку "SPACE (ПРОБЕЛ)"</p>
</li>
<li>
клавиша <i class="fa-solid fa-lock-open"></i> заблокирует понравившийся цвет , после чего
можете продолжить генерацию
</li>
<li>
Нажав на название цвета <b>#000000 </b> , вы сможете скопировать<i
class="fa-solid fa-copy"></i> цвет в буфер обмена </p>
</li>
<li>
клавиша <i class="fa-solid fa-lock"></i> отключает блокировку понравившегося цвета
</li>
</ul>
<br>
<h2>Наслаждайтесь использованием генератора цветов и создавайте красивые цветовые комбинации!
</h2>
<div class="modal-footer">
<br>
<p> Создано как проект, в качестве обучения разработке, для моего портфолио. Репозиторий
доступен на <a href="https://www.github.com/karenin">GitHub</p>
</a>
<br>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save screenshot</button>
</div>
</div>
</div>
</modal>
<!-- Optional JavaScript; choose one of the two! -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="index.js"></script>
<script src="app.js"></script>
</footer>
</body>
</html>