KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added contact-form

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-02-08 12:41:06 +01:00
parent 11ac0d75b2
commit f9f07e2d6d
10 changed files with 185 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gulpfile.js
View File

@@ -26,7 +26,7 @@ gulp.task('embed', function () {
});
gulp.task('nochan', function () {
gulp.src(['static/js/nochan.js'])
gulp.src(['static/js/nochan.js', 'static/js/helpers.js'])
.pipe(uglify({
mangle: true,
compress: true,
@@ -50,6 +50,6 @@ gulp.task('remotecontroller', function () {
gulp.task('default', function(){
gulp.watch('static/js/*.js', ['js']);
gulp.watch('static/js/*.js', ['embed']);
gulp.watch('static/js/nochan.js', ['nochan']);
gulp.watch('static/js/*.js', ['nochan']);
gulp.watch('static/js/remotecontroller.js', ['remotecontroller']);
});

59
php/footer.php
View File

@@ -1,3 +1,61 @@
<div id="contact" class="modal">
<div class="modal-header-fixed">
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
<div class="modal-content">
<h4>Want to contact us?</h4>
<div id="contact-container">
<form id="contact-form" method="post" onsubmit="return false;">
<input id="contact-form-from" name="from" type="email" placeholder="your@mail.com">
<input id="contact-form-message" name="message" type="text" placeholder="Your message to us...">
<button class="contact-button-submit" action="submit" id="submit-contact-form">Send</button>
<div class="valign hide" id="send-loader">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
@@ -12,6 +70,7 @@
Enjoy!
</p>
<a class="modal-trigger waves-effect help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()">Help, how does this work?!</a>
<a class="modal-trigger waves-effect red help-button-footer" id="contact-button" title="Contact us" onclick="$('#contact').openModal()">Contact us</a>
<a class="modal-trigger waves-effect green help-button-footer" id="embed-button" title="Want to embed? (In beta)" onclick="$('#embed').openModal()">Embed this channel</a>
<p id="latest-commit" class="grey-text text-lighten-4 truncate"></p>
</div>

18
php/mail.php Normal file
View File

@@ -0,0 +1,18 @@
<?php
if(isset($_POST['from']) && isset($_POST['message'])){
$from = htmlspecialchars($_POST['from']);
$message = htmlspecialchars($_POST['message']);
$headers = "From: " . $from . "\r\n";
$result = mail("contact@zoff.no", "Contact from form", $message, $headers);
if($result == FALSE){
echo "failure";
}else{
echo "success";
}
}
?>

3
php/nochan.php
View File

@@ -71,7 +71,7 @@ if(isset($_GET['chan'])){
</div>
</div>
<div id="help" class="modal">
<div class="modal-header-fixed">
<div class="modal-header-fixed">
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
<div class="modal-content">
@@ -80,6 +80,7 @@ if(isset($_GET['chan'])){
<p>Underneath the input fields, there are several tiles. These are channels that already exists, and they can be clicked! To enter one of these channels and listen to it's content, it is just to click the tile.</p>
</div>
</div>
</header>
<div class="section mega">

44
static/css/style.css
View File

@@ -441,18 +441,8 @@ hide mdi-action-visibility mdi-action-visibility-off
opacity: 0.72;
}
.mega .refresh-button{
box-sizing: border-box; color: rgb(175, 175, 175); cursor: pointer; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 25.5px; font-weight: normal; height: 40px; line-height: 36.4285736083984px; margin-left: -40px; text-align: center; text-decoration: none; width: 40px;
}
.mega .listen-button{
/*-webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-writing-mode: horizontal-tb; align-items: flex-start; background-attachment: scroll; background-clip: border-box;
background-color: rgb(45, 45, 45); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(250, 70, 104); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: none; border-bottom-width: 0px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(250, 70, 104); border-left-style: none; border-left-width: 0px; border-right-color: rgb(250, 70, 104); border-right-style: none; border-right-width: 0px; border-top-color: rgb(250, 70, 104); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: none; border-top-width: 0px; box-sizing: border-box; color: rgb(255, 255, 255); cursor: pointer; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; height: 40px; letter-spacing: normal; line-height: 35.625px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 30px; padding-right: 30px; padding-top: 0px; text-align: center; text-decoration: none; text-indent: 0px; text-shadow: none;
text-transform: none;
word-spacing: 0px;
color: rgb(255, 255, 255);
text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px;
height:41px;*/
.listen-button, .contact-button-submit{
background: none;
border: none;
background-size: auto;
@@ -499,6 +489,38 @@ hide mdi-action-visibility mdi-action-visibility-off
text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px;
}
.contact-button-submit{
background-color:#FAFAFA;
color:#2d2d2d;
border-left:1px solid #2D2D2D;
border-right:1px solid #2D2D2D;
border-top:1px solid #2D2D2D;
border-bottom:1px solid #2D2D2D;
border-radius: 2px;
text-shadow:rgba(0,0,0,0) 0px 0px 0px;
}
.contact-button-submit:hover{
background-color:#2d2d2d;
color:white;
border-left:1px solid #2D2D2D;
border-right:1px solid #2D2D2D;
border-top:1px solid #2D2D2D;
border-bottom:1px solid #2D2D2D;
border-radius: 2px;
}
.contact-button-submit:focus{
background-color:#FAFAFA;
color:#2d2d2d;
border-left:1px solid #2D2D2D;
border-right:1px solid #2D2D2D;
border-top:1px solid #2D2D2D;
border-bottom:1px solid #2D2D2D;
border-radius: 2px;
text-shadow:rgba(0,0,0,0) 0px 0px 0px;
}
.mega .pitch{
box-sizing: border-box;
color: rgba(255, 255, 255, 0.85);

2
static/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/dist/frontpage.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
static/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
static/js/helpers.js
View File

@@ -166,6 +166,24 @@ var Helper = {
rgbToHex: function(r, g, b) {
return "#" + Helper.componentToHex(r) + Helper.componentToHex(g) + Helper.componentToHex(b);
},
send_mail: function(from, message){
$.ajax({
type: "POST",
data: {from: from, message: message},
url: "/php/mail.php",
success: function(data){
if(data == "success"){
$("#contact-container").empty();
$("#contact-container").html("Mail has been sent, we'll be back with you shortly.")
}else{
$("#contact-container").empty();
$("#contact-container").html("Something went wrong, sorry about that. You could instead try with your own mail-client: <a title='Open in client' href='mailto:contact@zoff.no?Subject=Contact%20Zoff'>contact@zoff.no</a>")
}
}
});
}
}

83
static/js/nochan.js
View File

@@ -247,7 +247,7 @@ var Nochan = {
if($("#alreadychannel").length == 1){
window.init();
}else{
$("#scripts").append($($(e)[51]).html());
$("#scripts").append($($(e)[53]).html());
}
if($("#alreadyfp").length == 0) $("head").append("<div id='alreadyfp'></div>");
}
@@ -349,44 +349,59 @@ function initfp(){
window.initfp = initfp;
$(document).on('submit', '#contact-form', function(e){
e.preventDefault();
var message = $("#contact-form-message").val();
var from = $("#contact-form-from").val();
$("#submit-contact-form").addClass("hide");
$("#send-loader").removeClass("hide");
$("#contact-form-from").attr("disabled", "true");
$("#contact-form-message").attr("disabled", "true");
Helper.send_mail(from, message);
});
$(document).on('click', '#cookieok', function() {
$(this).fadeOut(function(){
$(this).remove();
localStorage["ok_cookie"] = true;
});
});
$(this).fadeOut(function(){
$(this).remove();
localStorage["ok_cookie"] = true;
});
});
$(document).on('click', '#toast-container', function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
$(document).on('click', '#toast-container', function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
$(document).on('click', ".chan-link", function(e){
e.preventDefault();
$(document).on('click', ".chan-link", function(e){
e.preventDefault();
Nochan.to_channel($(this).attr("href"), false);
});
Nochan.to_channel($(this).attr("href"), false);
});
$(document).on("click", ".listen-button", function(e){
//console.log($(".room-namer").attr("placeholder"));
if($(".room-namer").val() == ""){
e.preventDefault();
//window.location = "?chan="+
Nochan.to_channel($(".room-namer").attr("placeholder"));
}
});
$(document).on("click", ".listen-button", function(e){
//console.log($(".room-namer").attr("placeholder"));
if($(".room-namer").val() == ""){
e.preventDefault();
//window.location = "?chan="+
Nochan.to_channel($(".room-namer").attr("placeholder"));
}
});
$(document).on("submit", ".channel-finder", function(e){
e.preventDefault();
Nochan.to_channel($(".room-namer").val());
return false;
});
$(document).on("submit", ".channel-finder", function(e){
e.preventDefault();
Nochan.to_channel($(".room-namer").val());
return false;
});
$(document).on("submit", "#base", function(e){
e.preventDefault();
Nochan.to_channel($("#search-mobile").val());
return false;
});
$(document).on("submit", "#base", function(e){
e.preventDefault();
Nochan.to_channel($("#search-mobile").val());
return false;
});