Initial commit
This commit is contained in:
Erick Ruiz de Chavez
commit
8a935d232e
5 changed files with 1347 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
styles.css
|
||||||
198
index.html
Normal file
198
index.html
Normal file
|
|
@ -0,0 +1,198 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Sin Saludar</title>
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
nonce="9b6b84753c5c4258b03455fb005"
|
||||||
|
src="//local.adguard.org?ts=1632258976336&type=content-script&dmn=sinsaludar.com&app=com.microsoft.edgemac.helper&css=1&js=1&gcss=1&rel=1&rji=1&sbe=0&stealth=1&uag="
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
nonce="9b6b84753c5c4258b03455fb005"
|
||||||
|
src="//local.adguard.org?ts=1632258976336&name=AdGuard%20Extra%20Beta&type=user-script"
|
||||||
|
></script>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="max-w-2xl m-12 md:m-auto md:my-12 text-lg">
|
||||||
|
<h1 class="text-2xl py-5 font-bold text-center">¡Hola!</h1>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
Hoy en día pasamos más tiempo en chats y mensajes que en cualquier otra
|
||||||
|
forma de comunicación; es por esto que saber usar estas herramientas de
|
||||||
|
forma efectiva es muy importante.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
Si me mandas un mensaje diciendo solamente
|
||||||
|
<span class="italic">"Hola"</span> lo más probable es que
|
||||||
|
<span class="font-bold underline">no te conteste</span>, y no es personal;
|
||||||
|
déjame explicarte con un ejemplo:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="chat chat--bad">
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:32</div>
|
||||||
|
<div class="message__user">Alguien</div>
|
||||||
|
<div class="message__text">Hola</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:33</div>
|
||||||
|
<div class="message__user">Yo</div>
|
||||||
|
<div class="message__text">Hola</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="message__caption">
|
||||||
|
Esperando a que me envien otro mensaje
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:35</div>
|
||||||
|
<div class="message__user">Alguien</div>
|
||||||
|
<div class="message__text">¿Cómo estas?</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:38</div>
|
||||||
|
<div class="message__user">Yo</div>
|
||||||
|
<div class="message__text">Bien gracias, ¿y tú?</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:43</div>
|
||||||
|
<div class="message__user">Alguien</div>
|
||||||
|
<div class="message__text">Muy bien gracias...</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="message__caption">
|
||||||
|
Sigue la platica por otros 10 o 15 minutos
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">13:05</div>
|
||||||
|
<div class="message__user">Alguien</div>
|
||||||
|
<div class="message__text">
|
||||||
|
Fíjate que te queria preguntar... (tu duda o comentario aquí)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
Y así se nos fué al menos media hora de concentración que pudimos pasar
|
||||||
|
trabajando, con la familia, amigos, viendo tele, jugando, etc.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
No me lo tomes a mal, te agradezco que me preguntes cómo estoy, pero es
|
||||||
|
mucho mejor plantear tu duda o comentario desde el inicio; así podemos
|
||||||
|
distraernos menos y disfrutar tiempo de calidad tanto en nuestra
|
||||||
|
conversacion, como en nuestros trabajos y otras actividades.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
En lugar de hacer lo que todos estamos acostumbrados, es mucho mejor algo
|
||||||
|
así:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="chat chat--good">
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:32</div>
|
||||||
|
<div class="message__user">Tú</div>
|
||||||
|
<div class="message__text">
|
||||||
|
Hola! Cuando tengas tiempo... (tu duda o comentario aquí)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:34</div>
|
||||||
|
<div class="message__user">Yo</div>
|
||||||
|
<div class="message__text">Hola! ... (mi respuesta aquí)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
Si sientes que no preguntarme cómo estoy es descortés o poco educado,
|
||||||
|
puedes optar por esta opción:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="chat chat--good">
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:32</div>
|
||||||
|
<div class="message__user">Tú</div>
|
||||||
|
<div class="message__text">
|
||||||
|
Hola, espero que estés bien. Cuando tengas tiempo, ... (tu duda o
|
||||||
|
comentario aquí)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
De igual forma, si crees que por chat es dificil expresar tu duda o
|
||||||
|
comentario, en lugar de:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="chat chat--bad">
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:32</div>
|
||||||
|
<div class="message__user">Alguien</div>
|
||||||
|
<div class="message__text">Hola, tienes tiempo para una llamada?</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="py-5">
|
||||||
|
Es mejor plantear expectativas e incluso darme tiempo para pensar en tu
|
||||||
|
pregunta con algo así:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="chat chat--good">
|
||||||
|
<div class="message">
|
||||||
|
<div class="message__time">12:32</div>
|
||||||
|
<div class="message__user">Tú</div>
|
||||||
|
<div class="message__text">
|
||||||
|
Hola, tienes X minutos para hablar sobre ... (tu duda o comentario
|
||||||
|
aqui)?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="m-10" />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Este documento está inspirado en
|
||||||
|
<a
|
||||||
|
href="https://sbmueller.github.io/nohello/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Don’t Just Say Hello In Chat</a
|
||||||
|
>. Si te gustó, compártelo con otras personas y ayudales a ser mas
|
||||||
|
eficientes en sus conversaciones. Si tienes dudas o comentarios, puedes
|
||||||
|
enviarlos usando
|
||||||
|
<a href="https://erch.co/contact/">este formulario de contacto</a>.
|
||||||
|
</p>
|
||||||
|
<footer
|
||||||
|
class="
|
||||||
|
m-10
|
||||||
|
h-24
|
||||||
|
text-xs
|
||||||
|
italic
|
||||||
|
text-gray-400
|
||||||
|
flex flex-col
|
||||||
|
justify-evenly
|
||||||
|
items-center
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/"
|
||||||
|
><img
|
||||||
|
alt="Licencia Creative Commons"
|
||||||
|
src="https://i.creativecommons.org/l/by/4.0/88x31.png"
|
||||||
|
/></a>
|
||||||
|
<p>
|
||||||
|
Esta obra está bajo una
|
||||||
|
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/"
|
||||||
|
>Licencia Creative Commons Atribución 4.0 Internacional</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1081
package-lock.json
generated
Normal file
1081
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
23
package.json
Normal file
23
package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "sinsaludar.com",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"scripts": {
|
||||||
|
"start": "tailwindcss -i tailwind.css -o styles.css -m --watch",
|
||||||
|
"build": "tailwindcss -i tailwind.css -o styles.css -m"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/eruizdechavez/sinsaludar.com.git"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/eruizdechavez/sinsaludar.com/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://sinsaludar.com",
|
||||||
|
"devDependencies": {
|
||||||
|
"tailwindcss": "^2.2.15"
|
||||||
|
}
|
||||||
|
}
|
||||||
43
tailwind.css
Normal file
43
tailwind.css
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
a {
|
||||||
|
@apply underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
@apply p-2 rounded-lg border shadow-lg mb-5 mx-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat--bad {
|
||||||
|
@apply bg-red-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat--good {
|
||||||
|
@apply bg-green-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
@apply flex border-t py-2 text-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message:nth-child(1) {
|
||||||
|
@apply border-t-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message__time {
|
||||||
|
@apply w-12 text-gray-400 flex-shrink-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message__user {
|
||||||
|
@apply w-16 font-bold flex-shrink-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message__user::after {
|
||||||
|
content: ":";
|
||||||
|
}
|
||||||
|
|
||||||
|
.message__caption {
|
||||||
|
@apply text-gray-400 border-t text-sm italic p-3 text-center;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue