From 3fd6ca5dea36ca96ada01eeb231ac4593048bb3b Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Thu, 3 Jul 2025 12:12:36 +0300
Subject: [PATCH] Update layout

---
 downloads-get-instructions.php |  24 ++++----
 downloads.php                  | 101 +++++++++++++++++----------------
 styles/theme-base.css          |  35 ++++++++++++
 3 files changed, 99 insertions(+), 61 deletions(-)

diff --git a/downloads-get-instructions.php b/downloads-get-instructions.php
index 768600cee..ac232001e 100644
--- a/downloads-get-instructions.php
+++ b/downloads-get-instructions.php
@@ -25,31 +25,31 @@ if ($_GET['os'] === 'osx') {
 <p>
     On the OSX command line shell, enter:
 </p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
 brew install php{$version}
-</pre></div></div>
+</pre></div>
 <p>
 To enable PHP in Apache add the following to httpd.conf and restart Apache:
 </p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
 LoadModule php_module \$HOMEBREW_PREFIX/opt/php/lib/httpd/modules/libphp.so
 
 &lt;FilesMatch \.php$>
 SetHandler application/x-httpd-php
 &lt;/FilesMatch>
-</pre></div></div>
+</pre></div>
 <p>
 Finally, check DirectoryIndex includes index.php
 </p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
 DirectoryIndex index.php index.html
-</pre></div></div>
+</pre></div>
 <p>
 The php.ini and php-fpm.ini file can be found in:
 </p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
 \$HOMEBREW_PREFIX/etc/php/{$versionDir}/
-</pre></div></div>
+</pre></div>
 </p>
 ENDOSX;
     return;
@@ -62,10 +62,10 @@ if ($_GET['os'] === 'linux' && str_starts_with($_GET['osvariant'], 'linux-deb'))
 <p>
     On the command line shell, enter:
 </p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
 sudo apt-get update
 sudo apt-get install php
-</pre></div></div>
+</pre></div>
 ENDAPT;
     } else {
         $version = match($_GET['version']) {
@@ -79,12 +79,12 @@ ENDAPT;
 <p>
     On the command line shell, enter:
 </p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
 sudo apt -y install software-properties-common
 sudo add-apt-repository ppa:ondrej/php
 sudo apt update
 sudo apt install php{$version}
-</pre></div></div>
+</pre></div>
 ENDAPT;
     }
     return;
diff --git a/downloads.php b/downloads.php
index ad5a1a118..241644b9e 100644
--- a/downloads.php
+++ b/downloads.php
@@ -56,65 +56,68 @@ ENDOPT;
 ?>
 <h1>Downloads &amp; Installation Instructions</h1>
 
-<form>
-Get PHP for
-<select id="os" name="os">
-    <?= option('os', 'linux', 'Linux'); ?>
-    <?= option('os', 'osx', 'OSX'); ?>
-    <?= option('os', 'windows', 'Windows'); ?>
-</select>
+<form class="instructions-form">
+    <div class="instructions-row">
+        I want to use PHP for
+        <select id="usage" name="usage">
+            <?= option('usage', 'web', 'Web Development'); ?>
+            <?= option('usage', 'cli', 'Command Line Libraries'); ?>
+            <?= option('usage', 'fw-drupal', 'Drupal'); ?>
+            <?= option('usage', 'fw-laravel', 'Laravel'); ?>
+            <?= option('usage', 'fw-symfony', 'Symfony'); ?>
+        </select>.
+    </div>
 
-<select id="osvariant" name="osvariant">
-	<?= option('osvariant', 'linux-deb-buster', 'Debian Buster'); ?>
-	<?= option('osvariant', 'linux-deb-bullseye', 'Debian Bullseye'); ?>
-	<?= option('osvariant', 'linux-deb-bookworm', 'Debian Bookworm'); ?>
-	<?= option('osvariant', 'linux-rpm-fedora41', 'Fedora 41'); ?>
-	<?= option('osvariant', 'linux-rpm-fedora42', 'Fedora 42'); ?>
-	<?= option('osvariant', 'linux-rpm-redhat', 'RedHat'); ?>
-	<?= option('osvariant', 'osx-latest', 'Latest'); ?>
-	<?= option('osvariant', 'windows-wsl', 'with WSL'); ?>
-	<?= option('osvariant', 'windows-normal', 'without WSL'); ?>
-</select>
+    <div class="instructions-row">
+        I work with
+        <select id="os" name="os">
+            <?= option('os', 'linux', 'Linux'); ?>
+            <?= option('os', 'osx', 'OSX'); ?>
+            <?= option('os', 'windows', 'Windows'); ?>
+        </select>
+        <select id="osvariant" name="osvariant">
+            <?= option('osvariant', 'linux-deb-buster', 'Debian Buster'); ?>
+            <?= option('osvariant', 'linux-deb-bullseye', 'Debian Bullseye'); ?>
+            <?= option('osvariant', 'linux-deb-bookworm', 'Debian Bookworm'); ?>
+            <?= option('osvariant', 'linux-rpm-fedora41', 'Fedora 41'); ?>
+            <?= option('osvariant', 'linux-rpm-fedora42', 'Fedora 42'); ?>
+            <?= option('osvariant', 'linux-rpm-redhat', 'RedHat'); ?>
+            <?= option('osvariant', 'osx-latest', 'Latest'); ?>
+            <?= option('osvariant', 'windows-wsl', 'with WSL'); ?>
+            <?= option('osvariant', 'windows-normal', 'without WSL'); ?>
+        </select>,
+        and use
+        <select id="version" name="version">
+            <?= option('version', 'php84', 'version 8.4'); ?>
+            <?= option('version', 'php83', 'version 8.3'); ?>
+            <?= option('version', 'php82', 'version 8.2'); ?>
+            <?= option('version', 'php81', 'version 8.1'); ?>
+            <?= option('version', 'default', 'OS default version'); ?>
+        </select>
+    </div>
 
-to work on
-<select id="usage" name="usage">
-	<?= option('usage', 'web', 'Web Development'); ?>
-	<?= option('usage', 'cli', 'Command Line Libraries'); ?>
-	<?= option('usage', 'fw-drupal', 'Drupal'); ?>
-	<?= option('usage', 'fw-laravel', 'Laravel'); ?>
-	<?= option('usage', 'fw-symfony', 'Symfony'); ?>
-</select>
+    <label for="multiversion" class="instructions-label">
+        I want to be able to use multiple PHP versions:
+        <input type="checkbox" id="multiversion" name="multiversion" value="Y"
+            <?= array_key_exists('multiversion', $_GET) && $_GET['multiversion'] === 'Y' ? 'checked' : '' ?>/>
+    </label>
 
-with
-<select id="version" name="version">
-	<?= option('version', 'php84', 'version 8.4'); ?>
-	<?= option('version', 'php83', 'version 8.3'); ?>
-	<?= option('version', 'php82', 'version 8.2'); ?>
-	<?= option('version', 'php81', 'version 8.1'); ?>
-	<?= option('version', 'default', 'OS default version'); ?>
-</select>
+    <label for="source" class="instructions-label">
+        I want to compile everything from source:
+        <input type="checkbox" id="source" name="source" value="Y"
+            <?= array_key_exists('source', $_GET) && $_GET['source'] === 'Y' ? 'checked' : '' ?>/>
+    </label>
 
-<input type='submit' value="Go!"></input>
-
-<br/>
-
-I want to have multiple versions at the same time:
-<input type="checkbox" id="multiversion" name="multiversion" label="I want to have multiple versions at the same time">
-</input>
+    <div>
+        <button type="submit" class="button">Get Instructions</button>
+    </div>
 </form>
 
 <h2>Instructions</h2>
-<div id="instructions">
+<div id="instructions" class="instructions">
 <?php include 'downloads-get-instructions.php'; ?>
 </div>
 
-<!--
-<p>
-    <a href="/manual/install.general.php">Installing PHP</a> is covered
-    thoroughly in the PHP documentation.
-</p>
--->
-
 <h2>Binaries</h2>
 
 <p>
diff --git a/styles/theme-base.css b/styles/theme-base.css
index c28b2a138..96fdf06fa 100644
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -508,6 +508,41 @@ div.classsynopsisinfo_comment {
     margin-top:1.5rem;
 }
 
+.phpcode {
+    background-color: #FFF;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+    border-radius: 0 0 2px 2px;
+    overflow-x: auto;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 1.5rem;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.instructions {
+    margin-bottom: 2rem;
+}
+
+.instructions p {
+    margin: 1rem 0;
+}
+
+.instructions-form {
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+    margin-bottom: 2rem;
+}
+
+.instructions-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
 .warn {
     padding: .75rem 1rem;
     margin: 1.5rem 0 1.5rem 1.5rem;