Dashboard

Text Field

Text Field

                                        
    <div class="text-field">
        <input type="text" placeholder="Enter something">
    </div>

Text Field with message

Something wrong !

Text Field with error message

                                        
    <div class="adb-error-message-container ml-2 mb-2 w-100">
        <i class="fas fa-exclamation-circle"></i>
        <span>Something wrong !</span>
    </div>
    <div class="adb-text-field">
        <input type="text" placeholder="Enter something">
    </div>

Select Field

Select Field (test.html)

                                        
    <div class="adb-select-field" id="yourSelect">
        <div class="select-selected">
            <p></p>
        </div>
        <div class="select-items">
                                            
        </div>
        <select>
            <option value="1">Option 1</option> 
            <option value="2">Option 2</option> 
            <option value="3">Option 3</option> 
        </select>
    </div>
    <script src="Js/mypages/form.js"></script>

Select Field (test.js)

                                        
    const neumorphismSelectDemo = NeumorphismSelect({
        selectContainer: '#yourSelect'
    });
    neumorphismSelectDemo.initialize();
                                            
    $(document).on('click',function(e){
        neumorphismSelectDemo.closeAllSelects();
    });

Drop zone

Name: None

Ext: None

Size: None

Drop Zone (test.html)

                                        
    <div class="adb-dropzone-container">
        <div class="dropzone-field__outer">
            <div class="dropzone-field__inner">
                <input type="file" id="test-file">
                <div class="dropzone-field" id="dropzone-track-field">
                    <i class="fas fa-plus"></i>
                </div>
            </div>
        </div>
    </div>
    <script src="Js/mypages/form.js"></script>

Drop zone (test.js)

                                        
    var MAX_FILE_SIZE = 5
    function showFileInfo(files){
        $("#file-name").text(files[0].name);
        $("#file-extension").text(files[0].type);
        let fileSize = (files[0].size / 1000000);
        $("#file-size").text(fileSize.toFixed(2) + " MB");
        if(fileSize > MAX_FILE_SIZE){
            $("#file-size").addClass("text-danger");
        }else{
            $("#file-size").removeClass("text-danger");
        }
    }
    
    const testDropzone = DropZone({
        dropZoneContainer: '#yourDropzone',
        fileInput: '#test-file',
        handleFileCallback: function(files){
            showFileInfo(files);
        },
        handleFileChangeCallback: function(files){
            showFileInfo(files);
        },
        highlightDropzoneCallback: null,
        unhighlightDropzoneCallback: null,
        handleDropCallback: null,
        handleClickCallback: null,
    });
    
    testDropzone.initialize();

Switch

Switch (test.html)

                                        
    <label for="use-folder-switch" class="adb-neumor-switch">
        <input type="checkbox" name=" id="use-folder-switch">
        <div class="outer">
            <div class="inner">
                <div class="switch-point"></div>
            </div>
        </div>
    </label>

Activated green switch (test.html)

                                        
    <label for="use-folder-switch" class="adb-neumor-switch adb-neumor-switch--active-green">
        <input type="checkbox" id="use-folder-switch">
        <div class="outer">
            <div class="inner">
                <div class="switch-point"></div>
            </div>
        </div>
    </label>

Activated red switch (test.html)

                                        
    <label for="use-folder-switch" class="adb-neumor-switch adb-neumor-switch--active-red">
        <input type="checkbox" id="use-folder-switch">
        <div class="outer">
            <div class="inner">
                <div class="switch-point"></div>
            </div>
        </div>
    </label>

Activated custom color switch (test.html)

                                        
    <label for="use-folder-switch" class="adb-neumor-switch" style="--your-color: #1abc9c">
        <input type="checkbox" id="use-folder-switch">
        <div class="outer">
            <div class="inner">
                <div class="switch-point"></div>
            </div>
        </div>
    </label>

Radiobox

file 1

12 MB

file 2

6 MB

file 3

5 MB

file 4

1 MB

Radio box with Bootstrap (test.html)

                                        
    <div class="adb-checkbox w-100">
        <div class="record">
            <!--Using bootstrap to customize your style-->
            <div class="row h-100">              
                <div class="col-1">
                    <div class="h-100 w-100 d-flex justify-content-center align-items-center">
                        <label class="radio-box">
                            <input type="radio" name="test_radio">
                            <span class="checkmark">
                                <i class="fas fa-check-circle"></i>
                            </span>
                        </label>
                    </div>
                </div>
                <div class="col-7">
                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
                        <a>
                            <b>file 1</b>
                        </a>
                    </div>
                </div>
                <div class="col-4">
                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
                        <span>
                            12 MB
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Checkbox