Skip to content

Instantly share code, notes, and snippets.

@yebt
Created June 7, 2024 22:28
Show Gist options
  • Save yebt/31c136926ff3aa0f4a46d94b3755ea51 to your computer and use it in GitHub Desktop.
Save yebt/31c136926ff3aa0f4a46d94b3755ea51 to your computer and use it in GitHub Desktop.
Index test php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test doc - PHP</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
a,hr{color:inherit}progress,sub,sup{vertical-align:baseline}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,menu,ol,p,pre,ul{margin:0}dialog,fieldset,legend,menu,ol,ul{padding:0}.relative,sub,sup{position:relative}.text-cosmic-800,.text-east-bay-500,.text-gray-200,.text-gray-300,.text-wby-400{--tw-text-opacity:1}.backdrop-blur-md,.backdrop-brightness-110{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.bg::after,.container{width:100%}*,::after,::before{box-sizing:border-box;border:0 solid #e5e7eb;--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}menu,ol,ul{list-style:none}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bg::after,.blob,.blob-container{position:absolute}.z-10{z-index:10}.mb-4{margin-bottom:1rem}.mt-3{margin-top:.75rem}.flex{display:flex}.min-h-screen{min-height:100vh}.min-w-full{min-width:100%}.max-w-md{max-width:28rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:.375rem}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.p-8{padding:2rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-7xl{font-size:4.5rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-cosmic-800{color:rgb(121 56 98 / var(--tw-text-opacity))}.text-east-bay-500{color:rgb(116 138 189 / var(--tw-text-opacity))}.text-gray-200{color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-300{color:rgb(209 213 219 / var(--tw-text-opacity))}.text-wby-400{color:rgb(165 181 212 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-brightness-110{--tw-backdrop-brightness:brightness(1.1)}:root{--blob-animation-rate:15;--blob-size:50}.bg::after{content:"";height:100vh;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224%22%20height%3D%224%22%3E%0A%20%20%3Cpath%20style%3D%22stroke%3A%23000%3Bstroke-width%3A.5%3Bstroke-opacity%3A.25%22%20d%3D%22M%200%2C0%204%2C4%20M%200%2C4%204%2C0%22%2F%3E%0A%3C%2Fsvg%3E');mix-blend-mode:overlay;top:0;left:0}.blob-container{width:calc(1vh * var(--blob-size));height:calc(1vh * var(--blob-size));display:block;top:50%;left:50%;transform:translate(-50%,-50%)}.blob{width:100%;height:100%;border-radius:100%;mix-blend-mode:multiply;filter:blur(80px)}.blob.a{background-color:#4000d6;animation:circular2 calc(2s * var(--blob-animation-rate)) linear infinite}.blob.b{background-color:#4129c9;animation:circular calc(1s * var(--blob-animation-rate)) linear infinite}.blob.c{background-color:#776dd3;animation:circular calc(3s * var(--blob-animation-rate)) linear infinite}@keyframes circular{0%,100%{transform:translate(0,-150px)}25%{transform:translate(150px,0)}50%{transform:translate(0,150px)}75%{transform:translate(-150px,0)}}@keyframes circular2{0%,100%{transform:translate(150px,0)}25%{transform:translate(0,-150px)}50%{transform:translate(-150px,0)}75%{transform:translate(0,150px)}}
</style>
</head>
<body>
<main class="bg relative flex min-h-screen min-w-full flex-col items-center justify-center overflow-hidden bg-gray-900">
<div class="blob-container">
<div class="blob a"></div>
<div class="blob b"></div>
<div class="blob c"></div>
</div>
<section class="container z-10 max-w-md rounded-md p-8 shadow-md backdrop-blur-md backdrop-brightness-110 backdrop-contrast-[1.1]">
<h1 class="mb-4 text-center text-7xl font-bold text-east-bay-200">PHP</h1>
<h1 class="mb-4 text-center text-3xl font-semibold text-wby-400">¡Interpretación de PHP exitosa!</h1>
<p class="text-lg text-gray-300">Si puedes ver este mensaje, significa que el servidor puede interpretar PHP correctamente. ¡Estás listo para desarrollar aplicaciones dinámicas!</p>
<p class="mt-3 text-lg font-semibold text-gray-200">
Versión de PHP: <span class="text-cosmic-500"><?php echo phpversion(); ?></span>
</p>
<section class="mt-2 text-gray-100">
<h2 class="my-1 text-xl font-semibold text-cosmic-300">Js Test</h2>
<div class="flex flex-row flex-wrap items-center" x-data="{count:0}">
<button class="flex-1 rounded-md border px-3 py-1 text-xl font-bold transition-colors hover:border-cosmic-600 hover:bg-white/10 active:bg-cosmic-400/30" @click="count-=1">-</button>
<span x-text="count" class="flex-1 px-2 text-center font-mono">0</span>
<button class="flex-1 rounded-md border px-3 py-1 text-xl font-bold transition-colors hover:border-cosmic-600 hover:bg-white/10 active:bg-cosmic-400/30" @click="count+=1">+</button>
</div>
</section>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment