+ * {
+ * "alternatives": [
+ * { "text": "one two three four five", "confidence": 0.97 },
+ * { "text": "one two three for five", "confidence": 0.03 },
+ * ]
+ * }
+ *
+ *
+ * @param max_alternatives - maximum alternatives to return from recognition results
+ */
+void vosk_recognizer_set_max_alternatives(VoskRecognizer *recognizer, int max_alternatives);
+
+
+/** Enables words with times in the output
+ *
+ *
+ * "result" : [{
+ * "conf" : 1.000000,
+ * "end" : 1.110000,
+ * "start" : 0.870000,
+ * "word" : "what"
+ * }, {
+ * "conf" : 1.000000,
+ * "end" : 1.530000,
+ * "start" : 1.110000,
+ * "word" : "zero"
+ * }, {
+ * "conf" : 1.000000,
+ * "end" : 1.950000,
+ * "start" : 1.530000,
+ * "word" : "zero"
+ * }, {
+ * "conf" : 1.000000,
+ * "end" : 2.340000,
+ * "start" : 1.950000,
+ * "word" : "zero"
+ * }, {
+ * "conf" : 1.000000,
+ * "end" : 2.610000,
+ * "start" : 2.340000,
+ * "word" : "one"
+ * }],
+ *
+ *
+ * @param words - boolean value
+ */
+void vosk_recognizer_set_words(VoskRecognizer *recognizer, int words);
+
+/** Like above return words and confidences in partial results
+ *
+ * @param partial_words - boolean value
+ */
+void vosk_recognizer_set_partial_words(VoskRecognizer *recognizer, int partial_words);
+
+/** Set NLSML output
+ * @param nlsml - boolean value
+ */
+void vosk_recognizer_set_nlsml(VoskRecognizer *recognizer, int nlsml);
+
+
+/** Accept voice data
+ *
+ * accept and process new chunk of voice data
+ *
+ * @param data - audio data in PCM 16-bit mono format
+ * @param length - length of the audio data
+ * @returns 1 if silence is occured and you can retrieve a new utterance with result method
+ * 0 if decoding continues
+ * -1 if exception occured */
+int vosk_recognizer_accept_waveform(VoskRecognizer *recognizer, const char *data, int length);
+
+
+/** Same as above but the version with the short data for language bindings where you have
+ * audio as array of shorts */
+int vosk_recognizer_accept_waveform_s(VoskRecognizer *recognizer, const short *data, int length);
+
+
+/** Same as above but the version with the float data for language bindings where you have
+ * audio as array of floats */
+int vosk_recognizer_accept_waveform_f(VoskRecognizer *recognizer, const float *data, int length);
+
+
+/** Returns speech recognition result
+ *
+ * @returns the result in JSON format which contains decoded line, decoded
+ * words, times in seconds and confidences. You can parse this result
+ * with any json parser
+ *
+ *
+ * {
+ * "text" : "what zero zero zero one"
+ * }
+ *
+ *
+ * If alternatives enabled it returns result with alternatives, see also vosk_recognizer_set_max_alternatives().
+ *
+ * If word times enabled returns word time, see also vosk_recognizer_set_word_times().
+ */
+const char *vosk_recognizer_result(VoskRecognizer *recognizer);
+
+
+/** Returns partial speech recognition
+ *
+ * @returns partial speech recognition text which is not yet finalized.
+ * result may change as recognizer process more data.
+ *
+ *
+ * {
+ * "partial" : "cyril one eight zero"
+ * }
+ *
+ */
+const char *vosk_recognizer_partial_result(VoskRecognizer *recognizer);
+
+
+/** Returns speech recognition result. Same as result, but doesn't wait for silence
+ * You usually call it in the end of the stream to get final bits of audio. It
+ * flushes the feature pipeline, so all remaining audio chunks got processed.
+ *
+ * @returns speech result in JSON format.
+ */
+const char *vosk_recognizer_final_result(VoskRecognizer *recognizer);
+
+
+/** Resets the recognizer
+ *
+ * Resets current results so the recognition can continue from scratch */
+void vosk_recognizer_reset(VoskRecognizer *recognizer);
+
+
+/** Releases recognizer object
+ *
+ * Underlying model is also unreferenced and if needed released */
+void vosk_recognizer_free(VoskRecognizer *recognizer);
+
+/** Set log level for Kaldi messages
+ *
+ * @param log_level the level
+ * 0 - default value to print info and error messages but no debug
+ * less than 0 - don't print info messages
+ * greather than 0 - more verbose mode
+ */
+void vosk_set_log_level(int log_level);
+
+/**
+ * Init, automatically select a CUDA device and allow multithreading.
+ * Must be called once from the main thread.
+ * Has no effect if HAVE_CUDA flag is not set.
+ */
+void vosk_gpu_init();
+
+/**
+ * Init CUDA device in a multi-threaded environment.
+ * Must be called for each thread.
+ * Has no effect if HAVE_CUDA flag is not set.
+ */
+void vosk_gpu_thread_init();
+
+/** Creates the batch recognizer object
+ *
+ * @returns model object or NULL if problem occured */
+VoskBatchModel *vosk_batch_model_new(const char *model_path);
+
+/** Releases batch model object */
+void vosk_batch_model_free(VoskBatchModel *model);
+
+/** Wait for the processing */
+void vosk_batch_model_wait(VoskBatchModel *model);
+
+/** Creates batch recognizer object
+ * @returns recognizer object or NULL if problem occured */
+VoskBatchRecognizer *vosk_batch_recognizer_new(VoskBatchModel *model, float sample_rate);
+
+/** Releases batch recognizer object */
+void vosk_batch_recognizer_free(VoskBatchRecognizer *recognizer);
+
+/** Accept batch voice data */
+void vosk_batch_recognizer_accept_waveform(VoskBatchRecognizer *recognizer, const char *data, int length);
+
+/** Set NLSML output
+ * @param nlsml - boolean value
+ */
+void vosk_batch_recognizer_set_nlsml(VoskBatchRecognizer *recognizer, int nlsml);
+
+/** Closes the stream */
+void vosk_batch_recognizer_finish_stream(VoskBatchRecognizer *recognizer);
+
+/** Return results */
+const char *vosk_batch_recognizer_front_result(VoskBatchRecognizer *recognizer);
+
+/** Release and free first retrieved result */
+void vosk_batch_recognizer_pop(VoskBatchRecognizer *recognizer);
+
+/** Get amount of pending chunks for more intelligent waiting */
+int vosk_batch_recognizer_get_pending_chunks(VoskBatchRecognizer *recognizer);
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif /* VOSK_API_H */
diff --git a/src-tauri/vosk_build.py b/src-tauri/vosk_build.py
new file mode 100644
index 0000000..5a87fb2
--- /dev/null
+++ b/src-tauri/vosk_build.py
@@ -0,0 +1,36 @@
+# Simple python script used to
+# copy Vosk libraries to the "target" directory
+# after Rust build
+
+# Note that Rust build should be run via "cargo make
+ 
+
+
+
+
+
+ JARVIS
+v{app_version} beta
+
+
+
+
\ No newline at end of file
diff --git a/src/components/elements/HDivider.svelte b/src/components/elements/HDivider.svelte
new file mode 100644
index 0000000..5c8cea9
--- /dev/null
+++ b/src/components/elements/HDivider.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/elements/SearchBar.svelte b/src/components/elements/SearchBar.svelte
new file mode 100644
index 0000000..3e48b10
--- /dev/null
+++ b/src/components/elements/SearchBar.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/elements/Stats.svelte b/src/components/elements/Stats.svelte
new file mode 100644
index 0000000..78f4894
--- /dev/null
+++ b/src/components/elements/Stats.svelte
@@ -0,0 +1,366 @@
+
+
+
+
+
+
diff --git a/src/css/main.scss b/src/css/main.scss
new file mode 100644
index 0000000..50f5246
--- /dev/null
+++ b/src/css/main.scss
@@ -0,0 +1,2738 @@
+$prim-font: "Roboto", sans-serif;
+$sec-font: "Roboto Condensed", sans-serif;
+
+html, body {
+ overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+ width: 15px;
+}
+
+::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+::-webkit-scrollbar-thumb {
+ background: -webkit-gradient(linear,left top,left bottom,from(#999),to(#27292F));
+ background: linear-gradient(to bottom,#999,#27292F);
+}
+
+::selection {
+ background: #FF8901!important; /* WebKit/Blink Browsers */
+ color: white!important;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)!important;
+}
+::-moz-selection {
+ background: #FF8901!important; /* WebKit/Blink Browsers */
+ color: white!important;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)!important;
+}
+
+/*
+ * HEADER
+ */
+
+#header {
+ height: 80px;
+ background-color: #0c1013;
+ box-shadow: 0 0 19px 2px rgba(0, 0, 0, 0.91);
+ position: relative;
+ z-index: 100;
+ text-align: justify;
+
+ display: flex;
+ justify-content: space-between;
+
+ .logo {
+ margin-top: 12px;
+
+ & > a > img {
+ width: 57px;
+ display: inline-block;
+ transition: .5s opacity ease-in;
+
+ &:hover {
+ opacity: .8;
+ }
+ }
+
+ & > div {
+ display: inline-block;
+ margin-left: 13px;
+ margin-top: 8px;
+ vertical-align: top;
+ }
+
+ h1 {
+ color: #ffffff;
+ font-family: $sec-font;
+ font-size: 20px;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 0.1px;
+ margin: 0;
+
+ & > a {
+ color: white;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
+ text-decoration: none;
+
+ &:hover {
+ color: #FF0000;
+ }
+ }
+ }
+
+ h2 {
+ color: #888;
+ font-family: $sec-font;
+ font-size: 14px;
+ font-weight: bold;
+ letter-spacing: 0.1px;
+ margin-top: 2px;
+ letter-spacing: -0.01px;
+ }
+ }
+
+ .top-menu {
+ vertical-align: top;
+ margin-top: 18px;
+ margin-left: 50px;
+
+ & > ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ & > li {
+ display: inline-block;
+ position: relative;
+
+ &:not(:first-child) {
+ margin-left: 20px;
+ }
+
+ & > a {
+ display: inline-block;
+ text-decoration: none;
+ color: #c6c6c6;
+ font-family: $sec-font;
+ font-size: 16px;
+ text-transform: uppercase;
+ font-weight: bold;
+ transition: .2s color;
+ padding: 10px 0;
+
+ & > svg {
+ height: 20px;
+ width: 20px;
+ vertical-align: middle;
+ margin-bottom: 4px;
+ margin-right: 3px;
+ margin-left: 3px;
+ }
+
+ &:hover, &.active {
+ color: #8AC832;
+
+ &:after {
+ -webkit-transform: scaleX(1);
+ -ms-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: left;
+ -ms-transform-origin: left;
+ transform-origin: left;
+ }
+ }
+
+ &:after {
+ content: "";
+ display: block;
+ height: 3px;
+ border-radius: 10px;
+ -webkit-transform: scaleX(0);
+ -ms-transform: scaleX(0);
+ transform: scaleX(0);
+ transition: .4s -webkit-transform;
+ transition: .4s transform;
+ -webkit-transform-origin: 100% 0;
+ -ms-transform-origin: 100% 0;
+ transform-origin: 100% 0;
+ background: #8AC832;
+ opacity: 0.90;
+ position: absolute;
+ bottom: 5px;
+ left: 0;
+ width: 100%;
+ z-index: 333;
+ }
+
+ }
+ }
+ }
+ }
+}
+
+.search {
+ display: block;
+ margin: 20px 0;
+ text-align: center;
+
+ & > form {
+ position: relative;
+
+ & > input {
+ width: 380px;
+ height: 38px;
+ box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(6, 6, 6, 0.99);
+ background-color: #0f1012;
+ outline: none;
+
+ color: #D1D1D1;
+ font-family: $sec-font;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 70.58px;
+ padding-left: 20px;
+ padding-right: 45px;
+ padding-right: 45px;
+
+ &::placeholder {
+ color: #676767;
+ font-weight: 400;
+ }
+
+ &:focus + button + small {
+ opacity: .3;
+ }
+ }
+
+ & > button {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ background: none;
+ border: none;
+ right: 35px;
+ top: 4px;
+ width: 30px;
+ height: 30px;
+ opacity: 1;
+ transition: .3s opacity;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 110%;
+ height: 110%;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAAC4ElEQVRIiaXWX4hXRRTA8c/etkwy+gNBEVRCmxFl1ouZGlEWFUQZPfVQRLAjKvSylEFBf16EiChJOxhLQY8RtA+lRZtpRv8ohUJQNMiHooKyojZNtoeZy95+/fZ3r+uBy5xz5pzznYGZc2dodHRUB1lVviUYwXkYwk84iK8wGRHb2goNtQDXYxRXdVkV9mFrRDx/osCl2IxrG75PsAv75Z1NyzsdwQosb8R+jXURsbML8AG82rDH8TI+77eyiAAppSVYg9SYXhsRW5rxVU/+Qw3Yd7ip+PrCesB7ImKNvNMDxb05pbR+NuBSvFL0L7EYH7SB+oA/Lrm7i2tTSmlVL3AYbxf9eyzDkROFNaBTWCmfYJhIKc1rAh/DuUW/HUfnCmtAp3FrMefjmRp4Kh4tE+PYO6DO6fKp7Ao9hJeKOZZSWlBhNc4ozidbaqyUr8W4/x+42aSuOYT7KtxZHF/gcEvyvDI+KF/yFW20iPgZk8W8o8KVxZjsn/IfOdbQL8OulNLTHfJ2lHFRhYuKcbB/bKs8kVLanVK6ZkBMfS8vqLCgGL/NEQjX48MB8/UVm1/hz2KceRLAfbh3wHxde2pYbmFnY+EcYVsiYm1LzKVl/KHCN8W4sUPxUxr6j7i7AwxuKOP+ykxLW4bzWxKnyziBRXirjZRSOstMx9lW4Q38XRyPt+R/hOtwF35tgzVqDhX99QpTeK441pWVzya/49OOICmlCzFWzE0RcaRuT0/hj6Jv71qwg7xbxuNKv66BR820uIuxE6edDCmltB1XFPOeiPiL/B+sZQcexgtyk96L+3X42/eAFuM1+YUHGyJiop4f7ol/Ef/Iv5TL8VlZQMiXexBoRH7hjTXcj0TEs8242V5tNxdo8wC9J5/Sfq+25bitEfut/Gp7p7dw7w5reV/e4Yay6oW4pXyD5DC2YmNEHOsXMBuwlo3lWy3v+mpcgnPku/WL3Br3yA+uNyPi+KCC/wJQGMGINsMjCwAAAABJRU5ErkJggg==");
+ background-repeat: no-repeat;
+ background-size: 75%;
+ background-position: center center;
+ transition: all .3s;
+ }
+
+ &:hover {
+ &::before {
+ cursor: pointer;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABN2lDQ1BBZG9iZSBSR0IgKDE5OTgpAAAokZWPv0rDUBSHvxtFxaFWCOLgcCdRUGzVwYxJW4ogWKtDkq1JQ5ViEm6uf/oQjm4dXNx9AidHwUHxCXwDxamDQ4QMBYvf9J3fORzOAaNi152GUYbzWKt205Gu58vZF2aYAoBOmKV2q3UAECdxxBjf7wiA10277jTG+38yH6ZKAyNguxtlIYgK0L/SqQYxBMygn2oQD4CpTto1EE9AqZf7G1AKcv8ASsr1fBBfgNlzPR+MOcAMcl8BTB1da4Bakg7UWe9Uy6plWdLuJkEkjweZjs4zuR+HiUoT1dFRF8jvA2AxH2w3HblWtay99X/+PRHX82Vun0cIQCw9F1lBeKEuf1UYO5PrYsdwGQ7vYXpUZLs3cLcBC7dFtlqF8hY8Dn8AwMZP/fNTP8gAAAAJcEhZcwAACxMAAAsTAQCanBgAAAXRaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDQtMjNUMDQ6MzE6NTgrMDU6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA0LTIzVDA0OjM0OjI3KzA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA0LTIzVDA0OjM0OjI3KzA1OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowZDA5NTdiMi0zYmM3LTcxNDItODcyNS01ODA3MjA2NTFlYTIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoxM2UwZWYxNi03OGM0LTE2NGMtODc1Mi0xYjY5OTQ1OTczMGMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5YjNkZTI4Yy1iOTBmLTNjNDUtYjAwNS1kNTExOTE3ZDhkNzIiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjliM2RlMjhjLWI5MGYtM2M0NS1iMDA1LWQ1MTE5MTdkOGQ3MiIgc3RFdnQ6d2hlbj0iMjAyMy0wNC0yM1QwNDozMTo1OCswNTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowZDA5NTdiMi0zYmM3LTcxNDItODcyNS01ODA3MjA2NTFlYTIiIHN0RXZ0OndoZW49IjIwMjMtMDQtMjNUMDQ6MzQ6MjcrMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Wh528AAAC7UlEQVRIiaXWX4gXVRTA8c9v2jLJ6A8ERVAJbUakTr2YqRFl0QRRRk89FBGYqNDLUgY51PQiRERJWhhLQY8RtA+OFm2mGf2RGqEQDAvyoaigrKhNk+3h3mGnX7/9zbgeGO45555zvvfCvWdub/POpTrI6vilGMVF6OEnHMEXmCyyaldboV4LcCPWYnGXVeEQdhRZ9fypApdhG65v+D7GPhwWdjYt7HQUK7GiEfslNhRZtbcL8EG81rDH8TI+G7SyIqtAXqYp1uGRxvT6Iqu2N+OTvvyHG7DvcEv0DYT1gasiq9YJO/06urflZbpxNuAyvBr1z7EE77eBBoA/irn7o2trXqar+4Ej2Bn177Ecx04V1oBOYZVwgmEiL9N5TeATuDDqGY7PFdaATuP2aM7HMzXwTDweJ8ZxcEids4VT2RX6DV6K5lhepgsSrME50flUS41VwrUY9/8DN5vUNXu4P8Fd0XEAR1uS58XxIeGSr2yjFVn1MyajeWeCa6MxOTjlP3KioV+FfXmZFh3y9sRxUYLLonFkcGyrbM7LdH9eptcNianv5SUJFkTjtzkC4UZ8MGS+vmLzE/wZjXNPA3gI9w2Zr2tPjQgt7HwsnCNse5FV61tirozjDwm+isbNHYqf0dB/xD0dYHBTHA8nZlraclzckjgdxwkswtttpLxMzzPTcXYleBN/R8eTLfkf4gbcjV/bYI2avai/kWAKz0XHhrjy2eR3fNIRJC/TSzEWza1FVh2r29PT+CPqu7sW7CDvxPGk2K9r4HEzLe5y7MVZp0PKy3Q3ronmvUVW/UX4D9ayB4/iBaFJH8QDOvzt+0BL8LrwwoNNRVZN1PMjffEv4h/hl3I1Po0LeEW43MNAo8ILb6zhfqzIqmebcbO92m6N0OYBelc4pYNebStwRyP2W+HVVvYX7t9hLe8JO9wUV70Qt8VvmBzFDmwpsurEoIDZgLVsid8aYddLcQUuEO7WL0JrrIQH11tFVp0cVvBfVZDA+HDoxOQAAAAASUVORK5CYII=");
+ }
+ }
+ }
+
+ & > small {
+ position: absolute;
+ font-family: $sec-font;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1.7em;
+ top: 8px;
+ right: 75px;
+ background-color: #D1D1D1;
+ color: #080C0F;
+ padding: 0 7px;
+ padding-top: 2px;
+ border-radius: 4px;
+ opacity: 0;
+ transition: opacity .3s;
+ cursor: default;
+ }
+ }
+
+ &.active {
+ small {
+ opacity: .3;
+ }
+ }
+}
+
+/*
+ * CONTENT
+ */
+
+#content {
+ margin-top: 52px;
+
+ & > .inner {
+ min-height: 1000px;
+ background-image: url(media/images/decor.png);
+ background-repeat: no-repeat;
+ background-size: 100%;
+
+ & > section.materials {
+ padding: 36px;
+
+ & > header {
+ margin-top: 25px;
+
+ & > h1 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ color: #d1d1d1;
+ font-family: $sec-font;
+ font-size: 23px;
+ font-weight: bold;
+ letter-spacing: 0.1px;
+ position: relative;
+
+ & + sup {
+ font-family: $sec-font;
+ margin-left: 10px;
+ color: silver;
+ background: black;
+ padding: 3px 7px;
+ border-radius: 3px;
+ opacity: .5;
+ top: 0;
+ transition: .3s opacity;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 100%;
+ height: 3px;
+ background-color: #ff8a00;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ }
+
+ &.with-icon {
+ margin-bottom: 5px;
+
+ & > img {
+ vertical-align: middle;
+ margin-right: 10px;
+ }
+
+ & > span {
+ vertical-align: middle;
+ }
+
+ &::before {
+ bottom: -10px;
+ }
+ }
+ }
+ }
+
+ & > article {
+ display: table;
+ margin: 15px 0;
+ font-size: 0;
+ position: relative;
+
+ .toolkit {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ z-index: 10;
+ font-size: 20px;
+ opacity: 0;
+ transition: .3s opacity;
+
+ & > a {
+ text-decoration: none;
+ opacity: .3;
+ transition: .3s opacity;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+
+ &:hover {
+ & > .toolkit {
+ opacity: 1;
+ }
+ }
+
+ & > .poster {
+ display: inline-block;
+ vertical-align: top;
+ width: 372px;
+ min-height: 250px;
+ overflow: hidden;
+ background-color: black;
+ border-radius: 3px 0 0 3px;
+
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+
+ & > img {
+ max-width: 372px;
+ border-radius: 3px 0 0 3px;
+ vertical-align: middle;
+ }
+ }
+
+ & > .details {
+ display: table-cell;
+ vertical-align: top;
+ background-color: #080c0f;
+ min-height: 250px;
+ /*width: calc(100% - 372px);*/
+ width: 100%;
+ border-radius: 0 3px 3px 0;
+ font-size: 16px;
+ padding: 15px 22px;
+ position: relative;
+
+ & > h1 {
+ display: inline-block;
+ text-shadow: 0 0 4px rgba(55, 55, 55, 0.54);
+ font-family: $sec-font;
+ font-size: 21px;
+ padding: 0;
+ margin: 0;
+ font-weight: normal;
+ font-weight: 600;
+
+ & > a {
+ color: #fea431;
+ color: #FFC14E;
+ text-decoration: none;
+ display: inline-block;
+ opacity: 1;
+ transition: .1s opacity;
+ position: relative;
+ background: -webkit-gradient(linear,left top,right top,from(#fea431),to(#ff8a00));
+ background: linear-gradient(to right,#fea431,#ff8a00);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone;
+ text-shadow: none;
+
+ &:hover {
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone;
+ text-shadow: none;
+ }
+ }
+ }
+
+ & > .meta {
+ margin-top: 10px;
+
+ .status {
+ &.over5k {
+ color: mediumslateblue;
+ background-image: url(images/bg/bg10.gif);
+ background-position: center center;
+ background-size: 50%;
+ background-repeat: no-repeat;
+ }
+
+ &.over10k {
+ color: limegreen;
+ background-image: url(images/bg/bg24.gif);
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+
+ &.over100k {
+ color: goldenrod;
+ font-weight: bold;
+ font-size: 20px;
+ background-image: url(images/bg/bg11.gif);
+ background-position: center center;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+ position: relative;
+ top: -2px;
+ }
+ }
+
+ & > .pubdate {
+ display: inline-block;
+ vertical-align: top;
+ color: #888888;
+ font-family: $sec-font;
+ font-size: 16px;
+ font-weight: 400;
+ margin-right: 19px;
+ }
+
+ & > .cat {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 5px;
+ color: #888888;
+ font-family: $sec-font;
+ font-size: 16px;
+ font-weight: 400;
+ margin-right: 17px;
+ opacity: .9;
+ transition: .3s opacity;
+
+ background-position: center;
+ background-size: 17px;
+ background-repeat: no-repeat;
+ background-position: left center;
+
+ & > a {
+ color: inherit;
+ text-decoration: none;
+ transition: .2s color;
+
+ &:hover {
+ color: deepskyblue;
+ background-image: url(images/bg/bg8.gif);
+ }
+ }
+
+ &.icon {
+ & > a > img {
+ vertical-align: middle;
+ margin-right: 3px;
+ }
+ }
+ }
+
+ & > .downloads {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 5px;
+ color: #888888;
+ font-family: $sec-font;
+ font-size: 16px;
+ font-weight: 400;
+ padding-left: 20px;
+ opacity: .7;
+ transition: .3s opacity;
+
+ background-position: center;
+ background-size: 17px;
+ background-repeat: no-repeat;
+ background-position: left -2px;
+
+ & > a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover {
+ color: orange;
+ }
+ }
+ }
+ }
+
+ & > blockquote {
+ font-family: $prim-font;
+ color: #88919d;
+ font-size: 15px;
+ font-weight: normal;
+ line-height: 20px;
+ padding: 0;
+ margin: 0;
+ margin-top: 12px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 5;
+ -webkit-box-orient: vertical;
+ }
+
+ & > .actions {
+ position: absolute;
+ right: 22px;
+ bottom: 15px;
+ font-size: 0;
+
+ & > .btn {
+ &:first-child {
+ border-radius: 3px 0 0 3px;
+ margin-right: 1px;
+ opacity: .7;
+
+ & + .btn {
+ border-radius: 0 3px 3px 0;
+ }
+ }
+
+ &:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ margin-right: 1px;
+ opacity: .7;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ &:last-child {
+ border-radius: 0 3px 3px 0;
+ margin-right: 1px;
+ opacity: .7;
+
+ & + .btn {
+ border-radius: 0 3px 3px 0;
+ }
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ &:only-child {
+ border-radius: 3px!important;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ .meta > .cat {
+ opacity: 1;
+ }
+
+ .meta > .downloads {
+ opacity: 1;
+ }
+
+ .actions > .btn:first-child {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 1364px) {
+ #content>.inner>section.materials>header>h1 {
+ font-size: 26px;
+ }
+
+ #content>.inner>section.materials>article>.details>h1 {
+ font-size: 25px;
+ }
+
+ #content>.inner>section.materials>article>.details>blockquote {
+ font-size: 17px;
+ line-height: 24px;
+ -webkit-line-clamp: 4;
+ }
+
+ .btn {
+ font-size: 16px!important;
+ }
+
+ #paginator>header>h1 {
+ font-size: 30px!important;
+ }
+
+ #paginator>.paginator-wrapper>.paginator-box {
+ transform: scale(1.5);
+ margin-top: 15px;
+ }
+
+ #paginator>.paginator-wrapper>small:first-child {
+ display: none;
+ }
+
+ #paginator>.paginator-wrapper>small:last-child {
+ display: none;
+ }
+}
+
+@media (max-width: 991px) {
+ #wrapper {
+ overflow-y: hidden;
+ }
+ #content>.inner>section.materials>article>.details>h1 {
+ font-size: 30px;
+ margin-top: 15px;
+ margin-bottom: 10px;
+ }
+
+ #content>.inner>section.materials>article>.details>blockquote {
+ -webkit-line-clamp: initial;
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ #content>.inner>section.materials>article>.poster {
+ display: block;
+ width: 100%;
+ min-height: auto;
+ max-height: 650px;
+
+ & > img {
+ max-width: none;
+ width: inherit!important;
+ }
+ }
+
+ #content>.inner>section.materials>article>.details {
+ display: block;
+ }
+
+ #content>.inner>section.materials>article>.details>.actions {
+ position: static;
+ text-align: center;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ display: none;
+ }
+
+ #content>.inner>section.materials>article {
+ display: block;
+ }
+
+ #content>.inner>section.materials>article>.details>.meta>.cat {
+ display: none;
+ }
+
+ #content>.inner>section.materials {
+ padding: 0px;
+ }
+}
+
+#paginator {
+ text-align: center;
+
+ & > header {
+ margin-bottom: 20px;
+
+ & > h1 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ color: #d1d1d1;
+ font-family: $sec-font;
+ font-size: 23px;
+ font-weight: bold;
+ letter-spacing: 0.1px;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 100%;
+ height: 3px;
+ background-color: #86BF45;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ }
+ }
+ }
+
+ & > .paginator-wrapper {
+ margin-bottom: 150px;
+ position: relative;
+
+ & > small {
+ display: inline-block;
+ opacity: 0.75;
+ color: #d3d3d3;
+ font-family: $sec-font;
+ font-size: 15px;
+ font-weight: 700;
+ vertical-align: middle;
+
+ &:first-child {
+ margin-right: 15px;
+ color: #88DB47;
+ }
+
+ &:last-child {
+ margin-left: 15px;
+ }
+ }
+
+ & > .paginator-box {
+ display: inline-block;
+ background: black;
+ width: 500px;
+ height: 50px;
+ border-radius: 2px;
+ border: 1px solid #070808;
+ background-color: #171A20;
+ vertical-align: middle;
+ overflow: hidden;
+ position: relative;
+
+ /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); */
+
+ & > .pb-start, & > .pb-end {
+ height: 100%;
+
+ & > nav {
+ & > ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ & > li {
+ display: inline-block;
+ line-height: 43px;
+
+ & > a {
+ position: relative;
+ display: inline-block;
+ width: 35px;
+ height: 35px;
+ line-height: 33px;
+ border-radius: 1px;
+ border: 1px solid #070808;
+ border-radius: 3px;
+ background-color: #171A20;
+ background-image: linear-gradient(to top, #1a1c24 0%, #20232a 100%);
+ box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.7);
+ text-shadow: 0px 0px 5px #000000, 0px 0px 5px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000;
+ color: #D5DAE3;
+ font-family: $sec-font;
+ font-size: 15px;
+ font-weight: 700;
+ text-decoration: none;
+ text-align: center;
+
+ &.current {
+ color: #8AC547;
+ cursor: not-allowed;
+ opacity: .5;
+ }
+
+ &.last {
+ width: auto;
+ padding: 0 15px;
+ }
+
+ &:not(.current):hover {
+ background-image: linear-gradient(to top, #20222A 0%, #2B2E35 100%);
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ border-left: 1px solid rgba(150, 150, 150, .1);
+ border-top: 1px solid rgba(150, 150, 150, .1);
+ border-right: 1px solid rgba(100, 100, 100, .1);
+ border-bottom: 1px solid rgba(100, 100, 100, .1);
+ }
+
+ &.chosen {
+ color: #8AC547;
+ cursor: not-allowed;
+ opacity: .5;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ & > .pb-start {
+ background-color: #171a20;
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+ text-align: left;
+ padding-left: 10px;
+ position: absolute;
+ z-index: 10;
+ padding-right: 10px;
+ left: 0;
+
+ &::before {
+ content: "";
+ position: absolute;
+ right: -10px;
+ top: -70%;
+ height: 200%;
+ width: 50px;
+ background-image: linear-gradient(to bottom, #13151A 30%, #16191E 70%, #13151A 100%);
+ border-right: 2px solid #456789;
+ transform: rotate(25deg);
+ }
+
+ &.pb-single {
+ position: static;
+ text-align: center;
+
+ &::before {
+ display: none;
+ }
+ }
+ }
+
+ & > .pb-end {
+ background-color: #0E131A;
+ text-align: right;
+ padding-right: 10px;
+ }
+ }
+ }
+}
+
+/*
+ * SIDEBAR
+ */
+
+#sidebar, #sidebar-mobile {
+
+ &.col-s {
+ &::after {
+ content: " ";
+ box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.54);
+ background-color: #1f2326;
+ position: fixed;
+
+ top: 0;
+ width: 328px;
+ height: 100vh;
+ }
+ }
+
+ & > .inner {
+ z-index: 9;
+
+ & > section {
+ position: relative;
+ z-index: 2;
+ padding: 18px;
+
+ &:last-child {
+ margin-bottom: 50px;
+ }
+
+ & > header {
+ margin-top: 25px;
+
+ & > h1 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ color: #d1d1d1;
+ font-family: $sec-font;
+ font-size: 20px;
+ font-weight: bold;
+ letter-spacing: 0.1px;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 100%;
+ height: 3px;
+ background-color: #ff8a00;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ }
+ }
+ }
+
+ &.hollow {
+ padding: 0;
+
+ & > header {
+ padding: 18px;
+ }
+ }
+
+ &.default {
+ & > header {
+ margin-bottom: 18px;
+ }
+ }
+
+ }
+
+ & > .side-menu {
+ padding: 0;
+
+ & > header {
+ padding: 18px;
+ }
+
+ & > nav {
+ background-color: rgba(0, 0, 0, .05);
+
+ & > ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ & > li {
+ & > a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ text-align: left;
+ padding: 0 18px;
+ text-transform: uppercase;
+ font-family: $sec-font;
+ font-size: 16px;
+ font-weight: 400;
+ position: relative;
+
+ &:hover {
+ background-color: rgba(11,12,14,0.75);
+ }
+
+ &.with-icon {
+ padding-left: 54px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ & > .icon-fg {
+ display: block;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ position: absolute;
+ left: 18px;
+ top: 12.5px;
+ z-index: 10;
+
+ & > .icon-bg {
+ display: block;
+ width: 32px;
+ height: 32px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ position: absolute;
+ left: -6px;
+ top: -6px;
+ opacity: 0.3;
+ z-index: 5;
+ filter: blur(3px);
+ transition: .5s all;
+ }
+ }
+
+ &:hover {
+
+ & > .icon-fg {
+ & > .icon-bg {
+ filter: blur(1px);
+ }
+ }
+ }
+ }
+ }
+
+ &.active > a {
+ background-color: rgba(11,12,14,0.75);
+ }
+
+ span.emoji-ic {
+ display: inline-block;
+ width: 20px;
+ text-align: center;
+ margin-right: 5px;
+ }
+
+ &.with-dropdown {
+
+ & > a {
+ &::after {
+ content: "";
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ background-color: #434648;
+ opacity: .3;
+ border-radius: 50%;
+ right: 18px;
+ top: 18px;
+ }
+ }
+
+ & > ul.dropdown {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ box-shadow: inset 0 1px 10px rgba(0, 0, 0, .3);
+ display: none;
+
+ & > li {
+ & > a {
+ color: rgba(255, 255, 255, .9);
+ text-decoration: none;
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ text-align: left;
+ padding: 0 18px;
+ text-transform: uppercase;
+ font-family: $sec-font;
+ font-size: 15px;
+ font-weight: 400;
+ position: relative;
+
+ &:hover {
+ background-color: rgba(11,12,14,0.5);
+ color: #FEA431;
+ }
+
+ & > small {
+ position: absolute;
+ right: 18px;
+ opacity: .5;
+
+ &.warning {
+ opacity: .7;
+ color: #EFCE49;
+ }
+ }
+
+ &.with-icon {
+ padding-left: 54px;
+
+ & > .icon-fg {
+ display: block;
+ width: 18px;
+ height: 18px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ position: absolute;
+ left: 19px;
+ top: 12.5px;
+ z-index: 10;
+
+
+ & > .icon-bg {
+ display: block;
+ width: 25px;
+ height: 25px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ position: absolute;
+ left: -4px;
+ top: -4px;
+ opacity: 0.3;
+ z-index: 5;
+ filter: blur(3px);
+ transition: .5s all;
+
+ }
+ }
+
+ &:hover {
+
+ & > .icon-fg {
+ & > .icon-bg {
+ filter: blur(1px);
+ }
+ }
+ }
+ }
+ }
+
+ &.active {
+ & > a {
+ background-color: rgba(11,12,14,0.5);
+ color: #FEA431;
+ }
+ }
+ }
+ }
+
+ &.dropdown-opened {
+ & > a {
+ background-color: rgba(11,12,14,0.75);
+ }
+
+ & > ul.dropdown {
+ /*display: block;*/
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ }
+}
+
+#sidebar-mobile {
+ section.special {
+ margin-top: 30px;
+
+ & > .special-top-tip {
+ position: relative;
+ width: 285px;
+ height: 100px;
+ margin: 0 auto;
+ border-radius: 5px;
+ text-shadow: 0 0 4px rgba(55, 55, 55, 0.54);
+ color: #b6b6b6;
+ font-family: $prim-font;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+ padding: 15px 15px;
+ text-align: center;
+ z-index: 10;
+
+ background-color: #ff8a00;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: -o-linear-gradient(left,#ff8a00,#da1b60);
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ color: white!important;
+
+ & > a {
+ color: gold!important;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
+ text-decoration: none;
+ }
+
+ &::before {
+ content: "";
+ width: 0;
+ height: 0;
+ border-left: 15px solid transparent;
+ border-right: 15px solid transparent;
+ border-top: 15px solid #ED5430;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -15px;
+ margin: auto;
+ }
+ }
+
+ & > .special-bottom-tip {
+ position: relative;
+ width: 200px;
+ height: 55px;
+ margin: 0 auto;
+ border-radius: 5px;
+ background-color: #0b0d10;
+ text-shadow: 0 0 4px rgba(55, 55, 55, 0.54);
+ color: #b6b6b6;
+ font-family: $prim-font;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+ padding: 8px 15px;
+ text-align: center;
+ z-index: 10;
+ margin-top: 20px;
+
+ & > a {
+ color: #fc7234;
+ text-decoration: none;
+ }
+ }
+
+ & > .special-copyright {
+ position: relative;
+ margin: 0 auto;
+ text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+ color: #b6b6b6;
+ font-family: $prim-font;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+ padding: 8px 15px;
+ text-align: center;
+ z-index: 10;
+ margin-top: 20px;
+
+ & > span {
+ color: #6c00ff;
+ font-weight: bold;
+ }
+ }
+
+ @mixin rings($duration, $delay) {
+ opacity: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: -21%;
+ left: -21%;
+ right: 0;
+ bottom: 0;
+ content: '';
+ height: 125%;
+ width: 125%;
+ border: 11px solid rgba(0, 169, 221, .7);
+ border-radius: 100%;
+ animation-name: ripple;
+ animation-duration: $duration;
+ animation-delay: $delay;
+ animation-iteration-count: infinite;
+ animation-timing-function: cubic-bezier(.65,0,.34,1);
+ z-index: -1;
+ }
+
+ @keyframes ripple {
+ from {
+ opacity: 1;
+ transform: scale3d(0.75,0.75,1);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale3d(1.5,1.5,1);
+ }
+ }
+
+ & > .special-ripple {
+ & > .request-loader {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 123px;
+ width: 123px;
+ background: #00B4DB;
+ border-radius: 100%;
+ box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
+ margin: 0 auto;
+ margin-top: 35px;
+ text-align: center;
+ opacity: .9;
+ transition: .3s all;
+
+ &:hover {
+ opacity: 1;
+ background: #00BEEA;
+ }
+
+ img {
+ width: 60px;
+ margin-right: 5px;
+ }
+
+ &::after {
+ @include rings(3s, 0s);
+ }
+
+ &::before {
+ @include rings(3s, 0.5s);
+ }
+ }
+ }
+ }
+
+ .search {
+ margin-top: 20px;
+
+ & > form {
+ position: relative;
+
+ & > input {
+ width: 100%;
+ height: auto;
+ box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(6, 6, 6, 0.99);
+ background-color: #0f1012;
+ outline: none;
+
+ color: #D1D1D1!important;
+ font-family: $sec-font;
+ font-size: 16px;
+ font-weight: 600;
+ padding: 15px 20px;
+
+ &::placeholder {
+ color: #676767;
+ font-weight: 400;
+ }
+
+ &:focus + button + small {
+ opacity: .3;
+ }
+ }
+
+ & > button {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ background: none;
+ border: none;
+ right: 15px;
+ top: 10px;
+ width: 30px;
+ height: 30px;
+ opacity: 1;
+ transition: .3s opacity;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url(icons/search.svg);
+ background-repeat: no-repeat;
+ background-size: 75%;
+ background-position: center center;
+ opacity: .3;
+ transition: all .3s;
+ }
+
+ &:hover {
+ &::before {
+ cursor: pointer;
+ background-image: url(icons/magnifier-tool.svg);
+ opacity: .9;
+ }
+ }
+ }
+
+ & > small {
+ position: absolute;
+ font-family: $sec-font;
+ font-size: 14px;
+ font-weight: bold;
+ top: 10px;
+ right: 50px;
+ background-color: #D1D1D1;
+ color: #080C0F;
+ padding: 1px 4px;
+ border-radius: 4px;
+ opacity: 0;
+ transition: opacity .3s;
+ }
+ }
+ }
+}
+
+@media (max-width: 1499px) {
+ #sidebar.col-s::after {
+ width: 303px;
+ }
+
+ #vk_groups {
+ max-width: 100%;
+ overflow: hidden;
+ border-radius: 3px;
+ }
+
+ #sidebar>.inner>.side-menu>nav>ul>li.with-dropdown>ul.dropdown>li>a>small {
+ font-size: 11px;
+ }
+
+ #sidebar>.inner>.statistics span.num {
+ font-size: 18px!important;
+ }
+
+ #sidebar>.inner>.statistics > div {
+ width: 75px!important;
+ }
+}
+
+/*
+ * FOOTER
+ */
+
+footer#footer {
+ & > .footer-content {
+ height: 320px;
+ background-color: #0B0D10;
+ padding: 45px 0;
+
+ & > .container {
+ position: relative;
+ }
+
+ .logo {
+ display: inline-block;
+ margin-top: 7px;
+
+ & > a > img {
+ width: 57px;
+ display: inline-block;
+ transition: .5s opacity ease-in;
+
+ &:hover {
+ opacity: .8;
+ }
+ }
+
+ & > div {
+ display: inline-block;
+ margin-left: 13px;
+ margin-top: 15px;
+ vertical-align: top;
+ }
+
+ h1 {
+ color: #ffffff;
+ font-family: $sec-font;
+ font-size: 20px;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 0.1px;
+ margin: 0;
+
+ & > a {
+ color: white;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
+ text-decoration: none;
+
+ &:hover {
+ color: #da1b60;
+ }
+ }
+ }
+
+ h2 {
+ color: #888;
+ font-family: $sec-font;
+ font-size: 14px;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 0.1px;
+ margin-top: 2px;
+ letter-spacing: -0.01px;
+ }
+ }
+
+ p.cowners-text {
+ width: 330px;
+ font-family: $prim-font;
+ color: #c1c6cf;
+ color: #929393;
+ line-height: 19px;
+ font-size: 14px;
+ text-align: left;
+ }
+
+ section.special {
+ position: absolute;
+ height: 380px;
+ width: 291px;
+ right: 18px;
+ top: -80px;
+ padding: 0;
+ z-index: 10;
+
+ & > .special-top-tip {
+ position: relative;
+ width: 285px;
+ height: 100px;
+ margin: 0 auto;
+ border-radius: 5px;
+ background-color: #0b0d10;
+ text-shadow: 0 0 4px rgba(55, 55, 55, 0.54);
+ color: #b6b6b6;
+ font-family: $prim-font;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+ padding: 15px 15px;
+ text-align: center;
+ z-index: 10;
+
+ & > a {
+ color: #fc7234;
+ text-decoration: none;
+ }
+
+ &::before {
+ content: "";
+ width: 0;
+ height: 0;
+ border-left: 15px solid transparent;
+ border-right: 15px solid transparent;
+ border-top: 15px solid #0b0d10;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -15px;
+ margin: auto;
+ }
+ }
+
+ & > .special-bottom-tip {
+ position: relative;
+ width: 200px;
+ height: 55px;
+ margin: 0 auto;
+ border-radius: 5px;
+ background-color: #0b0d10;
+ text-shadow: 0 0 4px rgba(55, 55, 55, 0.54);
+ color: #b6b6b6;
+ font-family: $prim-font;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+ padding: 8px 15px;
+ text-align: center;
+ z-index: 10;
+ margin-top: 20px;
+
+ & > a {
+ color: #fc7234;
+ text-decoration: none;
+ }
+ }
+
+ & > .special-copyright {
+ position: relative;
+ margin: 0 auto;
+ text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+ color: #b6b6b6;
+ font-family: $prim-font;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+ padding: 8px 15px;
+ text-align: center;
+ z-index: 10;
+ margin-top: 20px;
+
+ & > span {
+ color: #6c00ff;
+ font-weight: bold;
+ }
+ }
+
+ @mixin rings($duration, $delay) {
+ opacity: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: -21%;
+ left: -21%;
+ right: 0;
+ bottom: 0;
+ content: '';
+ height: 125%;
+ width: 125%;
+ border: 11px solid rgba(0, 169, 221, .7);
+ border-radius: 100%;
+ animation-name: ripple;
+ animation-duration: $duration;
+ animation-delay: $delay;
+ animation-iteration-count: infinite;
+ animation-timing-function: cubic-bezier(.65,0,.34,1);
+ z-index: -1;
+ }
+
+ @keyframes ripple {
+ from {
+ opacity: 1;
+ transform: scale3d(0.75,0.75,1);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale3d(1.5,1.5,1);
+ }
+ }
+
+ & > .special-ripple {
+ & > .request-loader {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 123px;
+ width: 123px;
+ background: #00B4DB;
+ border-radius: 100%;
+ box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
+ margin: 0 auto;
+ margin-top: 35px;
+ text-align: center;
+ opacity: .9;
+ transition: .3s all;
+
+ &:hover {
+ opacity: 1;
+ background: #00BEEA;
+ }
+
+ img {
+ width: 60px;
+ margin-right: 5px;
+ }
+
+ &::after {
+ @include rings(3s, 0s);
+ }
+
+ &::before {
+ @include rings(3s, 0.5s);
+ }
+ }
+ }
+ }
+ }
+
+ & > div.footer-copyright {
+ height: 80px;
+ line-height: 50px;
+ font-family: $prim-font;
+ color: #929393;
+ font-size: 14px;
+ background-color: #040506;
+
+ span {
+ color: #eee;
+ }
+
+ small {
+ color: #8AC547;
+ }
+ }
+}
+
+@media (max-width: 1499px) {
+ footer#footer>.footer-content section.special {
+ right: 5px;
+ }
+}
+
+@media (max-width: 1364px) {
+ #footer .container {
+ padding: 0 10px;
+ }
+
+ footer#footer>.footer-content section.special>.special-top-tip {
+ background-color: #ff8a00;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: -o-linear-gradient(left,#ff8a00,#da1b60);
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ color: white!important;
+
+ & > a {
+ color: gold!important;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
+ }
+
+ &::before {
+ border-top: 15px solid #ED5430!important;
+ }
+ }
+
+ footer#footer>.footer-content p.cowners-text {
+ font-size: 16px;
+ line-height: 22px;
+ width: 450px;
+ }
+
+ footer#footer>.footer-content section.special>.special-bottom-tip {
+ background-color: rgba(0, 0, 0, .7);
+ }
+}
+
+@media (max-width: 991px) {
+ footer#footer>.footer-content section.special {
+ display: none;
+ }
+
+ footer#footer>.footer-content p.cowners-text {
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+ footer#footer>.footer-content {
+ height: auto;
+ }
+
+ .footer-copyright {
+ text-align: center;
+ font-size: 16px!important;
+ }
+}
+
+@media (max-width: 750px) {
+ .footer-copyright .container {
+ padding: 0!important;
+ }
+
+ #paginator {
+ margin-top: 50px;
+ }
+
+ #paginator>.paginator-wrapper>.paginator-box {
+ transform: none!important;
+ height: auto;
+ width: auto;
+ background: transparent;
+ border: none;
+ }
+
+ #paginator>.paginator-wrapper>.paginator-box>.pb-start {
+ position: static;
+ text-align: center;
+ box-shadow: none;
+ background: transparent;
+ border: none;
+ }
+
+ #paginator>.paginator-wrapper>.paginator-box>.pb-start::before {
+ display: none;
+ }
+
+ #paginator>.paginator-wrapper>.paginator-box>.pb-end {
+ display: none;
+ }
+
+ #paginator>.paginator-wrapper>.paginator-box>.pb-start>nav>ul>li {
+ & > a {
+ font-size: 25px;
+ width: auto;
+ height: auto;
+ padding: 10px 20px;
+ margin: 5px;
+ }
+ }
+
+ footer#footer>.footer-content p.cowners-text {
+ width: auto;
+ }
+
+ .row {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
+/*
+ * ORPHUS.
+ */
+#orphus-popup {
+ background: #1F2326;
+ padding: 30px;
+ border-radius: 10px;
+ box-shadow: 0 0 150px rgba(0, 0, 0, 1);
+ position: fixed;
+ left: 0;top: 0;right: 0;bottom: 0;
+ margin: auto;
+ width: 750px;
+ height: 500px;
+ font-family: $prim-font;
+ font-size: 18px;
+
+ & > a {
+ display: block;
+ text-align: center;
+ margin-bottom: 10px;
+ }
+
+ & > h2 {
+ font-size: 20px;
+ color: #F24941;
+
+ & + div {
+ line-height: 1.3em;
+ font-size: 16px;
+ color: #88919D;
+ margin-bottom: 15px;
+
+ u {
+ font-weight: bold;
+ color: #F24941!important;
+ }
+
+ & + div {
+ line-height: 1.5em;
+ font-size: 17px;
+ color: #ddd;
+
+ & + form {
+ & > input {
+ font-size: 18px;
+ padding: 10px;
+ border-radius: 5px;
+ border: none;
+ background: #0F1012;
+ -webkit-box-shadow: inset 0 0 5px 1px rgba(0,0,0,.6);
+ box-shadow: inset 0 0 5px 1px rgba(0,0,0,.6);
+ border: 1px solid rgba(6,6,6,.99);
+ background-color: #0f1012;
+ outline: none;
+ color: #D1D1D1;
+ font-family: $prim-font;
+
+ & + div {
+ margin-top: 7px;
+
+ input {
+ background: #7DB042;
+ border: none;
+ padding: 10px 5px;
+ border-radius: 3px;
+ color: #eee;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-family: $prim-font;
+ opacity: .9;
+ transition: .3s all;
+
+ &:last-child {
+ background: #0F1012;
+ color: silver;
+ opacity: .7;
+ }
+
+ &:hover {
+ cursor: pointer;
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+}
+
+/*
+ * ADAPTIVE
+ */
+#slideout-open {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ z-index: 10;
+ width: 110px;
+ height: 100px;
+ text-align: center;
+ cursor: pointer;
+ transition: left .3s;
+ transition-timing-function: ease-in-out;
+ visibility: hidden;
+
+ & > .request-loader img:last-child {display: none;}
+
+ &.opened {
+ & > .request-loader img:first-child {display: none;}
+ & > .request-loader img:last-child {display: block;}
+ }
+
+ @mixin rings($duration, $delay) {
+ opacity: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: -9px;
+ left: -9px;
+ right: 0;
+ bottom: 0;
+ content: '';
+ height: 70px;
+ width: 70px;
+ border: 11px solid rgba(125,133,144, .7);
+ border-radius: 100%;
+ animation-name: ripple;
+ animation-duration: $duration;
+ animation-delay: $delay;
+ animation-iteration-count: infinite;
+ animation-timing-function: cubic-bezier(.65,0,.34,1);
+ z-index: -1;
+ }
+
+ @keyframes ripple {
+ from {
+ opacity: 1;
+ transform: scale3d(0.75,0.75,1);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale3d(1.5,1.5,1);
+ }
+ }
+
+ &.special-ripple {
+ & > .request-loader {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 75px;
+ width: 75px;
+ border-radius: 100%;
+ box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
+ margin: 0 auto;
+ margin-top: 15px;
+ text-align: center;
+ opacity: .9;
+ text-align: center;
+ line-height: 75px;
+ background-color: #ff8a00;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+
+ &:hover {
+ opacity: 1;
+ }
+
+ img {
+ width: 62px;
+ }
+
+ &::after {
+ @include rings(3s, 0s);
+ }
+
+ &::before {
+ @include rings(3s, 0.5s);
+ }
+ }
+ }
+}
+
+@media (max-width: 1364px) {
+ #sidebar {
+ display: none;
+ }
+
+ #slideout-open {
+ visibility: visible!important;
+ }
+}
+
+/*
+ * SLIDEOUT
+ */
+.slideout-menu {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 370px;
+ min-height: 100vh;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ z-index: 0;
+ display: none;
+ background: #1F2326;
+
+ & > #sidebar-mobile {
+ & > .inner {
+ & > .statistics {
+ padding-top: 10px;
+ }
+ }
+ }
+}
+
+.slideout-menu-left {
+ left: 0;
+}
+
+.slideout-menu-right {
+ right: 0;
+}
+
+.slideout-panel {
+ position: relative;
+ z-index: 1;
+ background-color: #14171A; /* A background-color is required */
+ min-height: 100vh;
+}
+
+.slideout-open,
+.slideout-open body,
+.slideout-open .slideout-panel {
+ overflow: hidden;
+}
+
+.slideout-open .slideout-menu {
+ display: block;
+}
+
+/*
+ * BUTTONS & STUFF
+ */
+
+.btn {
+ display: inline-block;
+ background-color: #181e23;
+ color: #d1d1d1;
+ font-family: $sec-font;
+ text-decoration: none;
+ font-weight: bold;
+ letter-spacing: 0.2px;
+ font-size: 14px;
+ padding: 8px 15px;
+ border-radius: 3px;
+ margin: 0;
+ text-shadow: 0 0 3px rgba(0, 0, 0, .5);
+ transition: .3s all;
+
+ & > .label {
+ font-family: $sec-font;
+ text-align: center;
+ background: #31383F;
+ color: white;
+ font-size: 12px;
+ font-weight: bold;
+ text-shadow: none;
+ border-radius: 2px;
+ padding: 2px 5px;
+ margin-left: 5px;
+ opacity: .5;
+ transition: .7s all;
+ }
+
+ &.btn-darkblue:hover {
+ background-color: rgb(39,111,169);
+ color: white;
+
+ & > .label {
+ opacity: .9;
+ }
+ }
+
+ &.btn-orange:hover {
+ background-color: orange;
+ color: white;
+
+ & > .label {
+ opacity: .9;
+ }
+ }
+
+ &.btn-green:hover {
+ background-color: #41b14f;
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#9ec14c),to(#41b14f));
+ background-image: linear-gradient(#9ec14c,#41b14f);
+ color: #fff;
+
+ & > .label {
+ opacity: 0.9;
+ }
+ }
+
+ // &.btn-blue:hover {
+ // background-color: #2096D2;
+ // background-image: -webkit-gradient(linear,left top,left bottom,from(#79C1E4),to(#2096D2));
+ // background-image: linear-gradient(#79C1E4,#2096D2);
+ // color: #fff;
+
+ // & > .label {
+ // opacity: 0.9;
+ // }
+ // }
+
+ &.btn-blue:hover {
+ background-color: #0BBFF5;
+ color: white;
+
+ & > .label {
+ opacity: .9;
+ }
+ }
+
+ &.btn-dark:hover {
+ background-color: darkslategray;
+ color: white;
+
+ & > .label {
+ opacity: .9;
+ }
+ }
+}
+
+/**
+ * ICONS.
+ */
+.icon {
+ &.icon-books {
+ background-image: url(/media/icons/upload/book.svg);
+ }
+
+ &.icon-downloads {
+ background-image: url(/media/icons/download.svg);
+ }
+}
+
+/**
+ * OTHER.
+ */
+[class*=hint--]:after {
+ color: #DDD;
+ text-transform: uppercase;
+ font-family: $sec-font;
+ font-size: 15px;
+ font-weight: 600;
+ padding: 13px;
+}
+
+.KICKASSELEMENT.KICKASShidden {
+ display: none!important;
+}
+
+@-webkit-keyframes ka-bg-alert-blink {
+ 0%, 49% {
+ background: rgba(0, 0, 0, .9);
+ border: 3px solid rgb(117, 209, 63);
+ color: #ff0000;
+ }
+ 50%, 100% {
+ background: rgba(0, 0, 0, .3);
+ border: 3px solid rgb(117, 209, 63);
+ color: rgb(134,191,69);
+ }
+}
+
+@-webkit-keyframes ka-activator-blink {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: .3;
+ }
+}
+
+#activate-ka {
+ animation: ka-activator-blink 1.2s infinite;
+ animation-direction: alternate;
+ cursor: pointer;
+}
+
+#ka-info {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ background: rgba(8,12,15,.9);
+ border-radius: 10px;
+ padding: 15px 30px;
+ width: 500px;
+ margin: 20px;
+ display: none;
+ font-size: 0;
+ z-index: 998;
+
+ & > div {
+ display: inline-block;
+ width: 50%;
+ font-size: 16px;
+ font-family: $sec-font;
+ vertical-align: middle;
+
+ &:last-child {
+ width: 50%;
+ font-size: 30px;
+ text-align: center;
+
+ p {
+ margin: 0;
+ }
+
+ #ka-score {
+ color: rgb(0,191,8);
+ font-weight: bold;
+ }
+
+ small {
+ display: inline-block;
+ font-size: 14px;
+ width: 100px;
+ opacity: .7;
+ margin-top: 10px;
+ }
+ }
+ }
+
+ kbd {
+ color: #88DB47;
+ background-color: black;
+ padding: 5px 10px;
+ border-radius: 10px;
+ }
+
+ &.ka-new-ship-alert::before {
+ content: "НОВЫЙ КОРАБЛЬ!";
+ font-size: 40px;
+ font-weight: bold;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ padding-top: 50px;
+ z-index: 999;
+ color: rgb(134,191,69);
+ border-radius: 10px;
+ animation: ka-bg-alert-blink 1s infinite;
+ }
+}
+
+hr {
+ border: none;
+ border-top: 2px dotted #1D3D42;
+ background-color: transparent;
+ height: 1px;
+ width: 75%;
+}
+
+/**
+ * Chat Bro restyle.
+ */
+
+#chatbro {
+ height: 500px;
+ overflow: hidden;
+ position: relative;
+
+ &.is-loading {
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #1D2124;
+ background-image: url(/media/images/preloaders/loader.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+ z-index: 999;
+ transition: 1s opacity;
+ }
+
+ &::after {
+ content: "Загрузка ...";
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ text-align: center;
+ width: 100px;
+ height: 50px;
+ line-height: 50px;
+ font-size: 16px;
+ z-index: 999;
+ transition: 1s opacity;
+ }
+
+ &.is-loaded {
+ &::before {
+ opacity: 0;
+ }
+
+ &::after {
+ opacity: 0;
+ }
+ }
+
+ &.is-loaded-finish {
+ &::before {
+ display: none;
+ }
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+}
+
+.chatbro_header {
+ display: none;
+}
+
+.chatbro_body {
+ font-family: $prim-font!important;
+ border: none!important;
+}
+
+.chatbro_body {
+ position: relative!important;
+
+ &::before {
+ content: "";
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0) 100%);
+ height: 26px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ flex-shrink: 0;
+ z-index: 2;
+ pointer-events: none;
+ opacity: .3;
+ }
+
+ &::after {
+ content: "";
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0) 100%);
+ height: 16px;
+ position: absolute;
+ flex-shrink: 0;
+ bottom: 57px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ }
+}
+
+.chatbro_messages_block {
+ background: #1F2127!important;
+}
+
+.chatbro_message_image {
+ width: 30px!important;
+ height: 30px!important;
+}
+
+.chatbro_message_name, .chatbro_message_name > a {
+ font-size: 13px!important;
+}
+
+.chatbro_message_text {
+ color: #c1c6cf!important;
+ line-height: 18px!important;
+ font-size: 14px!important;
+ margin-top: 0!important;
+}
+
+.chatbro_message_td_message {
+ border-top: 1px dashed #0ef3f322!important;
+}
+
+.chatbro_messages .chatbro_message td {
+ padding: 12px 2px!important;
+}
+
+.chatbro_send_input_wrapper {
+
+}
+
+.chatbro_send_input_block {
+ position: relative!important;
+
+ .chatbro_send_button {
+ position: absolute!important;
+ left: 215px!important;
+ top: 0!important;
+ background: transparent!important;
+
+ &::before {
+ content: ""!important;
+ position: absolute!important;
+ left: -39px!important;
+ top: 9px!important;
+ width: 40px;
+ height: 42px;
+ background-image: url('/media/icons/enter-arrow.svg');
+ background-size: 50%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: #2C3036;
+ fill: #6F798A;
+ }
+ }
+
+ .chatbro_open_smiles_button {
+ position: absolute!important;
+ left: 224px!important;
+ top: 0!important;
+ background: transparent!important;
+
+ &::before {
+ content: ""!important;
+ position: absolute!important;
+ left: 0!important;
+ top: 5px!important;
+ width: 46px;
+ height: 46px;
+ background-image: url('/media/icons/smile.svg');
+ background-size: 50%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: #2C3036;
+ box-sizing: content-box;
+ border: 2px solid #0F0F12;
+ }
+ }
+
+ .chatbro_open_upload_button {
+ position: absolute!important;
+ left: 273px!important;
+ top: 0!important;
+ background: transparent!important;
+
+ &::before {
+ content: ""!important;
+ position: absolute!important;
+ left: 0px!important;
+ top: 5px!important;
+ width: 46px;
+ height: 46px;
+ background-image: url('/media/icons/photo-camera.svg');
+ background-size: 53%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: #2C3036;
+ box-sizing: content-box;
+ border: 2px solid #0F0F12;
+ opacity: .6;
+ }
+
+ &:hover::before {
+ opacity: 1!important;
+ cursor: pointer;
+ }
+ }
+
+ .chatbro_send_input_wrapper {
+ padding: 0!important;
+ box-shadow: inset 0px 0px 4px #000000;
+ height: 50px!important;
+ width: 215px!important;
+ margin-top: 5px;
+ margin-left: 5px;
+
+ & > .chatbro_send_input {
+ width: 80%!important;
+ background: transparent!important;
+ cursor: text;
+ height: 45px!important;
+ overflow: hidden!important;
+ max-height: 50px!important;
+ padding: 8px 13px !important;
+ }
+ }
+}
+
+.chatbro_smiles_menu {
+ bottom: 60px!important;
+ right: 34px!important;
+}
+
+.emojione {
+ width: 20px;
+ display: inline;
+ vertical-align: middle;
+ margin: auto 2px;
+}
+
+.chatbro_loader_radial {
+ top: 18px!important;
+ left: -31px!important;
+ border-color: rgb(119, 119, 119) rgb(119, 119, 119) rgb(119, 119, 119) rgb(138,197,71)!important;
+}
+
+.chatbro_message_admin {
+ color: rgb(138,197,71);
+ opacity: 1!important;
+ border-radius: 3px!important;
+
+ &::before {
+ content: "АДМИН"!important;
+ }
+}
+
+@media (max-width: 1499px) {
+ .chatbro_send_input_block .chatbro_open_smiles_button::before {
+ width: 36px;
+ left: -1px!important;
+ }
+ .chatbro_send_input_block .chatbro_open_upload_button::before {
+ width: 36px;
+ left: -11px!important;
+ }
+ .chatbro_smiles_menu {
+ right: 14px!important;
+ }
+}
+
+.not-found {
+ background-color: #040304;
+ padding: 30px 50px;
+ margin-top: 5px;
+ font-family: $prim-font;
+ height: 500px;
+
+ background-image: url(/media/images/tenor.gif);
+ background-repeat: no-repeat;
+ background-position: 90% 50%;
+
+ h2 {
+ font-size: 40px;
+ color: white;
+ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
+ background: -o-linear-gradient(left,#ff8a00,#da1b60);
+ background: linear-gradient(to right,#ff8a00,#da1b60);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone;
+ text-shadow: none;
+ }
+
+ p {
+ max-width: 60%;
+ line-height: 1.5em;
+
+ span {
+ color: #F56C1A;
+ font-weight: bold;
+ }
+ }
+
+ small {
+ color: #555;
+ }
+
+ .search-f {
+ margin-top: 20px;
+ background: white;
+ width: 440px;
+
+ & > form {
+ position: relative;
+
+ & > input {
+ width: 442px;
+ height: 50px;
+ box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(6, 6, 6, 0.99);
+ background-color: #0f1012;
+ outline: none;
+
+ color: #D1D1D1;
+ font-family: $sec-font;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 70.58px;
+ padding-left: 10px;
+ padding-right: 45px;
+ padding-right: 45px;
+
+ &::placeholder {
+ color: #676767;
+ font-weight: 400;
+ }
+
+ &:focus + button + small {
+ opacity: .3;
+ }
+ }
+
+ & > button {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ background: none;
+ border: none;
+ right: 10px;
+ top: 9px;
+ width: 30px;
+ height: 30px;
+ opacity: 1;
+ transition: .3s opacity;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url(/media/icons/search.svg);
+ background-repeat: no-repeat;
+ background-size: 75%;
+ background-position: center center;
+ opacity: .3;
+ transition: all .3s;
+ }
+
+ &:hover {
+ &::before {
+ cursor: pointer;
+ background-image: url(/media/icons/magnifier-tool.svg);
+ opacity: .9;
+ }
+ }
+ }
+
+ & > small {
+ position: absolute;
+ font-family: $sec-font;
+ font-size: 14px;
+ font-weight: bold;
+ top: 10px;
+ right: 50px;
+ background-color: #D1D1D1;
+ color: #080C0F;
+ padding: 1px 4px;
+ border-radius: 4px;
+ opacity: 0;
+ transition: opacity .3s;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/css/styles.scss b/src/css/styles.scss
new file mode 100644
index 0000000..e5bb9f4
--- /dev/null
+++ b/src/css/styles.scss
@@ -0,0 +1,74 @@
+/*
+ SOME DEFAULT CSS.
+*/
+html, body {
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ min-width: 100vw;
+
+ background-color: #4C5062;
+ color: white;
+
+
+ &.assist-page {
+ background: rgb(24,123,123);
+ background: -moz-radial-gradient(circle, rgba(24,123,123,0.4906337535014006) 0%, rgba(13,15,19,1) 64%);
+ background: -webkit-radial-gradient(circle, rgba(24,123,123,0.4906337535014006) 0%, rgba(13,15,19,1) 64%);
+ background: radial-gradient(circle, rgba(24,123,123,0.4906337535014006) 0%, rgba(13,15,19,1) 64%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187b7b",endColorstr="#0d0f13",GradientType=1);
+
+ &.assist-active {
+ background: rgb(24,81,123);
+ background: -moz-radial-gradient(circle, rgba(24,81,123,0.6418942577030813) 0%, rgba(13,15,19,1) 64%);
+ background: -webkit-radial-gradient(circle, rgba(24,81,123,0.6418942577030813) 0%, rgba(13,15,19,1) 64%);
+ background: radial-gradient(circle, rgba(24,81,123,0.6418942577030813) 0%, rgba(13,15,19,1) 64%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#18517b",endColorstr="#0d0f13",GradientType=1);
+ }
+
+ }
+}
+
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color: #0f0f0f;
+ background-color: #f6f6f6;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+
+a {
+ color: #2A9CD0;
+ text-decoration: none;
+ font-weight: bold;
+
+ &:hover {
+ color: #1dabed;
+ text-decoration: underline;
+ }
+}
+
+/*
+ OVERRIDES.
+*/
+#wrapper {
+ padding: 0;
+ margin: 0;
+}
+
+#header, main {
+ padding: 0 30px;
+}
+
+select, input {
+ color: #ccc!important;
+}
\ No newline at end of file
diff --git a/src/functions.ts b/src/functions.ts
new file mode 100644
index 0000000..4cec82a
--- /dev/null
+++ b/src/functions.ts
@@ -0,0 +1,44 @@
+import { invoke } from "@tauri-apps/api/tauri"
+import { is_listening, isListening } from "@/stores"
+import { clearInterval, clearTimeout, setInterval, setTimeout } from 'worker-timers';
+
+setInterval(() => {
+ (async () => {
+ is_listening.set(await invoke("is_listening"));
+ })().catch(err => {
+ console.error(err);
+ });
+}, 1000);
+
+export function startListening() {
+ (async () => {
+ invoke('start_listening')
+ .then((message) => {
+ is_listening.set(true);
+ })
+ .catch((error) => {
+ is_listening.set(false);
+ console.error(error);
+ // alert("Ошибка: " + error);
+ })
+ })().catch(err => {
+ console.error(err);
+ });
+}
+
+export function stopListening(callback) {
+ (async () => {
+ invoke('stop_listening')
+ .then((message) => {
+ is_listening.set(false);
+ if(callback) {
+ callback();
+ }
+ })
+ .catch((error) => {
+ console.error(error);
+ })
+ })().catch(err => {
+ console.error(err);
+ });
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..be9c929
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,13 @@
+// Klondike project old CSS file
+import "./css/main.scss";
+
+// App current CSS file
+import "./css/styles.scss";
+
+// deploy app
+import App from "./App.svelte";
+const app = new App({
+ target: document.getElementById("app"),
+});
+
+export default app;
\ No newline at end of file
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
new file mode 100644
index 0000000..f307626
--- /dev/null
+++ b/src/pages/_layout.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ Микрофон
+ {microphone_label}
+
+
+
+
+
+ Нейросети
+ {nn_label}
+
+
+
+
+
+ Ресурсы
+ RAM {resources_ram_usage}mb
+
+ +Пожалуйста, перейдите в настройки и введите ключ Picovoice. +
+ Часть функций может работать некорректно.
+ Сообщайте обо всех найденных багах в наш телеграм бот. +
Он выдается бесплатно при регистрации в Picovoice Console.
Получить его можно на официальном сайте OpenAI.
Сначала выберите тип на шаге 2.
`; - return; - } - - if (t === "exe") { - const wrap = document.createElement("div"); - wrap.innerHTML = ` -
-
-
-
-
-
-
-
- `;
- f.appendChild(wrap);
- const sel = wrap.querySelector("#exe-file");
- callApi("list_exes").then((list) => {
- if (Array.isArray(list)) {
- for (const name of list) {
- const o = document.createElement("option");
- o.value = `${name}.exe`;
- o.textContent = name;
- sel.appendChild(o);
- }
- if (state.action && state.action.file) sel.value = state.action.file;
- }
- });
- sel.addEventListener("change", () => updateAction());
- wrap.querySelector("#exe-delay").addEventListener("input", () => updateAction());
- wrap.querySelector("#exe-wait").addEventListener("change", () => updateAction());
- if (state.action) {
- wrap.querySelector("#exe-delay").value = state.action.delay_ms ?? "";
- wrap.querySelector("#exe-wait").checked = !!state.action.wait;
- }
- return;
- }
-
- if (t === "url") {
- f.innerHTML = `
-
-
-
-
-
-
-
-
-
-
-
-
- `;
- const inp = f.querySelector("#url-href");
- const sel = f.querySelector("#url-browser");
- if (state.action) {
- inp.value = state.action.href || "";
- sel.value = state.action.browser || "";
- }
- inp.addEventListener("input", () => updateAction());
- sel.addEventListener("change", () => updateAction());
- return;
- }
-
- if (t === "keys") {
- f.innerHTML = `
-
-
-
-
-
-
-
-
- Разделяйте плюсом. Пример: ctrl+alt+delete
-
-
-
-
- `;
- const mode = f.querySelector("#keys-mode");
- const seqField = f.querySelector("#keys-seq-field");
- const textField = f.querySelector("#keys-text-field");
- const seq = f.querySelector("#keys-sequence");
- const text = f.querySelector("#keys-text");
- if (state.action && state.action.text) {
- mode.value = "text";
- text.value = state.action.text;
- seqField.hidden = true;
- textField.hidden = false;
- } else if (state.action && state.action.sequence) {
- seq.value = state.action.sequence;
- }
- const sync = () => {
- if (mode.value === "sequence") {
- seqField.hidden = false;
- textField.hidden = true;
- } else {
- seqField.hidden = true;
- textField.hidden = false;
- }
- updateAction();
- };
- mode.addEventListener("change", sync);
- seq.addEventListener("input", () => updateAction());
- text.addEventListener("input", () => updateAction());
- return;
- }
-
- if (t === "play_sound") {
- f.innerHTML = `
-
-
- `;
- const sel = f.querySelector("#snd-name");
- callApi("list_sound_names").then((list) => {
- if (Array.isArray(list)) {
- for (const name of list) {
- const o = document.createElement("option");
- o.value = name;
- o.textContent = name;
- sel.appendChild(o);
- }
- if (state.action && state.action.name) sel.value = state.action.name;
- updateAction();
- }
- });
- sel.addEventListener("change", () => updateAction());
- f.querySelector("#snd-preview").addEventListener("click", () => {
- callApi("preview_sound", sel.value);
- });
- return;
- }
-
- if (t === "system") {
- f.innerHTML = `
-
-
-
-
-
-
-
-
-
- `;
- const sel = f.querySelector("#sys-op");
- if (state.action && state.action.op) sel.value = state.action.op;
- sel.addEventListener("change", () => updateAction());
- return;
- }
-
- if (t === "shell") {
- f.innerHTML = `
-
-
-
-
-
- `;
- const cmd = f.querySelector("#shell-cmd");
- const wait = f.querySelector("#shell-wait");
- if (state.action) {
- cmd.value = state.action.cmd || "";
- wait.checked = !!state.action.wait;
- }
- cmd.addEventListener("input", () => updateAction());
- wait.addEventListener("change", () => updateAction());
- return;
- }
-
- if (t === "sleep") {
- f.innerHTML = `
-
-
-
-
- Обычно используется внутри последовательности.
- `;
- const inp = f.querySelector("#sleep-ms");
- if (state.action && state.action.ms != null) inp.value = state.action.ms;
- inp.addEventListener("input", () => updateAction());
- return;
- }
-
- if (t === "multi") {
- renderMultiForm();
- return;
- }
- }
-
- function renderMultiForm() {
- const f = els.paramsForm;
- f.innerHTML = `
- Шаги выполняются по порядку.
- - - `; - const list = f.querySelector("#steps-list"); - if (!state.action || state.action.type !== "multi") { - state.action = { type: "multi", steps: [] }; - } - const renderList = () => { - list.innerHTML = ""; - state.action.steps.forEach((step, idx) => { - const card = document.createElement("div"); - card.className = "step-card"; - card.innerHTML = ` -
- Шаг ${idx + 1}
-
- `;
- const body = document.createElement("div");
- renderInlineEditor(body, step, (next) => {
- state.action.steps[idx] = next;
- updateAction(true);
- });
- card.appendChild(body);
- card.querySelector("[data-up]").addEventListener("click", () => {
- if (idx > 0) {
- const tmp = state.action.steps[idx - 1];
- state.action.steps[idx - 1] = state.action.steps[idx];
- state.action.steps[idx] = tmp;
- renderList();
- updateAction(true);
- }
- });
- card.querySelector("[data-down]").addEventListener("click", () => {
- if (idx < state.action.steps.length - 1) {
- const tmp = state.action.steps[idx + 1];
- state.action.steps[idx + 1] = state.action.steps[idx];
- state.action.steps[idx] = tmp;
- renderList();
- updateAction(true);
- }
- });
- card.querySelector("[data-rm]").addEventListener("click", () => {
- state.action.steps.splice(idx, 1);
- renderList();
- updateAction(true);
- });
- list.appendChild(card);
- });
- };
- renderList();
- f.querySelector("#add-step").addEventListener("click", () => {
- state.action.steps.push({ type: "play_sound", name: "ok" });
- renderList();
- updateAction(true);
- });
- updateAction(true);
- }
-
- function renderInlineEditor(host, step, onChange) {
- const typeSel = document.createElement("select");
- const types = [
- ["play_sound", "Звук"],
- ["exe", ".exe"],
- ["url", "URL"],
- ["keys", "Клавиши"],
- ["shell", "Shell"],
- ["system", "Система"],
- ["sleep", "Пауза"],
- ];
- for (const [v, label] of types) {
- const o = document.createElement("option");
- o.value = v;
- o.textContent = label;
- if (v === step.type) o.selected = true;
- typeSel.appendChild(o);
- }
- host.appendChild(wrapField("Тип", typeSel));
-
- const body = document.createElement("div");
- host.appendChild(body);
-
- const renderBody = () => {
- body.innerHTML = "";
- const t = typeSel.value;
- if (t === "play_sound") {
- const sel = document.createElement("select");
- callApi("list_sound_names").then((list) => {
- if (Array.isArray(list)) {
- for (const name of list) {
- const o = document.createElement("option");
- o.value = name;
- o.textContent = name;
- if (step.name === name) o.selected = true;
- sel.appendChild(o);
- }
- }
- });
- sel.addEventListener("change", () => onChange({ type: "play_sound", name: sel.value }));
- body.appendChild(wrapField("Звук", sel));
- } else if (t === "exe") {
- const sel = document.createElement("select");
- callApi("list_exes").then((list) => {
- if (Array.isArray(list)) {
- for (const name of list) {
- const o = document.createElement("option");
- o.value = `${name}.exe`;
- o.textContent = name;
- if (step.file === `${name}.exe`) o.selected = true;
- sel.appendChild(o);
- }
- }
- });
- const wait = document.createElement("input");
- wait.type = "checkbox";
- wait.checked = !!step.wait;
- const waitLabel = document.createElement("label");
- waitLabel.className = "checkbox";
- waitLabel.appendChild(wait);
- waitLabel.appendChild(document.createTextNode("ждать"));
- const delay = document.createElement("input");
- delay.type = "number";
- delay.value = step.delay_ms ?? "";
- delay.placeholder = "delay_ms";
- const apply = () => {
- const next = { type: "exe", file: sel.value };
- if (wait.checked) next.wait = true;
- if (delay.value) next.delay_ms = parseInt(delay.value, 10);
- onChange(next);
- };
- sel.addEventListener("change", apply);
- wait.addEventListener("change", apply);
- delay.addEventListener("input", apply);
- body.appendChild(wrapField("Файл", sel));
- body.appendChild(wrapField("Задержка (мс)", delay));
- body.appendChild(waitLabel);
- } else if (t === "url") {
- const inp = document.createElement("input");
- inp.type = "text";
- inp.value = step.href || "";
- inp.placeholder = "https://...";
- const sel = document.createElement("select");
- sel.innerHTML = `
-
-
-
-
- `;
- sel.value = step.browser || "";
- const apply = () => {
- const next = { type: "url", href: inp.value };
- if (sel.value) next.browser = sel.value;
- onChange(next);
- };
- inp.addEventListener("input", apply);
- sel.addEventListener("change", apply);
- body.appendChild(wrapField("URL", inp));
- body.appendChild(wrapField("Браузер", sel));
- } else if (t === "keys") {
- const inp = document.createElement("input");
- inp.type = "text";
- inp.value = step.sequence || "";
- inp.placeholder = "ctrl+shift+m";
- inp.addEventListener("input", () => onChange({ type: "keys", sequence: inp.value }));
- body.appendChild(wrapField("Сочетание", inp));
- } else if (t === "shell") {
- const inp = document.createElement("input");
- inp.type = "text";
- inp.value = step.cmd || "";
- const wait = document.createElement("input");
- wait.type = "checkbox";
- wait.checked = !!step.wait;
- const waitLabel = document.createElement("label");
- waitLabel.className = "checkbox";
- waitLabel.appendChild(wait);
- waitLabel.appendChild(document.createTextNode("ждать"));
- const apply = () => {
- const next = { type: "shell", cmd: inp.value };
- if (wait.checked) next.wait = true;
- onChange(next);
- };
- inp.addEventListener("input", apply);
- wait.addEventListener("change", apply);
- body.appendChild(wrapField("Команда", inp));
- body.appendChild(waitLabel);
- } else if (t === "system") {
- const sel = document.createElement("select");
- for (const op of ["volume_mute", "volume_unmute", "exit"]) {
- const o = document.createElement("option");
- o.value = op;
- o.textContent = op;
- if (step.op === op) o.selected = true;
- sel.appendChild(o);
- }
- sel.addEventListener("change", () => onChange({ type: "system", op: sel.value }));
- body.appendChild(wrapField("Операция", sel));
- } else if (t === "sleep") {
- const inp = document.createElement("input");
- inp.type = "number";
- inp.value = step.ms ?? 500;
- inp.addEventListener("input", () => onChange({ type: "sleep", ms: parseInt(inp.value, 10) || 0 }));
- body.appendChild(wrapField("Миллисекунды", inp));
- }
- };
- typeSel.addEventListener("change", () => {
- const t = typeSel.value;
- const fresh = ({
- play_sound: { type: "play_sound", name: "ok" },
- exe: { type: "exe", file: "" },
- url: { type: "url", href: "" },
- keys: { type: "keys", sequence: "" },
- shell: { type: "shell", cmd: "" },
- system: { type: "system", op: "volume_mute" },
- sleep: { type: "sleep", ms: 500 },
- })[t];
- onChange(fresh);
- step = fresh;
- renderBody();
- });
- renderBody();
- }
-
- function wrapField(label, control) {
- const w = document.createElement("div");
- w.className = "field";
- const l = document.createElement("label");
- l.textContent = label;
- w.appendChild(l);
- w.appendChild(control);
- return w;
- }
-
- function updateAction(skipRender) {
- const t = state.actionType;
- if (!t) return;
- if (t === "exe") {
- const file = document.getElementById("exe-file");
- const delay = document.getElementById("exe-delay");
- const wait = document.getElementById("exe-wait");
- const a = { type: "exe", file: file ? file.value : "" };
- if (wait && wait.checked) a.wait = true;
- if (delay && delay.value) a.delay_ms = parseInt(delay.value, 10);
- state.action = a;
- } else if (t === "url") {
- const a = { type: "url", href: (document.getElementById("url-href")||{}).value || "" };
- const b = (document.getElementById("url-browser")||{}).value;
- if (b) a.browser = b;
- state.action = a;
- } else if (t === "keys") {
- const mode = (document.getElementById("keys-mode")||{}).value;
- if (mode === "text") {
- state.action = { type: "keys", text: (document.getElementById("keys-text")||{}).value || "" };
- } else {
- state.action = { type: "keys", sequence: (document.getElementById("keys-sequence")||{}).value || "" };
- }
- } else if (t === "play_sound") {
- state.action = { type: "play_sound", name: (document.getElementById("snd-name")||{}).value || "ok" };
- } else if (t === "system") {
- state.action = { type: "system", op: (document.getElementById("sys-op")||{}).value || "volume_mute" };
- } else if (t === "shell") {
- const a = { type: "shell", cmd: (document.getElementById("shell-cmd")||{}).value || "" };
- if ((document.getElementById("shell-wait")||{}).checked) a.wait = true;
- state.action = a;
- } else if (t === "sleep") {
- state.action = { type: "sleep", ms: parseInt((document.getElementById("sleep-ms")||{}).value || "0", 10) };
- }
- }
-
- function buildDraft() {
- return {
- cmd_id: state.cmdId,
- phrases: state.phrases.map((p) => p.trim()).filter(Boolean),
- action: state.action,
- confirm_sound: state.confirmSound || undefined,
- };
- }
-
- function renderPreview() {
- const draft = buildDraft();
- if (!draft.cmd_id || !draft.phrases.length || !draft.action) {
- els.yamlPreview.textContent = "(черновик неполный)";
- return;
- }
- const body = { phrases: draft.phrases, action: draft.action };
- if (draft.confirm_sound) body.confirm_sound = draft.confirm_sound;
- const obj = {};
- obj[draft.cmd_id] = body;
- try {
- els.yamlPreview.textContent = jsyaml.dump(obj, { lineWidth: 4096, noRefs: true });
- } catch (ex) {
- els.yamlPreview.textContent = "Ошибка YAML: " + ex.message;
- }
- }
-
- async function refreshExistingIds() {
- const r = await callApi("list_existing_commands");
- if (Array.isArray(r)) {
- state.existingIds = r;
- checkCmdIdCollision();
- }
- }
-
- function bind() {
- els.phrase0.addEventListener("input", () => {
- state.phrases[0] = els.phrase0.value;
- syncCmdId();
- });
- els.addPhrase.addEventListener("click", () => {
- state.phrases.push("");
- refreshExtraPhrases();
- });
- els.cmdId.addEventListener("input", () => {
- state.cmdIdAuto = false;
- state.cmdId = els.cmdId.value.trim();
- checkCmdIdCollision();
- });
-
- els.actionGrid.addEventListener("click", (ev) => {
- const card = ev.target.closest(".card");
- if (!card) return;
- const t = card.dataset.action;
- els.actionGrid.querySelectorAll(".card").forEach((c) => c.classList.toggle("selected", c === card));
- if (state.actionType !== t) {
- state.actionType = t;
- state.action = null;
- }
- });
-
- els.toStep3.addEventListener("click", () => {
- if (!state.actionType) {
- showToast("Выберите тип действия", true);
- return;
- }
- renderActionForm();
- setStep(3);
- });
-
- document.querySelectorAll("[data-go]").forEach((b) => {
- if (b.id === "to-step-3") return;
- b.addEventListener("click", () => setStep(parseInt(b.dataset.go, 10)));
- });
-
- els.steps.forEach((s) => {
- s.addEventListener("click", () => {
- const target = parseInt(s.dataset.step, 10);
- if (target === 3) renderActionForm();
- setStep(target);
- });
- });
-
- els.tabs.forEach((t) => {
- t.addEventListener("click", () => {
- els.tabs.forEach((x) => x.classList.toggle("active", x === t));
- els.tabContents.forEach((c) => {
- c.hidden = c.dataset.tabContent !== t.dataset.tab;
- });
- });
- });
-
- els.llmGenerate.addEventListener("click", async () => {
- els.llmStatus.className = "row-hint";
- els.llmStatus.textContent = "Запрос к модели...";
- els.llmSuggestions.innerHTML = "";
- const r = await callApi("llm_suggest", els.llmPrompt.value || "");
- if (!r || !r.ok) {
- els.llmStatus.className = "row-hint error";
- els.llmStatus.textContent = (r && r.error) || "Не удалось получить ответ";
- return;
- }
- els.llmStatus.className = "row-hint ok";
- els.llmStatus.textContent = "Готово. Примите блок или отредактируйте вручную.";
- renderLlmSuggestion(r.suggestion);
- });
-
- els.saveBtn.addEventListener("click", async () => {
- const draft = buildDraft();
- const v = await callApi("validate_draft", JSON.stringify(draft));
- if (!v.ok) {
- els.saveStatus.className = "row-hint error";
- els.saveStatus.textContent = v.error;
- return;
- }
- const overwrite = state.existingIds.includes(draft.cmd_id);
- if (overwrite) {
- if (!confirm(`Команда «${draft.cmd_id}» уже существует. Перезаписать?`)) return;
- draft.overwrite = true;
- }
- const r = await callApi("save_command", JSON.stringify(draft));
- if (!r.ok) {
- els.saveStatus.className = "row-hint error";
- els.saveStatus.textContent = r.error;
- return;
- }
- els.saveStatus.className = "row-hint ok";
- els.saveStatus.textContent = `Сохранено: ${r.id}`;
- showToast(`Команда «${r.id}» сохранена`);
- refreshExistingIds();
- });
-
- els.cancelBtn.addEventListener("click", () => {
- if (!confirm("Сбросить черновик?")) return;
- resetDraft();
- });
-
- document.addEventListener("keydown", (ev) => {
- if (ev.key === "Escape") {
- if (state.step > 1) setStep(state.step - 1);
- return;
- }
- if (ev.key === "Enter" && !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
- const tag = (ev.target && ev.target.tagName) || "";
- if (tag === "TEXTAREA") return;
- if (tag === "BUTTON") return;
- if (state.step < 4) {
- if (state.step === 2 && state.actionType) renderActionForm();
- setStep(state.step + 1);
- ev.preventDefault();
- }
- }
- });
- }
-
- function renderLlmSuggestion(suggestion) {
- const host = els.llmSuggestions;
- host.innerHTML = "";
- if (!suggestion) return;
- const block = document.createElement("div");
- block.className = "suggested-block";
- const pre = document.createElement("pre");
- try {
- pre.textContent = jsyaml.dump(suggestion, { lineWidth: 4096, noRefs: true });
- } catch (ex) {
- pre.textContent = JSON.stringify(suggestion, null, 2);
- }
- block.appendChild(pre);
- const accept = document.createElement("button");
- accept.type = "button";
- accept.className = "primary";
- accept.textContent = "Принять";
- accept.addEventListener("click", () => {
- if (suggestion.phrases) state.phrases = suggestion.phrases.slice();
- if (suggestion.cmd_id) {
- state.cmdId = suggestion.cmd_id;
- state.cmdIdAuto = false;
- els.cmdId.value = state.cmdId;
- } else {
- syncCmdId();
- }
- els.phrase0.value = state.phrases[0] || "";
- refreshExtraPhrases();
- if (suggestion.action) {
- state.actionType = suggestion.action.type;
- state.action = suggestion.action;
- els.actionGrid.querySelectorAll(".card").forEach((c) => {
- c.classList.toggle("selected", c.dataset.action === state.actionType);
- });
- els.tabs.forEach((x) => x.classList.toggle("active", x.dataset.tab === "manual"));
- els.tabContents.forEach((c) => { c.hidden = c.dataset.tabContent !== "manual"; });
- renderActionForm();
- }
- setStep(3);
- });
- const discard = document.createElement("button");
- discard.type = "button";
- discard.className = "ghost";
- discard.textContent = "Отклонить";
- discard.addEventListener("click", () => { host.innerHTML = ""; });
- const actions = document.createElement("div");
- actions.className = "actions";
- actions.appendChild(discard);
- actions.appendChild(accept);
- block.appendChild(actions);
- host.appendChild(block);
- }
-
- function resetDraft() {
- state.phrases = [""];
- state.cmdId = "";
- state.cmdIdAuto = true;
- state.actionType = null;
- state.action = null;
- state.confirmSound = null;
- els.phrase0.value = "";
- els.cmdId.value = "";
- els.cmdIdHint.textContent = "";
- refreshExtraPhrases();
- els.actionGrid.querySelectorAll(".card").forEach((c) => c.classList.remove("selected"));
- els.paramsForm.innerHTML = "";
- els.yamlPreview.textContent = "";
- els.saveStatus.textContent = "";
- setStep(1);
- }
-
- function init() {
- bind();
- refreshExtraPhrases();
- setStep(1);
- const tryReady = () => {
- if (api()) {
- refreshExistingIds();
- } else {
- setTimeout(tryReady, 80);
- }
- };
- tryReady();
- }
-
- document.addEventListener("DOMContentLoaded", init);
-})();
diff --git a/tools/command_builder/web/index.html b/tools/command_builder/web/index.html
deleted file mode 100644
index b1da05b..0000000
--- a/tools/command_builder/web/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/tools/command_builder/web/styles.css b/tools/command_builder/web/styles.css
deleted file mode 100644
index b1f6b57..0000000
--- a/tools/command_builder/web/styles.css
+++ /dev/null
@@ -1,392 +0,0 @@
-:root {
- --bg: #0a1214;
- --bg-elev: #0f1a1d;
- --bg-elev-2: #142327;
- --border: #1d3036;
- --border-strong: #294349;
- --text: #d6e4e6;
- --text-dim: #8aa1a5;
- --accent: #52fefe;
- --accent-dim: #2cb8b8;
- --danger: #ff6b6b;
- --ok: #6bf2a4;
- --radius: 6px;
- --radius-lg: 8px;
-}
-
-* { box-sizing: border-box; }
-
-html, body {
- margin: 0;
- padding: 0;
- background: var(--bg);
- color: var(--text);
- font-family: "Inter", "Segoe UI", system-ui, sans-serif;
- font-size: 14px;
- line-height: 1.45;
-}
-
-.app {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
-}
-
-.topbar {
- padding: 18px 24px;
- border-bottom: 1px solid var(--border);
- background: var(--bg-elev);
-}
-
-.topbar h1 {
- margin: 0 0 14px 0;
- font-size: 17px;
- font-weight: 600;
- letter-spacing: 0.3px;
- color: var(--accent);
-}
-
-.steps {
- display: flex;
- gap: 6px;
- flex-wrap: wrap;
-}
-
-.step {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- padding: 6px 12px;
- border-radius: var(--radius);
- background: var(--bg-elev-2);
- border: 1px solid var(--border);
- color: var(--text-dim);
- font-size: 12px;
- cursor: pointer;
- font-family: inherit;
-}
-
-.step span {
- width: 18px;
- height: 18px;
- border-radius: 50%;
- background: var(--border);
- color: var(--text);
- display: inline-flex;
- align-items: center;
- justify-content: center;
- font-size: 11px;
- font-weight: 600;
-}
-
-.step.active {
- border-color: var(--accent-dim);
- color: var(--text);
-}
-
-.step.active span {
- background: var(--accent);
- color: #062023;
-}
-
-.main {
- flex: 1;
- padding: 22px 24px 32px;
- max-width: 880px;
- width: 100%;
- margin: 0 auto;
-}
-
-.panel h2 {
- margin: 0 0 6px 0;
- font-size: 15px;
- font-weight: 600;
-}
-
-.hint {
- margin: 0 0 18px 0;
- color: var(--text-dim);
- font-size: 12.5px;
-}
-
-.field {
- margin-bottom: 14px;
-}
-
-.field label {
- display: block;
- margin-bottom: 6px;
- color: var(--text-dim);
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-input[type="text"],
-input[type="number"],
-textarea,
-select {
- width: 100%;
- padding: 9px 11px;
- background: var(--bg-elev);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- color: var(--text);
- font-family: inherit;
- font-size: 13.5px;
- outline: none;
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-textarea:focus,
-select:focus {
- border-color: var(--accent-dim);
-}
-
-textarea {
- resize: vertical;
-}
-
-.row-hint {
- margin-top: 6px;
- font-size: 11.5px;
- color: var(--text-dim);
- min-height: 14px;
-}
-
-.row-hint.error {
- color: var(--danger);
-}
-
-.row-hint.ok {
- color: var(--ok);
-}
-
-.actions {
- margin-top: 20px;
- display: flex;
- gap: 10px;
- justify-content: flex-end;
- flex-wrap: wrap;
-}
-
-button {
- cursor: pointer;
- border: none;
- border-radius: var(--radius);
- padding: 9px 16px;
- font-family: inherit;
- font-size: 13px;
- font-weight: 500;
- transition: background 80ms ease, border-color 80ms ease;
-}
-
-.primary {
- background: var(--accent);
- color: #062023;
-}
-
-.primary:hover {
- background: #7affff;
-}
-
-.primary:disabled {
- background: var(--border);
- color: var(--text-dim);
- cursor: not-allowed;
-}
-
-.ghost {
- background: transparent;
- border: 1px solid var(--border-strong);
- color: var(--text);
-}
-
-.ghost:hover {
- border-color: var(--accent-dim);
-}
-
-#extra-phrases .extra-row {
- display: flex;
- gap: 6px;
- margin-bottom: 8px;
-}
-
-#extra-phrases .extra-row input {
- flex: 1;
-}
-
-#extra-phrases .extra-row button {
- background: transparent;
- border: 1px solid var(--border-strong);
- color: var(--text-dim);
- padding: 6px 10px;
- font-size: 12px;
-}
-
-.tabs {
- display: flex;
- gap: 4px;
- border-bottom: 1px solid var(--border);
- margin-bottom: 18px;
-}
-
-.tab {
- background: transparent;
- border: none;
- border-bottom: 2px solid transparent;
- border-radius: 0;
- padding: 8px 14px;
- color: var(--text-dim);
- font-size: 13px;
-}
-
-.tab.active {
- color: var(--text);
- border-bottom-color: var(--accent);
-}
-
-.grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
- gap: 10px;
-}
-
-.card {
- display: flex;
- flex-direction: column;
- gap: 4px;
- padding: 14px;
- background: var(--bg-elev);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- color: var(--text);
- text-align: left;
- min-height: 70px;
-}
-
-.card:hover {
- border-color: var(--accent-dim);
-}
-
-.card.selected {
- border-color: var(--accent);
- background: var(--bg-elev-2);
-}
-
-.card-title {
- font-weight: 600;
- font-size: 13.5px;
-}
-
-.card-sub {
- font-size: 11.5px;
- color: var(--text-dim);
-}
-
-pre {
- background: #06101294;
- border: 1px solid var(--border);
- border-radius: var(--radius);
- padding: 12px 14px;
- overflow-x: auto;
- font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
- font-size: 12.5px;
- color: #c4ecec;
- white-space: pre-wrap;
-}
-
-.toast {
- position: fixed;
- right: 22px;
- bottom: 22px;
- padding: 10px 16px;
- background: var(--bg-elev-2);
- border: 1px solid var(--accent-dim);
- border-radius: var(--radius);
- color: var(--accent);
- font-size: 13px;
- box-shadow: 0 4px 14px rgba(0,0,0,0.45);
-}
-
-.toast.error {
- border-color: var(--danger);
- color: var(--danger);
-}
-
-.params-row {
- display: flex;
- gap: 10px;
- align-items: flex-end;
- flex-wrap: wrap;
-}
-
-.params-row .field {
- flex: 1;
- min-width: 200px;
- margin-bottom: 0;
-}
-
-.checkbox {
- display: inline-flex;
- align-items: center;
- gap: 7px;
- color: var(--text-dim);
- font-size: 12.5px;
- margin-top: 6px;
- cursor: pointer;
-}
-
-.checkbox input {
- accent-color: var(--accent);
-}
-
-.steps-list {
- display: flex;
- flex-direction: column;
- gap: 10px;
- margin-bottom: 14px;
-}
-
-.step-card {
- background: var(--bg-elev);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- padding: 12px;
-}
-
-.step-card .step-head {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 8px;
-}
-
-.step-card .step-head .step-label {
- font-size: 12px;
- color: var(--text-dim);
- text-transform: uppercase;
- letter-spacing: 0.4px;
-}
-
-.step-card .step-head .icon-btn {
- background: transparent;
- border: 1px solid var(--border-strong);
- color: var(--text-dim);
- padding: 3px 8px;
- font-size: 11px;
-}
-
-.suggested-block {
- background: var(--bg-elev);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- padding: 12px;
- margin-bottom: 10px;
-}
-
-.suggested-block pre {
- margin: 6px 0;
- font-size: 12px;
-}
diff --git a/tools/command_builder/web/vendor/js-yaml.min.js b/tools/command_builder/web/vendor/js-yaml.min.js
deleted file mode 100644
index bdd8eef..0000000
--- a/tools/command_builder/web/vendor/js-yaml.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).jsyaml={})}(this,(function(e){"use strict";function t(e){return null==e}var n={isNothing:t,isObject:function(e){return"object"==typeof e&&null!==e},toArray:function(e){return Array.isArray(e)?e:t(e)?[]:[e]},repeat:function(e,t){var n,i="";for(n=0;nКонструктор команд
-
-
-
-
-
-
- Голосовые фразы
-Минимум одна фраза. Идентификатор подставится автоматически из первой фразы.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Тип действия
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Опишите команду на русском
-Модель предложит набор шагов. Их можно отредактировать перед сохранением.
- -
-
-
-
-
- Параметры действия
- -
-
-
-
- Предпросмотр и сохранение
-
-
-
-
-
-
-
-
-
-
-