asandikci.com/www
1
1
Fork 0
Code Issues 15 Pull requests Projects 6 Releases Packages Wiki Activity Actions

feat: playground template and collapsable blocks

Browse source
This commit is contained in:
Aliberk Sandıkçı 2023-06-25 21:46:44 +03:00
parent 4ac2c02a66
commit 682e13e031
2 changed files with 219 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/js/collapse.js Normal file
View file

@ -0,0 +1,15 @@
var coll = document.getElementsByClassName("collapsed");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].nextElementSibling.style.display = "none";
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

204
dev/playground/index.php Normal file
View file

@ -0,0 +1,204 @@
<!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">
&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;
}
</pre>
</code>
</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>