index.html

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>GoodName by Rex & Jeremy</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="main.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="jquery-hanzi2pinyin.all.js"></script>
    <script src="main.js"></script>
</head>
<body>
<div class="main">
    <h1 class="header">你的品牌讀音美國人讀得出來嗎？</h1>
    <div class="query" contenteditable="true" placeholder="品牌名"><span class="golden_char">豆</span><span class="bad_char">袁</span><span class="good_char">好</span><span class="warning_char">釀</span></div>
    <div class="report"><p class="golden_report">「豆」是一個非常棒的字，非常適合美國人讀</p><p class="bad_report">「袁」沒有美國人唸得出來</p><p class="good_report">「好」是還可以</p><p class="warning_report">「釀」對有些美國人來說可能很難念</p></div>
    <div class="secondary">
        <input class="generate" value="I'm Feelling Lucky" type=button><span class="candidate"></span>
    </div>
    <div class="footer">Made by Rex & Jeremy</div>
</div>
</body>
</html>