index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>gacha-page</title>
    <link rel="icon" href="icon.jpg" >
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script1.js"></script>
</head>

<body>
    <amp-auto-ads type="adsense"
        data-ad-client="ca-pub-1510712101527214">
    </amp-auto-ads>

    <div id="splash">
        <div id="splash_text"></div>
        <!--/splash--></div>
        <div id="container">
        <!--/container--></div>

    <header>
        <h1>ガチャガチャの簡単なシミュレーションWEBサイト</h1>
    </header>

    <main>
    
        <div class="container">
            <div class="icon-container">
            
            <img src="icon.jpg" alt="アイコン画像">
            
            </div>
            <button id="spin-button" onclick="startSpin()", class="button">ガチャを回す</button>
            <div id="result-container"></div>
        </div>

        <div id="result-container">
        <h2>ガチャ結果</h2>
        <div id="result"></div>
        </div>
                  
        <div id="probability"> 
            <h3>ガチャの概要</h3>
            <div id="probability2" >      
                <p>　「ガチャを回す」をクリックするとガチャ結果に画像が表示されます。</p>
                <p>　画像をクリックすると拡大表示されます。</p>
            </div>  
            <h3>排出率</h3>
            <div id="probability">      
                <p>R 80% </p>
                <p>SR 19% </p>
                <p>SSR  1% </p>
            </div>
        </div>


    </main>
    <footer>
        <a href="https://twitter.com" >Twitter</a>
        <p>© 2023 YOUR NAME</p>
    </footer>

</body>
</body>
</html>