Chhoto-URL-Extension/options.html

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8">
    <style>
     body {
         display: flex;
         flex-direction: column;
         padding: 5px;
         height: 300px;
     }

     div {
         display: flex;
         align-items: baseline;
     }

     label {
         padding: 0 10px;
         width: 600px;
         align-items: baseline;
         padding: 5px 0;
     }

     input {
         min-width: 150px;
         min-height: 17px;
         padding: 5px;
         border: 2px solid black;
         border-radius: 7px;
         text-align: center;
     }

     .warning {
         color: red;
         display: block !important;
     }

     .note {
         font-weight: bold;
         margin-top: 0px;
     }

     p,
     label {
         font-size: 15px;
     }

     code {
         font-weight: bold;
     }

     main {
         display: flex;
         flex-direction: column;
     }

     #message {
         display: none;
     }

     .header {
         display: flex;
         align-items: center;
     }

     .header img {
         padding-right: 10px;
     }

     .settings {
         border: 2px solid black;
         padding: 10px;
         border-radius: 10px;
         margin-top: 5px;
     }

     .settings h2 {
         min-width: 110px;
     }

     .checkbox {
         flex-wrap: wrap;
     }

    </style>
  </head>

  <body>
    <div class="header">
        <img src="icons/chhoto-url-48.png"></img>
        <h1>Chhoto URL Settings</h1>
    </div>

    <div class="settings">
        <h2>Instance URL</h2>
        <label>
            <input type="text" id="host" placeholder="https://l.example.com">
            <br>
            <p>Don't have one? See <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>
        </label>
    </div>
    <p id="message" class="note">A non-HTTPS connection is insecure! This is disallowed as per Firefox's <a target="_blank" href="https://extensionworkshop.com/documentation/publish/add-on-policies/#development-practices"">development practices</a>.</p>

    <div class="settings">
        <h2>API Key</h2>
        <label>
            <input type="password" id="key" placeholder="Long API Key">
            <p>This is the API key that the extension will use to connect to your Chhoto URL instance. To enable this, set the <strong>"api_key"</strong> environment variable in the server configuration.</p>
            <p>See <strong>Section 1.c</strong> <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>
        </label>
    </div>
    <p class="note">Important: The Chhoto URL server (not the extension) will output in the console whether or not your key is secure. If it isn't, it will generate a suggested key and output it. Always follow its advice.</p>

    <div class="settings checkbox">
        <h2>Protocol Filters</h2>
        <label>
            Allow <code>http://</code> links
            <input type="checkbox" id="allow-http">
        </label>
        <label>
            Allow <code>https://</code> links
            <input type="checkbox" id="allow-https">
        </label>
        <label>
            Allow <code>file://</code> links
            <input type="checkbox" id="allow-file">
        </label>
        <label>
            Allow <code>ftp://</code> links
            <input type="checkbox" id="allow-ftp">
        </label>
    </div>
    <p class="note">Disabling all filters will allow a link to be created from any URL.</p>

    <script type="application/javascript" src="lib/browser-polyfill.min.js"></script>
    <script type="application/javascript" src="options.js"></script>
  </body>

</html>
First commit 2025-01-11 14:58:39 +10:00			`<!DOCTYPE html>`

			`<html>`

			`<head>`
			`<meta charset="utf-8">`
			`<style>`
			`body {`
			`display: flex;`
			`flex-direction: column;`
			`padding: 5px;`
			`height: 300px;`
			`}`

			`div {`
			`display: flex;`
			`align-items: baseline;`
			`}`

			`label {`
			`padding: 0 10px;`
			`width: 600px;`
			`align-items: baseline;`
			`padding: 5px 0;`
			`}`

			`input {`
			`min-width: 150px;`
			`min-height: 17px;`
			`padding: 5px;`
			`border: 2px solid black;`
			`border-radius: 7px;`
			`text-align: center;`
			`}`

			`.warning {`
			`color: red;`
			`display: block !important;`
			`}`

			`.note {`
			`font-weight: bold;`
			`margin-top: 0px;`
			`}`

Fixed allowedProtocols issue 2025-01-13 16:00:18 +10:00			`p,`
			`label {`
			`font-size: 15px;`
			`}`

			`code {`
			`font-weight: bold;`
			`}`

First commit 2025-01-11 14:58:39 +10:00			`main {`
			`display: flex;`
			`flex-direction: column;`
			`}`

			`#message {`
			`display: none;`
			`}`

			`.header {`
			`display: flex;`
			`align-items: center;`
			`}`

			`.header img {`
			`padding-right: 10px;`
			`}`

			`.settings {`
			`border: 2px solid black;`
			`padding: 10px;`
			`border-radius: 10px;`
			`margin-top: 5px;`
			`}`

			`.settings h2 {`
			`min-width: 110px;`
			`}`

Fixed allowedProtocols issue 2025-01-13 16:00:18 +10:00			`.checkbox {`
First commit 2025-01-11 14:58:39 +10:00			`flex-wrap: wrap;`
			`}`

			`</style>`
			`</head>`

			`<body>`
			`<div class="header">`
			`<img src="icons/chhoto-url-48.png"></img>`
			`<h1>Chhoto URL Settings</h1>`
			`</div>`

			`<div class="settings">`
			`<h2>Instance URL</h2>`
			`<label>`
			`<input type="text" id="host" placeholder="https://l.example.com">`
			`<br>`
Fixed allowedProtocols issue 2025-01-13 16:00:18 +10:00			`<p>Don't have one? See <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>`
First commit 2025-01-11 14:58:39 +10:00			`</label>`
			`</div>`
Changing code for Firefox submission 2025-01-13 17:24:14 +10:00			`<p id="message" class="note">A non-HTTPS connection is insecure! This is disallowed as per Firefox's <a target="_blank" href="https://extensionworkshop.com/documentation/publish/add-on-policies/#development-practices"">development practices</a>.</p>`
First commit 2025-01-11 14:58:39 +10:00
			`<div class="settings">`
			`<h2>API Key</h2>`
			`<label>`
			`<input type="password" id="key" placeholder="Long API Key">`
Fixed allowedProtocols issue 2025-01-13 16:00:18 +10:00			`<p>This is the API key that the extension will use to connect to your Chhoto URL instance. To enable this, set the <strong>"api_key"</strong> environment variable in the server configuration.</p>`
			`<p>See <strong>Section 1.c</strong> <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>`
First commit 2025-01-11 14:58:39 +10:00			`</label>`
			`</div>`
Fixed allowedProtocols issue 2025-01-13 16:00:18 +10:00			`<p class="note">Important: The Chhoto URL server (not the extension) will output in the console whether or not your key is secure. If it isn't, it will generate a suggested key and output it. Always follow its advice.</p>`
First commit 2025-01-11 14:58:39 +10:00
Fixed allowedProtocols issue 2025-01-13 16:00:18 +10:00			`<div class="settings checkbox">`
			`<h2>Protocol Filters</h2>`
First commit 2025-01-11 14:58:39 +10:00			`<label>`
			`Allow <code>http://</code> links`
			`<input type="checkbox" id="allow-http">`
			`</label>`
			`<label>`
			`Allow <code>https://</code> links`
			`<input type="checkbox" id="allow-https">`
			`</label>`
			`<label>`
			`Allow <code>file://</code> links`
			`<input type="checkbox" id="allow-file">`
			`</label>`
			`<label>`
			`Allow <code>ftp://</code> links`
			`<input type="checkbox" id="allow-ftp">`
			`</label>`
			`</div>`
			`<p class="note">Disabling all filters will allow a link to be created from any URL.</p>`

			`<script type="application/javascript" src="lib/browser-polyfill.min.js"></script>`
			`<script type="application/javascript" src="options.js"></script>`
			`</body>`

			`</html>`