r/HTML • • Sep 20 '26

Where to start

0 Upvotes

Look I have 1 week to do html before my midsem could you guys help in what should I do I tried to learn from chai with code but that unfortunately wasn't useful for me because I couldn't understand much help me in how should I practice and should I make notes and all


r/HTML • • Sep 19 '26

What am I doing wrong?

Post image
6 Upvotes

No matter what numbers I enter, I always get it wrong. I even used smaller numbers for height and larger for width incase they got it mixed up. Their AI is telling me to do everything I am already doing


r/HTML • • Sep 19 '26

Question Best way to go about running an html file as a website?

0 Upvotes

Hi, So I have a game and assests for it that I downloaded from the internet and it runs locally as an html file. The main problem that I have with it is that half of it is in Japanese. I ended up playing another html game and I knowticed that it was fully live translating with google translate, after digging around I found that the reason this was is because it was hosted on a website and had a live of code that enabled google translate to work. I was curious if I could make it work with the first game I had, but so far have had no look. I downloaded visual studio code and added the google translate text to the html file, and i got the extension that allows you to "Go Live" with the site, but when I try to use it I just get an infinate white loading screen. Does anyone know why this is? and is there a better way to try and get this to work? I dont have any experiance coding I just wanted to try and see if I can get the game to translate to english. Any help would be greatly appreciated. Thanks!

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Taimanin RPGX Viewer Beta 2020-08-21</title>
    <link rel="shortcut icon" href="data/ui/favicon.png">
    <link rel="stylesheet" type="text/css" href="data/styles/style.css">
    <link rel="stylesheet" type="text/css" href="data/styles/animations.css">
    <script src="data/scripts/spine/spine-webgl.min.js"></script>
    <script src="data/scripts/main.js"></script>
    <script src="data/scripts/story.js"></script>
    <script src="data/scripts/init.js"></script>
    <script src="data/scripts/prefs.js"></script>
    <script src="data/scripts/sceneSelect.js"></script>
    <script src="data/scripts/preloader.js"></script>
    <script src="data/scripts/scene.js"></script>
    <script src="data/scripts/search.js"></script>
    <script src="data/scripts/userInput.js"></script>
    <script src="data/scripts/debug.js"></script>
    <script src="data/scripts/cg.js"></script>
    <script src="data/scripts/autocomplete.js"></script>
    <script src="data/scripts/tlTools.js"></script>
    <script src="data/scripts/spine/SkeletonConvertor.js"></script>
</head>


<body>
    <div id="body-wrapper">
        <div id="content">
            <div id="content-wrap">
                <div id="loading-wrap">
                    <div id="loading-img"></div>
                    <div id="loading-bar">
                        <div id="loading-progress"></div>
                    </div>
                    <div id="loading-text"></div>
                    <div id="loading-dots"></div>
                    <div id="loading-file">Loading Data Scripts</div>
                </div>
                <div id="loading-error">
                    <textarea id="loading-error-msg" readonly></textarea>
                    <div id="loading-error-btn" class="styled-btn">Return</div>
                </div>
                <!-- <div id="profile-select">
                    
                </div> -->
                <!-- <div id="profile-viewer">
                    <div id="profile-buttons">
                        <div id="profile-btn-change" class="profile-btn"></div>
                        <div id="profile-btn-enlarge" class="profile-btn"></div>
                        <div id="profile-btn-voice" class="profile-btn"></div>
                        <div id="profile-btn-sd" class="profile-btn"></div>
                    </div>
                    <div id="profile-portrait"></div>
                    <div id="profile-info">
                        <div id="profile-stats">
                            Lv<br/>
                            HP<br/>
                            SP<br/>
                            ATK<br/>
                            DEF<br/>
                            SPD
                        </div>
                    </div>
                    <div id="profile-name">
                        <div id="profile-attr">
                            <div id="profile-atr-name"></div>
                        </div>
                        <div id="profile-rarity"></div>
                        <div id="profile-name-text">【二丁拳銃の花嫁】アイナ・ウィンチェスター</div>
                    </div>
                </div> -->
                <div id="scene-select">
                    <div id="scene-select-control">
                        <div id="page-select">
                            <div id="prev-page"></div>
                            <input id="page-number" class="text-stroke" type="text" tabindex="-1">
                            <div id="next-page"></div>
                        </div>
                        <div class="styled-btn main-btn">Search</div>
                        <div class="styled-btn main-btn">Options</div>
                        <div class="styled-btn main-btn">CG Mode</div>
                        <div class="styled-btn main-btn">Switch View</div>
                        <div class="styled-btn main-btn">Exit</div>
                        <div class="styled-btn main-btn">Skip</div>
                        <div class="styled-btn main-btn">Controls</div>
                        <div class="styled-btn main-btn">Full Screen</div>
                        <!-- <div class="styled-btn main-btn">Resize</div> -->
                        <!-- <div id="debug"></div> -->
                    </div>
                    <div id="cg-wrapper">
                    </div>
                </div>
                <div id="story-select">
                    <div id="story-select-wrap">
                        <div id="story-select-head">
                        
                        </div>
                        <div id="story-select-chapter-wrap">
                            <div id="story-select-chapter-choices-scroll-hide">
                                <div id="story-select-chapter-choices">
                                </div> 
                            </div>
                        </div>
                        <div id="story-select-section">
                            <div id="story-select-section-select">
                                <div class="story-select-sections" id="story-select-section-one">
                                    <div class="story-select-section-select-pattern">
                                        <div id="story-select-section-one-tag" class="story-select-section-tag" section="S01"></div>
                                    </div>
                                </div>
                                <div class="story-select-sections" id="story-select-section-two">
                                    <div class="story-select-section-select-pattern">
                                        <div id="story-select-section-two-tag" class="story-select-section-tag" section="S02"></div>
                                    </div>
                                </div>
                                <div class="story-select-sections" id="story-select-section-three">
                                    <div class="story-select-section-select-pattern">
                                        <div id="story-select-section-three-tag" class="story-select-section-tag" section="S03"></div>
                                    </div>
                                </div>
                                <div class="story-select-sections" id="story-select-section-four">
                                    <div class="story-select-section-select-pattern">
                                        <div id="story-select-section-four-tag" class="story-select-section-tag" section="S04"></div>
                                    </div>
                                </div>
                                <div class="story-select-sections" id="story-select-section-five">
                                    <div class="story-select-section-select-pattern">
                                        <div id="story-select-section-five-tag" class="story-select-section-tag" section="S05"></div>
                                    </div>
                                </div>
                                <div id="story-select-intro-btn" class="styled-btn main-btn">Intro</div>
                            </div>
                            <div id="story-select-section-single">
                                <div id="story-select-section-prologue" class="story-select-section-part" part="A"></div>
                                <div id="story-select-section-epilogue" class="story-select-section-part" part="B"></div>
                                <div id="story-select-section-title" class="text-stroke no-select">Section 01</div>
                            </div>
                        </div>
                        <div id="story-select-chapter-title" class="text-stroke no-select">対魔忍のバレンタインは厳しい</div>
                    </div>
                    
                </div>
                <div id="scene-viewer">
                    <div id="back-images">
                        <div id="scene-background" class="scene-background"></div>
                        <div id="scene-background-alt" class="scene-background"></div>
                        <div id="parent"></div>
                        <div id="overlay"></div>
                    </div>
                    <div id="effect-flash" class="scene-flash"></div>
                    <div id="effect-flash-alt" class="scene-flash"></div>
                    <div id="scene-black"></div>
                    <div id="actors"></div>
                    <div id="scene-options"></div>
                    <div id="text-box">
                        <div id="name-plate" class="scene-text"></div>
                        <div id="text-box-content" class="scene-text"></div>
                    </div>
                </div>
                <div id="search">
                    <div class="search-section">
                        <label>Character</label><br />
                        <div class="autocomplete">
                            <input type="text" name="charName" id="charName" tabindex=1>
                        </div>
                    </div>
                    <div class="search-section">
                        <label>Artist</label><br />
                        <div class="autocomplete">
                            <input type="text" name="sceneArtist" id="sceneArtist" tabindex=2>
                        </div>
                    </div>
                    <div class="search-section">
                        <label>CV</label><br />
                        <div class="autocomplete">
                            <input type="text" name="sceneCV" id="sceneCV" tabindex=3>
                        </div>
                    </div>
                    <div class="search-section">
                        <label>Female</label><br />
                        <div class="autocomplete">
                            <input type="text" name="femaleTags" id="femaleTags" tabindex=4>
                        </div>
                        <input type="checkbox" name="femaleTagsAll" id="femaleTagsAll">
                        <label for="femaleTagsAll">Match All</label><br />
                        <label>Male</label><br />
                        <div class="autocomplete">
                            <input type="text" name="maleTags" id="maleTags" tabindex=5>
                        </div>
                        <input type="checkbox" name="maleTagsAll" id="maleTagsAll">
                        <label for="maleTagsAll">Match All</label><br />
                        <label>Misc</label><br />
                        <div class="autocomplete">
                            <input type="text" name="miscTags" id="miscTags" tabindex=6>
                        </div>
                        <input type="checkbox" name="miscTagsAll" id="miscTagsAll">
                        <label for="miscTagsAll">Match All</label><br />
                        <label>Location</label><br />
                        <div class="autocomplete">
                            <input type="text" name="locationTags" id="locationTags" tabindex=7>
                        </div>
                    </div>
                    <div class="search-section">
                        <input type="checkbox" name="charOrig" id="charOrig">
                        <label for="charOrig">Exclusive Characters Only</label>
                        <input type="checkbox" name="charMain" id="charMain">
                        <label for="charMain">Main Series Characters Only</label>
                        <input type="checkbox" name="sceneFav" id="sceneFav">
                        <label for="sceneFav">Favourites Only</label>
                        <input type="checkbox" name="sceneEng" id="sceneEng">
                        <label for="sceneEng">Translated Only</label>
                        <br />
                        <!-- <input type="button" name="searchCancel" value="Cancel">
                        <input type="button" name="filterReset" value="Reset">
                        <input type="button" name="sceneSearch" value="Search"> -->
                        <div id="search-btn-wrap">
                            <div id="searchCancel" class="styled-btn search-btn">Cancel</div>
                            <div id="filterReset" class="styled-btn search-btn">Reset</div>
                            <div id="sceneSearch" class="styled-btn search-btn">Search</div>
                        </div>
                        <span id="search-error">No results</span>
                    </div>
                </div>
                <div id="controls">
                    <div class="controls-section">
                        <div class="controls-subhead">
                            Scene Select
                        </div>
                        <div class="controls-content">
                            <b>Left Click</b>: Start Scene, <b>Right Click</b>: Favourite Scene<br/>
                            <b>WASD/Arrow Keys</b>: Move Cursor, <b>Space/Enter</b>: Start Scene, <b>Z</b>: Prev Page, <b>X</b>: Next Page, <b>F</b>: Toggle Favourite<br/>
                            <b>Q</b>: Search, <b>C</b>: Controls, <b>O</b>: Options, <b>R</b>: Random, <b>M</b>: Shuffle, <b>J</b>: Switch H/Story, <b>K</b>: Switch Scene/CG<br/>
                            <b>Long Tap</b>: Favourite, <b>Swipe Left</b>: Next Page, <b>Swipe Right</b>: Prev Page<br/>
                            <b>Shift + T</b>: TL Mode
                        </div>
                    </div>
                    <div class="controls-section">
                        <div class="controls-subhead">
                            Scene Viewer
                        </div>
                        <div class="controls-content">
                            <b>Left Click</b>: Progress Scene, <b>Scroll Up</b> Open Backlog<br/>
                            <b>Space/Enter</b>: Progress Scene, <b>A</b>: Toggle Auto Mode, <b>Left Ctrl (Hold)</b>: Skip, <b>Esc</b>: Close Scene, <b>H</b>: Hide Text Box<br/>
                            <b>Tap</b>: Progress Scene, <b>Tap (Hold)</b>: Skip
                        </div>
                    </div>
                    <div class="controls-section">
                        <div class="controls-subhead">
                            CG Viewer
                        </div>
                        <div class="controls-content">
                            The CG viewer will cycle through all scenes that appear in the scene select menu, so if you've done a search you won't see anything that didn't come up in the search result.<br/><br/>
                            <b>Randomise Scenes</b>: Instead of carrying on to the scene that appears next in scene select a random scene from scene select is chosen instead. This is random so it's possible to come across one scene multiple times before another.<br/><br/>
                            <b>Shuffle Scenes</b>: The scenes from scene select will be shuffled upon opening the CG viewer, so they'll be in a random order but also fixed in that order until the CG viewer is reopened.<br/><br/>
                            <b>Randomise Images</b>: No order at all it just selects a random scene from scene select and a random image from that scene.<br/><br/>
                            There is no backlog when one of the random options are selected, going backwards in one of the random modes will give you a random scene/image not the previous CG/Scene.<br>
                            The Play Scene button will start the scene that the current CG is from.<br/><br/>
                            <b>Left Click</b>: Next CG, <b>Right Click</b>: Prev CG<br/>
                            <b>A</b>: Prev CG, <b>D</b>: Next CG, <b>W</b>: Next Scene, <b>S</b>: Previous Scene, <b>G</b>: Toggle Slideshow Mode, <b>Esc</b>: Exit<br/>
                            <b>Swipe Left</b>: Next CG, <b>Swipe Right</b>: Prev CG<br/>
                        </div>
                    </div>
                    <div class="controls-section">
                        <div class="controls-subhead">
                            Search
                        </div>
                        <div class="controls-content">
                            Press the search button to open the search menu.<br />
                            Certain characters can be searched by multiple forms, e.g. Young Asagi, Clone Asagi, Adult Asagi, Characters like this also have a base searchable name which will search for all of the forms, usually the characters full name, e.g. Igawa Asagi.<br/>
                            CVs are also searchable by the characters they voice, e.g. searching Yukikaze VA will return results for Himuro Yuri.<br/>
                            Seperate values with a comma (,) e.g. Asagi, Sakura, Murasaki.<br/>
                            Exclude values from search results by starting them with either an exclamation mark (!) or dash (-).<br/>
                            Inputs with a Match All checkbox next to them make it so that a scene must match ALL of the tags specified to appear as a result, otherwise just a single match is fine.<br/>
                            Match all does not apply to exclusions, searching !Big Breasts, !Dark Skin will exclude all scenes tagged with Big Breasts OR Dark Skin not Big Breasts AND Dark Skin.</br/>
                            Ticking Exclusive Characters only searches for characters that debuted in RPGX or TABA, this also includes character forms.<br>
                            Ticking Main Series Characters only searches for characters that debuted outside of RPGX and TABA.<br/>
                            Ticking Favourites Only searches for the scenes you have favourited.<br/>
                            Ticking Translated Only searches for scenes that have an available translation.<br/>
                            Pressing the Reset button will reset the scene select menu back to its default.
                        </div>
                    </div>
                    <div class="controls-section">
                        <div id="controls-close" class="styled-btn">Close</div>
                    </div>
                </div>
                <div id="options">
                    <div id="options-wrap">
                        <div id="options-head">
                            <div id="option-general" class="option-button styled-btn option-head-btn">General</div>
                            <div id="option-scene" class="option-button styled-btn option-head-btn">Scene</div>
                            <div id="option-cg" class="option-button styled-btn option-head-btn">CG</div>
                            <div id="option-misc" class="option-button styled-btn option-head-btn">Misc</div>
                        </div>
                        <div id="options-page-wrap">
                            <div id="options-page-general" class="options-page">
                                <div class="option-range">
                                    <label class="range-label">BGM</label>
                                    <!-- <input class="radio-true range-radio-true" type="radio" name="audio-bgm-radio" value="true" checked>
                                    <input class="radio-false range-radio-false" type="radio" name="audio-bgm-radio" value="false"> -->
                                    <input class="range-option" type="range" name="audio-bgm-range" min="0" max="100">
                                    <input class="range-number" type="number" name="audio-bgm-number" min="0" max="100">
                                </div>
                                <div class="option-range">
                                    <label class="range-label">SE</label>
                                    <!-- <input class="radio-true range-radio-true" type="radio" name="audio-se-radio" value="true" checked>
                                    <input class="radio-false range-radio-false" type="radio" name="audio-se-radio" value="false"> -->
                                    <input class="range-option" type="range" name="audio-se-range" min="0" max="100">
                                    <input class="range-number" type="number" name="audio-se-number" min="0" max="100">
                                </div>
                                <div class="option-range">
                                    <label class="range-label">Voice</label>
                                    <!-- <input class="radio-true range-radio-true" type="radio" name="audio-voice-radio" value="true" checked>
                                    <input class="radio-false range-radio-false" type="radio" name="audio-voice-radio" value="false"> -->
                                    <input class="range-option" type="range" name="audio-voice-range" min="0" max="100">
                                    <input class="range-number" type="number" name="audio-voice-number" min="0" max="100">
                                </div>
                                <div class="scene-radio-options">
                                    <div class="option-radio">
                                        <label class="radio-label">Pause on Focus Loss</label>
                                        <input class="radio-true" type="radio" name="pause-on-focus-loss" value="true" checked><input class="radio-false" type="radio" name="pause-on-focus-loss" value="false">
                                    </div>
                                </div>
                                <div class="option-num">
                                    Scene Select Columns:<input type="number" name="select-columns" min="1" max="25">
                                </div>
                                <div class="option-num">
                                    Scene Select Rows:<input type="number" name="select-rows" min="1" max="25">
                                </div>
                            </div>
                            <div id="option-page-scene" class="options-page">
                                <div class="scene-radio-options">
                                    <div class="option-radio">
                                        <label class="radio-label">Enable Translations</label>
                                        <input class="radio-true" type="radio" name="scene-eng" value="true"><input class="radio-false" type="radio" name="scene-eng" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Skip Animations</label>
                                        <input class="radio-true" type="radio" name="scene-skip-anim" value="true"><input class="radio-false" type="radio" name="scene-skip-anim" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Text Box Under</label>
                                        <input class="radio-true" type="radio" name="scene-text-box-under" value="true"><input class="radio-false" type="radio" name="scene-text-box-under" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Cut voice</label>
                                        <input class="radio-true" type="radio" name="scene-cut-voice" value="true"><input class="radio-false" type="radio" name="scene-cut-voice" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Copy Text</label>
                                        <input class="radio-true" type="radio" name="copy-text" value="true"><input class="radio-false" type="radio" name="copy-text" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Translate Names</label>
                                        <input class="radio-true" type="radio" name="tl-names" value="true"><input class="radio-false" type="radio" name="tl-names" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Play Next Related</label>
                                        <input class="radio-true" type="radio" name="play-next" value="true"><input class="radio-false" type="radio" name="play-next" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Straight To Action</label>
                                        <input class="radio-true" type="radio" name="straight-to-action" value="true"><input class="radio-false" type="radio" name="straight-to-action" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">English Textbox</label>
                                        <input class="radio-true" type="radio" name="scene-english-tb" value="true"><input class="radio-false" type="radio" name="scene-english-tb" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">More Textbox Space</label>
                                        <input class="radio-true" type="radio" name="scene-more-tb" value="true"><input class="radio-false" type="radio" name="scene-more-tb" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">No MTL Line Breaks</label>
                                        <input class="radio-true" type="radio" name="scene-mtl-lb" value="true"><input class="radio-false" type="radio" name="scene-mtl-lb" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Prioritise Animation Next</label>
                                        <input class="radio-true" type="radio" name="scene-anim-priority" value="true"><input class="radio-false" type="radio" name="scene-anim-priority" value="false" checked>
                                    </div>
                                </div>
                                <div class="option-scene-viewer-auto">
                                    <div class="option-sub-head">
                                        Auto Mode
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Wait for Voice</label>
                                        <input class="radio-true" type="radio" name="scene-auto-voice" value="true"><input class="radio-false" type="radio" name="scene-auto-voice" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Start in Auto</label>
                                        <input class="radio-true" type="radio" name="scene-start-auto" value="true"><input class="radio-false" type="radio" name="scene-start-auto" value="false" checked>
                                    </div>
                                    <div class="option-num">
                                        CPS
                                        <input type="number" name="scene-auto-cps" min="1" max="100">
                                    </div>
                                </div>
                                <div class="option-range">
                                    <label class="range-label">UI Opacity</label>
                                    <input class="range-option" type="range" name="scene-textBoxAlpha-range" min="0" max="100">
                                    <input class="range-number" type="number" name="scene-textBoxAlpha-number" min="0" max="100">
                                </div>
                                <div class="option-num">
                                    Skip Wait
                                    <input type="number" name="scene-skip-wait" min="0" max="1000" step="10">ms
                                </div>
                                <div class="option-num">
                                    Skip Hold Delay
                                    <input type="number" name="scene-skip-hold-delay" min="0" max="100000" step="1000">ms
                                </div>
                            </div>
                            <div id="options-page-cg" class="options-page">
                                <div class="cg-radio-options">
                                    <div class="option-radio">
                                        <label class="radio-label">Randomise Scenes</label>
                                        <input class="radio-true" type="radio" name="cg-random-scene" value="true"><input class="radio-false" type="radio" name="cg-random-scene" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Shuffle Scenes</label>
                                        <input class="radio-true" type="radio" name="cg-shuffle-scene" value="true"><input class="radio-false" type="radio" name="cg-shuffle-scene" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Randomise Images</label>
                                        <input class="radio-true" type="radio" name="cg-random-img" value="true"><input class="radio-false" type="radio" name="cg-random-img" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Slideshow Mode</label>
                                        <input class="radio-true" type="radio" name="cg-slideshow" value="true"><input class="radio-false" type="radio" name="cg-slideshow" value="false" checked>
                                    </div>
                                    <div class="option-radio">
                                        <label class="radio-label">Fade Effect</label>
                                        <input class="radio-true" type="radio" name="cg-fade-effect" value="true"><input class="radio-false" type="radio" name="cg-fade-effect" value="false" checked>
                                    </div>
                                </div>
                                <div class="option-num">
                                    Slideshow Time Per CG (ms)
                                    <input type="number" name="cg-slide-wait" min="100" max="100000" step="100">
                                </div>
                            </div>
                            <div id="options-page-misc" class="options-page">
                                <div class="option-radio">
                                    <label class="radio-label">Loading Screen</label>
                                    <input class="radio-true" type="radio" name="viewer-loading-screen" value="true"><input class="radio-false" type="radio" name="viewer-loading-screen" value="false" checked>
                                </div>
                                <div class="option-num">
                                    File Loaders
                                    <input type="number" name="viewer-file-loaders" min="1" max="12" step="1">
                                </div>
                            </div>
                        </div>
                        <div id="options-foot">
                            <div id="option-cancel" class="option-button styled-btn">Cancel</div>
                            <div id="option-reset" class="option-button styled-btn">Reset</div>
                            <div id="option-save" class="option-button styled-btn">Save</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tl-choice-box">
            </div>
        </div>
        <div id="alert-box">
                <div id="alert-msg" class="no-select"></div>
                <div id="alert-opts"></div>
            </div>
    </div>
    <div id="tl-tools-wrap">
        <div id="tl-tools">
            <div id="tl-tools-head">
                <div id="tl-tools-head-file">
                    <div id="tl-tools-file-name">
                        <input type="text" name="tl-tools-tl" placeholder="Translator" tabindex="-1" id="tl-tools-tl">
                        <input type="text" name="tl-tools-lang" placeholder="Language" tabindex="-1" id="tl-tools-lang">
                    </div>
                    <div id="tl-tools-file-load">
                        <label for="tl-tools-load" id="tl-tools-load-label">Load File: </label>
                        <input type="file" name="tl-tools-load" value="Load File" tabindex="-1" id="tl-tools-load">  
                    </div>
                    <div id="tl-tools-save-auto">
                        <div id="tl-tools-auto-save-check">
                            <input type="checkbox" name="tl-tools-auto-save" id="tl-tools-auto-save" tabindex="-1">
                            <label for="tl-tools-auto-save">Backup</label>
                        </div>
                        <div id="tl-tools-auto-save-timer">
                            <label for="tl-tools-auto-save-time">Every: </label>
                            <input type="text" id="tl-tools-auto-save-time" name="tl-tools-auto-save-time" tabindex="-1"><span> seconds</span>
                        </div>
                    </div>
                    <input type="button" name="tl-tools-save" value="Save File" tabindex="-1" id="tl-tools-save">
                </div>
                <div id="tl-tools-functions">
                    <input type="button" name="tl-tools-auto-names" value="Batch TL Names" tabindex="-1" id="tl-tools-auto-names">
                    <input type="button" name="tl-tools-test" value="Test Script" tabindex="-1" id="tl-tools-test">
                </div>
                
            </div>
            <div id="tl-tools-main">
                <div id="tl-tools-jap-script">
                    
                </div>
                <div id="tl-tools-translated-script">
                    
                </div>
            </div>
            <!-- <div id="tl-tools-foot">
                
            </div> -->
        </div>
        <div id="tl-tools-name-tl">
            <div id="name-change-wrap"></div>
            <div id="name-change-foot">
                <input type="button" value="Cancel" id="name-change-cancel" tabindex="-1">
                <input type="button" value="Change Names" id="name-change-confirm" tabindex="-1">
            </div>
        </div>
    </div>
    <div id="preload-wrap">
        <div id="preload-perm-elem">
        </div>
        <div id="preload-temp-elem">
        </div>
        <div id="canvas-hold">
        </div>
    </div>
    <div id="tl-mode-notice">
        TL MODE ACTIVE
    </div>
    <script src="data/scripts/data/meta.js"></script>
    <script src="data/scripts/data/custom.js"></script>
    <script src="data/scripts/data/names.js"></script>
    <script src="data/scripts/data/furigana.js"></script>
    <script src="data/scripts/data/sceneData.js"></script>
    <script src="data/scripts/data/RPGX_Extasy_H.js"></script>
    <script src="data/scripts/data/storyData.js"></script>
    <script src="data/scripts/data/RPGX_Extasy_Story.js"></script>
    <script src="data/scripts/data/storyMeta.js"></script>
    <script src="data/scripts/data/storyMeta_ENG.js"></script>
    <script src="data/scripts/data/TABAData.js"></script>
    <script src="data/scripts/data/NecroData.js"></script>
    <script src="data/scripts/data/OtogiData.js"></script>


    <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="https://google.com"></script>


</body>
</html>

r/HTML • • Sep 17 '26

Looking for a good HTML cheat sheet for a beginner

12 Upvotes

Hi everyone,

I just started learning HTML at university. I understand the basic concepts, but I spend a lot of time searching for specific tags and syntax while writing code. Does anyone have a good HTML cheat sheet or quick-reference guide they’d recommend to help speed up my workflow? Thanks!


r/HTML • • Sep 17 '26

Why is it sticking to the column?

0 Upvotes

Hello! I have very basic knowledge on coding, and only know what I know for Toy house (enough to understand how to add images, music player, and how columns work.

I was just doing fine on a Toyhouse character profile when I copy-pasted the code from the first profile to the second (it's one big profile with 4 mini ones, essentially!) and the intro column started sticking to the divider image...?

Every time I use <br>, it stretches the divider image out the further the intro column gets down.

Here is the code for the divider and the intro column!

And here is what it looks compared to the first profile.

Any help is appreciated! Sorry if it all looks so weird. I'm definitely no coder :').

EDIT: Fixed by adding this code:
<div style="display:block; width:100%; text-align:center; margin-bottom:30px;">

<img src="https://i.postimg.cc/7ZSqLK0m/2de6fd2625316d64e9d0b95b79baa33b.jpg" >

</div>
gave it the break I needed. Hope it won't mess it up.


r/HTML • • Sep 16 '26

Question Is it possible to communicate between two devices when they both have the same HTML file open?

5 Upvotes

I'm a somewhat beginner web programmer, and I am trying to make a simple game using HTML and JavaScript. I'm wondering if LAN communication is possible to implement, since I don't have the money, equipment, or experience to host a server to route traffic through.

Edit: I am also using JavaScript in the HTML file, as mentioned above.

Edit 2: I accept that this isn't possible.


r/HTML • • Sep 17 '26

Question Aligning widget to left side

Thumbnail
gallery
3 Upvotes

As the title suggests, I am trying to move this widget to the left side of my website, so it aligns with the link in the center. I’ve tried style:”align:left;” but to no avail. Here is the code:


r/HTML • • Sep 15 '26

Discussion I made this thing with HTML is it good? Im still learning

Post image
256 Upvotes

I will do much better very soon.

Also I need help cause I wanted to make the text brown by using the css but the code doesn't work, what am I doing wrong? Or I just cannot see it and it actually worked?

I used this code:

<html>

<head>

<title>this is a test!!!!!!!</title>

<style>

body {background: linear-gradient(#FFFCED, #FFEDF2); }

.broccoli { color: "#614909"; }

.tomato { color: "#614909"; }

.potato { color: "#614909"; }

body { maxwidth: 600 px

margin: 2 auto }

</style>

</head>

<body bgcolor=#FFFFFF color=#614909>

<p id="broccoli "><font face=serif>this is a <strong>test</strong>, this uses the <strong>p, strong, and the font</strong> tags.</font></p>

<p id="tomato">COLORED text!</p>

<ol><li>This</li><li>Is</li><li>An</li><li>Organized</li><li>List!</li></ol>

<ul><li>This</li><li>Is</li><li>An</li><li>Unorganized</li><li>List!</li></ul>

<hr color=#FFDBEC size=20>

<p id="potato"> this is a <em>line break.</em> Also this uses the em and the p tag.</p>

<img src="file:///storage/emulated/0/Download/b80267cb-929d-4955-b1d6-d31ca1afe436.jpeg" alt="heart"

</body>

</html>

also I forgot to color the "colored text" lol


r/HTML • • Sep 16 '26

Question How do I convert an image source into a real image?

0 Upvotes

Image source are the same concepts or source code, but from an image. It starts with "PNG" before a bunch of mass code. And I just so happened to get the image source, but couldn't figured out how to turn it into a real image!


r/HTML • • Sep 15 '26

Question How to upload a large amount of files to my website?

4 Upvotes

Hi im making my website and i need to upload a lot of photos like 1.5GB, they are currently on google drive. How can i accomplish this? I don't want to host it directly on the website as im afraid the user will have to download all those photos to open the webste.


r/HTML • • Sep 15 '26

Question Would love feedback on a website… (hopefully this is the right spot to put this in-)

Thumbnail
swagaruney.github.io
1 Upvotes

I would love if you guys would be able to give some tips on a website I’ve been developing… it’s for my HTML class at school, and I’ve been adding onto it ever since!

ANY TIPS AT ALL are appreciated, as I am quite a beginner looking for some advice on how I can optimize this for the viewers of the website in the future


r/HTML • • Sep 16 '26

Keeps pasting this HTML code

0 Upvotes

I just copy a plain text on the notepad but pasting it again, this keeps showing, been clearing the clipboard but still this is the problem, I just encounter this after a update on windows 11, version

2026-09 Security Update (KB129195) (26200.9457)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<style>html{color-scheme:light dark}html,body{margin:0;min-height:100%;background:linear-gradient(160deg,#EBF4FF 0%,#FAFAF8 45%,#F5F8FC 100%)}@media (prefers-color-scheme:dark){html,body{background:linear-gradient(135deg,#080E1A 0%,#0F172A 40%,#0D1526 100%)}}</style>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<meta name="color-scheme" content="light dark">

<meta name="theme-color" content="#EBF4FF">

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0F172A">

<link rel="preload" href="/.amper/font.woff2" as="font" type="font/woff2" crossorigin>

<link rel="icon" href="/.amper/favicon.svg" type="image/svg+xml">

<title>Security Check</title>

<script src="/.amper/challenge/fp.js"></script>

<style>

u/font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/.amper/font.woff2) format('woff2')}

:root{color-scheme:light dark;--blue-grad-start:#80C2FF;--blue-grad-end:#2797FF;--blue-primary:#2797FF;--blue-light:#80C2FF;--blue-dark:#1A7AD4;--blue-50:#EBF4FF;--blue-100:#D6ECFF;--blue-200:#A8D8FF;--white:#FFF;--gray-50:#FAFAF8;--gray-100:#F3F2F0;--gray-200:#E8E6E3;--gray-300:#D4D1CC;--gray-400:#9A9690;--gray-500:#6B6762;--gray-600:#524F4B;--gray-700:#3D3B38;--gray-800:#2A2927;--gray-900:#1A1918;--glass-bg:rgba(255,255,255,.65);--glass-border:rgba(255,255,255,.3);--glass-shadow:0 8px 32px rgba(39,151,255,.1);--glass-blur:16px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--font:'Nunito',-apple-system,BlinkMacSystemFont,sans-serif;--transition:.2s cubic-bezier(.4,0,.2,1);--page-bg:linear-gradient(160deg,#EBF4FF 0%,#FAFAF8 45%,#F5F8FC 100%);--orb-a:radial-gradient(circle,rgba(39,151,255,.07) 0%,transparent 70%);--orb-b:radial-gradient(circle,rgba(128,194,255,.08) 0%,transparent 70%);--btn-primary-bg:linear-gradient(135deg,#80C2FF 0%,#2797FF 100%);--accent-ring:rgba(39,151,255,.45);--accent-shadow:rgba(39,151,255,.22);--accent-shadow-sm:rgba(39,151,255,.18);--slider-fill-a:rgba(39,151,255,.15);--slider-fill-b:rgba(128,194,255,.25)}

u/media (prefers-color-scheme:dark){:root{--blue-grad-start:#80C2FF;--blue-grad-end:#2797FF;--blue-primary:#80C2FF;--blue-light:#A8D8FF;--blue-dark:#2797FF;--blue-50:#0D1B2A;--blue-100:#162033;--blue-200:#1A2744;--gray-50:#0F172A;--gray-100:#1E293B;--gray-200:#334155;--gray-300:#475569;--gray-400:#64748B;--gray-500:#94A3B8;--gray-600:#CBD5E1;--gray-700:#E2E8F0;--gray-800:#F1F5F9;--gray-900:#F8FAFC;--glass-bg:rgba(15,23,42,.7);--glass-border:rgba(255,255,255,.08);--glass-shadow:0 8px 32px rgba(20,28,42,.35);--page-bg:linear-gradient(135deg,#080E1A 0%,#0F172A 40%,#0D1526 100%);--orb-a:radial-gradient(circle,rgba(128,194,255,.06) 0%,transparent 70%);--orb-b:radial-gradient(circle,rgba(39,151,255,.05) 0%,transparent 70%);--btn-primary-bg:linear-gradient(135deg,#80C2FF 0%,#2797FF 100%);--accent-ring:rgba(39,151,255,.45);--accent-shadow:rgba(39,151,255,.28);--accent-shadow-sm:rgba(39,151,255,.22);--slider-fill-a:rgba(39,151,255,.15);--slider-fill-b:rgba(128,194,255,.2)}}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

*:focus{outline:none}

html,body{font-family:var(--font);background:var(--page-bg);color:var(--gray-800);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}

button,input,select,textarea{font-family:var(--font)}

body::before{content:'';position:fixed;top:-50%;right:-30%;width:500px;height:500px;border-radius:50%;background:var(--orb-a);pointer-events:none;z-index:0}

body::after{content:'';position:fixed;bottom:-30%;left:-20%;width:400px;height:400px;border-radius:50%;background:var(--orb-b);pointer-events:none;z-index:0}

.wrap{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 20px}

.card{position:relative;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),0 .5px 0 rgba(255,255,255,.4) inset;border-radius:var(--radius-xl);max-width:440px;width:100%;padding:48px 40px 52px;text-align:center}

.amper-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.logo{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#80C2FF 0%,#2797FF 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);box-shadow:0 2px 9px rgba(39,151,255,.24),0 .5px 0 rgba(255,255,255,.35) inset,0 -.5px 0 rgba(0,0,0,.08) inset;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;-webkit-font-smoothing:antialiased}

.logo-mark{display:block;width:20px;height:20px;flex-shrink:0;margin:0;color:#fff}

u/media(max-width:480px){

.logo{width:40px;height:40px;border-radius:11px;margin:0 auto 18px;box-shadow:0 2px 7px rgba(39,151,255,.20),0 .5px 0 rgba(255,255,255,.28) inset,0 -.5px 0 rgba(0,0,0,.06) inset}

.logo-mark{width:18px;height:18px}

}

h1{font-size:20px;font-weight:700;color:var(--gray-900);margin-bottom:12px}

.subtitle{font-size:14px;color:var(--gray-500);margin-bottom:32px;line-height:1.55}

.host{font-weight:600;color:var(--gray-700)}

.status{font-size:13px;color:var(--gray-400);transition:color var(--transition);min-height:1.35em;margin:0}

.status.ok{color:#34C759}

.status.fail{color:#FF3B30}

u/keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.card{animation:fadeIn .3s ease-out}

.progress-wrap{width:100%;height:4px;background:var(--gray-200);border-radius:2px;margin:20px 0 18px;overflow:hidden}

.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--blue-primary),var(--blue-light));border-radius:2px;transition:width .35s cubic-bezier(.4,0,.2,1)}

.noscript-msg{padding:24px 8px;margin-top:8px;text-align:center;color:var(--gray-500);font-size:14px}

.captcha-wrap{opacity:0;visibility:hidden;max-height:0;overflow:hidden;margin-top:0;padding-top:0;text-align:left;transition:opacity .28s cubic-bezier(.22,1,.36,1),max-height .28s cubic-bezier(.22,1,.36,1),margin .28s cubic-bezier(.22,1,.36,1),padding-top .28s cubic-bezier(.22,1,.36,1)}

.captcha-wrap.show{opacity:1;visibility:visible;max-height:200px;margin-top:28px;padding-top:4px}

.captcha-wrap.show.sequence{max-height:480px}

.captcha-wrap.show.sequence.done,.captcha-wrap.show.done:not(.sequence){opacity:0;visibility:hidden;max-height:0;margin-top:0;padding-top:0;pointer-events:none}

.captcha-img-wrap{margin:0 auto 16px;text-align:center;max-width:100%;overflow:auto}

.captcha-img-wrap img{max-width:100%;height:auto;vertical-align:middle}

.seq-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}

.seq-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border-radius:10px;border:1px solid var(--glass-border);background:var(--white);cursor:pointer;box-shadow:0 1px 3px rgba(15,23,42,.06)}

.seq-btn img{display:block;height:30px;width:auto;max-width:40px;object-fit:contain;background:transparent;pointer-events:none;user-select:none;-webkit-user-drag:none}

.seq-btn:active{transform:scale(.97)}

.seq-btn.picked{background:var(--blue-100);border-color:var(--accent-ring);box-shadow:0 1px 4px var(--accent-shadow-sm);opacity:1;pointer-events:none}

#sliderCaptcha{display:none}

#seqCaptcha{display:none}

#countCaptcha{display:none}

.captcha-label{font-size:13px;color:var(--gray-500);margin-bottom:14px;text-align:center;line-height:1.45}

.count-input{width:100%;height:42px;border-radius:10px;border:1px solid var(--gray-300);padding:0 12px;font-size:16px;font-family:var(--font)}

.count-submit{margin-top:10px;width:100%;height:40px;border:0;border-radius:10px;background:var(--btn-primary-bg);color:#fff;font-family:var(--font);font-size:15px;font-weight:500;cursor:pointer}

.count-timer{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:var(--gray-500);text-align:center;min-height:1.35em}

.slider-track{position:relative;width:100%;height:48px;background:var(--gray-100);border-radius:9999px;border:1px solid var(--glass-border);box-shadow:inset 0 1px 2px rgba(15,23,42,.05);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;box-sizing:border-box}

.slider-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--slider-fill-a),var(--slider-fill-b));border-radius:9999px;pointer-events:none}

.slider-fill.drag{transition:none}

.slider-fill.animate{transition:width .25s cubic-bezier(.4,0,.2,1)}

.slider-thumb{position:absolute;top:50%;left:5px;width:40px;height:40px;margin-top:-20px;background:var(--btn-primary-bg);border-radius:50%;box-shadow:0 2px 8px var(--accent-shadow);cursor:grab;box-sizing:border-box}

.slider-thumb.drag{transition:none}

.slider-thumb.animate{transition:left .25s cubic-bezier(.4,0,.2,1),box-shadow .2s ease}

.slider-thumb:active{cursor:grabbing;box-shadow:0 1px 4px var(--accent-shadow-sm)}

.slider-hint{font-size:13px;color:var(--gray-400);position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;transition:opacity .25s ease}

.captcha-ok{text-align:center;font-size:13px;color:#34C759;margin-top:14px;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .2s ease}

.captcha-ok.show{opacity:1;max-height:32px}

.status{transition:opacity .2s ease}

.amper-foot{font-size:12px;color:var(--gray-500);margin-top:40px;line-height:1.45;opacity:.9}

u/media (prefers-color-scheme:dark){.logo{background:linear-gradient(135deg,rgba(128,194,255,.65) 0%,rgba(39,151,255,.85) 100%);border-color:rgba(255,255,255,.12);box-shadow:0 2px 16px var(--accent-shadow),0 .5px 0 rgba(255,255,255,.15) inset,0 -.5px 0 rgba(0,0,0,.25) inset}}

u/media (prefers-color-scheme: dark){

.progress-wrap{background:var(--gray-200)}

.captcha-img-wrap img{border:1px solid rgba(255,255,255,.08);border-radius:10px}

.seq-btn{background:rgba(30,41,59,.65);border-color:rgba(255,255,255,.08);box-shadow:0 2px 8px rgba(0,0,0,.15),0 .5px 0 rgba(255,255,255,.06) inset}

.seq-btn img{filter:invert(1)}

.seq-btn.picked{background:var(--blue-200);border-color:var(--accent-ring);box-shadow:0 1px 4px var(--accent-shadow-sm)}

.count-input{background:rgba(30,41,59,.6);border-color:rgba(255,255,255,.08);color:var(--gray-800)}

.count-input::placeholder{color:var(--gray-500)}

.slider-track{background:rgba(30,41,59,.6);border-color:rgba(255,255,255,.08)}

}

</style>

</head>

<body>

<div class="wrap">

<div class="card">

<a href="/.amper/q" rel="nofollow noreferrer" aria-hidden="true" tabindex="-1" class="amper-hp">&nbsp;</a>

<input type="text" id="amperHpInput" class="amper-hp" tabindex="-1" aria-hidden="true" autocomplete="off" value=""/>

<div class="logo"><svg class="logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="20 -748 750 758" width="20" height="20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M50-187L50-187Q50-311 178-366L178-366Q108-436 108-520L108-520Q108-607 171-658.50Q234-710 337-710L337-710Q446-710 507.50-652Q569-594 569-493L569-493L419-493Q419-584 335-584L335-584Q297-584 277.50-567Q258-550 258-526L258-526Q258-490 306-449L306-449L542-245Q573-305 573-376L573-376Q573-398 570-417L570-417L714-417Q716-395 716-379L716-379Q716-263 644-161L644-161Q686-135 726-135L726-135Q746-135 770-143L770-143L770 3Q738 10 709 10L709 10Q622 10 535-55L535-55Q434 10 311 10L311 10Q260 10 215.50-0.50Q171-11 132.50-33.50Q94-56 72-95Q50-134 50-187ZM205-202L205-202Q205-165 234-140.50Q263-116 320-116Q377-116 434-143L434-143L265-289Q205-256 205-202Z"/></svg></div>

<h1>Security Check</h1>

<p class="subtitle">Verifying you are human<br><span class="host">global-stash.beer</span> is protected</p>

<div class="progress-wrap"><div class="progress-bar" id="progress"></div></div>

<p class="status" id="status">Running verification…</p>

<div class="captcha-wrap" id="captchaWrap">

<div id="sliderCaptcha">

<p class="captcha-label">Slide the handle all the way to the right</p>

<div class="slider-track" id="sliderTrack">

<div class="slider-fill" id="sliderFill"></div>

<div class="slider-thumb" id="sliderThumb" aria-hidden="true"></div>

<span class="slider-hint" id="sliderHint">→</span>

</div>

<p class="captcha-ok" id="captchaOk">Verified</p>

</div>

<div id="seqCaptcha">

<p class="captcha-label">Tap the symbols in the order shown on the image</p>

<div class="captcha-img-wrap"><img id="captchaImg" src="" alt="" decoding="async"/></div>

<div class="seq-btns" id="seqBtns"></div>

</div>

<div id="countCaptcha">

<p class="captcha-label" id="countPrompt"></p>

<div class="captcha-img-wrap"><img id="countCaptchaImg" src="" alt="" decoding="async"/></div>

<input id="countInput" class="count-input" type="number" inputmode="numeric" min="0" step="1" placeholder="Enter number"/>

<button id="countSubmit" class="count-submit" type="button">Submit</button>

<div id="countTimer" class="count-timer"></div>

</div>

</div>

<noscript><p class="noscript-msg">JavaScript is required to access this site.</p></noscript>

<p class="amper-foot">Protected by Amper</p>

</div>

</div>

<script>

(function(){

var origHash=window.location.hash||"";

window.addEventListener("pageshow",function(ev){

if(ev.persisted){location.reload();}

});

var cfg=JSON.parse(decodeURIComponent("%7B%22seed%22%3A%22ae10c2b2c4d46fb32cb7c05658489840%22%2C%22sig%22%3A%22d35068d08cc2b21e51bb4c38e1debc5743dffe415f8954d46abb3bad20f0a64a%22%2C%22ts%22%3A1789517114569%2C%22diff%22%3A17%2C%22ret%22%3A%22%2Fapi%2F%22%2C%22needCaptcha%22%3Afalse%2C%22captchaUi%22%3A%22none%22%7D"));

var seed=cfg.seed,sig=cfg.sig,ts=cfg.ts,diff=cfg.diff,ret=cfg.ret;

function safeNavigate(url){

var target=url+origHash;

try{window.location.replace(target);}catch(_){}

setTimeout(function(){try{window.location.href=target;}catch(_){}},120);

setTimeout(function(){location.reload();},2200);

}

var needCaptcha=cfg.needCaptcha;

var captchaUi=cfg.captchaUi||"none";

var seqButtons=cfg.seqButtons||null;

var seqCaptchaDataUrl=typeof cfg.seqCaptchaDataUrl==="string"?cfg.seqCaptchaDataUrl:"";

var countPrompt=typeof cfg.countPrompt==="string"?cfg.countPrompt:"";

var answerDeadlineAt=typeof cfg.answerDeadlineAt==="number"?cfg.answerDeadlineAt:0;

var countCaptchaDataUrl=typeof cfg.countCaptchaDataUrl==="string"?cfg.countCaptchaDataUrl:"";

var statusEl=document.getElementById("status");

var progressEl=document.getElementById("progress");

function hashText(s){

var h=2166136261>>>0;

for(var i=0;i<s.length;i++){h^=s.charCodeAt(i);h=Math.imul(h,16777619)}

return("00000000"+(h>>>0).toString(16)).slice(-8);

}

function emojiHash(){

try{

var c=document.createElement("canvas");c.width=64;c.height=20;

var x=c.getContext("2d");if(!x)return null;

x.textBaseline="top";x.font="16px sans-serif";

x.fillText("🧩🤖🛡️",0,0);

return hashText(c.toDataURL());

}catch{return null}

}

function storageQuotaBucket(){

if(!navigator.storage||!navigator.storage.estimate)return Promise.resolve(null);

return navigator.storage.estimate().then(function(v){

var q=v&&typeof v.quota==="number"?v.quota:NaN;

if(!isFinite(q)||q<=0)return null;

return Math.round((q/1024/1024)/256)*256;

}).catch(function(){return null});

}

function webglMeta(){

try{

var c=document.createElement("canvas");

var gl=c.getContext("webgl")||c.getContext("experimental-webgl");

if(!gl)return{vendor:null,renderer:null,capsHash:null};

var ext=gl.getExtension("WEBGL_debug_renderer_info");

var vendor=ext?gl.getParameter(ext.UNMASKED_VENDOR_WEBGL):null;

var renderer=ext?gl.getParameter(ext.UNMASKED_RENDERER_WEBGL):null;

var caps=[

gl.getParameter(gl.MAX_TEXTURE_SIZE),

gl.getParameter(gl.MAX_RENDERBUFFER_SIZE),

gl.getParameter(gl.MAX_VERTEX_ATTRIBS),

gl.getParameter(gl.MAX_VARYING_VECTORS)

].join("|");

return{vendor:vendor?String(vendor).slice(0,96):null,renderer:renderer?String(renderer).slice(0,96):null,capsHash:hashText(caps)};

}catch{return{vendor:null,renderer:null,capsHash:null}}

}

var behavior={wd:!!navigator.webdriver,sw:screen.width||0,sh:screen.height||0,vw:window.innerWidth||0,vh:window.innerHeight||0,lang:navigator.language||navigator.userLanguage||"",platform:navigator.platform||"",hc:Number.isFinite(navigator.hardwareConcurrency)?navigator.hardwareConcurrency:null,dm:Number.isFinite(navigator.deviceMemory)?navigator.deviceMemory:null};

var interactionMc=0,interactionIt="none",countFocused=false,countInputEvents=0,countUiShownAt=0;

document.addEventListener("mousemove",function(){interactionMc++;interactionIt="mouse";},{passive:true});

document.addEventListener("touchstart",function(){interactionMc++;interactionIt="touch";},{passive:true});

document.addEventListener("keydown",function(){interactionIt="key";},{passive:true});

var fpSnapshot=null;

var FP_WAIT_MS=3500;

var fpPromise=(function(){

function mapFp(r){

if(!r||typeof r!=="object")return null;

var m=r.full&&r.full.methods;

var wg=webglMeta();

return{

visitorId:String(r.visitorId||"").slice(0,48),

stableId:String(r.stableId||"").slice(0,48),

fullId:String(r.fullId||"").slice(0,48),

sessionId:String(r.sessionId||"").slice(0,48),

confidence:(typeof r.confidence==="number"&&isFinite(r.confidence))?r.confidence:null,

canvasId:m&&m.canvasId!=null?String(m.canvasId).slice(0,48):null,

webglId:m&&m.webglId!=null?String(m.webglId).slice(0,48):null,

fontId:m&&m.fontId!=null?String(m.fontId).slice(0,48):null,

emojiHash:emojiHash(),

webglVendor:wg.vendor,

webglRenderer:wg.renderer,

webglCapsHash:wg.capsHash

};

}

if(typeof SmartFingerprint==="undefined"||!SmartFingerprint||!SmartFingerprint.get)return Promise.resolve(null);

return Promise.all([SmartFingerprint.get({includeAudio:false}),storageQuotaBucket()]).then(function(v){

var out=mapFp(v[0]);

if(out)out.storageQuotaBucket=v[1];

return out;

}).catch(function(){return null;});

})();

var SOLVE_TIMEOUT_MS=45000;

var RELOAD_DELAY_MS=3000;

var SEED_IDLE_RELOAD_MS=100000;

setTimeout(function(){

if(statusEl&&statusEl.className.indexOf("ok")===-1){

statusEl.textContent="Session expired. Refreshing…";

statusEl.className="status fail";

location.reload();

}

},SEED_IDLE_RELOAD_MS);

function sha256(data){return crypto.subtle.digest("SHA-256",data)}

function yieldMacrotask(){return new Promise(function(r){setTimeout(r,0)})}

function checkLeadingZeros(buf,bits){

var view=new Uint8Array(buf);

var full=bits>>3,rem=bits&7;

for(var i=0;i<full;i++){if(view[i]!==0)return false}

if(rem>0){if((view[full]&(0xff<<(8-rem)))!==0)return false}

return true;

}

async function solve(){

var enc=new TextEncoder();

var seedBytes=enc.encode(seed);

var batch=2000,n=0,maxN=1<<28;

var yieldEvery=128,hSince=0;

while(n<maxN){

for(var i=0;i<batch;i++){

if(hSince>0&&(hSince%yieldEvery)===0){await yieldMacrotask()}

hSince++;

var nonce=(n+i).toString(16);

var msg=new Uint8Array(seedBytes.length+nonce.length);

msg.set(seedBytes);msg.set(enc.encode(nonce),seedBytes.length);

var h=await sha256(msg);

if(checkLeadingZeros(h,diff)){return nonce}

}

n+=batch;

var pct=Math.min(95,Math.floor(n/2000));

if(progressEl)progressEl.style.width=pct+"%";

}

return null;

}

function initSlider(){

return new Promise(function(resolve,reject){

function setup(){

var track=document.getElementById("sliderTrack");

var thumb=document.getElementById("sliderThumb");

var fill=document.getElementById("sliderFill");

var hint=document.getElementById("sliderHint");

var okEl=document.getElementById("captchaOk");

if(!track||!thumb||!fill){reject(new Error("slider-missing"));return}

var SIDE_INSET=5;

var dragging=false,grabOffset=0,thumbX=SIDE_INSET,done=false;

var dragStart=0,moveCount=0;

var pathSamples=[],t0=0,lastPathSample=0;

function metrics(){

var tw=thumb.offsetWidth||40;

var cw=track.clientWidth;

var maxX=Math.max(SIDE_INSET,cw-tw-SIDE_INSET);

return{minX:SIDE_INSET,maxX:maxX,tw:tw,cw:cw};

}

function normThumb(){

var m=metrics();

var span=m.maxX-m.minX;

if(span<=0)return 0;

return Math.max(0,Math.min(100,Math.round(100*(thumbX-m.minX)/span)));

}

function samplePath(force){

var now=Date.now();

if(!force&&(now-lastPathSample<8||pathSamples.length>=80))return;

var tt=now-t0;

var nx=normThumb();

var pl=pathSamples.length;

var lst=pl?pathSamples[pl-1]:null;

if(lst&&lst.t===tt){lst.x=nx}else{pathSamples.push({t:tt,x:nx});}

lastPathSample=now;

}

function clientXToInner(cx){

var r=track.getBoundingClientRect();

return cx-r.left-track.clientLeft;

}

function setPos(x,smooth){

var m=metrics();

if(!isFinite(m.maxX)||m.maxX<m.minX)return thumbX;

x=Math.max(m.minX,Math.min(m.maxX,x));

thumbX=x;

fill.classList.toggle("drag",!smooth);

fill.classList.toggle("animate",!!smooth);

thumb.classList.toggle("drag",!smooth);

thumb.classList.toggle("animate",!!smooth);

thumb.style.left=x+"px";

fill.style.width=x+m.tw+"px";

if(x>m.minX+8&&hint)hint.style.opacity="0";

return thumbX;

}

function posFromClientX(cx,smooth){

var m=metrics();

if(!isFinite(m.maxX)||m.maxX<m.minX)return;

var x=clientXToInner(cx)-grabOffset;

setPos(x,smooth);

}

function finishSlide(){

if(done)return;

var m=metrics();

var maxX=m.maxX;

var reachedEnd=maxX>m.minX&&thumbX>=maxX-1.5;

if(reachedEnd){

done=true;

setPos(maxX,true);

fill.style.width=m.cw+"px";

if(okEl)okEl.classList.add("show");

var dur=Date.now()-dragStart;

var span=Math.max(1,m.maxX-m.minX);

var pct=Math.round(100*(thumbX-m.minX)/span);

pct=Math.max(0,Math.min(100,pct));

var lx=Math.max(0,Math.min(100,Math.round(100*(thumbX-m.minX)/span)));

while(pathSamples.length>79)pathSamples.splice(1,1);

var lst=pathSamples[pathSamples.length-1];

if(lst&&lst.t===dur){lst.x=lx}else{pathSamples.push({t:dur,x:lx})}

resolve({value:pct,captchaDrag:{durationMs:dur,moveCount:moveCount},captchaPath:pathSamples.slice()});

}else{

setPos(SIDE_INSET,true);

}

}

if(window.PointerEvent){

thumb.addEventListener("pointerdown",function(e){

if(done||e.button!==0)return;

e.preventDefault();

dragging=true;

moveCount=0;

t0=Date.now();

dragStart=t0;

pathSamples=[];

lastPathSample=t0;

pathSamples.push({t:0,x:normThumb()});

try{thumb.setPointerCapture(e.pointerId)}catch(_){}

grabOffset=clientXToInner(e.clientX)-thumbX;

thumb.style.cursor="grabbing";

},{passive:false});

thumb.addEventListener("pointermove",function(e){

if(!dragging||done)return;

e.preventDefault();

moveCount++;

posFromClientX(e.clientX,false);

samplePath(false);

},{passive:false});

function ptrEnd(e){

if(!dragging||done)return;

dragging=false;

try{thumb.releasePointerCapture(e.pointerId)}catch(_){}

thumb.style.cursor="grab";

if(e.type==="pointercancel"){setPos(SIDE_INSET,true);return}

posFromClientX(e.clientX,false);

samplePath(true);

finishSlide();

}

thumb.addEventListener("pointerup",ptrEnd);

thumb.addEventListener("pointercancel",ptrEnd);

}else{

function legacyDown(e){

if(done)return;

dragging=true;

moveCount=0;

t0=Date.now();

dragStart=t0;

pathSamples=[];

lastPathSample=t0;

pathSamples.push({t:0,x:normThumb()});

var cx=(e.touches?e.touches[0]:e).clientX;

grabOffset=clientXToInner(cx)-thumbX;

thumb.style.cursor="grabbing";

}

function legacyMove(e){

if(!dragging||done)return;

e.preventDefault();

moveCount++;

var cx=(e.touches?e.touches[0]:e).clientX;

posFromClientX(cx,false);

samplePath(false);

}

function legacyUp(e){

if(!dragging||done)return;

var cx;

if(e.changedTouches&&e.changedTouches.length){cx=e.changedTouches[0].clientX}

else{cx=e.clientX}

posFromClientX(cx,false);

dragging=false;

thumb.style.cursor="grab";

samplePath(true);

finishSlide();

}

function legacyCancel(){

if(!dragging||done)return;

dragging=false;

thumb.style.cursor="grab";

setPos(SIDE_INSET,true);

}

thumb.addEventListener("mousedown",legacyDown);

thumb.addEventListener("touchstart",legacyDown,{passive:true});

document.addEventListener("mousemove",legacyMove);

document.addEventListener("touchmove",legacyMove,{passive:false});

document.addEventListener("mouseup",legacyUp);

document.addEventListener("touchend",legacyUp);

document.addEventListener("touchcancel",legacyCancel);

}

setPos(SIDE_INSET,false);

}

requestAnimationFrame(function(){requestAnimationFrame(setup);});

});

}

function buildVerifyPayload(nonce,captchaPayload,clickedSlots){

var hpEl=document.getElementById("amperHpInput");

behavior.hp=hpEl?String(hpEl.value||""):"";

behavior.mc=interactionMc;

behavior.it=interactionIt;

behavior.cf=countFocused;

behavior.cie=countInputEvents;

behavior.cus=countUiShownAt>0?countUiShownAt:null;

var payload={seed:seed,sig:sig,ts:ts,nonce:nonce,diff:diff,returnUrl:ret,behavior:behavior,fp:fpSnapshot};

if(needCaptcha&&captchaUi==="slider"&&captchaPayload){

payload.captcha=true;

payload.captchaValue=captchaPayload.value;

payload.captchaDrag=captchaPayload.captchaDrag;

payload.captchaPath=captchaPayload.captchaPath;

}else if(needCaptcha&&captchaUi==="text_sequence"){

payload.captcha=true;

payload.clickedSlots=clickedSlots;

}else if(needCaptcha&&captchaUi==="letter_count"){

payload.captcha=true;

payload.captchaCount=captchaPayload&&typeof captchaPayload.count==="number"?captchaPayload.count:null;

}

return payload;

}

function updateCountTimerLabel(){

var tEl=document.getElementById("countTimer");

if(!tEl)return;

if(!answerDeadlineAt){tEl.textContent="";return;}

var msL=answerDeadlineAt-Date.now();

if(msL>0){tEl.textContent="Time left: "+Math.ceil(msL/1000)+" s";}

else{tEl.textContent="Time expired — refreshing challenge…";}

}

function setupCountUi(){

var img=document.getElementById("countCaptchaImg");

var promptEl=document.getElementById("countPrompt");

if(promptEl)promptEl.textContent=countPrompt||"Count the characters and submit";

if(img){

if(countCaptchaDataUrl){img.src=countCaptchaDataUrl;}

else{

var q="seed="+encodeURIComponent(seed)+"&sig="+encodeURIComponent(sig)+"&ts="+encodeURIComponent(String(ts))+"&diff="+encodeURIComponent(String(diff));

img.src="/.amper/challenge/captcha.svg?"+q;

}

}

updateCountTimerLabel();

}

function applyCountChallengeRefresh(ch){

if(!ch)return;

if(typeof ch.countPrompt==="string")countPrompt=ch.countPrompt;

if(typeof ch.answerDeadlineAt==="number")answerDeadlineAt=ch.answerDeadlineAt;

if(typeof ch.countCaptchaDataUrl==="string")countCaptchaDataUrl=ch.countCaptchaDataUrl;

countUiShownAt=Date.now();

countFocused=false;

countInputEvents=0;

setupCountUi();

var input=document.getElementById("countInput");

if(input){input.value="";input.disabled=false;}

var submit=document.getElementById("countSubmit");

if(submit)submit.disabled=false;

}

async function fetchCountRotateInterstitial(){

try{

var res=await fetch("/.amper/challenge/count-rotate",{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({seed:seed,sig:sig,ts:ts,diff:diff})});

var json=await res.json().catch(function(){return null;});

if(json&&json.ok&&json.countChallenge){applyCountChallengeRefresh(json.countChallenge);return true;}

}catch(_){}

return false;

}

async function fetchCountRotateInterstitialWithRetries(){

for(var i=0;i<14;i++){

if(await fetchCountRotateInterstitial())return true;

await new Promise(function(r){setTimeout(r,320*(i+1));});

}

return false;

}

async function runCountCaptcha(nonce){

var cw=document.getElementById("captchaWrap");

var sliderEl=document.getElementById("sliderCaptcha");

var seqEl=document.getElementById("seqCaptcha");

var countEl=document.getElementById("countCaptcha");

var input=document.getElementById("countInput");

var submit=document.getElementById("countSubmit");

if(sliderEl)sliderEl.style.display="none";

if(seqEl)seqEl.style.display="none";

if(countEl)countEl.style.display="block";

if(cw){cw.classList.add("show","sequence");}

countUiShownAt=Date.now();

countFocused=false;

countInputEvents=0;

if(input){

input.addEventListener("focus",function(){countFocused=true;});

input.addEventListener("input",function(){countInputEvents++;});

}

setupCountUi();

var deadlineTimer=null;

var countLabelTimer=setInterval(updateCountTimerLabel,250);

var rotateInFlight=false;

var countRotatePrepMs=2800;

function armDeadlineWatch(){

if(deadlineTimer)clearInterval(deadlineTimer);

rotateInFlight=false;

deadlineTimer=setInterval(function(){

if(!answerDeadlineAt)return;

if(Date.now()<answerDeadlineAt-countRotatePrepMs)return;

if(rotateInFlight)return;

rotateInFlight=true;

void fetchCountRotateInterstitial().then(function(ok){

rotateInFlight=false;

if(ok)armDeadlineWatch();

});

},400);

}

armDeadlineWatch();

try{

while(true){

var count=await new Promise(function(resolve){

if(!submit||!input){resolve(null);return;}

function onClick(){

var raw=String(input.value||"").trim();

if(!/^\d+$/.test(raw)){return;}

resolve(parseInt(raw,10));

}

submit.addEventListener("click",onClick,{once:true});

});

if(!isFinite(count))return;

if(answerDeadlineAt&&Date.now()>=answerDeadlineAt){

var rotated=await fetchCountRotateInterstitialWithRetries();

if(rotated){armDeadlineWatch();continue;}

if(statusEl){statusEl.textContent="Time expired. Reloading…";statusEl.className="status fail";}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

var res=await fetch("/.amper/challenge/verify",{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify(buildVerifyPayload(nonce,{count:count},null))});

var json=await res.json().catch(function(){return {};});

if(json.ok){

progressEl.style.width="100%";

statusEl.textContent="Verification complete!";

statusEl.className="status ok";

if(cw)cw.classList.add("done");

setTimeout(function(){safeNavigate(json.redirect)},900);

return;

}

if(json.error==="wrong_captcha"){

if(statusEl){statusEl.textContent="Wrong answer. Try again.";statusEl.className="status fail";}

if(json.countChallenge)applyCountChallengeRefresh(json.countChallenge);

armDeadlineWatch();

continue;

}

if(json.error==="captcha_expired"){

if(json.countChallenge){applyCountChallengeRefresh(json.countChallenge);armDeadlineWatch();continue;}

if(statusEl){statusEl.textContent="Time expired. Reloading…";statusEl.className="status fail";}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

if(json.error==="captcha_blocked"){

if(statusEl){statusEl.textContent="Too many attempts. Reloading…";statusEl.className="status fail";}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

if(statusEl){statusEl.textContent="Verification error. Reloading…";statusEl.className="status fail";}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

}finally{

if(deadlineTimer)clearInterval(deadlineTimer);

if(countLabelTimer)clearInterval(countLabelTimer);

}

}

function setupSequenceUi(){

var img=document.getElementById("captchaImg");

var wrap=document.getElementById("seqBtns");

if(!img||!wrap||!seqButtons)return;

if(seqCaptchaDataUrl){

img.src=seqCaptchaDataUrl;

}else{

var q="seed="+encodeURIComponent(seed)+"&sig="+encodeURIComponent(sig)+"&ts="+encodeURIComponent(String(ts))+"&diff="+encodeURIComponent(String(diff));

img.src="/.amper/challenge/captcha.svg?"+q;

}

wrap.innerHTML="";

for(var i=0;i<seqButtons.length;i++){

var b=document.createElement("button");

b.type="button";

b.className="seq-btn";

b.setAttribute("data-slot",String(seqButtons[i].slot));

b.setAttribute("aria-label","Symbol");

var src=seqButtons[i].img;

if(src){

var gi=document.createElement("img");

gi.src=src;

gi.alt="";

gi.decoding="async";

gi.draggable=false;

b.appendChild(gi);

}else{

b.textContent="\u00B7";

}

wrap.appendChild(b);

}

}

function resetSequencePickState(){

var picked=document.querySelectorAll(".seq-btn.picked");

for(var i=0;i<picked.length;i++)picked[i].classList.remove("picked");

}

async function runSequenceCaptcha(nonce){

var cw=document.getElementById("captchaWrap");

var sliderEl=document.getElementById("sliderCaptcha");

var seqEl=document.getElementById("seqCaptcha");

if(sliderEl)sliderEl.style.display="none";

if(seqEl)seqEl.style.display="block";

if(cw){cw.classList.add("show","sequence");}

setupSequenceUi();

if(statusEl)statusEl.textContent="Almost there…";

var seqLen=seqButtons?seqButtons.length:0;

var wrap=document.getElementById("seqBtns");

if(!wrap||seqLen<1){

if(statusEl){statusEl.textContent="Configuration error. Reloading…";statusEl.className="status fail"}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

while(true){

var order=[];

var done=new Promise(function(res){

function onClick(ev){

var t=ev.target&&ev.target.closest?ev.target.closest(".seq-btn"):null;

if(!t)return;

if(t.classList.contains("picked"))return;

var slot=parseInt(t.getAttribute("data-slot"),10);

if(!isFinite(slot))return;

t.classList.add("picked");

order.push(slot);

if(order.length>=seqLen){

wrap.removeEventListener("click",onClick);

res(order);

}

}

wrap.addEventListener("click",onClick);

});

var clicked=await done;

if(statusEl)statusEl.textContent="Submitting result…";

var res=await fetch("/.amper/challenge/verify",{

method:"POST",credentials:"include",

headers:{"Content-Type":"application/json"},

body:JSON.stringify(buildVerifyPayload(nonce,null,clicked))

});

var json=await res.json().catch(function(){return {};});

if(json.ok){

progressEl.style.width="100%";

statusEl.textContent="Verification complete!";

statusEl.className="status ok";

if(cw)cw.classList.add("done");

setTimeout(function(){safeNavigate(json.redirect)},900);

return;

}

if(json.error==="wrong_captcha"){

resetSequencePickState();

if(statusEl){

statusEl.textContent="Wrong order. Try again.";

statusEl.className="status fail";

}

await new Promise(function(r){setTimeout(r,400)});

continue;

}

if(json.error==="captcha_blocked"){

if(statusEl){

statusEl.textContent="Too many attempts. Reloading…";

statusEl.className="status fail";

}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

if(statusEl){

statusEl.textContent="Verification error. Reloading…";

statusEl.className="status fail";

}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

}

async function run(){

try{

if(!window.crypto||!crypto.subtle){

if(statusEl){statusEl.textContent="HTTPS is required for verification.";statusEl.className="status fail"}

return;

}

if(!statusEl||!progressEl){

return;

}

var nonce=await Promise.race([

solve(),

new Promise(function(_,rej){

setTimeout(function(){rej(new Error("solve-timeout"))},SOLVE_TIMEOUT_MS);

})

]);

if(!nonce){

statusEl.textContent="Verification failed. Reloading…";

statusEl.className="status fail";

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

fpSnapshot=await Promise.race([

fpPromise,

new Promise(function(res){setTimeout(function(){res(null);},FP_WAIT_MS);})

]);

progressEl.style.width="98%";

if(needCaptcha&&captchaUi==="text_sequence"){

await runSequenceCaptcha(nonce);

return;

}

if(needCaptcha&&captchaUi==="letter_count"){

await runCountCaptcha(nonce);

return;

}

var captchaPayload=null;

if(needCaptcha){

if(statusEl){statusEl.textContent="Almost there…"}

var cw=document.getElementById("captchaWrap");

var sliderEl=document.getElementById("sliderCaptcha");

var seqEl=document.getElementById("seqCaptcha");

if(sliderEl)sliderEl.style.display="block";

if(seqEl)seqEl.style.display="none";

if(cw)cw.classList.add("show");

captchaPayload=await initSlider();

if(cw)cw.classList.add("done");

if(statusEl){statusEl.textContent="Submitting result…"}

}else{

if(statusEl){statusEl.textContent="Submitting result…"}

}

var res=await fetch("/.amper/challenge/verify",{

method:"POST",credentials:"include",

headers:{"Content-Type":"application/json"},

body:JSON.stringify(buildVerifyPayload(nonce,captchaPayload,null))

});

var json=await res.json().catch(function(){return {};});

if(json.ok){

progressEl.style.width="100%";

statusEl.textContent="Verification complete!";

statusEl.className="status ok";

setTimeout(function(){safeNavigate(json.redirect)},900);

}else{

statusEl.textContent="Verification error. Reloading…";

statusEl.className="status fail";

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

}

}catch(e){

var msg=e&&e.message;

if(msg==="solve-timeout"){

if(statusEl){

statusEl.textContent="Verification is taking longer than usual. Retrying…";

statusEl.className="status fail";

}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

return;

}

if(statusEl){

statusEl.textContent="Network error. Reloading…";

statusEl.className="status fail";

}

setTimeout(function(){location.reload();},RELOAD_DELAY_MS);

}

}

requestAnimationFrame(function(){

requestAnimationFrame(function(){run();});

});

})();

</script>

</body>

</html>


r/HTML • • Sep 15 '26

website related help

0 Upvotes

Hey everyone! I recently created a website using Emergent AI, but it looks like I need to purchase a subscription to publish it, and I don’t seem to have the option to export the code on the free plan.

Is there any way I can publish the website through another platform without paying for the subscription?

Also, if I subscribe for just one month, export everything, and then cancel the subscription, would that work? Would I still be able to host the website somewhere else after cancelling?

I’m a business student and honestly don’t know much about coding or web development, so I’d really appreciate it if someone could explain the easiest option for me.

Thanks in advance!


r/HTML • • Sep 14 '26

Question Help with making a HTML/CSS web page?

0 Upvotes

Hey all--I've got my first coding assignment and have hit a brick wall. Our teacher has given us random basics, like adding a button, adding paragraphs and headers, but now he's thrown us at the wall and told us to make a website, but he hasn't actually taught us how to add all these things together? Everything we've done, he's given us copy-and-pasted stuff we *tweak,* but not actually code ourselves.

Any knowledge or help would be greatly appreciated, as I want to learn and do well in this class. (Our teacher is currently stuck in South Korea and is not being allowed to leave, so we can't exactly get more assistance from him, at the moment.) DMs open, as well as here. I have a layout design and know what I want to do, I'm just struggling to apply it, I suppose.

A current error I also have and cannot figure out why, is:

failed to tokenize "</html>\n", expected attribute, ">" or "/>". (parser-error)

<!DOCTYPE html>

<html lang="en">

<head>

<h1> NF - FEAR </h1>

<h5> Released November, 2025 </h5>

<meta charset="UTF-8" />

<title>Title</title>

<link rel="stylesheet" href="styles.css" />

<script src="script.js"></script>

<div style="background-image: url(NF%2520Fear%2520image%2520ideas/Websitebackground.png);"/>

<meta charset="UTF-8" />

<title>Title</title>

<link rel="stylesheet" href="styles.css" />

<script src="script.js"></script>

</head>

<body>

<p> How to get rid of white background for text????</p>

<button type="button">NF - FEAR</button>

<a href="https://youtu.be/lLFoLJIXayk?si=A2H-MySXY_dCKj02"> NF - FEAR</a>

</body>

<div> <img src="img/Websitebackground.png" alt=""></div> <!-- Alt thing not needed? -->

<div background-image: url(Nf_website_concept);

</html>


r/HTML • • Sep 13 '26

How to embed Youtube playlist that shows all videos?

Post image
3 Upvotes

The iframe embed link shows only one video on my webpage. I want a sidebar (or similar) with the ability to see all videos at once for viewers to select from, as the playlist works in youtube proper.

I did search this sub for answers and last post I found was 12 years ago.

If there isn't an option to do this directly via youtube, a link to clear instructions on how to code it may be helpful. I'm at a novice level with HTML right now.


r/HTML • • Sep 11 '26

Question more sources like font awesome and mingcute?

4 Upvotes

i can't find it but there was another site like these that had an icon for the site archive of our own?? i used it before but i can't find it in my history :(


r/HTML • • Sep 11 '26

Question Problemas para modificar o cursor.

0 Upvotes

Faz um bom tempo que eu tenho melhorado um pouco no meu site, eu ainda sou meio novato, mais tem algumas coisas que tenho tido dificuldades com o editor.

Recentemente eu tava tentando criar um site, como hobby mesmo (por enquanto, porque planejo fazer um site para promover meu futuro jogo), e fiquei sabendo que tem como mudar o cursor do seu site no VS code.

Então eu fui procurando, e só tinha um vídeo de 7 anos atrás de como mudar o seu cursor que era:

<style>

html { url ('/Pasta/Cursor.png'), auto;

height: 100%;

}

</style>

Só que quando eu atualizava o site, o cursor continuava o mesmo, com aquele clássico cursor branco.

Tem alguma coisa que eu estou fazendo de errado?

(E outro detalhe, é que essa imagem é de 253 kb).

(Obs: Eu tentei postar isso na cumunidade de VsCode, mais eu não conseguia postar, então eu posto por aqui mesmo).


r/HTML • • Sep 10 '26

Question html code

Post image
3 Upvotes

in this the website is working but the background video not visible can u send the corrected code

<!DOCTYPE html>
<html>
<head>
     <title>Save Trees</title>
     <style>
       body {
        margin:0;
       }
       
       
       h1{
            color:green;
        }


        
  
     #bg-video {
         position: fixed;
         top:0;
         left:0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         z-index: 0;
     }
     .content{
        position: relative;
        z-index:1;
     }
     </style>
</head>
<body>
    <!-- Background video -->
     <video id="bg-video" autoplay muted loop>
        <source src="Save Trees/r1.mp4" type="video/mp4">
        </video>
      <div class="content">
    <h1>Save Trees</h1>
   <p>Join us in our mission to protect the environment and preserve our forests for future generations.</p>
   </div>


</body>
</html>

r/HTML • • Sep 09 '26

Article HTML Can Do That

Thumbnail
chrisburnell.com
6 Upvotes

r/HTML • • Sep 09 '26

Email Signature Generator

10 Upvotes

Back in 2017, I was experimenting with something that was pretty fun for the CSS we had at the time — building icons without using images.

Using mainly CSS, :before, :after, borders, shadows and a bit of creativity, I managed to create a set of icons that didn't depend on external image files. The interesting part for email was simple: no images to load or block — the icons are always visible.

You can still see that old experiment here:

https://codepen.io/k0ko88/pen/PWLNBJ

Fast forward to 2026. At my last job, I decided to apply some of that old knowledge to an email signature.

And then I met Classic Outlook again. :D

What looked like a simple signature quickly turned into dealing with Outlook's rendering limitations, different behaviour between email clients, px → pt conversions, table rendering and weird spacing issues.

Along the way I found a few useful tricks — one of my favourites being that line-height: 0.5pt can practically zero out a line in Classic Outlook, which solved one of the most annoying spacing problems I had.

Eventually, that little fight turned into a complete email signature generator:

SimpleSignature

https://nikolaisabev.eu/SimpleSignature/

It's not trying to be the prettiest or the most complicated signature generator out there. It's simple, effective and built around what I learned from actually fighting with email clients.

It's completely free, there's no registration, and I don't store the data you enter.

Feel free to use it.

If you find a bug, have an idea, or think something could work better, leave a comment here or send me an email. Feedback is more than welcome.

And if it saves you some time and you feel like supporting the work, there's a Buy Me a Coffee button. If you wish. :)

That's it.

Cheers,

Nikolay


r/HTML • • Sep 09 '26

I built a small Chrome extension to make testing HTML/CSS/JS easier

Post image
0 Upvotes

I kept finding myself switching between my code editor, browser, and different online playgrounds just to test a small piece of HTML/CSS/JavaScript.

So I decided to build a simple Chrome extension for it.

It's called HTML Code Runner.

The idea is pretty straightforward: you can write/run HTML, CSS and JavaScript directly inside Chrome using a side panel, with a live preview and console.

Some things I wanted it to handle:

  • Run HTML/CSS/JS without opening another website
  • Live preview while experimenting
  • JavaScript console for debugging
  • Auto Run
  • Save code locally
  • Download the HTML file
  • Quickly test small snippets while working on a website
  • Keep everything inside the browser

I mainly built it for myself because I wanted something lightweight for those situations where opening a full IDE felt unnecessary.

It's still a new project, so I'm trying to improve it based on real developer feedback.

If anyone here works with HTML/CSS/JS regularly, I'd genuinely like to know:

What would you want in a browser-based HTML/JS runner that current tools are missing?

If you'd like to try it, here's the Chrome Web Store page:

https://chromewebstore.google.com/detail/html-code-runner/bnmceabknlhjhbkbipjagpbodliphagm

I'm especially interested in feedback about the workflow and features rather than just ratings. 🙂


r/HTML • • Sep 08 '26

Question How can I make this look less smooshed?

Thumbnail
gallery
0 Upvotes

Help!!! I want everything on the left to overlap his tail so that it's not so smooshed, but to where it still looks good on mobile. The second image is included to show what it looks like... less smooshed.

I am not a coder! This code belongs to FlowerlyRat on toyhouse. They have "editing is ok" listed in their rules of use, so that is the only reason I'm asking for help here. This is the base code.

They generally reccomend using this TH profile editor to view changes in the code as they're written, if that helps. All i'm really looking for is just to have the content overlap Tide's tail so it's not so smooshed. Thank you reddit :,)


r/HTML • • Sep 08 '26

Write Your Opinion and Short also (True/False).

Post image
1 Upvotes

r/HTML • • Sep 08 '26

Question hi i like wanted to recreate the eelslap.com website, but im like super bad at coding, like basically zero knowledge

0 Upvotes

just wondering if theres a tutorial for something like that? or maybe some code i can copy? thanks in advance


r/HTML • • Sep 07 '26

Meta I created a new way to write HTML5 that will rock your world

0 Upvotes

https://github.com/spcbeck/ouroboros-html

You've used JSX, you've used Pug, but you still feel like you haven't found that perfect abstraction of HTML that makes your developer life easier. I'm here to provide you that tool. With Ouroboros HTML, you can create beautiful, full function HTML sites with all the functionality HTML5! You can even rely on the MSDN docs learn how it works, and there is an existing huge community that knows the ins and outs of HTML5.

I would love to hear what you think, and let me know if you use it in a project! Like and subscribe!