www/dev/playground/index.php

206 lines
No EOL
5.2 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<?php
### ERROR HANDLING ###
function warnError($errno, $errstr, $errfile, $errline)
{
echo "<br><p style='padding:0px;margin:0px;background-color:white;color:black;'><b style='color:red;'>Error:</b> [$errno] $errstr <br> in file <b style='color:blue'>$errfile</b> line <b style='color:red'>$errline</b></p>";
}
set_error_handler("warnError");
if (!$_SERVER['DOCUMENT_ROOT']) {
$_SERVER['DOCUMENT_ROOT'] = '/weblink';
}
# TODO separate file
?>
<head>
<!--!Copyright © 2024 Aliberk Sandıı-->
<meta charset="UTF-8">
<!-- CSS Files -->
<?php
$dir = new DirectoryIterator($_SERVER['DOCUMENT_ROOT'] . "/assets/css");
foreach ($dir as $file) {
if ((!$file->isDot()) && str_ends_with($file, ".css")) {
echo '<link rel="stylesheet" href="/assets/css/' . $file . '">' . PHP_EOL . ' ';
}
} ?>
<title>DEV PLAYGROUND</title>
<style>
body {
color: white;
}
.insta {
border: 1px dashed grey;
border-radius: 5px;
margin: 2px;
padding: 10px;
/* min-height: 100px; */
}
.insta::before {
content: "(insta) ";
position: relative;
color: pink;
margin-right: 10px;
font-size: smaller;
top: -10px;
left: -10px;
}
.collapsed {
background-color: grey;
}
.collapsed:hover {
background-color: antiquewhite;
color: black;
}
</style>
</head>
<body>
<h1>PLAYGROUND</h1>
<hr>
<sup>Trying random stuff that i see on the web (websites, insta reels etc.)</sup>
<h2>TODO: CATEGORIZE</h2>
<!-- 1 -->
<div class="insta" link="https://www.instagram.com/p/CsefQ6cK_DC/" id="p1" tags="css,background,remove background">
<div class="collapsed">
MAKE IMAGES SAME SIZE AND CENTERED, REMOVE WHITE BACKGROUND
<hr>
</div>
<div>
Before <br>
<img src="random-images/Adidas-1600x1600.jpg" width="100px" class="photos25062023195970-1">
<img src="random-images/NBA-1920x1080.jpg" width="100px" class="photos25062023195970-1">
<hr>
After <br>
<img src="random-images/Adidas-1600x1600.jpg" class="photos25062023195970-2">
<img src="random-images/NBA-1920x1080.jpg" class="photos25062023195970-2">
<style>
.photos25062023195970-1 {
width: 15%;
}
.photos25062023195970-2 {
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode: color-burn;
}
</style>
<hr>
<pre><code class="language-css">
.images{
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode: color-burn;
}</code></pre>
</div>
</div>
<!-- 2 -->
<div class="insta" link="https://www.instagram.com/p/CtObaQbrgId/" id="p2" tags="css,faded background">
<div class="collapsed">
FADED OVERLAY FOR IMAGES
<hr>
</div>
<div>
<figure class="card250620232109116">
<img src="random-images/993-536x354.jpg" alt="example image">
<figcaption>Example Image</figcaption>
</figure>
<div class="explanation">Create grid and place both image and figcaption on it. add gradient effect and transition to figcaption. Then make opacity: 1 when hover</div>
<style>
.card250620232109116 {
width: 30rem;
overflow: hidden;
display: grid;
grid-template-areas: "stack";
}
.card250620232109116>* {
grid-area: stack;
}
.card250620232109116>figcaption {
display: grid;
align-items: end;
padding: 1.5rem 2rem;
background-image: linear-gradient(to bottom,
rgb(33 44 55 / 0),
rgb(33 44 55 / 0),
rgb(33 44 55 / 0.75));
opacity: 0;
transition: opacity 300ms;
}
.card250620232109116:hover figcaption {
opacity: 1;
}
</style>
<pre>
<code class="language-html">
&lt;figure class="card"&gt;
&lt;img src="image.jpg" alt="..."&gt;
&lt;figcaption>Example Image&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
<pre>
<code class="language-css">
.card {
width: 30rem;
overflow: hidden;
display: grid;
grid-template-areas: "stack";
}
.card>*{
grid-area: stack;
}
.card>figcaption {
display: grid;
align-items: end;
padding: 1.5rem 2rem;
background-image: linear-gradient(to bottom,
rgb(33 44 55 / 0),
rgb(33 44 55 / 0),
rgb(33 44 55 / 0.75)
);
opacity: 0;
transition: opacity 300ms;
}
.card:hover figcaption{
opacity:1;
}
</code>
</pre>
</div>
</div>
<!-- 3 -->
<div style="margin-top:100px; min-height:500px;border:2px dotted blue">Footer</div>
<?php
$dir = new DirectoryIterator($_SERVER['DOCUMENT_ROOT'] . "/assets/js");
foreach ($dir as $file) {
if ((!$file->isDot()) && str_ends_with($file, ".js") && $file != "jquery.js") {
echo '<script src="/assets/js/' . $file . '"></script>' . PHP_EOL . ' ';
}
} ?>
</body>
</html>