Skip to content

Instantly share code, notes, and snippets.

@peccu

peccu/index.html

Last active July 13, 2019 15:22
Show Gist options
  • Save peccu/c9f769c90844d2338845753eda08bdb7 to your computer and use it in GitHub Desktop.
Save peccu/c9f769c90844d2338845753eda08bdb7 to your computer and use it in GitHub Desktop.
Download ZIP
Send Something to Little Printer (Using device.li key)
Raw
index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
@import url("style.css");
</style>
</head>
<div id="app">
<div class="contact">
<h1>Little Printer bypass</h1>
<p>Send image or text or HTML via Nord Project's device.li</p>
<div class="form">
<span>Device.li URL</span>
<input type="text" v-model="device" placeholder="https://device.li/aaaabbbbcccc" />
<button class="submit" @click="getStatus">Get Status</button>
</div>
<p v-if="status && status.status">Device Name: {{status.name}}, Status: {{status.status}}, Owner: {{status.owner}}</p>
<p v-if="response">{{response}}</p>
<div class="form">
<span>From</span>
<input type="text" v-model="from" />
</div>
<h1>Sending Content...</h1>
<div class="form">
<span>Image URL</span>
<input type="text" v-model="imageUrl" />
<button class="submit" @click="sendImageUrl">Send Image</button>
</div>
<div class="form">
<span>Image File</span>
<input type="file" id="file" ref="file" v-on:change="handleFileUpload()" />
<button class="submit" @click="sendImage">Send Image</button>
</div>
<div class="form">
<span>Text Message</span>
<textarea v-model="text"></textarea>
<button class="submit" @click="sendText">Send Text</button>
</div>
<div class="form">
<span>HTML Message</span>
<textarea v-model="html"></textarea>
<button class="submit" @click="sendHtml">Send HTML</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
<script src="script.js"></script>
Raw
script.js
new Vue({
el: "#app",
data: function() {
return {
list: null,
status: {},
response: null,
imageUrl: "",
image: "",
text: "",
html: "<h1>Sent From Codepen</h1>",
get device() {
return localStorage.getItem("device") || "";
},
set device(value) {
localStorage.setItem("device", value);
},
get from() {
return localStorage.getItem("from") || "";
},
set from(value) {
localStorage.setItem("from", value);
}
};
},
methods: {
getStatus: function() {
var vm = this;
axios.get(this.device).then(
function(response) {
vm.status = response.data;
},
function(error) {
console.log(error.statusText);
}
);
},
send: function(type, post) {
axios
.post(`${this.device}?from=${this.from}`, post, {
headers: { "Content-Type": type }
})
.then(
function(response) {
vm.status = response.data;
},
function(error) {
console.log(error.statusText);
}
);
},
sendText: function() {
this.send("text/plain", this.text);
},
sendHtml: function() {
this.send("text/html", this.html);
},
sendImageUrl: function() {
this.send("text/html", `<img src="${this.imageUrl}"/>`);
},
handleFileUpload: function() {
this.image = this.$refs.file.files[0];
console.log("type", this.image.type);
},
sendImage: function() {
/* let formData = new FormData();
formData.append('file', this.image);
this.send("multipart/form-data", formData);
*/
this.send(this.image.type, this.image);
}
},
mounted: function() {
this.getStatus();
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
Raw
send-something-to-little-printer-using-device-li-key.markdown
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: url(http://i43.tinypic.com/sfgmc3.gif);
color: #b1b1b1;
margin: 15px auto 0;
width: 370px;
font: 14px/16px"Bree Serif", Georgia, serif;
}
.contact h1 {
text-align: center;
font-size: 22px;
}
.contact p {
margin: 20px 0;
font-size: 16px;
}
.contact .form {
width: 370px;
float: left;
}
.contact .form span {
display: block;
float: left;
width: 100px;
padding-top: 5px;
font: 14px/16px"Bree Serif", Georgia, serif;
}
.contact .form input {
float: left;
width: 250px;
border: 0px;
color: #f1f1f1;
padding: 10px 10px 10px;
font: 11px/20px"Open Sans", Verdana, Helvetica, sans-serif;
margin-bottom: 10px;
background: #222;
}
.contact .form textarea {
float: left;
border: 0px;
width: 250px;
height: 140px;
padding: 10px 10px 10px;
font: 11px/20px"Open Sans", Verdana, Helvetica, sans-serif;
color: #f1f1f1;
background: #222;
resize: none;
}
.contact .form .submit {
cursor: pointer;
width: 85px;
height: 30px;
float: right;
padding: 0px 0px 5px 0px;
margin: 10px 16px 20px 0px;
border: 0;
background: #222222;
color: #f1f1f1;
font: 14px/16px"Bree Serif", Georgia, serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment