2023-06-25 21:46:44 +03:00
|
|
|
|
<!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 © 2023 Aliberk Sandıkçı-->
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<figure class="card">
|
|
|
|
|
|
<img src="image.jpg" alt="...">
|
|
|
|
|
|
<figcaption>Example Image</figcaption>
|
|
|
|
|
|
</figure>
|
|
|
|
|
|
</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;
|
2023-07-03 23:33:13 +03:00
|
|
|
|
}
|
2023-06-25 21:46:44 +03:00
|
|
|
|
</code>
|
2023-07-03 23:33:13 +03:00
|
|
|
|
</pre>
|
2023-06-25 21:46:44 +03:00
|
|
|
|
</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>
|
