component HTMLGenerator
{
    public HTMLGenerator()
    {
        Create();
    }

    public void OnResize()
    {
        hel_setText(ETextParamType_OperateCanvas, "ResizeInputFieldGeneric" + "," + "enterdialog" + "," + "common_dialog_message_Slot" + ","
                + "username" + "," + "username-text");
    }

    void Create()
    {
        // shared style
        JsVal shared_div_style = makeJsObj();
        shared_div_style.AddPropertyByVal("position", makeJsStrFrom("absolute"));
        shared_div_style.AddPropertyByVal("z-index", makeJsNumFrom(6));
        shared_div_style.AddPropertyByVal("visibility", makeJsStrFrom("hidden"));

        string shared_div_style_str = shared_div_style.ToString();

        JsVal shared_input_style = makeJsObj();
        shared_input_style.AddPropertyByVal("color", makeJsStrFrom("#ffffff"));
        shared_input_style.AddPropertyByVal("font-size", makeJsStrFrom("16px"));
        shared_input_style.AddPropertyByVal("background", makeJsStrFrom("transparent"));
        shared_input_style.AddPropertyByVal("border", makeJsStrFrom("none"));
        shared_input_style.AddPropertyByVal("outline", makeJsStrFrom("none"));
        shared_input_style.AddPropertyByVal("resize", makeJsStrFrom("none"));

        string shared_input_style_str = shared_input_style.ToString();
        
        // channelname
        {
            JsVal style = makeJsObj();
            style.AddPropertyByVal("color", makeJsStrFrom("#000000"));
            style.AddPropertyByVal("font-size", makeJsStrFrom("16px"));
            style.AddPropertyByVal("resize", makeJsStrFrom("none"));

            string style_str = style.ToString();

            hel_canvas_create_html_element_byid("div", "channelname", "inputlist", shared_div_style_str);
            hel_canvas_create_html_element_byid("input", "channelname-text", "channelname", style_str);
        }
        
        {
            JsVal style = makeJsObj();
            style.AddPropertyByVal("color", makeJsStrFrom("#000000"));
            style.AddPropertyByVal("font-size", makeJsStrFrom("16px"));
            style.AddPropertyByVal("background", makeJsStrFrom("transparent"));
            style.AddPropertyByVal("resize", makeJsStrFrom("none"));
            style.AddPropertyByVal("border", makeJsStrFrom("none"));
            style.AddPropertyByVal("outline", makeJsStrFrom("none"));

            string style_str = style.ToString();

            // textchat
            hel_canvas_create_html_element_byid("div", "textchat", "inputlist", shared_div_style_str);
            hel_canvas_create_html_element_byid("textarea", "textchat-text", "textchat", style_str);
        }
        
        // worldkeyword
        hel_canvas_create_html_element_byid("div", "worldkeyword", "inputlist", shared_div_style_str);
        hel_canvas_create_html_element_byid("input", "worldkeyword-text", "worldkeyword", shared_input_style_str);
        
        // communitykeyword
        hel_canvas_create_html_element_byid("div", "communitykeyword", "inputlist", shared_div_style_str);
        hel_canvas_create_html_element_byid("input", "communitykeyword-text", "communitykeyword", shared_input_style_str);
        
        // intro
        hel_canvas_create_html_element_byid("div", "intro", "inputlist", shared_div_style_str);
        hel_canvas_create_html_element_byid("textarea", "intro-input-text", "intro", shared_input_style_str);
        
        // configurl
        {
            JsVal style = makeJsObj();
            style.AddPropertyByVal("color", makeJsStrFrom("#000000"));
            style.AddPropertyByVal("font-size", makeJsStrFrom("16px"));
            style.AddPropertyByVal("resize", makeJsStrFrom("none"));

            string style_str = style.ToString();

            hel_canvas_create_html_element_byid("div", "configurl", "inputlist", shared_div_style_str);
            hel_canvas_create_html_element_byid("textarea", "configurl-text", "configurl", style_str);
        }
    }
}