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