Parchment Styling?

Authoring TADS
5

I think you can just take this HTML and then add your own CSS after web.css is loaded.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Parchment</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <script src="https://iplayif.com/dist/web/jquery.min.js"></script>
    <script src="https://iplayif.com/dist/web/ie.js" nomodule></script>
    <script src="https://iplayif.com/dist/web/main.js" type="module"></script>
    <link rel="stylesheet" href="https://iplayif.com/dist/web/web.css">
</head>
<body>
    <div id="gameport">
        <div id="about">
            <h1>Parchment</h1>
            <p>is an interpreter for Interactive Fiction. <a href="https://github.com/curiousdannii/parchment">Find out more.</a></p>
            <p>Find stories to play at the <a href="https://ifdb.org/">Interactive Fiction Database</a>.</p>
            <p id="play-url">
                <input id="play-url-input" placeholder="Enter a URL of a story file" type="url">
                <button id="play-url-button">Go</button>
            </p>
            <p id="play-url-error"></p>
            <label id="custom-file-upload" for="file-upload" tabindex="0" role="button">
                <p>Or, click here to play a story file on your device</p>
            </label>
            <input id="file-upload" type="file" style="display: none"/>
            <noscript><p>Parchment requires Javascript. Please enable it in your browser.</p></noscript>
        </div>
        <div id="windowport"></div>
        <div id="loadingpane" style="display:none;">
            <img src="https://iplayif.com/dist/web/waiting.gif" alt="LOADING"><br>
            <em>&nbsp;&nbsp;&nbsp;Loading...</em>
        </div>
        <div id="errorpane" style="display:none;"><div id="errorcontent">...</div></div>
    </div>
</body>
</html>
5 Likes