index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nyan Cat Everywhere</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/fork-me-on-github.css">
</head>
<body>

<span id="fork-me-on-github">
    <a href="https://github.com/TakWolf/NyanCatEverywhere" target="_blank">Fork me on GitHub</a>
</span>

<img class="logo" src="img/nyancat.gif" alt="logo">

<div class="page">
    <h1 class="title">Nyan Cat Everywhere</h1>

    <div class="input-box">
        <label class="tip" for="target-url">Input target website link url:</label>
        <input id="target-url" class="target-url" type="text" value="https://www.bilibili.com" placeholder="Like: https://www.bilibili.com">
    </div>

    <p class="effect-tip">Then select an effect:</p>

    <div class="effect-box">
        <div class="card">
            <img class="screenshot" src="img/screenshot-nyancat.png" alt="screenshot-nyancat">
            <button class="btn-go" onclick="go('nyancat')">GO</button>
        </div>

        <div class="card">
            <img class="screenshot" src="img/screenshot-snowflake.png" alt="screenshot-snowflake">
            <button class="btn-go" onclick="go('snowflake')">GO</button>
        </div>

        <div class="card">
            <img class="screenshot" src="img/screenshot-sakura.png" alt="screenshot-sakura">
            <button class="btn-go" onclick="go('sakura')">GO</button>
        </div>
    </div>
</div>

<script>
    function go(id) {
        let input = document.getElementById('target-url')
        window.open(id + '.html#' + input.value)
    }
</script>

</body>
</html>