tgnivekucn/ChatGPT_HTML_Test1.html

## ChatGPT_HTML_Test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App 頁面</title>
<style>
    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    img {
        width: 230px;
        height: 230px;
        margin-top: 72px;
    }
    input[type="text"] {
        width: calc(100% - 60px);
        height: 50px;
        margin: 500px 30px 0;
        padding-left: 10px;
        box-sizing: border-box;
    }
    p {
        width: calc(100% - 60px);
        color: #9698AA;
        text-align: center;
        margin: 0;
    }
    button {
        width: 208px;
        height: 40px;
        background-color: #F2F5FA;
        color: #0053B5;
        font-weight: bold;
        border: none;
        margin-bottom: 88px;
    }
</style>
</head>
<body>
    <img src="your_image_path.jpg" alt="圖片">
    <input type="text" id="user_id" placeholder="輸入ID">
    <p>Enter your ID to activate share function</p>
    <button onclick="share()">分享</button>

    <script>
        function share() {
            const userId = document.getElementById('user_id').value;
            if (userId) {
                // 在這裡添加分享功能的代碼
                alert(`Share function activated for ID: ${userId}`);
            } else {
                alert('請輸入ID以啟用分享功能');
            }
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>App 頁面</title>
	<style>
	body {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	img {
	width: 230px;
	height: 230px;
	margin-top: 72px;
	}
	input[type="text"] {
	width: calc(100% - 60px);
	height: 50px;
	margin: 500px 30px 0;
	padding-left: 10px;
	box-sizing: border-box;
	}
	p {
	width: calc(100% - 60px);
	color: #9698AA;
	text-align: center;
	margin: 0;
	}
	button {
	width: 208px;
	height: 40px;
	background-color: #F2F5FA;
	color: #0053B5;
	font-weight: bold;
	border: none;
	margin-bottom: 88px;
	}
	</style>
	</head>
	<body>
	<img src="your_image_path.jpg" alt="圖片">
	<input type="text" id="user_id" placeholder="輸入ID">
	<p>Enter your ID to activate share function</p>
	<button onclick="share()">分享</button>

	<script>
	function share() {
	const userId = document.getElementById('user_id').value;
	if (userId) {
	// 在這裡添加分享功能的代碼
	alert(`Share function activated for ID: ${userId}`);
	} else {
	alert('請輸入ID以啟用分享功能');
	}
	}
	</script>
	</body>
	</html>