@colijnit/homedecorator 257.1.4 → 258.1.1

package/app/core/enum/icon.enum.d.ts

@@ -1,6 +1,7 @@
 /** AUTO GENERATED FILE. DO NOT CHANGE.. **/
 export declare enum IconEnum {
     AddButton = "add-button",
+    AddLight = "add_light",
     Aperture = "aperture",
     ArrowUpRightAndArrowDownLeftFromCenter = "arrow-up-right-and-arrow-down-left-from-center",
     ArrowsLeftRight = "arrows-left-right",
@@ -73,8 +74,10 @@ export declare enum IconEnum {
     PaintRollerLight = "paint_roller_light",
     PenRuler = "pen-ruler",
     PencilLight = "pencil_light",
+    PlusRegular = "plus_regular",
     Qrcode = "qrcode",
     RetryButton = "retry-button",
+    RotateLight = "rotate_light",
     Settings = "settings",
     StreetViewOrange = "street-view-orange",
     StreetView = "street_view",
@@ -82,6 +85,7 @@ export declare enum IconEnum {
     TiltPhone = "tilt-phone",
     TrashCanLight = "trash_can_light",
     TriangleDown = "triangle_down",
+    TriangleExclamation = "triangle_exclamation",
     TriangleUp = "triangle_up",
     UploadLight = "upload_light",
     WandMagicSparkles = "wand_magic_sparkles",

package/app/core/model/homedecorator-settings-options.d.ts

@@ -49,4 +49,7 @@ export declare class HomedecoratorSettingsOptions {
     aaEnabled: boolean;
     useCanvasImage: boolean;
     useThumbnailImage: boolean;
+    showProgressBar: boolean;
+    showProgressText: boolean;
+    showSelectionLoader: boolean;
 }

package/app/core/model/homedecorator-settings.d.ts

@@ -33,7 +33,6 @@ export declare class HomedecoratorSettings {
     options: HomedecoratorSettingsOptions;
     catalogParameters: GetArticlesForCatalogRequest;
     renderParameters: RenderParameters;
-    newRenderParameters: RenderParameters;
     arParameters: ArParameters;
     faqUrl: string;
     feedbackUrl: string;
@@ -43,7 +42,7 @@ export declare class HomedecoratorSettings {
     sceneBackground: string;
     sceneBackgroundColor: string;
     standaloneSceneBackgroundColor: string;
-    blenderRenderService: boolean;
+    blendFilesRender: boolean;
     renderApiClientId: string;
     uploadEndpoint: string;
     renderEndpoint: string;

package/app/core/service/3dm-api.d.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { PerspectiveCamera } from 'three';
+import { PerspectiveCamera, Vector3 } from 'three';
 import { HomedecoratorSettingsService } from './homedecorator-settings.service';
 import { MessageBusService } from './message-bus.service';
 import { MatDialog } from '@angular/material/dialog';
@@ -16,6 +16,26 @@ export declare class OutputSettings {
     duration: number;
     bounces: number;
 }
+export declare class SceneSettings {
+    activeCameraId: number;
+    sceneAssetId: string;
+    lightGroupId: number;
+    hdriAssetId: number;
+    hdriRotation: Vector3;
+    hdriIntensity: number;
+    default: boolean;
+    id: number;
+}
+export declare class RenderSettings {
+    renderSettingsAssetId: string;
+    width: number;
+    height: number;
+    outputType: OutputType;
+    renderType: RenderType;
+    transparency: boolean;
+    quality: number;
+    exposure: number;
+}
 export declare class Camera {
     id: number;
     assetId: string;
@@ -29,6 +49,12 @@ export declare class CameraDOF {
     blades: number;
     rotation: number;
 }
+export declare class RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
 declare enum OutputType {
     Jpeg = 0,
     Png = 1,
@@ -49,18 +75,24 @@ export declare class ApiServiceModule {
     constructor(iOneControllerService: HomedecoratorConnectorService, messageService: MessageBusService, _http: HttpClient, _settingsService: HomedecoratorSettingsService, _dialog: MatDialog, _configurationService: ConfigurationService);
     uploadToApiGLB(formData: FormData, filename: string, camera: PerspectiveCamera, standalone: boolean, renderParameters: any, renderPreview: boolean): Promise<void>;
     requestRender(filename: string, camera: PerspectiveCamera, standalone: boolean, renderParameters: any, renderPreview: boolean): Promise<any>;
+    getCameraProperties(camera: PerspectiveCamera): any;
+    getRenderFromJson(requestData: any): Promise<void>;
+    private _sendJsonRequest;
     private _sendRequest;
     private _setOptions;
     private _createRenderRequestBody;
     private _createProductRenderRequestBody;
-    private _setOutputSettings;
-    private _setProductOutputSettings;
+    private _setRenderSettings;
+    private _setProductRenderSettings;
+    private _setSceneSettings;
+    private _setProductSceneSettings;
     private _calculateCameraPositionRotation;
     private _setCameraRotation;
     private _cameraSettings;
     private _cameraProductSettings;
     private _getSceneBasedLights;
     private _shortenValue;
+    private _degreesToVector3;
     static ɵfac: i0.ɵɵFactoryDeclaration<ApiServiceModule, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ApiServiceModule>;
 }

package/app/core/utils/file.utils.d.ts

@@ -1,5 +1,7 @@
 export declare class FileUtils {
     private static _cachedTextureUploads;
+    private static _filesDontExist;
+    private static _filesExist;
     static StripMimeStringFromDataUri(dataUri: string): string;
     static GetMimeStringFromDataUri(dataUri: string): string;
     /**

package/app/plugins/lite-selector/lite-selector/component/answers-slideout/answers-slideout.component.scss

@@ -4,6 +4,26 @@ co-slideout {
 }
 
 :host {
+  &.custom-dimensions {
+    co-slideout {
+      width: 640px;
+      max-width: 100%;
+      height: 100%;
+      padding: 30px;
+      box-sizing: border-box;
+      h4 {
+        margin: 10px 0;
+      }
+      .title {
+        .options-search {
+          margin: 0 0 10px 0;
+        }
+      }
+      .filter {
+        margin: 0 0 15px 0;
+      }
+    }
+  }
   &.bottom-align:not(.custom-dimensions) {
     co-slideout {
       width: 100%;

package/app/plugins/model-uploader/model-previewer/model-preview.component.d.ts

@@ -57,6 +57,9 @@ export declare class ModelPreviewComponent implements OnInit, OnDestroy {
     heightAdjustable: boolean;
     placementOptions: CoDomainValue[];
     selectedPlacement: number;
+    canvReference: HTMLElement;
+    hasErrors: boolean;
+    listOfErrors: any[];
     private _measurements;
     protected readonly icon: typeof IconEnum;
     ngOnInit(): void;
@@ -94,8 +97,7 @@ export declare class ModelPreviewComponent implements OnInit, OnDestroy {
     private _blobToArrayBuffer;
     private _createLightFromProperties;
     private _setObjectProperties;
-    private _validateTextures;
-    private _replaceProceduralTextures;
+    private _validateObjectStructure;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModelPreviewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModelPreviewComponent, "rp-model-preview", never, {}, {}, never, never>;
 }

package/app/plugins/model-uploader/model-previewer/model-preview.component.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   font-size: 14px;
+  position: relative;
 
   .model-preview-window {
     .model-preview-window-bottom {
@@ -44,6 +45,7 @@
       .model-preview-info-right {
       }
     }
+
     .model-preview-info {
       margin-top: 80px;
     }
@@ -97,6 +99,7 @@ mat-radio-group {
   box-sizing: border-box;
   padding: 4px 10px;
   line-height: 30px;
+
   &:hover {
     background: #da9803;
     color: #fff;
@@ -118,6 +121,7 @@ mat-radio-group {
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
+
     p {
       margin: 0;
       padding: 0;
@@ -151,17 +155,20 @@ mat-radio-group {
       font-size: 14px;
       position: relative;
       top: -15px;
+
       ::ng-deep mat-icon {
         width: 25px;
         height: 25px;
         position: relative;
         top: 8px;
+
         svg {
           path {
             fill: #da9803;
           }
         }
       }
+
       &:hover {
         background: none;
         color: #da9803;
@@ -189,6 +196,7 @@ mat-radio-group {
 .exportButtonDark {
   background: #5b6875;
   border-color: #5b6875;
+
   &:hover {
     background: #5b6875;
     color: #fff;
@@ -200,6 +208,34 @@ mat-radio-group {
   cursor: pointer;
 }
 
+.model-error-background {
+  position: absolute;
+  // make sure it fits the mat-dialog
+  top: -52px;
+  right: -24px;
+  bottom: -24px;
+  left: -24px;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.model-error-container {
+  position: relative;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 10px 25px;
+  border: 1px solid #5b6875;
+  top: 30%;
+  left: 50%;
+  width: 400px;
+  margin-left: -200px;
+
+  .model-error-header {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 :host {
   ::ng-deep .mat-form-field-wrapper {
     padding-bottom: 0;

package/app/plugins/model-uploader/model-uploader/model-upload.component.scss

@@ -23,6 +23,11 @@
   }
 }
 
+.modelSupport {
+  display: block;
+  font-size: 12px;
+  font-style: italic;
+}
 .upload-error-container {
   position: relative;
   padding: .75rem 1.25rem;

package/app/plugins/model-uploader/model-uploader/model-uploader.component.d.ts

@@ -1,8 +1,8 @@
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { HomedecoratorSettingsService } from '../../../core/service/homedecorator-settings.service';
 import { MessageBusService } from '../../../core/service/message-bus.service';
 import * as i0 from "@angular/core";
-export declare class ModelUploaderComponent implements OnInit, OnDestroy {
+export declare class ModelUploaderComponent {
     settingsService: HomedecoratorSettingsService;
     private _messageService;
     fileUploadInput: ElementRef;
@@ -13,8 +13,6 @@ export declare class ModelUploaderComponent implements OnInit, OnDestroy {
     private _maxFileSize;
     private _allowedFiles;
     constructor(settingsService: HomedecoratorSettingsService, _messageService: MessageBusService);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
     onChange(event: any): void;
     upload(fileExtension: string): Promise<void>;
     fileToArrayBuffer(file: File): Promise<ArrayBuffer>;

package/app/plugins/model-uploader/model-uploader.module.d.ts

@@ -14,8 +14,9 @@ import * as i12 from "@angular/material/form-field";
 import * as i13 from "@angular/material/core";
 import * as i14 from "@angular/material/select";
 import * as i15 from "@angular/forms";
+import * as i16 from "../../shared/loader/loader.module";
 export declare class ModelUploaderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ModelUploaderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ModelUploaderModule, [typeof i1.ModelUploaderComponent, typeof i2.ModelPreviewComponent], [typeof i3.CommonModule, typeof i4.CoreModule, typeof i5.MatIconModule, typeof i6.MatButtonModule, typeof i7.ButtonModule, typeof i8.ImageModule, typeof i9.CatalogExternalSourcesModule, typeof i9.CatalogExternalSourceModule, typeof i10.MatRadioModule, typeof i11.MatSlideToggleModule, typeof i12.MatFormFieldModule, typeof i13.MatOptionModule, typeof i14.MatSelectModule, typeof i7.IconModule, typeof i15.FormsModule], [typeof i1.ModelUploaderComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ModelUploaderModule, [typeof i1.ModelUploaderComponent, typeof i2.ModelPreviewComponent], [typeof i3.CommonModule, typeof i4.CoreModule, typeof i5.MatIconModule, typeof i6.MatButtonModule, typeof i7.ButtonModule, typeof i8.ImageModule, typeof i9.CatalogExternalSourcesModule, typeof i9.CatalogExternalSourceModule, typeof i10.MatRadioModule, typeof i11.MatSlideToggleModule, typeof i12.MatFormFieldModule, typeof i13.MatOptionModule, typeof i14.MatSelectModule, typeof i7.IconModule, typeof i15.FormsModule, typeof i16.LoaderModule], [typeof i1.ModelUploaderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ModelUploaderModule>;
 }

package/app/plugins/render/render-controls/render-controls.component.d.ts

@@ -30,6 +30,10 @@ export declare class RenderControlsComponent {
     private _utilsService;
     readonly icons: typeof IconEnum;
     blenderPreviewRender: string;
+    hdriIntensity: number;
+    hdriRotation: number;
+    lightingExposure: number;
+    showRenderSettings: boolean;
     private _subs;
     constructor(renderService: RenderService, messageService: MessageBusService, viewModeService: ViewModeService, settingsService: HomedecoratorSettingsService, iconService: HomedecoratorIconCacheService, _dialog: MatDialog, _sceneService: SceneService, _cameraService: CameraService, _configurationService: ConfigurationService, _settingsService: HomedecoratorSettingsService, _newRenderService: NewRenderService, _utilsService: UtilsService);
     get disablePictureButton(): boolean;
@@ -42,14 +46,14 @@ export declare class RenderControlsComponent {
     inPictureMode: boolean;
     readonly renderModes: typeof RenderModes;
     showRenderForm(event: MouseEvent): void;
-    checkCameraPosition(event: MouseEvent): void;
     startRenderingRoom(): Promise<void>;
     createBlenderRender(): void;
     resetBlenderRenderScene(): void;
     moveCameraWithinBounds(): void;
     getPreviewRender(): void;
     showPreview(image: string): void;
-    private _validateRenderPosition;
+    toggleRenderSettings(): void;
+    validateRenderPosition(): void;
     private _getObjectsByName;
     static ɵfac: i0.ɵɵFactoryDeclaration<RenderControlsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RenderControlsComponent, "rp-render-controls", never, {}, {}, never, never>;

package/app/plugins/render/render-controls/render-controls.component.scss

@@ -15,12 +15,26 @@ $border-color: #dda73f;
     padding: 10px 25px 25px;
     border-radius: 5px;
     box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    max-width: 275px;
 
     .render-popup-header {
       display: flex;
       justify-content: space-between;
       font-family: inherit;
 
+      h3 {
+        display: flex;
+        justify-content: space-between;
+        ::ng-deep .renderErrorIcon {
+          width: 20px;
+          height: 20px;
+          margin-left: 20px;
+          svg, svg polygon {
+            fill: #DC143C;
+          }
+        }
+      }
+
       .close-popup-container {
         cursor: pointer;
         border: none;
@@ -78,6 +92,8 @@ $border-color: #dda73f;
       min-width: 275px;
       margin: 5px 0;
       position: relative;
+      width: 275px;
+      height: 150px;
 
       .render-popup-preview-placeholder {
         background-color: #fff;
@@ -102,6 +118,7 @@ $border-color: #dda73f;
         width: 30px;
         background-color: #dda73f;
         color: #fff;
+        margin: 0;
 
         ::ng-deep co-icon {
           svg {
@@ -117,13 +134,31 @@ $border-color: #dda73f;
       margin: 5px 0;
       width: 100%;
 
+      .toggleable {
+        cursor: pointer;
+        display: flex;
+        justify-content: right;
+        align-content: center;
+        p{
+          padding: 0;
+          margin: 0;
+          font-size: 12px;
+          line-height: 30px;
+        }
+
+        .icon-rotate {
+          transform: rotate(180deg);
+        }
+      }
+
       .mat-form-field {
         width: 100%;
-
+        font-size: 14px;
         ::ng-deep .mat-form-field-flex {
           background-color: #fff;
           color: #000;
           padding: 3px 6px;
+          border: 1px solid #ddd;
         }
 
         ::ng-deep .mat-form-field-underline {
@@ -134,6 +169,44 @@ $border-color: #dda73f;
           padding-bottom: 0;
         }
       }
+
+      .setting-part-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 5px;
+        .third-width {
+          width: 32%
+        }
+        .setting-part-buttons {
+
+          .amount-button {
+            float: none;
+            box-sizing: border-box;
+            padding: 2px;
+            background: none;
+            cursor: pointer;
+            border: none;
+            width: 25px;
+            height: 25px;
+            margin: 0 5px;
+            co-icon {
+              display: block;
+              width: 25px;
+              height: 25px;
+              ::ng-deep svg {
+                fill: #5b6875;
+              }
+            }
+          }
+        }
+        .setting-part-slider {
+          .mat-slider-horizontal {
+            min-width: 110px;
+            height: 28px;
+          }
+        }
+      }
     }
   }
 

package/app/plugins/render/render.module.d.ts

@@ -14,8 +14,10 @@ import * as i12 from "@angular/material/grid-list";
 import * as i13 from "@angular/material/progress-spinner";
 import * as i14 from "@angular/forms";
 import * as i15 from "@colijnit/corecomponents";
+import * as i16 from "@angular/material/slider";
+import * as i17 from "@colijnit/corecomponents_v12";
 export declare class RenderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RenderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RenderModule, [typeof i1.RenderDialogComponent, typeof i2.RenderControlsComponent], [typeof i3.CoreModule, typeof i4.CommonModule, typeof i5.MatButtonModule, typeof i6.MatDialogModule, typeof i7.MatTooltipModule, typeof i8.MatInputModule, typeof i9.MatIconModule, typeof i10.MatSelectModule, typeof i11.MatSlideToggleModule, typeof i12.MatGridListModule, typeof i13.MatProgressSpinnerModule, typeof i14.FormsModule, typeof i15.IconModule], [typeof i1.RenderDialogComponent, typeof i2.RenderControlsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RenderModule, [typeof i1.RenderDialogComponent, typeof i2.RenderControlsComponent], [typeof i3.CoreModule, typeof i4.CommonModule, typeof i5.MatButtonModule, typeof i6.MatDialogModule, typeof i7.MatTooltipModule, typeof i8.MatInputModule, typeof i9.MatIconModule, typeof i10.MatSelectModule, typeof i11.MatSlideToggleModule, typeof i12.MatGridListModule, typeof i13.MatProgressSpinnerModule, typeof i14.FormsModule, typeof i15.IconModule, typeof i16.MatSliderModule, typeof i17.TooltipDirectiveModule], [typeof i1.RenderDialogComponent, typeof i2.RenderControlsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RenderModule>;
 }

package/app/plugins/render/service/new-render.service.d.ts

@@ -51,12 +51,12 @@ export declare class NewRenderService implements OnDestroy {
     renderRoom(size: any): Promise<void>;
     private _exportToGlb;
     private _getNewRenderImage;
-    private _handleAjaxBlenderRender;
     private _handleAjaxRender;
     private _handleWebSocketRender;
     private _handleWebSocketRoomRender;
     private _showPreviewImage;
     private _getDataForRender;
+    private _getSceneRenderSettings;
     private _getDataForRoomRender;
     private _arrayBufferToBase64;
     static ɵfac: i0.ɵɵFactoryDeclaration<NewRenderService, never>;

package/app/plugins/render/service/render.service.d.ts

@@ -58,7 +58,7 @@ export declare class RenderService implements OnDestroy {
     selectedImageSize: number;
     selectedEnvironment: number;
     selectedRenderScene: string;
-    blenderRenderService: boolean;
+    blendFilesRender: boolean;
     positions: number;
     save: boolean;
     renderRoomImageChanged: BehaviorSubject<string>;

package/app/plugins/threedselector/element-buttons/element-buttons.component.scss

@@ -25,14 +25,17 @@
   min-width: 30px;
   height: 35px;
   width: 35px;
-  max-height: 50px;
-  max-width: 50px;
-  background: #2c67ff;
+  max-height: 30px;
+  max-width: 30px;
+  background: #17253391;
   transform: translate(-15px, -15px);
   box-shadow: 0 0 0 5px rgb(0 0 0 / 7%);
   ::ng-deep co-icon {
-    width: 100%;
-    height: 100%;
+    width: 16px;
+    height: 16px;
+    svg {
+      fill: #FFF;
+    }
   }
 }
 

package/app/plugins/threedselector/element-toolbar/element-toolbar.component.scss

@@ -27,9 +27,9 @@
 
         ::ng-deep co-icon {
           margin-right: 7px;
-          border: 1px solid black;
-          width: 18px;
-          height: 18px;
+          border: none;
+          width: 16px;
+          height: 16px;
           border-radius: 10px;
 
           svg g {
@@ -76,6 +76,7 @@
 .toolbar-wrapper {
   display: flex;
   align-items: center;
+  gap: 2px;
 }
 .toolbar-wrapper button:not(:last-child) {
   margin-right: 5px;
@@ -88,6 +89,22 @@
   align-items: center;
   justify-content: center;
 }
+:host ::ng-deep .mat-flat-button.mat-accent,
+:host ::ng-deep .mat-raised-button.mat-accent,
+:host ::ng-deep .mat-fab.mat-accent,
+:host ::ng-deep .mat-mini-fab.mat-accent {
+  background-color: #17253391;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  co-icon {
+    width: 16px;
+    height: 16px;
+    svg {
+      fill: #FFF;
+    }
+  }
+}
 
 :host ::ng-deep .mat.mat-mini-fab {
   margin-right: 200px;

package/app/plugins/threedselector/threedselector/service/variation-cache.service.d.ts

@@ -18,6 +18,7 @@ export declare class VariationCacheService implements OnDestroy {
     preloadVariationsAsync(schema: string, fileNames: string[], articleAssetPath?: string): Promise<void>;
     loadVariation(schema: string, fileName: string): Promise<VariationSettings>;
     private _waitForVariationToLoad;
+    private _createSettingsForFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<VariationCacheService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<VariationCacheService>;
 }

package/app/plugins/threedselector/threedselector/threedselector.component.d.ts

@@ -115,6 +115,8 @@ export declare class ThreedselectorComponent implements OnInit, OnDestroy {
     loaderProgress: number;
     loaderText: string;
     showLoader: boolean;
+    showProgressBar: boolean;
+    showProgressText: boolean;
     private _selectedElementObject;
     private _skuAlreadySet;
     private _itemsFromScratch;

package/app/plugins/threedselector/threedselector/threedselector.component.scss

@@ -95,6 +95,24 @@
   z-index: 1000;
   box-sizing: border-box;
   padding: 15px;
+  &.full {
+    width: 100%;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    border-radius: 0;
+    transform: none;
+    z-index: auto;
+    padding: 0;
+    position: absolute;
+    #progress-bar {
+      width: 100%;
+      height: 5px;
+      border: none;
+      margin-top: 0;
+      border-radius: 0;
+    }
+  }
 }
 
 #loader-text {

package/app/shared/loader/bundle-loader.component.scss

@@ -0,0 +1,60 @@
+:host {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  &.show {
+    opacity: 1;
+    pointer-events: all;
+    transition: opacity 0.3s ease;
+  }
+
+  .organic-loader {
+    width: 80px;
+    height: 80px;
+    z-index: 1100;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .inner-circle {
+    transform-origin: 100px 100px;
+    animation: spin 2s linear infinite;
+    stroke: rgb(150, 80, 160);
+    stroke-width: 10px;
+    stroke-dasharray: 500px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  /* Blinking letters from left to right */
+  #letter1, #letter2, #letter3, #letter4 {
+    opacity: 0;
+    animation: blink 1.6s infinite;
+  }
+
+  #letter1 { animation-delay: 0s; }
+  #letter2 { animation-delay: 0.3s; }
+  #letter3 { animation-delay: 0.6s; }
+  #letter4 { animation-delay: 0.9s; }
+
+  @keyframes blink {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+  }
+}