mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Added contact-form
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -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']);
|
||||
});
|
||||
@@ -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
18
php/mail.php
Normal 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";
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
@@ -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">
|
||||
|
||||
@@ -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
2
static/dist/embed.min.js
vendored
File diff suppressed because one or more lines are too long
2
static/dist/frontpage.min.js
vendored
2
static/dist/frontpage.min.js
vendored
File diff suppressed because one or more lines are too long
4
static/dist/main.min.js
vendored
4
static/dist/main.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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>")
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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,6 +349,21 @@ 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();
|
||||
|
||||
Reference in New Issue
Block a user