popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>RubyAI</title>
    <link rel="stylesheet" type="text/css" href="popup.css">
    <link rel="stylesheet" href="https://use.typekit.net/pom2pvg.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<body>
    <div class="banner">
        <img src="/images/icon-38.png" alt="Icon" id="icon">
        <h1>RubyAI</h1>
    </div>
    <div class="container">
        <div class="settings">
            <p>OpenAI API Key</p>
            <div class ="apiKey">
                <input type="password" id="apiKeyInput" class ="textInput"placeholder="Enter API Key here">
                <img src="/images/send.png" id="saveApiKeyIcon" alt="Save Key" class="saveIcon">
            </div>
            <p>Language</p>
            <div class="language">
                <input type="text" id="languageInput" placeholder="Enter language here" class ="textInput">
                <img src="/images/send.png" id="saveLanguageIcon" alt="Save Key" class="saveIcon">
            </div>
            <p>Font Size</p>
            <input type="range" id="fontSizeSlider" min="10" max="50" value="20" placeholder= "Enter font size here" class ="slider">
        </div>
        <div class="toggle_button">
            <input id="toggle" class="toggle_input" type='checkbox' />
            <label for="toggle" class="toggle_label"/>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>