yookoala/extract-head-and-body.php

## extract-head-and-body.php
<?php

/**
 * Extract HTML children of a give tag name from a given document.
 *
 * @param \DOMDocument  $doc      The DOM document to extract from.
 * @param string        $tagName  The tag name for extraction (e.g. 'head', 'body')
 *
 * @return \DOMDocument An DOMElement containing all child elements from the tag specified in $dom.
 */
function extractChildrenFrom(\DOMDocument $doc, string $tagName): \DOMDocument {
    $collection = new \DOMDocument;
    $tags = $doc->getElementsByTagName($tagName);
    $count = $tags->count();
    for ($i = 0; $i < $count; $i++) {
        $tag = $tags->item($i);
        foreach ($tag->childNodes as $element) {
            if ($element instanceof \DOMText) {
                continue; // do not import DOMText
            }
            if (($newElement = $collection->importNode($element, true)) === false) {
                throw new \Exception('Unable to import element.');
            }
            $collection->appendChild($newElement);
        }
    }
    return $collection;
}

// extract HTML sections from the file
// Note: this is very slow, need to cache the result
$file = __DIR__ . '/rentcaculator.html';
$dom = new \DOMDocument();
$dom->loadHTMLFile($file);
$head = extractChildrenFrom($dom, 'head');
$body = extractChildrenFrom($dom, 'body');

?>
<html>
<head>
<?=html_entity_decode($head->saveHTML())?>
<style>
/** some css */
@media (max-width: 960px) {
    .fluid-row {
        display: grid;
        grid-template-columns: 150px calc(100vw - 150px);
        grid-template-rows: 50% 50%;
        grid-template-areas:
            "left-sidebar top-chart"
            "left-sidebar bottom-chart";
    }
    .fluid-row div {
        display: block;
        float: none;
        width: 100%;
    }
    .fluid-row div:nth-child(1) {
        grid-area: left-sidebar;
    }
    .fluid-row div:nth-child(2) {
        grid-area: top-chart;
    }
    .fluid-row div:nth-child(3) {
        grid-area: bottom-chart;
    }
}

</style>
</head>
<body>
<?=html_entity_decode($body->saveHTML())?>
</body>
</html>
	<?php

	/**
	* Extract HTML children of a give tag name from a given document.
	*
	* @param \DOMDocument $doc The DOM document to extract from.
	* @param string $tagName The tag name for extraction (e.g. 'head', 'body')
	*
	* @return \DOMDocument An DOMElement containing all child elements from the tag specified in $dom.
	*/
	function extractChildrenFrom(\DOMDocument $doc, string $tagName): \DOMDocument {
	$collection = new \DOMDocument;
	$tags = $doc->getElementsByTagName($tagName);
	$count = $tags->count();
	for ($i = 0; $i < $count; $i++) {
	$tag = $tags->item($i);
	foreach ($tag->childNodes as $element) {
	if ($element instanceof \DOMText) {
	continue; // do not import DOMText
	}
	if (($newElement = $collection->importNode($element, true)) === false) {
	throw new \Exception('Unable to import element.');
	}
	$collection->appendChild($newElement);
	}
	}
	return $collection;
	}

	// extract HTML sections from the file
	// Note: this is very slow, need to cache the result
	$file = __DIR__ . '/rentcaculator.html';
	$dom = new \DOMDocument();
	$dom->loadHTMLFile($file);
	$head = extractChildrenFrom($dom, 'head');
	$body = extractChildrenFrom($dom, 'body');

	?>
	<html>
	<head>
	<?=html_entity_decode($head->saveHTML())?>
	<style>
	/** some css */
	@media (max-width: 960px) {
	.fluid-row {
	display: grid;
	grid-template-columns: 150px calc(100vw - 150px);
	grid-template-rows: 50% 50%;
	grid-template-areas:
	"left-sidebar top-chart"
	"left-sidebar bottom-chart";
	}
	.fluid-row div {
	display: block;
	float: none;
	width: 100%;
	}
	.fluid-row div:nth-child(1) {
	grid-area: left-sidebar;
	}
	.fluid-row div:nth-child(2) {
	grid-area: top-chart;
	}
	.fluid-row div:nth-child(3) {
	grid-area: bottom-chart;
	}
	}

	</style>
	</head>
	<body>
	<?=html_entity_decode($body->saveHTML())?>
	</body>
	</html>