mirror of
https://github.com/SrIzan10/mainwebsite.git
synced 2026-06-06 00:56:58 +00:00
95 lines
3.1 KiB
HTML
95 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="icon" type="image/png" href="../favicon.jpg"/>
|
|
<link href="../css/addaptphone.css" rel="stylesheet" type="text/css">
|
|
<!--If it's a phone, addapt it (and made some code in css/addaptphone.css to be future-proof)-->
|
|
<link href="../global.css" rel="stylesheet" type="text/css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta name="Meme Generator" content="Meme Generator by Sr Izan (Codepen dump)" />
|
|
<link rel="canonical" href="https://srizan.ml/projects/memegenerator.html" />
|
|
<title>Sr Izan's Website</title>
|
|
<!--Scripts and styles-->
|
|
<script>
|
|
function update_text(){
|
|
var user_text = document.getElementById("user_text");
|
|
var meme_text = document.getElementById("meme_text");
|
|
meme_text.innerHTML = user_text.value;
|
|
var img = document.querySelector('img');
|
|
var file = document.querySelector('input[type=file]').files[0];
|
|
img.src = window.URL.createObjectURL(file);
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Menu style start */
|
|
nav ul {
|
|
list-style-type: none;
|
|
background-color: #3e5e45;
|
|
border: 4px solid #111111;
|
|
border-radius: 10px;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
padding: 16px;
|
|
}
|
|
nav ul li {
|
|
text-align: center;
|
|
display: inline;
|
|
border-right: 2px solid #111111;
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
nav ul li:last-child {
|
|
border-right: none;
|
|
}
|
|
nav ul li a {
|
|
text-decoration: none;
|
|
color: #111111;
|
|
}
|
|
body {
|
|
background-color:#3b444a;
|
|
}
|
|
/* Menu style end */
|
|
|
|
#meme_text {
|
|
background-color: transparent;
|
|
font-size: 40px;
|
|
font-family: "Impact";
|
|
color: white;
|
|
text-shadow: black 0px 0px 10px;
|
|
width: 600px;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<html>
|
|
<head>
|
|
<title>Generador de memes (Alpha 1)</title>
|
|
</head>
|
|
<body>
|
|
<script async src="https://arc.io/widget.min.js#FPeKJpXk"></script>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="../index.html"><p style="display:inline-block;">Home</p></a></li>
|
|
<li><a href="../blog"><p style="display:inline-block;">Blog</p></a></li>
|
|
<li><a href="https://dl.srizan.ml"><p style="display:inline-block;">Downloads</p></a></li>
|
|
<li><a href="../projects/"><p style="display:inline-block;">Projects</p></a></li>
|
|
<li><a href="../contact"><p style="display:inline-block;">Contact me!</p></a></li>
|
|
</ul>
|
|
</nav>
|
|
Este generador (en fase alpha) te va a generar memes.
|
|
<strong>Disclaimer: Esto no es un proyecto original. Es de Raspberry Pi Projects</strong>: <a href="https://bit.ly/35ECKPy">Página del proyecto (Raspberry Pi Projects) </a>Ah! también. <strong>Nota: todas las imágenes se guardan en tu ordenador; este programa no sube nada a Internet. (alias Client Side Tool)</strong>
|
|
<form>
|
|
Texto del meme: <input type="text" id="user_text" maxlength="70" oninput="update_text()"><p>
|
|
Selecciona una imagen: <input type="file" id="user_picture" onchange="update_image()">
|
|
</form>
|
|
<div id="meme_text">Texto de ejemplo aquí</div>
|
|
<div id="meme_picture"><img src="" height="500" width="600"></div>
|
|
</body>
|
|
</html>
|
|
|
|
</body>
|
|
</html> |