Skip to content

Commit

Permalink
Add : More functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@1bl4z3r
1bl4z3r committed May 10, 2024
1 parent 6512aa3 commit dcfa70d
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 66 deletions.
88 changes: 62 additions & 26 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
--desktopfont: 25px;
--darkhovercolor: white;
--lghthovercolor: #2e2e2e;
--mobilepadding: 50px;
--tabletpadding: 10vw;
--desktoppadding: 15vw;

}

body,
Expand Down Expand Up @@ -36,10 +40,13 @@ input[type=number] {

select,
input {
background-color: #000;
color: #676767;
/* background-color: #000; */
background-color: transparent;
/* color: #676767; */
color: #fff;
border: 1px solid #373737;
border-radius: 5px;
font-size: var(--mobilefont);
}

select:focus,
Expand All @@ -50,13 +57,15 @@ input:focus-visible {
border: 1px solid #c06300;
outline: none;
}
.jsbanner{

.jsbanner {
margin: 0;
background-color: rgb(210, 30, 30);
border: 3px solid #ff5050;
padding: 10px;
}
.jsbanner > a{

.jsbanner>a {
text-decoration: none;
}

Expand All @@ -70,16 +79,18 @@ input:focus-visible {
background: -webkit-linear-gradient(45deg, hsla(30, 78%, 47%, 1) 0%, hsla(326, 52%, 44%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#D4781A", endColorstr="#AA3678", GradientType=1);
height: calc(1.5vw + 15%);
/* height: calc(1.5vw + 15%); */
height: fit-content;
}

.topbarp {
margin: auto;
position: absolute;
/* position: absolute; */
text-align: justify;
top: 2%;
left: 35%;
transform: translate(-35%, -2%);
/* top: 2%; */
/* left: 35%; */
/* transform: translate(-35%, -2%); */
padding: 25px var(--mobilepadding);
font-family: "Lucida Console", Monaco, monospace;
font-size: 3.5vw;
font-weight: 700;
Expand Down Expand Up @@ -166,6 +177,11 @@ input:focus-visible {
margin-right: 10px;
}

.drop-text>div>svg {
width: 24px;
height: 15px;
}

.error {
padding: 15px 5px 15px 5px;
border-top: 5px dashed var(--errorborder);
Expand Down Expand Up @@ -204,6 +220,7 @@ input:focus-visible {
width: var(--mobilefont);
height: var(--mobilefont);
}

.footer {
position: fixed;
left: 0;
Expand All @@ -212,25 +229,35 @@ input:focus-visible {
background-color: #343434;
color: #dddddd;
text-align: center;
}
.footer svg{
}

.footer svg {
width: 14px;
height: 14px;
fill: #dddddd;
}
.footer a{
color: #009900;
}

.footer a {
color: #dddddd;
text-decoration: none;
}
@media only screen and (min-width: 600px) {
.topbar {
height: calc(1.5vw + 12%);
}
}

.footer a:hover,
a:focus {
color: rgba(21, 255, 0, 0.55);
}

@media only screen and (min-width: 600px) {
.topbarp {
padding: 25px var(--tabletpadding);
font-size: 2.5vw;
}

select,
input {
font-size: var(--tabletfont);
}

.drop-text {
font-size: var(--tabletfont);
}
Expand All @@ -247,16 +274,23 @@ input:focus-visible {
}

@media only screen and (min-width: 850px) {
.topbar {
height: calc(2.5vw + 20%);
}

.topbarp {
padding: 25px var(--desktoppadding);
font-size: 2.5vw;
}

select,
input {
font-size: var(--desktopfont);
}

.drop-text {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 5px;
font-size: var(--desktopfont);
margin: 20px 0;
}

.btn {
Expand Down Expand Up @@ -296,12 +330,14 @@ input:focus-visible {
.btn:hover,
.btn:focus {
color: var(--lghthovercolor);
}
.footer{
}

.footer {
color: #000;
background-color: #fff;
}
.footer svg{

.footer svg {
fill: #222222;
}
}
83 changes: 67 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css" media="print" onload="this.media='all'">
<noscript><link rel="preload" href="index.css" as="style"></noscript>
<link rel="preload" href="index.css" as="style" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="index.css">
</noscript>

<link rel="icon" type="image/svg+xml" href="identity/favicon.svg">
<link rel="icon" type="image/png" href="identity/favicon.png">


<meta name=description
content="Generate Chat links for WhatsApp, Telegram and Signal with this easy to use tool. Also Opensource">
<link rel="apple-touch-icon" sizes="180x180" href="identity/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="identity/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="identity/android-chrome-192x192.png">
Expand All @@ -24,49 +26,97 @@
<meta name="msapplication-config" content="identity/browserconfig.xml">
<meta name="theme-color" content="#0741ad">
<title>ClickToChat</title>
<style>
#loader {
background-color: rgb(51, 51, 51);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2000;
}

#loader>p {
padding: 50px 0;
text-align: center;
color: rgb(182, 182, 182);
font-weight: bold;
font-family: sans-serif;
font-size: 30px;
animation: l1 1s linear infinite alternate;
}

@keyframes l1 {
to {
opacity: 0
}
}

@media (prefers-color-scheme: light) {
#loader {
background-color: rgb(182, 182, 182);
}

#loader>p {
color: rgb(51, 51, 51)
}
}
</style>
</head>

<body>
<div id="loader">
<p>Loading...</p>
</div>
<div class="topbar">
<p class="topbarp">Generate custom chat links for <span class="whatsapp">WhatsApp</span>, <span
class="telegram">Telegram</span> and <span class="signal">Signal</span> with a <span
class="click">single click</span>...</p>
</div>
<noscript>
<p class="jsbanner">This site uses JavaScript to function.<br>See the source code <a href="https://github.com/1bl4z3r/ctc/blob/main/index.js" target="_blank">Here</a></p>
<p class="jsbanner">This site uses JavaScript to function.<br>See the source code <a
href="https://github.com/1bl4z3r/ctc/blob/main/index.js" target="_blank">Here</a></p>

</noscript>
<div class="drop-text">
<div class="drop">
<label for="dropdown">Country: </label>
<select id='dropdown' name="dropdown"></select>
<select id='dropdown' name="dropdown" title="Select your Country"></select>
</div>
<div class="text">
<label for="phoneno">Phone Number: </label>
<input type="number" id="phoneno" name="phoneno" placeholder="Country Code + Phone">
<input type="number" id="phoneno" name="phoneno" placeholder="Country Code + Phone"
title="Enter phone number with your country code">
<svg id="pasteph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Paste Phone Number</title>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
</div>
</div>
<div class="radio-select">
<ul>
<li class="w">
<button id="whatsapp" class="btn whatsapp" name="whatsapp"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<button id="whatsapp" class="btn whatsapp" name="whatsapp" title="Open Link with WhatsApp"><svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M6.579 8.121c.209-.663.778-1.457 1.19-1.66.183-.09.319-.11.763-.11.522 0 .548.005.684.14.088.095.328.606.673 1.432.292.71.533 1.315.533 1.347 0 .146-.293.61-.627 1.002-.23.267-.365.47-.365.543 0 .068.167.381.376.69.506.757 1.44 1.696 2.167 2.177.568.376 1.582.867 1.785.867.152 0 .429-.272.992-.982.23-.287.434-.495.512-.511.068-.021.235.005.37.057.392.152 2.371 1.117 2.476 1.211.203.188.037 1.264-.267 1.702-.464.68-1.79 1.259-2.663 1.17-.636-.068-2.14-.564-3.117-1.029-1.253-.6-2.574-1.697-3.644-3.038-.611-.763-1.227-1.692-1.493-2.246-.36-.751-.491-1.331-.455-2 .016-.287.068-.631.11-.762" />
<path
d="M.606 9.5C1.582 4.491 5.576.76 10.709.06c.705-.1 2.684-.068 3.368.046.715.126 1.66.371 2.24.59 3.832 1.426 6.663 4.72 7.466 8.683.35 1.729.272 3.755-.203 5.457-1.133 4.03-4.423 7.205-8.511 8.218-2.663.658-5.462.37-7.983-.81l-.617-.292-3.226 1.029C1.473 23.545.01 23.994 0 23.983s.45-1.415 1.029-3.112l1.05-3.096-.424-.84C.48 14.569.12 12.01.605 9.498Zm21.172-.408c-1.028-3.76-4.297-6.626-8.145-7.148-2.099-.282-4.078.037-5.9.956-4.417 2.234-6.522 7.341-4.93 11.957.204.59.752 1.702 1.092 2.213l.271.408-.605 1.775a70 70 0 0 0-.606 1.817c0 .026.84-.224 1.864-.548a100 100 0 0 1 1.9-.596c.022 0 .225.11.45.24 2.428 1.447 5.456 1.76 8.187.852a9.93 9.93 0 0 0 6.48-6.945 10 10 0 0 0-.058-4.98Z" />
</svg> Open</button>
</li>
<li class="t">
<button id="telegram" class="btn telegram" name="telegram"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<button id="telegram" class="btn telegram" name="telegram" title="Open Link with Telegram"><svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M1.65 11.562q9.663-4.21 12.888-5.551C20.675 3.458 21.95 3.015 22.782 3c.182-.004.591.041.856.256.223.182.285.427.314.599s.066.563.037.87c-.332 3.494-1.771 11.974-2.503 15.888-.31 1.656-.92 2.211-1.51 2.266-1.284.118-2.259-.848-3.502-1.663-1.945-1.275-3.043-2.069-4.931-3.313-2.182-1.438-.768-2.228.476-3.52.325-.338 5.98-5.481 6.089-5.948.014-.058.026-.275-.103-.39-.13-.115-.32-.076-.457-.045q-.294.068-9.322 6.162-1.323.908-2.397.885c-.789-.017-2.307-.446-3.435-.813-1.384-.45-2.484-.688-2.388-1.452q.075-.597 1.644-1.22" />
</svg> Open</button>
</li>
<li class="s">
<button id="signal" class="btn signal" name="signal"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<button id="signal" class="btn signal" name="signal" title="Open Link with Signal"><svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="m9.12.351.27 1.091a10.8 10.8 0 0 0-3.015 1.247l-.577-.964A12 12 0 0 1 9.12.351m5.76 0-.27 1.091a10.8 10.8 0 0 1 3.015 1.247l.581-.964A12 12 0 0 0 14.88.351M1.725 5.798A12 12 0 0 0 .351 9.12l1.091.27a10.8 10.8 0 0 1 1.247-3.015ZM1.125 12a11 11 0 0 1 .122-1.629l-1.112-.169a12 12 0 0 0 0 3.596l1.112-.169A11 11 0 0 1 1.125 12m17.078 10.275-.578-.964a10.8 10.8 0 0 1-3.011 1.247l.27 1.091a12 12 0 0 0 3.319-1.374M22.875 12a11 11 0 0 1-.122 1.629l1.112.169a12 12 0 0 0 0-3.596l-1.112.169A11 11 0 0 1 22.875 12m.774 2.88-1.091-.27a10.8 10.8 0 0 1-1.247 3.015l.964.581a12 12 0 0 0 1.374-3.326m-10.02 7.875a11 11 0 0 1-3.259 0l-.169 1.112a12 12 0 0 0 3.596 0Zm7.125-4.303a11 11 0 0 1-2.304 2.302l.667.906a12 12 0 0 0 2.543-2.535ZM18.45 3.246a11 11 0 0 1 2.304 2.304l.906-.675a12 12 0 0 0-2.535-2.535ZM3.246 5.55A11 11 0 0 1 5.55 3.246l-.675-.906A12 12 0 0 0 2.34 4.875Zm19.029.247-.964.578a10.8 10.8 0 0 1 1.247 3.011l1.091-.27a12 12 0 0 0-1.374-3.319m-11.904-4.55a11 11 0 0 1 3.259 0l.169-1.112a12 12 0 0 0-3.596 0ZM3.823 21.958 1.5 22.5l.542-2.323-1.095-.257-.542 2.323a1.125 1.125 0 0 0 1.352 1.352l2.321-.532Zm-2.642-3.041 1.095.255.375-1.611a10.8 10.8 0 0 1-1.209-2.951l-1.091.27a12 12 0 0 0 1.106 2.852Zm5.25 2.438-1.611.375.255 1.095 1.185-.276a12 12 0 0 0 2.852 1.106l.27-1.091a10.8 10.8 0 0 1-2.944-1.217ZM12 2.25a9.75 9.75 0 0 0-8.25 14.938l-.937 4 3.999-.938A9.75 9.75 0 1 0 12 2.25" />
</svg> Open</button>
Expand All @@ -78,13 +128,14 @@ <h4 id="error-h4"></h4>
<p id="error-body"></p>
</div>
<div class="footer">
<p>Click to Chat Generator, by <a href="https://blzr.sbs">BLZR</a> | Source: <a
href="https://github.com/1bl4z3r/ctc"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<p>Click to Chat Generator, by <a href="https://blzr.sbs" aria-label="BLZR Homepage"
title="BLZR Homepage">[BLZR]</a> | Source: <a href="https://github.com/1bl4z3r/ctc" aria-label="GitHub"
title="GitHub"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg></a></p>
</div>
<script async type="module" src="index.js"></script>
</body>

</html>
</html>
Loading

0 comments on commit dcfa70d

Please sign in to comment.