Upload folder using huggingface_hub

CSS/auto_cleaner.css

@@ -0,0 +1,187 @@
+/* General Styles */
+
+hr {
+    border-color: grey;
+    background-color: grey;
+    opacity: 0.25;
+}
+
+.instruction_AC {
+    font-family: cursive;
+    font-size: 18px;
+    color: grey;
+    user-select: none;
+    cursor: default;
+}
+
+
+/* Container style */
+
+.container_AC {
+    position: relative;
+    background-color: #232323;
+    width: 800px;
+    height: auto;
+    padding: 15px;
+    border-radius: 15px;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
+    margin-bottom: 5px;
+    overflow: visible;
+}
+
+.container_AC::before {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    content: "AutoCleanerV3.7";
+    font-weight: bold;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.container_AC::after {
+    position: absolute;
+    top: 30px;
+    right: 10px;
+    content: "ANXETY";
+    font-weight: bold;
+    font-size: 18px;
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.custom-select-multiple_AC select {
+    padding: 10px;
+    font-family: cursive;
+    border: 1px solid #262626 !important;
+    border-radius: 10px;
+    color: white;
+    background-color: #1c1c1c;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.output_AC {
+    padding: 10px;
+    height: auto;
+    border: 1px solid #262626;
+    border-radius: 10px;
+    background-color: #1c1c1c;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+    width: auto;
+    box-sizing: border-box;
+}
+
+.output_message_AC {
+    font-family: cursive;
+    color: white !important;
+    font-size: 14px;
+    user-select: none;
+    cursor: default
+}
+
+
+.storage_info_AC {
+    padding: 5px 20px;
+    height: auto;
+    border: 1px solid #262626;
+    border-radius: 10px;
+    background-color: #1c1c1c;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+    width: auto;
+    font-family: cursive;
+    color: #B2B2B2 !important;
+    font-size: 14px;
+    user-select: none;
+    cursor: default
+}
+
+
+/* Button and storage info layout */
+.lower_information_panel_AC {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+/* Button style */
+
+.button_AC {
+    width: auto;
+    font-family: cursive;
+    color: white !important;
+    font-size: 14px;
+    font-weight: bold;
+    height: 35px;
+    border-radius: 15px;
+    background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
+    background-size: 200% 200%;
+    background-position: left bottom;
+    transition: background 0.5s ease-in-out, transform 0.3s ease;
+}
+
+.button_AC:hover {
+    cursor: pointer;
+    background-size: 200% 200%;
+    background-position: right bottom;
+    transform: translateY(1px);
+}
+
+.button_execute_AC:hover {
+    background-image: radial-gradient(circle at top left, purple 10%, #93ac47 90%);
+}
+
+.button_clear_AC:hover {
+    background-image: radial-gradient(circle at top left, purple 10%, #fc3468 90%);
+}
+
+.button_execute_AC:active,
+.button_clear_AC:active {
+    filter: brightness(0.75);
+}
+
+.jupyter-widgets.lm-Widget:focus {
+    outline: none;
+}
+
+
+/* Animation of elements */
+
+/* Emergence */
+.container_AC {
+    animation-name: slideInTopBlur;
+    animation-duration: 0.7s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes slideInTopBlur {
+    0% {
+        transform: translate3d(0, 50%, 0) scale(0.85) rotate3d(1, 0, 0, -85deg);
+        filter: blur(5px) grayscale(1) brightness(0.5);
+        opacity: 0;
+    }
+    100% {
+        transform: translate3d(0, 0, 0) scale(1) rotate3d(1, 0, 0, 0deg);
+        filter: blur(0) grayscale(0) brightness(1);
+        opacity: 1;
+    }
+}
+
+/* Leaving */
+.container_AC.hide {
+    animation-name: slideOutTopBlur;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes slideOutTopBlur {
+    0% {
+        transform: translate3d(0, 0, 0) scale(1);
+        filter: blur(0) grayscale(0) brightness(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translate3d(0, -100%, 0);
+        filter: blur(5px) grayscale(1) brightness(0);
+        opacity: 0;
+    }
+}

CSS/dl_display_result.css

@@ -0,0 +1,116 @@
+/* General Styles */
+.header_dl,
+.header_outputs_dl {
+    font-family: cursive;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+}
+.header_dl {
+    color: #AC8FA5;
+    margin-bottom: 15px;
+}
+.header_outputs_dl {
+    color: #0083C0;
+}
+
+hr {
+    border-color: grey;
+    background-color: grey;
+    opacity: 0.25;
+    width: 1000px;
+}
+
+/* Element text style */
+.widget-html {
+    font-family: cursive;
+    font-size: 14px;
+    color: white !important;
+    user-select: none;
+}
+
+
+/* Container style */
+.container_dl {
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    background-color: #232323;
+    width: 1200px;
+    height: auto;
+    margin: 40px 10px 10px 10px;
+    padding: 10px 15px;
+    border-radius: 15px;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.3);
+    transition: all 0.5s ease-in-out;
+    overflow: visible;
+}
+.container_dl::after {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    content: "ANXETY";
+    font-weight: bold;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.result_output_dl {
+    flex-wrap: wrap;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    background-color: #1F1F1F;
+    width: 95%;
+    padding: 10px 15px;
+    overflow: visible;
+}
+.outputs_dl {
+    flex-grow: 1;
+    flex-wrap: wrap;
+    background-color: #181818;
+    padding: 10px 15px;
+    border-radius: 15px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.3);
+    color: #C1C1C1;
+    margin: 8px;
+    transition: all 0.15s ease-in-out;
+}
+
+/* good use of space */
+.extension {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+
+/* Animation of elements */
+
+.container_dl,
+.outputs_dl {
+    animation: showedResult 1s;
+}
+.items_dl {
+    animation: showedText 1s;
+}
+
+@keyframes showedResult {
+    0% {
+        transform: translate3d(0, 15%, 0);
+        opacity: 0;
+    }
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes showedText {
+    0% {
+        transform: translate3d(-30%, 0, 0);
+        opacity: 0;
+    }
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}

CSS/main_widgets.css

@@ -0,0 +1,333 @@
+/* General Styles */
+.header {
+    font-family: cursive;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ff8cee;
+    margin-bottom: 15px;
+    user-select: none;
+    cursor: default;
+    display: inline-block;
+}
+
+hr {
+    border-color: grey;
+    background-color: grey;
+    opacity: 0.25;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+
+/* Container style */
+
+.container {
+    position: relative;
+    background-color: #232323;
+    width: 1080px;
+    padding: 10px 15px;
+    border-radius: 15px;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
+    margin-bottom: 5px;
+    overflow: hidden;
+}
+
+.container::after {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    content: "ANXETY";
+    font-weight: bold;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.2);
+}
+
+/* background img */
+.container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: var(--img_background);
+  background-size: var(--img_scale);
+  background-repeat: var(--img_mode);
+  opacity: var(--img_opacity);
+  mix-blend-mode: screen;
+  pointer-events: none;
+  filter: blur(var(--img_blur));
+  z-index: -1;
+}
+
+.image_1::before {
+  background-position: var(--image_x) calc(-120px - var(--image_y));
+}
+.image_2::before {
+  background-position: var(--image_x) calc(-290px - var(--image_y));
+}
+.image_3::before {
+  background-position: var(--image_x) calc(-430px - var(--image_y));
+}
+.image_4::before {
+  background-position: var(--image_x) calc(var(--img_height_dif) - var(--image_y));
+}
+
+.container_custom_downlad {
+    height: 55px;
+    transition: all 0.5s;
+}
+
+.container_custom_downlad.expanded {
+    height: 270px;
+}
+
+
+/* Element text style */
+
+.widget-html,
+.widget-button,
+.widget-text label,
+.widget-checkbox label,
+.widget-dropdown label,
+.widget-dropdown select,
+.widget-text input[type="text"] {
+    font-family: cursive;
+    font-size: 14px;
+    color: white !important;
+    user-select: none;
+}
+
+.widget-text input[type="text"]::placeholder {
+    color: grey;
+}
+
+
+/* Input field styles */
+
+.widget-dropdown select,
+.widget-text input[type="text"] {
+    height: 30px;
+    background-color: var(--bg-field-color);
+    border: 1px solid #262626;
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease-in-out;
+    backdrop-filter: blur(var(--bg-field-blur-level));
+}
+
+.widget-dropdown select:focus,
+.widget-text input[type="text"]:focus {
+    border-color: #006ee5;
+}
+
+.widget-dropdown select:hover,
+.widget-text input[type="text"]:hover {
+    transform: scale(1.003);
+    background-color: var(--bg-field-color-hover);
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.widget-dropdown option {
+    background-color: #1c1c1c;
+}
+
+
+/* Slider Checkbox style */
+
+.widget-checkbox input[type="checkbox"] {
+    appearance: none;
+    position: relative;
+    top: 4px; /* Why is he taller?! */
+    width: 40px;
+    height: 20px;
+    border: none;
+    border-radius: 10px;
+    background-color: #20b2aa;
+    cursor: pointer;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s ease;
+}
+.widget-checkbox input[type="checkbox"]:checked {
+    background-color: #2196F3;
+}
+
+.widget-checkbox input[type="checkbox"]:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 3px;
+    width: 16px;
+    height: 16px;
+    border-radius: inherit;
+    background-color: white;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+    transform: translateY(-50%);
+    transition: left 0.3s ease;
+}
+.widget-checkbox input[type="checkbox"]:checked:before {
+    left: 21px;
+}
+
+
+/* Button styles */
+
+.button_save {
+    font-size: 15px;
+    font-weight: bold;
+    width: 120px;
+    height: 35px;
+    border-radius: 15px;
+    background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
+    background-size: 200% 200%;
+    background-position: left bottom;
+    transition: background 0.5s ease-in-out, transform 0.3s ease;
+}
+
+.button_save:hover {
+    cursor: pointer;
+    background-image: radial-gradient(circle at top left, purple 10%, #93ac47 90%);
+    background-size: 200% 200%;
+    background-position: right bottom;
+    transform: translateY(1px);
+}
+
+.button_ngrok {
+    font-size: 12px;
+    height: 30px;
+    border-radius: 10px;
+    padding: 1px 12px;
+    background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
+    background-size: 200% 200%;
+    background-position: left bottom;
+    transition: background 0.5s ease-in-out, transform 0.3s ease;
+    white-space: nowrap;
+}
+
+.button_ngrok:hover  {
+    cursor: pointer;
+    background-image: radial-gradient(circle at top left, purple 10%, #1D94BB 90%);
+    background-size: 200% 200%;
+    background-position: right bottom;
+    transform: translateY(1px);
+}
+
+.button_save:active,
+.button_ngrok:active {
+    filter: brightness(0.75) !important;
+}
+
+/* Removes ugly stroke from widget buttons. */
+.jupyter-widgets.lm-Widget:focus {
+    outline: none;
+}
+
+
+/* Popup style of `INFO` window */
+
+.info {
+    position: absolute;
+    top: -5px;
+    right: 95px;
+    color: grey;
+    font-family: cursive;
+    font-size: 14px;
+    font-weight: normal;
+    user-select: none;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    display: inline-block;
+}
+
+.popup {
+    position: absolute;
+    top: 120px;
+    z-index: 999;
+    width: auto;
+    padding: 10px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    border-radius: 8px;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    color: #fff;
+    font-size: 16px;
+    font-family: cursive;
+    user-select: none;
+    cursor: default;
+    pointer-events: none;
+    transform: rotate(-5deg);
+    transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.sample {
+    display: inline-block;
+    margin-top: 25px;
+    padding: 10px 100px;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #c6e2ff;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 25px rgba(255, 255, 255, 0.2);
+}
+
+.info.showed {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.info:hover + .popup {
+    top: 35px;
+    opacity: 1;
+    pointer-events: initial;
+    transform: rotate(0deg);
+}
+
+
+/* Animation of elements */
+
+.container,
+.button_save {
+    animation-name: showedWidgets;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+
+.container.hide,
+.button_save.hide {
+    animation-name: hideWidgets;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes showedWidgets {
+    0% {
+        transform: translate3d(-65%, 15%, 0) scale(0) rotate(15deg);
+        filter: blur(25px) grayscale(1) brightness(0.3);
+        opacity: 0;
+    }
+    100% {
+        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+        filter: blur(0) grayscale(0) brightness(1);
+        opacity: 1;
+    }
+}
+
+@keyframes hideWidgets {
+    0% {
+        transform: translate3d(0, 0, 0) scale(1) rotate3d(1, 0, 0, 0deg);
+        filter: blur(0) grayscale(0) brightness(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translate3d(0, 5%, 0) scale(0.9) rotate3d(1, 0, 0, 90deg);
+        filter: blur(15px) grayscale(1) brightness(0.5);
+        opacity: 0;
+    }
+}