C-SSPIM สำนักดูดวงแม่หมอพี่พิม (Copy 14695)

✨ PONGSIRI SUWANNASILP

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/ee33cce78a.js" crossorigin="anonymous"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #FFD9D9;
        }
        .container{
            display: flex;
            width: 85%;
            height: 85%;
            box-shadow: 3px 3px 15px rgba(63, 62, 62, .3),
            -3px -3px 15px rgba(63, 62, 62, .3),
            -3px 3px 15px rgba(63, 62, 62, .3),
            3px -3px 15px rgba(63, 62, 62, .3);
            border-radius: 10px;
        }
        .left{
            width: 50%;
            display: flex;
            justify-content: center;
            background-color: #FFD9D9;
            align-items: center;
            position: relative;
            border-radius: 10px 0 0 10px;
        
        }
        .left img{
            width: 400px;
            background-color: #fff;
            height: auto;
            z-index: 2;
            border-radius: 10px;
        }
        .right{
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 10px 10px 0;
            background-color: #fff;
            width: 50%;
        }
        .input{
            display: flex;
            align-items: center;
            width: 300px;
            color:  rgb(209 213 219);
            border-bottom: 2px solid  rgb(209 213 219);
            padding: 5px;
        }
        .input i{
            margin-right: 5px;
        }
        input{
            outline: none;
            border: none;
        }
        .bt{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background-color: #dc696e;
            border-radius: 15px;
            color: #fff;
            font-weight: 500;
            padding: 8px;
        }
        .username, .password{
            margin-bottom: 25px;
        }
        @media(max-width: 1000px){
            .left{
                display: none;
            }
            .right{
                width: 100%;
                border-radius: 10px;
            }
        }
</style>
</head>

<body>
    <div class="container">
        <div class="left">
            <img src="https://media.discordapp.net/attachments/861974571753799700/946716207367721000/unknown.png?width=670&height=670" alt="">
        </div>
        <div class="right">
            <form>
                <div class="input username">
                    <i class="fa-solid fa-user"></i>
                    <input type="text" name="username" placeholder="Username" required>
                </div>
                <div class="input password">
                    <i class="fa-solid fa-lock"></i>
                    <input type="text" name="password" placeholder="Password" required>
                </div>
                <input type="submit" value="Login" class="bt">
            </form>
        </div>
    </div>
    <script>
        audio = new (window.AudioContext || window.webkitAudioContext)()
        osci = audio.createOscillator()
        gain = audio.createGain()
        osci.connect(gain)
        gain.connect(audio.destination)
        gain.gain.value = 0;
        document.body.onkeydown = function (event){
            let key = event.key
            console.log(event.key.charCodeAt())
            let time = audio.currentTime
            let note_osci = audio.createOscillator()
            let note_gain = audio.createGain()
            note_osci.type = 'triangle'
            note_osci.connect(note_gain)
            note_gain.connect(audio.destination)
            note_osci.frequency.value = event.key.charCodeAt()*15
            note_osci.start()
            note_gain.gain.setValueCurveAtTime([1, 0], audio.currentTime, .2)
        }
    </script>
</body>

</html>