����JFIF�����%%��� }!1AQa"q2���#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz������������������������������������������������������������������������� w!1AQaq"2�B���� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|��O�������h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@��o�E��/�?��ߵE_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ ?�z�����������goڢ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?��=[�Qg�����o����Q@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y�����[����TP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,���|-��v��(���� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�������;~��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@�������?�_�����j������ (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@��o�E��/�?��ߵE_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ ?�z�����������goڢ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?��=[�Qg�����o����Q@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y�����[����TP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,���|-��v��(���� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�������;~��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@�������?�_�����j������ (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@��o�E��/�?��ߵE_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ ?�z�����������goڢ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?��=[�Qg�����o����Q@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y�����[����TP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,��������ο�O�P��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@����(���g���Y������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���V��Y|����Y����UP��@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P����,�����,��u������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j���h�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� �@���o�E��?�?����ο�U_�P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@ _�z�����������g_ڪ�?��(�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (��?�/�=[�Qe�����g����U@��P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������k�w���~���v��������� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (�� (���տ�_�����:��T�~�@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@P@������/���?��j�?�5o�%��?��� g����U@�����&O3�����a�;�^=�wH���D��/��*� �fX�I���,������k?g_���?�5o�%��?��� g����U@�F�����������*������?�o�}��Τ~g��ʀ�#V��Y������~ο�T�j��K/� ������������z��������#;�~���A�;��� w�F�����������*���տ��_�@�o��5����EU������������u�誠��W��[�����������O��?jW���@��տ���@�o��5����EM������������v�訠�#V��Y�������������V��Zv��~����vw�~���c�Q@���,��~���kgo���?�5o�%��/��� o����Q@��o�%�>�ߤ���߳����S������?��o�%�~�ߠ�d�߳����S����g�P��j��K?� _������������[� g�D����[�;�TP7���������'Ѿ���=��;/�P��j��K?� _������������[� g�D����[�;�TP���,��~���kgo���a������۔���B{���ea�`T�+ �n%Ц �����j��K?� _������������[� g�D����[�;�TP���,��~���kgo����?���%�/�~�����#����x��c�~�q�v�t`ȫ��_'h���������'�]�;{s� Pp=N= 5���%�����ڜs�����=���J��A@�����Kp�b��}��X�����4g v+:�Բ�+60�ʩ,� @�����������I �uO�����ToUv��bgUl�cP�T?�#V��Y������������j��K?� _����������!��X��]���������TK�|4��`� ��#��P\y��aa >NgL��j��K?� _������������[� g�D����[�;�TP���,��~���kgo���o�F�����$��ہ�� ��vݞr6��S�q''*02���[� g�D����[�;�TP���,��~���kgo���?�5o�%��/��� o����Q@�F�����������*(��տ���@�o��5����EE������������v�訠��������~1�o���}G�L�������5o�%��/��� o����Q@�F�����������*(��տ���@�o��5����EE5����%�˷���r�v����y�\~���)(?0���=[� i����>��gc��N=����5o�%��/��� o����Q@�F�����������*(��W��Z�l����m#���X�wn_�j`0C6윅����5o�%��/��� o����Q@��տ��y9���gbO�G�5@�n�>���#V��Y������~ο�T��V��Y����9�gc��s�T.�?Z_��[� e�D����Y�:��UP���,������k?g_����_�=_� n�~~�rI������w�,"~ԓ�!72���)( u��#V��Y������~ο�T�j��K/� ��������������K
�����Kr_���}�De>~��Z=��pjX�n[p(�"� �a,Ub�/�×�<����;��<�����K>��o���[�:����V���,��$��ϧ�*�����5O����տ��_�@�o��5����EU5��o�%����?�ꜜm�_�;>Gbs�S�����@��տ��_�@�o��5����EU ��տ��}�~�����v?�������-��o�l��~�ȥ�v����r��B1���@��տ���A�?����ggP��c�S�`@%�*����տ��_�@�o��5����EU������������u�誠7���� O���!c�|0��ёv��4�+�X�Vx�RX3��8����K>��o���[�:���u#�x��#V��Y������~ο�T�j��K/� ������������[� e�D����Y�:��UP���,������k?g_���O��[� g�D����[�:��T��=_� k����~��k����c�;����.8����c��z��Ͽ�/��zc�o����F?Z_��[� e�D����Y�:��UP���,������k?g_���C���,�v����v�o���H������(�z���w�/�����v ��T.G��Ϡ���տ��_�@�o��5����EU������������u�誠��W��[��'����%��o���:�Cڕ�R̀���j���������?�o���[�;������g0q�?��o�%�>o�_��>�gf����~4�������������u�誠�z���7�/��o���������_��[� e�D����Y�:��UP���,������k?g_���C���,�|�����o��;�Ԟ��9�l�z��ؠ3|��O�X�~���;~�q����Z�F�����������*���տ��_�@�o��5����EU!��տ��}�~����-��G��I�T�������������u�誠�#V��Y������~ο�T�j��K/� ����������#�=_� n|���KbB�gtdM��"�ڒA#n�63�6�m�P�����,���/���gS�u����#�9��5o�%��?��� g����U@��o�%�o�_�����u��'�������?��o��� ���3��?go���|m�ڇ���-S�O��x��>���^�����7����x�]_�>�qke>���m��4��7P�Yހ��
0byt3m1n1
0byt3m1n1
Path:
/
hermes
/
bosweb
/
web
/
web
/
sb_web
/
web
/
b2651
/
artied.com
/
digital4u
/
rteditor
/
[
Home
]
File: index.html
<HTML style='color:white;'> <HEAD id='headID'> <TITLE></TITLE> <STYLE> body{ margin:0px; padding:0px; } </STYLE> <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Inter:wght@200&display=swap" rel="stylesheet"> <link href="https://www.kidame.online/_fontawesome-6/css/all.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="https://code.jquery.com/jquery-latest.min.js"></script> </HEAD> <SCRIPT> var fontsListA, systemFontsListContainer; var rtFonSizeUnit, rtFontSizeValue; var rtTextAlign; var rtLineHeightUnit,rtLineHeightValue; var rtLetterSpacingUnit, rtLetterSpacingValue; var rtWordSpacingUnit, rtWordSpacingValue; var rtLink; var cTextBoxForm,rtF,rtSubWindow; window.onresize = windowResizeHandler; function windowResizeHandler(e){ windowResize(); } function windowResize(){ var w = document.body.width; var h = document.body.height; rtContentContainer.style.top = pageHeader.offsetHeight; rtContentContainer.style.height = h - pageHeader.offsetHeight - pageFooter.offsetHeight; } function init(e){ listFonts(); updatecolorPaletteTable(); windowResize(); } // // // color palette handlers..: function updatecolorPaletteTable(){ var table = colorPaletteTable; var row = table.insertRow(0); var dclr = [ ['red','#FF0000'],['orange','#FFA500'],['yellow','#FFFF00'],['lime','#00FF00'], ['cyan','#00FFFF'],['blue','#0000FF'],['magenta','#FF00FF'],['darkmagenta','#8B008B'],['brown','#A52A2A'],['white','#FFFFFF'],['gray','#808080'],['black','#000000'] ]; for( var i=0; i<12; i++ ){ var cell = row.insertCell(); cell.style.width = 10; cell.style.height = 12; cell.style.border = '1px solid black'; cell.style.cursor = 'pointer'; cell.style.backgroundColor = dclr[i][0]; cell.title = cell.style.backgroundColor + '\n Hexa: #' + dclr[i][1]; cell.title = dclr[i]; cell.onclick = colorPaletteTableHandler; } var row = table.insertRow(1); row.style.height = '1px'; for( var i=2; i<table.rows.length; i++ ){ var row = table.rows[i]; for( var j=0; j<row.cells.length; j++ ){ cell = row.cells[j]; cell.title = cell.style.backgroundColor + '\n Hexa: #' + convert2Hex(cell.style.backgroundColor); cell.style.cursor = 'pointer'; cell.onclick = colorPaletteTableHandler; } } var canvas = document.createElement('canvas'); canvas.width = 10; canvas.height = 8; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.lineWidth = 2; ctx.strokeStyle ='red'; ctx.moveTo(0,canvas.height); ctx.lineTo(canvas.width,0); ctx.stroke(); table.rows[2].cells[0].appendChild( canvas ); table.rows[2].cells[0].style.backgroundColor = ''; table.rows[2].cells[0].title = 'none - transparent'; } function convert2Hex( vColor){ var rgb = vColor; var stg = rgb.split('(')[1]; var stg = stg.split(')')[0]; var res = stg.split(','); var r = parseInt(res[0]); var g = parseInt(res[1]); var b = parseInt(res[2]); var hr = r.toString(16); var hg = g.toString(16); var hb = b.toString(16); if( hr.length == 1 ) hr = '0' + hr; if( hg.length == 1 ) hg = '0' + hg; if( hb.length == 1 ) hb = '0' + hb; return hr.toUpperCase() + hg.toUpperCase()+ hb.toUpperCase(); } function colorPaletteTableHandler(e){ var cell = e.currentTarget; var color; color = cell.style.backgroundColor; var targetID = colorPaletteTable.getAttribute( 'targetID' ); var target = document.getElementById(targetID); target.style.background = color; console.log( color ); } function showColorPaletteHandler(e){ var rct = e.currentTarget.getBoundingClientRect(); var id = e.currentTarget.id; if( id == 'rtColorB' ) id = 'rtColorBox'; if( id == 'rtShadowColorB' ) id = 'rtShadowColorBox'; colorPaletteTable.setAttribute('targetID', id ); colorPaletteContainer.style.left = rct.left; colorPaletteContainer.style.top = rct.top + rct.height; colorPaletteContainer.style.display = 'block'; TweenMax.to( colorPaletteContainer,0.7,{css:{opacity:1}}); } function hideColorPaletteHandler(e){ // } // // function convertLengthUnit( sUnit, tUnit ){ /* - 1 px = 1/96 of 1 in - 1 cm = 96px / 2.54 - 1 mm = 1/10 of 1 cm - 1 Q = 1/40 of 1 cm - 1 in = 2.54 cm = 96 px - 1 pc = 12 pt = 1/6 of 1 in - 1 pt = 1/72 of 1 in */ var unit = 1; if( sUnit.toLowerCase() == 'px' ){ if( tUnit.toLowerCase() == 'px' ){ } if( tUnit.toLowerCase() == 'cm' ){ unit = 2.54 / 96; // value for 1 pixel; } if( tUnit.toLowerCase() == 'mm' ){ unit = ( 2.54 / 96 ) * 10; // value for 1 pixel; } if( tUnit.toLowerCase() == 'q' ){ unit = ( 2.54 / 96 ) * 40; // value for 1 pixel; } if( tUnit.toLocaleLowerCase() == 'in' ){ unit = 1/96; // value for 1 pixel; } if( tUnit.toLowerCase() == 'pc' ){ unit = 1/96 * 6; // value for 1 pixel; } if( tUnit.toLowerCase() == 'pt' ){ unit = 1/96 * 72; // value for 1 pixel; } } if( sUnit.toLowerCase() == 'cm' ){ if( tUnit.toLowerCase() == 'px' ){ unit = 96 / 2.54; } if( tUnit.toLowerCase() == 'cm' ){ // } if( tUnit.toLowerCase() == 'mm' ){ unit = 10; } if( tUnit.toLowerCase() == 'q' ){ unit = 40; } if( tUnit.toLocaleLowerCase() == 'in' ){ unit = 2.54; } if( tUnit.toLowerCase() == 'pc' ){ unit = 2.54 * 6; } if( tUnit.toLowerCase() == 'pt' ){ unit = 2.54 * 72; } } if( sUnit.toLowerCase() == 'mm' ){ if( tUnit.toLowerCase() == 'px' ){ unit = 96 / 2.54; } if( tUnit.toLowerCase() == 'cm' ){ unit = 0.1; } if( tUnit.toLowerCase() == 'mm' ){ // } if( tUnit.toLowerCase() == 'q' ){ unit = 4; } if( tUnit.toLocaleLowerCase() == 'in' ){ unit = 25.4; } if( tUnit.toLowerCase() == 'pc' ){ unit = ( 2.54 * 6 ) * 10; } if( tUnit.toLowerCase() == 'pt' ){ unit = ( 2.54 * 72 ) * 10; } } if( sUnit.toLowerCase() == 'q' ){ if( tUnit.toLowerCase() == 'px' ){ unit = ( 96 / 2.54 ) * 4; } if( tUnit.toLowerCase() == 'cm' ){ unit = 0.1 * 4; } if( tUnit.toLowerCase() == 'mm' ){ unit = 4 } if( tUnit.toLowerCase() == 'q' ){ // } if( tUnit.toLocaleLowerCase() == 'in' ){ unit = 25.4 * 4; } if( tUnit.toLowerCase() == 'pc' ){ unit = ( 2.54 * 6 ) * 40; } if( tUnit.toLowerCase() == 'pt' ){ unit = ( 2.54 * 72 ) * 40; } } if( sUnit.toLowerCase() == 'pc' ){ if( tUnit.toLowerCase() == 'px' ){ unit = ( 96 / 2.54 ) / 6; } if( tUnit.toLowerCase() == 'cm' ){ unit = ( 96 / 2.54 ); } if( tUnit.toLowerCase() == 'mm' ){ unit = 10 * ( 96 / 2.54 ); } if( tUnit.toLowerCase() == 'q' ){ unit = 40 * ( 96 / 2.54 ); } if( tUnit.toLocaleLowerCase() == 'in' ){ unit = 1/6; } if( tUnit.toLowerCase() == 'pc' ){ // } if( tUnit.toLowerCase() == 'pt' ){ unit = 12; } } if( sUnit.toLowerCase() == 'pt' ){ if( tUnit.toLowerCase() == 'px' ){ unit = ( 96 / 2.54 ) / 72; } if( tUnit.toLowerCase() == 'cm' ){ unit = ( 2.54 ) / 72; } if( tUnit.toLowerCase() == 'mm' ){ unit = 10 * 2.54 / 72; } if( tUnit.toLowerCase() == 'q' ){ unit = 40 * 2.54 / 72; } if( tUnit.toLocaleLowerCase() == 'in' ){ unit = 1/72; } if( tUnit.toLowerCase() == 'pc' ){ unit = 1/12; } if( tUnit.toLowerCase() == 'pt' ){ // } } return unit; } function urlListFonts(){ // source: https://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display >> answer 34 let { fonts } = document; const it = fonts.entries(); let arr = []; let done = false; while (!done) { const font = it.next(); if (!font.done) { arr.push(font.value); } else { done = font.done; } } return arr; } function listFonts() { // source: https://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display , answer 28. // const fontCheck = new Set([ // Windows 10 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Consolas', 'Constantia', 'Corbel', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'HoloLens MDL2 Assets', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Webdings', 'Wingdings', 'Yu Gothic', // macOS 'Microsoft Sans Serif', 'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino' ].sort()); (async() => { await document.fonts.ready; const fontAvailable = new Set(); for (const font of fontCheck.values()) { if (document.fonts.check(`12px "${font}"`)) { fontAvailable.add(font); } } populateFontFamilyListForm(fontAvailable.values()); return; })(); return; /* let { fonts } = document//.fonts; const it = fonts.entries(); let arr = []; let done = false; while (!done) { const font = it.next(); if (!font.done) { arr.push(font.value); } else { done = font.done; } } return arr; */ } function populateFontFamilyListForm(vFontsList){ fontsListA = []; for( var item of vFontsList ){ fontsListA.push(item); } systemFontsListContainer = document.createElement('div'); systemFontsListContainer.id = 'systemFontsListContainer'; systemFontsListContainer.style.position = 'absolute'; systemFontsListContainer.style.left = '0px'; systemFontsListContainer.style.top = '0px'; systemFontsListContainer.style.width = '200px'; systemFontsListContainer.style.height = '200px'; systemFontsListContainer.style.overflowX = 'hidden'; systemFontsListContainer.style.overflowY = 'auto'; systemFontsListContainer.style.background = 'rgba(40,40,40,0.75)'; systemFontsListContainer.style.border = '3px solid #ccc'; systemFontsListContainer.style.display = 'none'; systemFontsListContainer.onmouseout = systemFontsListContainerHandler; var table = document.createElement('table'); systemFontsListContainer.appendChild(table); table.style.width = '100%'; table.style.height = '100%'; table.style.color = '#ccc'; table.style.textAlign = 'center'; table.style.fontSize = '16px'; for( var i=0; i<fontsListA.length; i++ ){ var row = table.insertRow(); var cell = row.insertCell(); cell.style.height = '25px'; cell.style.fontFamily = fontsListA[i]; cell.innerHTML = fontsListA[i]; cell.title = fontsListA[i]; cell.onmouseover = rtTextBoxHandler; cell.onmouseout = rtTextBoxHandler; cell.onclick = rtTextBoxHandler; } document.body.appendChild(systemFontsListContainer); } function showRTFormHandler(e){ if( e.currentTarget.style.opacity == 0.5 ) return; if( cTextBoxForm ){ closeRTForm(); } var id = e.currentTarget.id; id = id.substr(0 , id.length - 1 ) + 'F'; //console.log(id); rtF = document.getElementById( id ); rtF.style.display = 'block'; cTextBoxForm = rtF; var rct = e.currentTarget.getBoundingClientRect(); rtTextBoxes.style.left = rct.left; rtTextBoxes.style.top = rct.top + rct.height; rtTextBoxes.style.display = 'block' TweenMax.to( rtTextBoxes, 0.7,{ css:{opacity:1} } ); } function closeRTFormHandler(e){ if( e.currentTarget.style.opacity == 0.5 ) return; closeRTForm(); } function closeRTForm(){ if( rtSubWindow){ //if( rtF ) rtF.style.background = ''; TweenMax.to( rtSubWindow,0.7, { css:{ opacity:0} , onComplete:function(){ rtSubWindow.style.display = 'none'; } } ); } if( cTextBoxForm == rtFontFamilyF ){ cTextBoxForm.firstChild.firstChild.rows[0].style.background = ''; cTextBoxForm.firstChild.firstChild.rows[1].style.background = ''; } rtTextBoxes.style.display = 'none'; for( var i=0; i<rtTextBoxes.childNodes.length; i++ ){ var child = rtTextBoxes.childNodes[i]; if( child != '[object Text]' ){ child.style.display = 'none'; } } } function rtFormMouseOutHandler(e){ if( e.relatedTarget == document.body ) closeRTForm(); } function rtTextBoxHandler(e){ if( e.currentTarget.style.opacity == 0.5 ) return; if( cTextBoxForm == rtDirectionF ){ if( e.type == 'mouseover' ){ //console.log('mouseover'); e.currentTarget.style.background = 'rgba(0,90,90,0.75)'; } if( e.type == 'mouseout' ){ //console.log('mouseout'); e.currentTarget.style.background = ''; } if( e.type == 'click' ){ closeRTForm(); } } if( cTextBoxForm == rtFontFamilyF ){ if( e.type == 'mouseover' ){ e.currentTarget.style.background = 'rgba(0,90,90,0.75)'; var id = e.currentTarget.getAttribute('subWindowID'); if(id) showRTSubWindow( id , e.currentTarget.getBoundingClientRect(), 3 ); } if( e.type == 'mouseout' || e.type == 'mousemove'){ console.log( e.type ); if( e.relatedTarget == document.body || e.relatedTarget == cTextBoxForm ){ closeRTForm(); } if( e.type == 'mouseout' ){ if( rtSubWindow ){ if( ( e.relatedTarget != rtSubWindow )) e.currentTarget.style.background = ''; } } } if( e.type == 'click' ){ // // //closeRTForm(); } } } function showRTSubWindow( vSubWindowID , vRCT , vDY = 0, vShow = true ){ if( vShow ){ if( rtSubWindow && rtSubWindow != vSubWindowID ){ var pwind = rtSubWindow TweenMax.to( pwind,0.7, { css:{ opacity:0} , onComplete:function(){ pwind.style.display = 'none'; } } ); } rtSubWindow = document.getElementById(vSubWindowID); rtSubWindow.style.left = vRCT.left + vRCT.width - 3; rtSubWindow.style.top = vRCT.top + vDY; rtSubWindow.style.opacity = 0; rtSubWindow.style.display = 'block'; TweenMax.to( rtSubWindow,0.7, { css:{ opacity:1} } ); }else{ if( rtSubWindow){ TweenMax.to( rtSubWindow,0.7, { css:{ opacity:0} , onComplete:function(){ rtSubWindow.style.display = 'none'; } } ); } } } // // // // Font Family Handler..: function urlListFonts(){ // source: https://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display let { fonts } = document; const it = fonts.entries(); let arr = []; let done = false; while (!done) { const font = it.next(); if (!font.done) { arr.push(font.value); } else { done = font.done; } } return arr; } function listFonts() { // source: https://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display , answer 28. // const fontCheck = new Set([ // Windows 10 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Consolas', 'Constantia', 'Corbel', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'HoloLens MDL2 Assets', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Webdings', 'Wingdings', 'Yu Gothic', // macOS 'Microsoft Sans Serif', 'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino' ].sort()); (async() => { await document.fonts.ready; const fontAvailable = new Set(); for (const font of fontCheck.values()) { if (document.fonts.check(`12px "${font}"`)) { fontAvailable.add(font); } } populateFontFamilyListForm(fontAvailable.values()); return; })(); } function populateFontFamilyListForm(vFontsList){ fontsListA = []; for( var item of vFontsList ){ fontsListA.push(item); } systemFontsListContainer = document.createElement('div'); systemFontsListContainer.id = 'systemFontsListContainer'; systemFontsListContainer.style.position = 'absolute'; systemFontsListContainer.style.left = '0px'; systemFontsListContainer.style.top = '0px'; systemFontsListContainer.style.width = '200px'; systemFontsListContainer.style.height = '200px'; systemFontsListContainer.style.overflowX = 'hidden'; systemFontsListContainer.style.overflowY = 'auto'; systemFontsListContainer.style.background = 'rgba(40,40,40,0.75)'; systemFontsListContainer.style.border = '3px solid #ccc'; systemFontsListContainer.style.display = 'none'; systemFontsListContainer.onmouseout = systemFontsListContainerHandler; var table = document.createElement('table'); systemFontsListContainer.appendChild(table); table.style.width = '100%'; table.style.height = '100%'; table.style.color = '#ccc'; table.style.textAlign = 'center'; table.style.fontSize = '16px'; for( var i=0; i<fontsListA.length; i++ ){ var row = table.insertRow(); var cell = row.insertCell(); cell.style.height = '25px'; cell.style.fontFamily = fontsListA[i]; cell.innerHTML = fontsListA[i]; cell.title = fontsListA[i]; cell.onmouseover = rtTextBoxHandler; cell.onmouseout = rtTextBoxHandler; cell.onclick = rtTextBoxHandler; } document.body.appendChild(systemFontsListContainer); } // >> load/select url link font family ; ( ff prefix for font family ) function ffURLLinkChangeHandler(e){ if( ffURLLinkAddT.value != '' ){ ffURLLinkAddB.disabled = false; }else{ ffURLLinkAddB.disabled = true; } } function ffInsertURLLinkHandler(e){ //var div = document.createElement('div'); //div.innerHTML = ffURLLinkAddT.value; //var link = div.firstChild; var linkURL = ffURLLinkAddT.value; var bool = isValidLink( linkURL ); ffURLLinkAddB.innerHTML = '<i style="font-size:25px;" class="fas fa-spinner fa-spin"></i>'; if( bool ){ var style = document.getElementsByTagName('STYLE')[0]; style.insertAdjacentHTML('afterEnd' , linkURL ); var timeid = window.setInterval( function (){ window.clearInterval(timeid); var urlFontsA = urlListFonts(); // >> populate ..: var table = urlFontsListLoadedContainer.firstChild; table.style.fontFamily = 'inter'; for( var i=table.rows.length-1;i>-1; i-- ){ table.deleteRow( i ); } for( var i=0; i<urlFontsA.length; i++ ){ var fontName = urlFontsA[i].family; if( fontName.indexOf('Awesome') == -1 ){ if( !alreadyInList( fontName , table ) ){ var row = table.insertRow(); var cell = row.insertCell(); cell.style.height = '30px'; cell.style.cursor = 'pointer'; cell.innerHTML = fontName; // cell.onmouseover = rtTextBoxHandler; cell.onmouseout = rtTextBoxHandler; //cell.onmousemove = rtTextBoxHandler; cell.onclick = rtTextBoxHandler; } } } urlFontsListContainer.style.height = (table.rows.length * 30) + 40 + 10; // << 40 = height of search bar , 10 >> 2 x 5px margin.. // // set current font family & update selection with new font... // ffURLLinkAddB.innerHTML = 'Add'; }, 1000 ); }else{ ffURLLinkAddB.innerHTML = 'Add'; alert( 'Not a valid link element. A ( font ) Link element has to be enter'); } ffURLLinkAddT.value = ''; ffURLLinkAddB.disabled = true; function alreadyInList( vFontName , vTable ){ var table = vTable; for( var i=0; i<table.rows.length; i++ ){ cell = table.rows[i].cells[0]; if( cell.innerHTML == vFontName ) return true; } return false; } function isValidLink(vLink){ if(vLink.indexOf( '<link' ) != -1 ) return true; return false; } } // // sub window mouse out handler.. function systemFontsListContainerHandler(e){ if( e.type == 'mouseout' ){ if( e.relatedTarget == document.body ){ closeRTForm(); } } } function urlFontsListContainerHandler(e){ if( e.type == 'mouseout' ){ if( e.relatedTarget == document.body ){ closeRTForm(); } } } // // Font Size Handlers... function rtFontSizeUnitHandler(e){ if( e.type == 'focus' ){ e.currentTarget.placeholder = e.currentTarget.value; e.currentTarget.value = ''; } if( e.type == 'blur' ){ if( e.currentTarget.value == '' ){ e.currentTarget.value = e.currentTarget.placeholder; } } if( e.type == 'change' ){ rtFonSizeUnit = e.currentTarget.value; e.currentTarget.blur(); // >> update selection ..: // } } function rtFontSizeNSHandler(e){ rtFontSizeS.value = e.currentTarget.value; // >> apply to selection change..: // } function rtFontSizeSliderHandler(e){ rtFontSizeNS.value = e.currentTarget.value; // >> apply to selection change..: // } // // Text Align Handlers..: function rtTextAlignHandler(e){ rtAlignT.innerHTML = e.currentTarget.innerHTML; for( var i=0; i< rtAlignTable.rows[0].cells.length; i++){ var cell = rtAlignTable.rows[0].cells[i]; cell.style.background = ''; } e.currentTarget.style.background = 'rgba(0,40,40,0.75)'; rtTextAlign = e.currentTarget.getAttribute('value'); // // >> update text align selection..: // closeRTForm(); } // // // Style Handlers..: var rtBoldValue,rtItalicValue, rtUnderlinveValue, rtOverlineValue, rtLineThroughValue; function rtStyleHandler(e){ if( e.currentTarget.style.opacity == 0.5 ) return; if( e.currentTarget.style.background.length == 0 ){ e.currentTarget.style.background = 'rgba(0,40,40,0.75)'; e.currentTarget.setAttribute( 'selected' , true ); }else{ e.currentTarget.style.background = ''; e.currentTarget.setAttribute( 'selected' , false ); } var id = e.currentTarget.id; var bool = rtStyleUnderlineB.getAttribute('selected') || rtStyleOverlineB.getAttribute( 'selected') || rtStyleLineThroughB.getAttribute('selected'); if( bool == 'true' ){ styleParamsRow.style.display = 'table-row'; }else{ styleParamsRow.style.display = 'none'; } } // // // Line Height Handlers..: function rtLineHeightUnitHandler(e){ if( e.type == 'focus' ){ e.currentTarget.placeholder = e.currentTarget.value; e.currentTarget.value = ''; } if( e.type == 'blur' ){ if( e.currentTarget.value == '' ){ e.currentTarget.value = e.currentTarget.placeholder; } } if( e.type == 'change' ){ rtLineHeightUnit = e.currentTarget.value; e.currentTarget.blur(); // >> update selection ..: // } } function rtLineHeightNSHandler(e){ rtLineHeightS.value = e.currentTarget.value; // >> apply to selection change..: // } function rtLineHeightSliderHandler(e){ rtLineHeightNS.value = e.currentTarget.value; // >> apply to selection change..: // } // // // Word/Letter Spacing Handlers..: function rtWordSpacingTypeHandler(e){ // } function rtWordSpacingUnitHandler(e){ if( e.type == 'focus' ){ e.currentTarget.placeholder = e.currentTarget.value; e.currentTarget.value = ''; } if( e.type == 'blur' ){ if( e.currentTarget.value == '' ){ e.currentTarget.value = e.currentTarget.placeholder; } } if( e.type == 'change' ){ if( rtWordSpacingType == 'word' ){ rtWordSpacingUnit = e.currentTarget.value; } if( rtWordSpacingType == 'letter' ){ rtLetterSpacingUnit = e.currentTarget.value; } e.currentTarget.blur(); // >> update selection ..: // } } function rtWordSpacingNSHandler(e){ rtWordSpacingS.value = e.currentTarget.value; // >> apply to selection change..: // } function rtWordSpacingSliderHandler(e){ rtWordSpacingNS.value = e.currentTarget.value; // >> apply to selection change..: // } // // // Link handler..: function rtLinkHandler(e){ if( e.type == 'input' ){ if( e.currentTarget.value == '' ){ rtLinkAddB.disabled = true; }else{ rtLinkAddB.disabled = false; } } if( e.type == 'click' ){ var bool = isValidLink(rtLinkT.value); if( bool ){ if( e.currentTarget.firstChild.className == 'fa-solid fa-link' ){ // >> update selection => add/insert link.. // e.currentTarget.firstChild.className = 'fa-solid fa-unlink' }else{ // >> update selection => remove link.. // e.currentTarget.firstChild.className = 'fa-solid fa-link'; closeRTForm(); } }else{ alert( 'No valid url. Correct and Try again'); } } } function isValidLink(vURL){ if( vURL.indexOf('http:') != -1 ) return true; return false; } </SCRIPT> <BODY onload='init(event);'> <DIV id='pageHeader' style='position:absolute; left:0px; top:0px; width:100%; height:100px; background:rgba(40,40,40,0.75);'> <table style='width:100%; height:100%;'> <tr> <td align='center' style='height:50px; border-bottom:1px dotted #ccc;'> <table style='height:100%;'><tr> <td><img src='files/images/rtf_logo.png' style='height:35px; margin-left:10px; filter:invert(100%); margin-right:10px; margin-left:10px;' /></td> <td style='font-family:Courgette; font-size: 24px;'>Rich Text Editor</td> </tr></table> </td> </tr> <tr> <td style='height:50px;'> <table style='height:100%;'><tr> <td id='rtDirectionB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table><tr> <td><i class="fa-solid fa-paragraph" style='transform:scaleX(-1)'></i></td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td align='center' style='width:5px;'><div style='height:50%; border-right:1px solid #ccc;'></div></td> <td id='rtFontFamilyB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;'><tr> <td style='width:20px;'><i class="fa-solid fa-font"></i></td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td id='rtFontSizeB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;'><tr> <td style='width:20px;'><i class="fa-solid fa-text-height"></i></td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td align='center' style='width:5px;'><div style='height:50%; border-right:1px solid #ccc;'></div></td> <td id='rtColorB' style='cursor:pointer;' onclick='showColorPaletteHandler(event);'> <table style='text-align:center;'><tr> <td style='width:20px;'><i class="fa-solid fa-pen-nib"></i></td> <td> <table style='width:20px; height:20px; border-radius:3px; border:2px solid #ccc;'><tr><td id='rtColorBox' style='background:black;'></td></tr></table> </td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td id='rtShadowColorB' style='cursor:pointer;' onclick='showColorPaletteHandler(event);'> <table style='text-align:center;'> <tr> <td style='width:20px;'><span style='font-family: arial; font-size:20px; color:#fff; text-shadow:3px 3px #c00'>T</span></td> <td > <table style='width:20px; height:20px; border-radius:3px; border:2px solid #ccc;'><tr><td id='rtShadowColorBox'> <!--img src='files/images/no-color.png' style='height:15px; filter:invert(100%);' /--> </td></tr></table> </td> <td><i class="fa-solid fa-caret-down"></i></td> </tr> </table> </td> <td align='center' style='width:5px;'><div style='height:50%; border-right:1px solid #ccc;'></div></td> <td id='rtAlignB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;'><tr> <td id='rtAlignT' style='width:20px;'><i class="fa-solid fa-align-left"></i></td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td align='center' style='width:5px;'><div style='height:50%; border-right:1px solid #ccc;'></div></td> <td id='rtStyleB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;'><tr> <td style='width:20px;'><img src='files/images/font-style.png' style='height:25px; filter:invert(100%);' /></td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td align='center' style='width:5px;'><div style='height:50%; border-right:1px solid #ccc;'></div></td> <td id='rtLineHeightB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;'><tr> <td style='width:20px;'><img src='files/images/line-height.png' style='height:35px; filter:invert(100%);' /></td> <td><i class="fa-solid fa-caret-down"></i></td> <!--td><input id='lineHeightT' type='number' style='width:50px; text-align:center; font-size:13px;' value='0'/></td--> </tr></table> </td> <td id='rtWordSpacingB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;'><tr> <td style='width:20px;'><img src='files/images/font-spacing.png' style='height:20px; filter:invert(100%);' /></td> <td><i class="fa-solid fa-caret-down"></i></td> <!--td><input id='letterSpacingT' type='number' style='width:50px; text-align:center; font-size:13px;' value='0'/></td--> </tr></table> </td> <td align='center' style='width:5px;'><div style='height:50%; border-right:1px solid #ccc;'></div></td> <td id='rtLinkB' style='cursor:pointer;' onclick='showRTFormHandler(event);'> <table style='text-align:center;' ><tr> <td style='width:20px;'><i class="fa-solid fa-link"></i></td> <td><i class="fa-solid fa-caret-down"></i></td> </tr></table> </td> <td></td> </tr></table> </td> </tr> </table> </DIV> <DIV id='rtTextBoxes' style='position:absolute; display:none; opacity:0;'> <div id='rtDirectionF' style='position:absolute; width:180px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; padding:0px; color:#ccc; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <table style='width:100%; height:100%; margin-left:3px; font-family: Inter;' cellspacing=0 cellpadding=0> <tr onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);'> <td style='width:20px; height:30px;'><i class="fa-solid fa-paragraph" style='transform:scaleX(-1)'></i></td> <td>Left To Right (LTR)</td> </tr> <tr onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);'> <td style='width:20px; height:30px;'><i class="fa-solid fa-paragraph"></i></td> <td>Right To Left (RTL)</td> </tr> <tr onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);'> <td style='width:20px; height:30px;'><i class="fa-solid fa-paragraph" style='transform:scaleX(-1) rotate(90deg)'></i></td> <td>Vertical LR</td> </tr> <tr onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);'> <td style='width:20px; height:30px;'><i class="fa-solid fa-paragraph" style='transform:scaleX(-1) rotate(-90Deg)'></i></td> <td>Vertical RB</td> </tr> <tr onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);'> <td style='width:20px; height:30px;'></td> <td title='Vertical letters & Lines'>Vertical 2L</td> </tr> </table> </div> <div id='rtFontFamilyF' style='position:absolute; left:0px; top:0px; width:150px; background:rgba(40,40,40,0.75); color:#ccc; border:3px solid #ccc; padding:0px; display:none;'><div style='width:100%; height:70px; overflow-y:auto; '><table style='width:100%; height:100%; margin-left:3px; font-family: Inter; text-align: center;' cellspacing=0 cellpadding=0> <tr style='height:35px; cursor:pointer' onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onmousemove='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);' subWindowID='systemFontsListContainer' > <td>System Fonts</td> <td style='width:20px;'><i class="fa-solid fa-caret-right"></i></td> </tr> <tr style='cursor:pointer;' onmouseover='rtTextBoxHandler(event);' onmouseout='rtTextBoxHandler(event);' onclick='rtTextBoxHandler(event);' subWindowID='urlFontsListContainer'> <td>From URL</td> <td style='width:20px;'><i class="fa-solid fa-caret-right"></i></td> </tr> </table></div> </div> <div id='rtFontSizeF' style='position:absolute; width:240px; height:65px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; display:none;' onmouseout='rtFormMouseOutHandler(event);'><div style='width:100%; height:65px;'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text-align:center;' cellspacing=0 cellpadding=0> <tr> <td align='center'> <table style='width:90%; height:100%'> <tr> <td>Font Size:</td> <td style='width:45px;'> <input id='rtFontSizeNS' type='number' min=0 max=200 style='width:45px; text-align:center; font-size:14px;' value='14' onchange='rtFontSizeNSHandler(event);'/> </td> <td style='width:45px;'> <input id='rtFontSizeUnitT' list='rtFontSizeUnitL' value='Px' style='width:65px; text-align:center; font-size:14px;' onfocus='rtFontSizeUnitHandler(event);' onblur='rtFontSizeUnitHandler(event);' onchange='rtFontSizeUnitHandler(event);' /> <datalist id='rtFontSizeUnitL' style='width:100px;'> <option value='Px' title='Pixel'> <option value='%' title='Percent'> <option value='Pc' title='Pica'> <option value='Pt' title='Point'> <option value='In' title='Inch'> <option value='Cm' title='Centimeter'> <option value='Mm' title='Millimeter'> <option value='Q' title='1/40 of 1cm'> <option value='Em' title='Em'> <option value='Ex' title='0.5 of Em'> <option value='' disabled><hr></option> <option value='xx-small'> <option value='x-small'> <option value='small'> <option value='medium'> <option value='large'> <option value='x-large'> <option value='xx-large'> <option value='xxx-large'> <option value='' disabled><hr></option> <option value='smaller'> <option value='larger'> </datalist> </td> </tr> </table> </td> </tr> <tr><td align='center'><input id='rtFontSizeS' type='range' style='width:90%;' min=0 max=200 value='14' oninput='rtFontSizeSliderHandler(event);' onchange='rtFontSizeSliderHandler(event);'/></td></tr> </table></div> </div> <div id='rtColorF' style='position:absolute; width:115px; height:70px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; padding:0px; display:none;' onmouseout='rtFormMouseOutHandler(event);'><div style='width:100%; height:100%;'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text-align:center;' cellspacing=0 cellpadding=0> <tr><td> <table style='text-align:center;'><tr> <td style='width:20px;'><input type='radio' name='rtColorGroup'/></td> <td>None:</td> <td style='width:25px; height:25px;'><img src='files/images/no-color.png' style='width:20px; height:20px; filter:invert(100%);'/></td> </tr></table> </td></tr> <tr><td> <table style='text-align:center;'><tr> <td style='width:20px;'><input type='radio' checked name='rtColorGroup'/></td> <td>Color:</td> <td style='width:25px; height:25px;'> <div id='' style='width:25px; height:25px; background:black; border:2px solid #ccc; cursor:pointer;' onclick='showColorPaletteHandler(event);'></div> </td> </tr></table> </td></tr> </table></div></div> <div id='rtShadowColorF' style='position:absolute; width:115px; height:70px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; padding:0px; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <div style='width:100%; height:100%;'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text-align:center;' cellspacing=0 cellpadding=0> <tr><td> <table style='text-align:center;'><tr> <td style='width:20px;'><input type='radio' checked name='rtShadowColorGroup'/></td> <td>None:</td> <td style='width:25px; height:25px;'><img src='files/images/no-color.png' style='width:20px; height:20px; filter:invert(100%);'/></td> </tr></table> </td></tr> <tr><td> <table style='text-align:center;'><tr> <td style='width:20px;'><input type='radio' name='rtShadowColorGroup'/></td> <td>Color:</td> <td style='width:25px; height:25px;'> <div id='' style='width:25px; height:25px; background:black; border:2px solid #ccc; cursor:pointer;' onclick='showColorPaletteHandler(event);'></div> </tr></table> </td></tr> </table></div></div> <div id='rtAlignF' style='position:absolute; width:230px; height:50px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; padding:0px; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <div style='width:100%; height:100%'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text=align:center' cellspacing=0 cellpadding=0> <tr><td align='center'> <table id='rtAlignTable' style='width:220px; text-align:center; color:#ccc;' cellspacing=6> <tr> <td style='width:35px; height:25px; border-radius:5px; border:1px solid #ccc; cursor:pointer;' value='left' onclick='rtTextAlignHandler(event);'><i class="fa-solid fa-align-left"></i></td> <td style='width:35px; height:25px; border-radius:5px; border:1px solid #ccc; cursor:pointer;' value='center' onclick='rtTextAlignHandler(event);'><i class="fa-solid fa-align-center"></i></td> <td style='width:35px; height:25px; border-radius:5px; border:1px solid #ccc; cursor:pointer;' value='right' onclick='rtTextAlignHandler(event);'><i class="fa-solid fa-align-right"></i></td> <td style='width:35px; height:25px; border-radius:5px; border:1px solid #ccc; cursor:pointer;' value='justify' onclick='rtTextAlignHandler(event);'><i class="fa-solid fa-align-justify"></i></td> <td style='width:5px;'></td> <td style='width:25px; height:25px; border-radius:5px; border:1px solid #ccc; cursor:pointer;' value='sup' onclick='rtTextAlignHandler(event);'>A<sup>2</sup></td> <td style='width:25px; height:25px; border-radius:5px; border:1px solid #ccc; cursor:pointer;' value='sub' onclick='rtTextAlignHandler(event);'>A<sub>2</sub></td> </tr> </table> </td></tr> </table></div> </div> <div id='rtStyleF' style='position:absolute; width:300px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; padding:0px; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <div style='width:100%; height:100%;'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text-align:center' cellspaing=0 cellpadding=0> <tr> <td style='border-bottom: 1px dotted #ccc;'> <table style='width:100%;'> <tr> <td align='center' style=''>Decoration</td> </tr> <tr> <td align='center'> <table><tr> <td id='rtStyleBoldB' style='cursor:pointer;' onclick='rtStyleHandler(event);'> <div style='width:25px; height:25px; border-radius:4px; border:1px solid #ccc; padding:2px;'><table style='width:100%; height:100%; color:#ccc; text-align:center;'><tr><td style=' font-weight:bold;'>B</td></tr></table></div> </td> <td id='rtStyleItalicB' style='cursor:pointer;' onclick='rtStyleHandler(event);'> <div style='width:25px; height:25px; border-radius:4px; border:1px solid #ccc; padding:2px;'><table style='width:100%; height:100%; color:#ccc; text-align:center;'><tr><td style='font-style: italic;'>I</td></tr></table></div> </td> <td id='rtStyleUnderlineB' style='cursor:pointer;' onclick='rtStyleHandler(event);'> <div style='width:25px; height:25px; border-radius:4px; border:1px solid #ccc; padding:2px;'><table style='width:100%; height:100%; color:#ccc; text-align:center;'><tr><td style='text-decoration: underline;'>U</td></tr></table></div> </td> <td id='rtStyleOverlineB' style='cursor:pointer;' onclick='rtStyleHandler(event);'> <div style='width:25px; height:25px; border-radius:4px; border:1px solid #ccc; padding:2px;'><table style='width:100%; height:100%; color:#ccc; text-align:center;'><tr><td style='text-decoration: overline;'>O</td></tr></table></div> </td> <td id='rtStyleLineThroughB' style='cursor:pointer;' onclick='rtStyleHandler(event);'> <div style='width:25px; height:25px; border-radius:4px; border:1px solid #ccc; padding:2px;'><table style='width:100%; height:100%; color:#ccc; text-align:center;'><tr><td style='text-decoration: line-through;'>S</td></tr></table></div> </td> </tr></table> </td> </tr> <tr id='styleParamsRow' style='display:none;'> <td> <table style='width:100%; font-size:15px;'> <tr> <td align='right' style='width:35%;'>Style :</td> <td> <select style='width:120px;'> <option>Solid</option> <option>Double</option> <option>Dotted</option> <option>Dashed</option> <option>Wavy</option> </select> </td> </tr> <tr> <td align='right'>Thickness :</td> <td><input type='number' min=1 max=10 value=1 style='width:120px;'/></td> </tr> <tr> <td align='right'>Color :</td> <td> <table><tr> <td> <div id='rtStyleBox' style='width:40px; height:25px; background:black; border:2px solid #ccc; cursor:pointer;' onclick='showColorPaletteHandler(event);'></div> </td> <td> <table><tr> <td>A :</td> <td><input type='number' min=0 max=100 value='100'/></td> </tr></table> </td> </tr></table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <table style='width:100%;'><tr> <td align='right' style='width:35%;'>Transform :</td> <td> <select style='width:120px;'> <option selected>None</option> <option>Capitalize</option> <option>UpperCase</option> <option>LowerCase</option> </select> </td> </tr></table> </td> </tr> <tr> <td> <table style='width:100%;'><tr> <td align='right' style='width:35%;'>Stretch :</td> <td> <select style='width:120px;'> <option selected>normal</option> <option>ultra-condensed</option> <option>extra-condensed</option> <option>condensed</option> <option>semi-condensed</option> <option>semi-expanded</option> <option>expanded</option> <option>extra-expanded</option> <option>ultra-expanded</option> </select> </td> </tr></table> </td> </tr> <tr> <td> <table> <tr> <td align='right' style='width:44%;'>Emphasis :</td> <td> <table><tr> <td> <div id='rtEmphasisBox' style='width:25px; height:25px; background:black; border:2px solid #ccc; cursor:pointer;' onclick='showColorPaletteHandler(event);'></div> </td> <td> <table><tr> <td>A :</td> <td><input type='number' min=0 max=100 value='100'/></td> </tr></table> </td> </tr></table> </td> </tr> <tr> <td></td> <td> <table><tr> <td> <select style='width:120px;'> <option>none</option> <option>filled</option> <option>open</option> <option>dot</option> <option>circle</option> <option>double-circle</option> <option>triangle</option> <option>filled sesame</option> <option>open sesame</option> </select> </td> </tr></table> </td> </tr> <tr> <td align='right' style='width:35%;'></td> <td> <table style='width:120px;'><tr> <td> <select style='width:120px;'> <option>over right</option> <option>over left</option> <option>under right</option> <option>under left</option> <option>left over</option> <option>right under</option> <option>left under</option> </select> </td> </tr></table> </td> </tr> </table> </td> </tr> </table></div> </div> <div id='rtLineHeightF' style='position:absolute; width:255px; height:65px; left:0px; top:0px; background:rgba(40,40,40,0.75); color:#ccc; padding:4px; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <div style='width:100%; height:100%;'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text-align:center;'><tr> <td align='center'> <table style='width:90%; height:100%'> <tr> <td>Line Height:</td> <td style='width:45px;'> <input id='rtLineHeightNS' type='number' min=-100 max=100 style='width:45px; text-align:center; font-size:14px;' value='0' onchange='rtLineHeightNSHandler(event);'/> </td> <td style='width:45px;'> <input id='rtLineHeightUnitT' list='rtLineHeightUnitL' value='Px' style='width:65px; text-align:center; font-size:14px;' onfocus='rtLineHeightUnitHandler(event);' onblur='rtLineHeightUnitHandler(event);' onchange='rtLineHeightUnitHandler(event);' /> <datalist id='rtLineHeightUnitL' style='width:100px;'> <option value='Px' title='Pixel'> <option value='%' title='Percent'> <option value='Pc' title='Pica'> <option value='Pt' title='Point'> <option value='In' title='Inch'> <option value='Cm' title='Centimeter'> <option value='Mm' title='Millimeter'> <option value='Q' title='1/40 of 1cm'> <option value='Em' title='Em'> <option value='Ex' title='0.5 of Em'> <option value='' disabled><hr></option> <option value='xx-small'> <option value='x-small'> <option value='small'> <option value='medium'> <option value='large'> <option value='x-large'> <option value='xx-large'> <option value='xxx-large'> <option value='' disabled><hr></option> <option value='smaller'> <option value='larger'> </datalist> </td> </tr> </table> </td> </tr> <tr><td align='center'><input id='rtLineHeightS' type='range' style='width:90%;' min=-100 max=100 value='0' oninput='rtLineHeightSliderHandler(event);' onchange='rtLineHeightSliderHandler(event);'/></td></tr></table></div> </div> <div id='rtWordSpacingF' style='position:absolute; width:255px; height:100px; left:0px; top:0px; background:rgba(40,40,40,0.75); color:#ccc; padding:4px; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <div style='width:100%; height:100%;'><table style='width:100%; height:100%; margin-left:3px; font-family:inter; text-align:center;'> <tr> <td> <table style='text-align: center;'><tr> <td style='width:20px;'><input type='radio' name='rtWordSpacingGroup' onclick='rtWordSpacingTypeHandler(event);' checked/></td> <td>Letter</td> <td style='width:5px;'></td> <td style='width:20px;'><input type='radio' name='rtWordSpacingGroup' onclick='rtWordSpacingTypeHandler(event);' /></td> <td>Word</td> </tr></table> </td> </tr> <tr> <td align='center'> <table style='width:90%; height:100%'> <tr> <td>Spacing:</td> <td style='width:45px;'> <input id='rtWordSpacingNS' type='number' min=-100 max=100 style='width:45px; text-align:center; font-size:14px;' value='0' onchange='rtWordSpacingNSHandler(event);'/> </td> <td style='width:45px;'> <input id='rtWordSpacingUnitT' list='rtWordSpacingUnitL' value='Px' style='width:65px; text-align:center; font-size:14px;' onfocus='rtWordSpacingUnitHandler(event);' onblur='rtWordSpacingUnitHandler(event);' onchange='rtWordSpacingUnitHandler(event);' /> <datalist id='rtWordSpacingUnitL' style='width:100px;'> <option value='Px' title='Pixel'> <option value='%' title='Percent'> <option value='Pc' title='Pica'> <option value='Pt' title='Point'> <option value='In' title='Inch'> <option value='Cm' title='Centimeter'> <option value='Mm' title='Millimeter'> <option value='Q' title='1/40 of 1cm'> <option value='Em' title='Em'> <option value='Ex' title='0.5 of Em'> <option value='' disabled><hr></option> <option value='xx-small'> <option value='x-small'> <option value='small'> <option value='medium'> <option value='large'> <option value='x-large'> <option value='xx-large'> <option value='xxx-large'> <option value='' disabled><hr></option> <option value='smaller'> <option value='larger'> </datalist> </td> </tr> </table> </td> </tr> <tr><td align='center'><input id='rtWordSpacingS' type='range' style='width:90%;' min=-100 max=100 value='0' oninput='rtWordSpacingSliderHandler(event);' onchange='rtWordSpacingSliderHandler(event);'/></td></tr></table></div> </div> <div id='rtLinkF' style='position:absolute; width:300px; left:0px; top:0px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; padding:0px; display:none;' onmouseout='rtFormMouseOutHandler(event);'> <div style='width:100%; height:100%'> <table style='width:100%; height:100%; margin-left:3px; font-family:inter; text=align:center' cellspacing=0 cellpadding=0> <tr><td> <table style='width:100%; height:40px; color:#ccc;'> <tr> <td><input id='rtLinkT' placeholder="Enter or Paste URL.." style='width:252px; height:30px; font-size:13px;' oninput='rtLinkHandler(event);' /></td> <td style='width:40px; height:30px;'> <button id='rtLinkAddB' disabled style='height:30px;' onclick='rtLinkHandler(event);'><i class="fa-solid fa-link"></i></button> </td> </tr> </table> </td></tr> </table> </div> </div> </DIV> <div id='urlFontsListContainer' style='position:absolute; width:240px; height: 40px; background:rgba(40,40,40,0.75); border:3px solid #ccc; color:#ccc; padding:0px; display:none; opacity:0;' onmouseout='urlFontsListContainerHandler(event);'> <table style='width:100%; height:40px; color:#ccc; margin-bottom:5px; border-bottom: 1px dotted #ccc;'> <tr> <td><input id='ffURLLinkAddT' placeholder="Enter or Paste URL Link Tag.." style='width:190px; height:30px; font-size:13px;' oninput='ffURLLinkChangeHandler(event);' /></td> <td style='width:40px; height:30px; text-align:center;'> <button id='ffURLLinkAddB' disabled style='height:30px;' onclick='ffInsertURLLinkHandler(event);'>Add</button> </td> </tr> </table> <div id='urlFontsListLoadedContainer' style='width:100%; max-height:200px; margin-top:5px; left:0px; top:0px; overflow-x:hidden; overflow-y:auto;'><table style='width:100%; text-align:center; color:#ccc;'></table></div> </div> <DIV id='rtContentContainer' style='width:100%;'><div id='rtContent' style='position:absolute; width:100%; left:0px; overflow-x:hidden; overflow-y:auto;'></div></DIV> <DIV id='colorPaletteContainer' style='position:absolute; padding:3px; background:rgba(40,40,40,0.75); display:none; opacity:0;'> <table> <tr> <td> <table id='colorPaletteTable'> <tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(191, 192, 194);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(255, 255, 255);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(235, 235, 235);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(214, 214, 214);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(192, 192, 192);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(170, 170, 170);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(146, 146, 146);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(122, 122, 122);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(96, 96, 96);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(68, 68, 68);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(35, 35, 35);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(0, 0, 0);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(15, 55, 74);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(2, 21, 64);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(13, 6, 43);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(46, 16, 61);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(61, 13, 27);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(92, 22, 12);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(90, 28, 11);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(88, 52, 10);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(85, 61, 10);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(102, 98, 14);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(79, 85, 9);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(38, 61, 14);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(25, 78, 101);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(0, 46, 122);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(28, 20, 83);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(69, 27, 89);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(86, 22, 42);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(131, 34, 21);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(124, 42, 20);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(122, 74, 19);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(120, 88, 19);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(141, 134, 24);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(111, 118, 16);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(55, 87, 25);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(38, 110, 143);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(0, 66, 169);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(45, 32, 118);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(98, 41, 124);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(121, 35, 61);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(182, 51, 34);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(173, 63, 32);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(169, 105, 31);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(166, 124, 30);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(196, 188, 37);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(154, 165, 27);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(78, 121, 39);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(52, 140, 180);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(0, 86, 214);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(57, 43, 149);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(124, 55, 159);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(155, 47, 79);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(228, 67, 45);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(217, 81, 42);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(212, 133, 41);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(210, 158, 41);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(245, 236, 50);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(195, 209, 37);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(102, 157, 53);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(60, 164, 216);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(3, 97, 251);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(79, 54, 180);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(155, 68, 189);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(185, 58, 94);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(237, 70, 47);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(239, 104, 48);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(246, 169, 49);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(250, 199, 50);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(254, 247, 64);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(217, 235, 55);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(118, 187, 65);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(78, 200, 251);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(59, 135, 251);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(97, 73, 235);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(193, 89, 243);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(231, 74, 122);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(238, 94, 79);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(241, 131, 69);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(247, 179, 61);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(250, 202, 61);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(255, 247, 107);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(228, 239, 101);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(150, 211, 95);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(86, 213, 252);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(116, 167, 252);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(136, 82, 252);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(212, 95, 254);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(237, 113, 159);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(241, 139, 128);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(244, 164, 124);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(249, 198, 119);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(252, 216, 119);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(255, 249, 149);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(235, 242, 143);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(176, 221, 140);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(147, 227, 252);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(168, 197, 253);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(176, 140, 253);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(227, 146, 254);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(242, 164, 192);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(245, 180, 174);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(247, 196, 171);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(251, 217, 168);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(253, 228, 168);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(255, 251, 185);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(242, 246, 184);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(204, 232, 181);"></td></tr><tr><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(202, 240, 253);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(211, 226, 254);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(216, 201, 254);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(241, 201, 255);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(248, 211, 224);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(250, 218, 215);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(251, 226, 214);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(253, 236, 213);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(254, 242, 213);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(254, 253, 221);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(248, 250, 219);"></td><td style="width: 10px; height: 12px; border: 1px solid black; background-color: rgb(224, 237, 211);"></td></tr> </table> </td> <td> <table style='font-family: inter;'> <tr><td> <table cellspacing=0 cellpadding=0> <tr> <td>R:</td> <td><input type='number' min=0 max=255 value='0' /></td> </tr> </table> </td></tr> <tr><td> <table cellspacing=0 cellpadding=0> <tr> <td>G:</td> <td><input type='number' min=0 max=255 value='0' /></td> </tr> </table> </td></tr> <tr><td> <table cellspacing=0 cellpadding=0> <tr> <td>B:</td> <td><input type='number' min=0 max=255 value='0' /></td> </tr> </table> </td></tr> <tr><td> <table cellspacing=0 cellpadding=0> <tr> <td>A:</td> <td><input type='number' min=0 max=255 value='255' /></td> </tr> </table> </td></tr> <tr><td align='center' style='width:50%;'><button style='width:100%;'>Apply</button></td></tr> <tr><td align='center' ><button style='width:100%;'>Cancel</button></td></tr> </table> </td> </tr> </table> </DIV> <DIV id='pageFooter' style='position:absolute; left:0px; bottom:0px; width:100%; height:100px; background:rgba(40,40,40,0.75);'> <table style='width:100%; height:100%;'> <tr> <td style='height:50px;'></td> </tr> <tr> <td style='height:50px;'></td> </tr> </table> </DIV> </BODY> </HTML>
© 2017 -
ZeroByte.ID
.