<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>LG Flip Phone</title>

        <meta name="description" content="LG Flip Phone">

        <meta name="keywords" content="LG, flip phone">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <!-- Built-In Functions for Apps -->

        <script type="text/javascript">

            var localStoragePrefix = "ct-168867651247543";

            var lastSave = 0;

            // save to localstorage

            function saveLocal(data) {

                if (Date.now() - lastSave < 1000) {

                    return;

                }

                // save to cookie

                let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict";

                cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();

                document.cookie = cookie;

                lastSave = Date.now();

            }



            // load from localstorage

            function loadLocal() {

                var cookiePrefix = localStoragePrefix + "=";

                var cookieStart = document.cookie.indexOf(cookiePrefix);

                if (cookieStart > -1) {

                    let cookieEnd = document.cookie.indexOf(";", cookieStart);

                    if (cookieEnd == -1) {

                        cookieEnd = document.cookie.length;

                    }

                    var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);

                    return JSON.parse(cookieData);

                }

            }

        </script>



        <script type="text/javascript">

            // App Javascript Goes Here

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                background-color: #f2f2f2;

                font-family: 'Roboto', sans-serif;

                text-align: center;

            }



            .phone-container {

                display: flex;

                justify-content: center;

                align-items: center;

                height: 100vh;

            }



            .phone {

                display: flex;

                flex-direction: column;

                align-items: center;

                padding: 20px;

                background-color: #fff;

                border-radius: 10px;

                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

            }



            .phone .screen {

                width: 200px;

                height: 400px;

                background-color: #000;

                border-radius: 10px;

                margin-bottom: 20px;

            }



            .phone .buttons {

                display: flex;

                justify-content: center;

            }



            .phone .button {

                display: flex;

                justify-content: center;

                align-items: center;

                width: 50px;

                height: 50px;

                background-color: #ccc;

                border-radius: 50%;

                margin: 0 10px;

                cursor: pointer;

                transition: background-color 0.3s ease;

            }



            .phone .button i {

                color: #333;

                font-size: 20px;

            }



            .phone .button:hover {

                background-color: #999;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <div class="phone-container">

                <div class="phone">

                    <div class="screen"></div>

                    <div class="buttons">

                        <div class="button">

                            <i class="fa fa-phone"></i>

                        </div>

                        <div class="button">

                            <i class="fa fa-camera"></i>

                        </div>

                        <div class="button">

                            <i class="fa fa-music"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>