sam/flip.html

## flip.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Flip Editor</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
        }

        #card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transform-origin: center;
            transition: transform 1s;
        }

        #card .front, #card .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        #card .front {
            background-color: #f3f3f3;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #editor-palette {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            color: #fff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 20px;
            z-index: 1000;
        }

        #card .back {
            background-color: #2e2e2e;
            transform: rotateY(180deg);
        }

        #editor {
            width: 90%;
            height: 80%;
            margin: 5% auto;
            background-color: #2e2e2e;
            border: 1px solid #444;
            padding: 10px;
            overflow: auto;
            color: #f8f8f8;
            resize: none;
            outline: none;
            font-size: 14px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div id="editor-palette">
        <button onclick="flipCard()">🔀 Edit</button>
    </div>
    <div id="card">
        <div class="front">
            Basic Content Here
        </div>
        <div class="back">
            <textarea id="editor"></textarea>
        </div>
    </div>

    <script>
        let flipped = false;

        function flipCard() {
          const card = document.getElementById('card');
          const editor = document.getElementById('editor');
          const frontContent = card.querySelector('.front');

          if (flipped) {
              card.style.transform = 'rotateY(0deg)';
              frontContent.innerHTML = editor.value;
          } else {
              card.style.transform = 'rotateY(180deg)';
              editor.value = frontContent.innerHTML.trim();
          }

          flipped = !flipped;
        }
    </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>Card Flip Editor</title>
	<style>
	body, html {
	height: 100%;
	margin: 0;
	font-family: 'Courier New', Courier, monospace;
	}

	#card {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transform-origin: center;
	transition: transform 1s;
	}

	#card .front, #card .back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	}

	#card .front {
	background-color: #f3f3f3;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	#editor-palette {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	background-color: #333;
	color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 20px;
	z-index: 1000;
	}

	#card .back {
	background-color: #2e2e2e;
	transform: rotateY(180deg);
	}

	#editor {
	width: 90%;
	height: 80%;
	margin: 5% auto;
	background-color: #2e2e2e;
	border: 1px solid #444;
	padding: 10px;
	overflow: auto;
	color: #f8f8f8;
	resize: none;
	outline: none;
	font-size: 14px;
	font-family: 'Courier New', Courier, monospace;
	}
	</style>
	</head>
	<body>
	<div id="editor-palette">
	<button onclick="flipCard()">🔀 Edit</button>
	</div>
	<div id="card">
	<div class="front">
	Basic Content Here
	</div>
	<div class="back">
	<textarea id="editor"></textarea>
	</div>
	</div>

	<script>
	let flipped = false;

	function flipCard() {
	const card = document.getElementById('card');
	const editor = document.getElementById('editor');
	const frontContent = card.querySelector('.front');

	if (flipped) {
	card.style.transform = 'rotateY(0deg)';
	frontContent.innerHTML = editor.value;
	} else {
	card.style.transform = 'rotateY(180deg)';
	editor.value = frontContent.innerHTML.trim();
	}

	flipped = !flipped;
	}
	</script>
	</body>
	</html>