Compare commits

..

5 Commits

Author SHA1 Message Date
Stefan Ritter f78c404ae2 Doch kein Screenshot :D 2024-08-13 22:29:17 +02:00
Stefan Ritter 3f8b51c78a Screenshot hinzugefügt 2024-08-13 22:27:14 +02:00
root 2fdf5e9275 Theme gideonstar: Fade-Effekt hinzugefügt 2023-03-25 17:07:13 +01:00
root fbc85cf13c Theme redesign 2023-03-25 13:09:39 +01:00
root 56bde40f69 Footer hinzugefügt 2023-03-25 12:15:07 +01:00
3 changed files with 25 additions and 8 deletions

View File

@ -3,9 +3,12 @@
// Title // Title
$title = "imgpaste by gideonstar"; $title = "imgpaste by gideonstar";
// Displayed text // Dropzone text
$text = "Click or drop image here..."; $text = "Click or drop image here...";
// Footer text
$footer = '<a href="https://git.stefanritter.de/gideonstar/imgpaste.git">imgpaste</a> by gideonstar';
// Themes can be found in the themes directory // Themes can be found in the themes directory
$theme = "gideonstar"; $theme = "gideonstar";

View File

@ -20,6 +20,7 @@
<div id="dropzone" class="inactive"> <div id="dropzone" class="inactive">
<p><?php echo $text; ?></p> <p><?php echo $text; ?></p>
</div> </div>
<div id="footer"><?php echo $footer; ?></div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

View File

@ -1,6 +1,5 @@
:root { :root {
--round: 20px; --round: 20px;
--border: 100px;
} }
@font-face { @font-face {
@ -20,29 +19,43 @@ body {
} }
#wrapper { #wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex;
align-items: center;
justify-content: center;
} }
#dropzone { #dropzone {
width: calc(100vw - var(--border));
height: calc(100vh - var(--border));
border-radius: var(--round);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 90vw;
height: 200px;
max-width: 500px;
margin-top: 50px;
border-radius: var(--round);
} }
.active { .active {
background-color: #ffb703; background-color: #ffb703;
outline: 2px dashed #fb8500; outline: 2px dashed #fb8500;
transition: .3s ease;
} }
.inactive { .inactive {
background-color: #f5f5f5; background-color: #f5f5f5;
outline: 2px dashed #d5d5d5; outline: 2px dashed #d5d5d5;
transition: .3s ease;
} }
#footer {
margin-top: 10px;
color: white;
font-size: .8em;
}
a {
color: #ffb703;
text-decoration: none;
}