Search the Community
Showing results for tags 'html'.
-
Estou com uma duvida eu tenho um fomulario em html e para a incluir uma linha para digitar utilizei o <input type="text" id="texto" style="width:100%;"> mas nao sei se e o melho metodo pois o que e escrito nao fica salvo no html (o formulario e aberto direto do computador) Tem algum metodo que grave o que e escrito na lilha de texto direto na linha de texto? Sem ter que usa placeholder direto em cada linha de texto
-
estou desenvolvível um fichário em Html e gostaria que alguém me explica-se como eu faço para criar um script que salve o Html em txt na maquina e depois eu possa abrir este arquivo com uma função de editar
-
Boa tarde a todos, Ver se consigo explicar-me: Tenho uma tabela de contactos (tbl_contactos) em que tem vários campos, um deles o email_principal. Faço um SELECT tbl_contactos.email_principal FROM tbl_contactos. A minha ideia é em PHP/MYSQLI passar as colunas, dos email, mas em linhas em que cada email fica separado por ponto e virgula (;) para posteriormente poder utilizar uma botão, que vai abrir o outlook através a <a href="mailto:$variavel_com_o_emails_todos">ENVIAR EMAIL</a> A minha duvida é como consigo colocar todos os email do SELECT separados por ponto e virgula e passar para a variável para posteriormente remeter para todos os destinatários SELECCIONADOS. Obrigado pela vossa ajudar, se conseguirem.
-
Diariamente utilizo um software no meu trabalho que me cria um ficheiro htm, onde algures tem este codigo: <td class="variable bordertop">Tempo Estimado: 06:04:13</td> o que eu pretendo é criar um programa que me vá buscar esse tempo estimado a esse ficheiro html, para eu depois conseguir trabalhar esse numero. (somar com outros números de outros ficheiros por ex.) não sei que linguagem devo usar, acredito que existam várias opções. obrigado. -
Boa noite Portugal-a-Programar. Necessito de ajuda para um trabalho de escola, um site respondido com um layout básico feito em html+css mas apesar de já ter tentado de tudo não consigo fazê-lo. Estive em isolamento do Covid durante alguns dias e tive de aprender a matéria sozinho e por isso peço ajuda.
-
Eu queria depois de validar o login para redirecionar para a página dependendo do nível de acesso, agradeceria que alguem me ajudasse o mais rápido possível, obrigado aqui está a página de login de validação: <?php session_start(); include ("config.php"); if(isset($_POST['submit'])){ $Nmutilizador = mysqli_real_escape_string($conn, $_POST['username']); $pass = md5($_POST['Password']); $lvlacesso = $_POST['NivelAcesso']; $select = " SELECT * FROM users WHERE NmUtilizador = '$Nmutilizador' && PalavraPasse = '$pass' "; $result = mysqli_query($conn, $select); if(mysqli_num_rows($result) > 0){ $row = mysqli_fetch_array($result); if ($_SESSION['NivelAcesso'] == '1') { // check the value of the 'status' in the db //go to admin area header("Location: indexadmin.php"); } else { //go to members area header("Location: indexposlogin.php"); } }else{ $error[] = 'incorrect email or password!'; } }; ?> pagina de login: <?php session_start(); echo '<!doctype html> <html lang="en"> <head> <title>Página de Login</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/stylelogin.css"> <style> h3{ text-align: center; } .disclaimer{ visibility: hidden; } </style> </head> <body> <section class="ftco-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-6 text-center mb-5"> <h2 class="heading-section">Inicie sessão</h2> </div> </div> <div class="row justify-content-center"> <div class="col-md-7 col-lg-5"> <div class="wrap"> <div class="img" style="background-image: url(Imagens/imagemlogin.png);"></div> <div class="login-wrap p-4 p-md-5"> <div class="d-flex"> <div class="w-100"> <h3 class="mb-4">Login</h3> </div> </div> <form action="validalogin.php" class="signin-form"> <div class="form-group mt-3"> <input name="username" type="text" class="form-control" required> <label class="form-control-placeholder" for="username">Nome de Utilizador</label> </div> <div class="form-group"> <input name="pass" id="password-field" type="password" class="form-control" required> <label class="form-control-placeholder" for="password">Palavra-Passe</label> <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span> </div> <div class="form-group"> <button type="submit" class="form-control btn btn-primary rounded submit px-3">Entrar</button> </div> <div class="form-group d-md-flex"> <div class="w-50 text-left"> <label class="checkbox-wrap checkbox-primary mb-0">Lembrar me <input type="checkbox" checked> <span class="checkmark"></span> </label> </div> <div class="w-50 text-md-right"> <a href="#">Esqueci me da palavra-passe</a> </div> </div> </form> <p class="text-center">Não és membro? <a data-toggle="tab" href="registar.php">Registar me</a></p> <p class="text-center"><a data-toggle="tab" href="https://ingamept.000webhostapp.com/">Voltar</a></p> </div> </div> </div> </div> </div> </section> <script src="js/jquery.min.js"></script> <script src="js/popper.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/main.js"></script> </body> </html>
-
Boas tardes nao consigo validar os dados quando se faz o login: validalogin.php: <?php session_start(); // se username e pass foram postados if (isset($_POST['username']) && isset($_POST['pass'])) { // conecta ao database require 'config.php'; // escapa as string pra evitar scripts maliciosos $uname = $conn->real_escape_string($_POST['username']); $passw = $conn->real_escape_string($_POST['pass']); $lvlacesso = $conn->real_escape_string($_POST['NivelAcesso']); // guarda o uname na sessão $_SESSION['NmUtilizador'] = $uname; $_SESSION['NivelAcesso'] = $lvlacesso // define a consulta a ser realizada $query = "SELECT * FROM users where NmUtilizador='$uname' and PalavraPasse='$passw' and NivelAcesso='$lvlacesso'"; // executa a consulta e guarda o resultado em $result $result = $conn->query($query); // verifique se houve alguma falha durante a execução da consulta if ($sqli->error) { // exibe mensagem: die('<p class="error">Falha na consulta: ' . $conn->error . '</p>'); // se não houve falha e há algum resultado } else if ($result->num_rows) { // direciona a outra página header('location:indexposlogin.php'); // se não houve nenhuma falha, mas nada foi encontrado } else { // carrega a página de login include('site/login.html'); // com essa mensagem de erro echo '<h1 class="bad">Erro de Autenticacao</h1>'; } } // se username ou pass não foram postados echo '<h1 class="bad">Envie Username and pass</h1>'; // o mysqli $sqli é encerrado automagicamente ao fim da execução de cada request if ($_SESSION['NivelAcesso'] == '1') { // check the value of the 'status' in the db //go to admin area header("Location: indexadmin.php"); } else { //go to members area header("Location: indexposlogin.php"); } login.php <!doctype html> <html lang="en"> <head> <title>Página de Login</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/stylelogin.css"> <style> h3{ text-align: center; } .disclaimer{ visibility: hidden; } </style> </head> <body> <section class="ftco-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-6 text-center mb-5"> <h2 class="heading-section">Inicie sessão</h2> </div> </div> <div class="row justify-content-center"> <div class="col-md-7 col-lg-5"> <div class="wrap"> <div class="img" style="background-image: url(Imagens/imagemlogin.png);"></div> <div class="login-wrap p-4 p-md-5"> <div class="d-flex"> <div class="w-100"> <h3 class="mb-4">Login</h3> </div> </div> <form action="validalogin.php" class="signin-form"> <div class="form-group mt-3"> <input type="text" class="form-control" required> <label class="form-control-placeholder" for="username">Nome de Utilizador</label> </div> <div class="form-group"> <input id="password-field" type="password" class="form-control" required> <label class="form-control-placeholder" for="password">Palavra-Passe</label> <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span> </div> <div class="form-group"> <button type="submit" class="form-control btn btn-primary rounded submit px-3">Entrar</button> </div> <div class="form-group d-md-flex"> <div class="w-50 text-left"> <label class="checkbox-wrap checkbox-primary mb-0">Lembrar me <input type="checkbox" checked> <span class="checkmark"></span> </label> </div> <div class="w-50 text-md-right"> <a href="#">Esqueci me da palavra-passe</a> </div> </div> </form> <p class="text-center">Não és membro? <a data-toggle="tab" href="registar.php">Registar me</a></p> <p class="text-center"><a data-toggle="tab" href="https://ingamept.000webhostapp.com/">Voltar</a></p> </div> </div> </div> </div> </div> </section> <script src="js/jquery.min.js"></script> <script src="js/popper.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/main.js"></script> </body> </html>
-
Olá a todos, Preciso de uma pequena explicação e ajuda para colocar o meu datatable a funcionar com os botões para fazer download em excel, PDF, .. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-html5-2.2.2/datatables.min.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-html5-2.2.2/datatables.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <!-- CÓDIGO DE TEXTO --> <link rel="stylesheet" href="//cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <script src="//cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js" defer></script> <script> $(document).ready( function () { $('#teste').DataTable({ "language": { "url": "////cdn.datatables.net/plug-ins/1.11.3/i18n/pt_pt.json", dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] } }); } ); </script> apenas no fim chamo o ultimo script . Tentei colocar aqui os botões de exportar e segui o seguinte link https://datatables.net/extensions/buttons/examples/initialisation/export.html os erros que obtenho são : datatables.min.js:143 Uncaught TypeError: l is not a function at datatables.min.js:143:244 at datatables.min.js:48:299 at datatables.min.js:48:326 Será a ordem como coloco os css e JS que não consigo ver os botões? Obrigado!
-
Olá pessoal. Estou tendo problemas com o código. Quando corrigi, minha foto do lado esquerdo sumiu (veja segunda imagem abaixo) e a formatação da descrição e botão sobre mim não aparece como na segunda imagem. Então minha pergunta é: <!-- Como faço para colocar a segunda imagem semelhante à primeira imagem, ou seja, com uma foto do lado esquerdo, minha descrição pessoal e o botão sobre mim do lado direito? (com a ajuda do código fonte por favor, sem alterar a outra estrutura do site, com o botão da lua para alterar a cor do site e a barra de navegação do lado direito)--> O código está abaixo: <!-- home section starts --> <!-- How do I place the second image similar to the first image, ie with a photo on the left side, my personal description and the about me button on the right side? (with the help of source code please, without changing the other structure of the website, with the moon button to change the color of the website and the nav bar on the right side)--> <section class="home" id="home"> <div class="image"> <img src="images/photo ze.jpg" alt=""> </div> <div class="content"> <h1>My name is José Moreira, I am <span class="txt-rotate" date-period="2000" data-rotate='[ "Graphic Design.", "Photographer.", "Web developer.",]'></span> </h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Who, error?</p> <a href="#about" class="btn">about me</a> </div> </section> <!-- home section ends --> O código completo está em: https://jsfiddle.net/Quencyjones79/zrp9e12g/1/ https://codepen.io/Quencyjones79/pen/GRyZQeG Eu aprecio muito sua ajuda. https://mab.to/7HLOkIcFj
-
Bom dia tenho uma duvida em relcação ao programa que estou a desenvolver e da me o seguinte erro: Fatal error: Uncaught Error: Call to a member function query() on string in D:\xampp\htdocs\site\validarupdate.php:11 Stack trace: #0 {main} thrown in D:\xampp\htdocs\site\validarupdate.php on line 11
-
Bom dia estou cm estes seguintes erros: Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given in D:\xampp\htdocs\site\validalogin.php on line 13 Warning: include(login.html): failed to open stream: No such file or directory in D:\xampp\htdocs\site\validalogin.php on line 22 Warning: include(): Failed opening 'login.html' for inclusion (include_path='\xampp\php\PEAR') in D:\xampp\htdocs\site\validalogin.php on line 22 Warning: mysqli_free_result() expects parameter 1 to be mysqli_result, bool given in D:\xampp\htdocs\site\validalogin.php on line 28 Aqui está o código: <?php $uname=$_POST['username']; $passw=$_POST['pass']; session_start(); $_SESSION['NmUtilizador']=$uname; $conexion=mysqli_connect("localhost","root","","pap"); $consulta="SELECT * FROM login where NmUtilizador='$uname' and Password='$passw'"; $resultado=mysqli_query($conexion,$consulta); $filas=mysqli_num_rows($resultado); if($filas){ header("location:site/indexposlogin.php"); }else{ ?> <?php include("site/login.html"); ?> <h1 class="bad">Erro de Autenticacao</h1> <?php } mysqli_free_result($resultado); mysqli_close($conexion);
-
Olá a todos, bom dia, estou fazendo um site pessoal para divulgar meus trabalhos multimídia. Como minha principal preocupação é o alinhamento de divs e seções, agradeço muito sua ajuda. Minhas dúvidas estão nos comentários. E eu também os envio aqui. <!--Como colocar isso como a imagem do tempo? (ver weather image)?--> <!--Como corrigir o espaço entre as duas bordas da barra de clima e data e hora (veja o layout image)--> index.html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>complete responsive personal portfolio website design tutorial</title> <!-- font awesome cdn link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- custom css file link --> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> </head> <body> <!--This is the weather and datetime bar--> <!--How to put that as the weather image? (see the image weather image)?--> <!--How to fix the space between the twoo edges of the weather and datetime bar (see the image layout)--> <section class="header" id="header"> <div class="datetime" style="width:150px"> <p id="date">Sat 11 Sep 2021</p> <p id="time">10:08:58</p> </div> <div class="weather"><p><a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" data-label_1="VIANA DO CASTELO" data-label_2="" data-icons="Climacons Animated" data-days="5" data-theme="sky" >VIANA DO CASTELO</a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js'); </script></p> </div> </div> <!-- header section starts --> <header> <div id="menu" class="fas fa-bars"></div> <nav class="navbar"> <a href="#home">home</a> <a href="#about">about</a> <a href="#services">services</a> <a href="#portfolio">portfolio</a> <a href="#blog">blog</a> <a href="#contact">contact</a> </nav> <div id="theme-toggler" class="fas fa-moon"></div> </header> <!-- header section ends --> <!-- home section starts --> <section class="home" id="home"> <div class="image"> <img src="images/foto ze.jpg" alt=""> </div> <div class="content"> <h1>Chamo-me José Moreira sou <span class="txt-rotate" data-period="2000" data-rotate='[ "Design Gráfico.", "Fotográfo.", "Web developer.",]'></span> </h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Quas, error?</p> <a href="#about" class="btn">about me</a> </div> </section> <!-- home section ends --> <section class="about" id="about"> <h1 class="heading"> about <span>me</span> </h1> <div class="row"> <div class="box"> <h3 class="title">coding skills</h3> <div class="progress"> <h3> html <span>95%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> css <span>80%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> js <span>65%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> sass <span>75%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">professional skills</h3> <div class="progress"> <h3> web design <span>98%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> web development <span>67%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> graphic design <span>75%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> seo marketing <span>60%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">experience</h3> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> <div class="box"> <h3 class="title">education</h3> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> </div> <div class="download"> <a href="#" class="btn"> download CV </a> </div> </section> <!-- service section starts --> <section class="services" id="services"> <h1 class="heading"> <span>my</span> services </h1> <div class="box-container"> <div class="box"> <span class="number">1</span> <img src="images/s1.png" alt=""> <h3>seo marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">2</span> <img src="images/s2.png" alt=""> <h3>graphic design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">3</span> <img src="images/s3.png" alt=""> <h3>digital marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">4</span> <img src="images/s4.png" alt=""> <h3>data analysis</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">5</span> <img src="images/s5.png" alt=""> <h3>web development</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">6</span> <img src="images/s6.png" alt=""> <h3>web design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> </div> </section> <!-- service section ends --> <!-- portfolio section starts --> <section class="portfolio" id="portfolio"> <h1 class="heading"> <span>my</span> portfolio </h1> <div class="button-container"> <div class="btn" data-filter="all">all</div> <div class="btn" data-filter="design">design</div> <div class="btn" data-filter="code">code</div> <div class="btn" data-filter="website">website</div> <div class="btn" data-filter="brand">brand</div> </div> <div class="image-container"> <div class="box design"> <img src="images/img1.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img2.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img3.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img4.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img5.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box website"> <img src="images/img6.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img7.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img8.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img9.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> </div> </section> <!-- portfolio section ends --> <!-- blog section start --> <section class="blog" id="blog"> <h1 class="heading"> <span>my</span> blogs </h1> <div class="box-container"> <div class="box"> <img src="images/blog1.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog2.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog3.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog4.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog5.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog6.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> </div> </section> <!-- blog section ends --> <!-- contact section starts --> <section class="contact" id="contact"> <h1 class="heading"> contact <span>me</span> </h1> <div class="box-container"> <div class="box"> <i class="fas fa-phone"></i> <h3>my number</h3> <p>+123-456-7890</p> </div> <div class="box"> <i class="fas fa-envelope"></i> <h3>my email</h3> <p>example@gmail.com</p> </div> <div class="box"> <i class="fas fa-map-marker-alt"></i> <h3>my address</h3> <p>mumbai, india - 400104</p> </div> </div> <div class="row"> <form action=""> <div class="inputBox"> <input type="text" placeholder="name"> <input type="email" placeholder="email"> </div> <input type="text" placeholder="subject"> <textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea> <button class="btn"> send message </button> </form> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1617786516134!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe> </div> </section> <!-- contact section ends --> <div id="td_container"> <div class="flex"> <div class="button-wrapper"> <i class="fa fa-play play button" id="play" onclick=" toggleplayback(this); "aria-hidden="true"></i> <i class="fa fa-pause pause button" onclick="toggleplayback(this)" id="pause" aria-hidden="true"></i> </div> <div id = "content"> <div class="now-playing-label">Now Playing</div> <div id="show"> </div> <div id="artist"> </div> </div> <div class="stream-wrapper"> <!-- <span>Stations</span> --> <div class="dropdown"> <button class="dropbtn" id="btn">22 West Music Stream</button> <i class="fa fa-caret-down" aria-hidden="true"></i> <div class="dropdown-content"> <a href="#" onclick="changeStream(this)">22 West Radio Online</a> <a href="#" onclick="changeStream(this)">22 West FM</a> <a href="#" onclick="changeStream(this)">22 West Music Stream</a> </div> </div> </div> <div id="player"> <i class="fa fa-volume-up"></i> <div id="volume"></div> </div> <div class="social-icons"> <a href="https://www.facebook.com/22WestRadio" target="_blank"><i class="fa fa-facebook icons" aria-hidden="true"></i></a> <a href="https://twitter.com/22WestRadio" target="_blank"><i class="fa fa-twitter icons" aria-hidden="true"></i></a> <a href="https://www.instagram.com/22WestRadio/" target="_blank"><i class="fa fa-instagram icons" aria-hidden="true"></i></a> </div> </div> </div> <!-- footer section --> <div class="footer"> <div class="container> <div class="container copyright d-flex-r justify-content-space-around"> <ul class="d-flex-r my-1"> <li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li> <li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li> <p class="text-center my1">©Copyright 2022.Designed by José Moreira</p> </ul> </div> <div class="d-flex-r justify-content-center"> <a href="#home"><i class="fas fa-angle-up"></i></a> </div> </div> </div> <!--footer--> <!-- jquery cdn link --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- custom js file link --> <script src="js/script.js"></script> </body> </html> style.css :root{ --main-color:#4C84FF; --primary-bg-color:#fff; --secondary-bg-color:#eee; --primary-text-color:#222; --secondary-text-color:#666; } @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap'); *{ font-family: 'Roboto', sans-serif; margin:0; padding:0; box-sizing: border-box; text-transform: capitalize; outline: none; border:none; text-decoration: none; transition:all .3s cubic-bezier(.38,1.15,.7,1.12); } *::selection{ background-color: var(--main-color); color:#fff; } html{ font-size: 62.5%; overflow-x: hidden; } html::-webkit-scrollbar{ width:1.3rem; } html::-webkit-scrollbar-track{ background-color: var(--secondary-bg-color); } html::-webkit-scrollbar-thumb{ background-color: var(--main-color); } body{ background:var(--secondary-bg-color); } body.dark-theme{ --primary-bg-color:#252C48; --secondary-bg-color:#171C32; --primary-text-color:#fff; --secondary-text-color:#eee; } section{ min-height: 100vh; padding:1rem; padding:0 8%; } .btn{ display: inline-block; padding:.9rem 3.5rem; font-size: 2rem; background:none; color:#fff; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin-top: 1rem; z-index: 0; position: relative; overflow: hidden; border:.2rem solid var(--main-color); } .btn::before{ content: ''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border-radius: .5rem; background:var(--main-color); height:85%; width: 95%; z-index: -1; transition: .2s linear; } .btn:hover:before{ top:100%; transform: translate(-50%, 100%); } .btn:hover{ color:var(--primary-text-color); } .heading{ font-size: 5rem; color:var(--primary-text-color); text-align: center; padding:1rem; text-transform: uppercase; } .heading span{ color:var(--main-color); text-transform: uppercase; } /*weather and datetime*/ .header .datetime { width: auto !important; /* to kill your inline style (width:150px) */ display: flex; margin: 0 !important; padding: 8px 0 !important; /* better to use space in between date/time (see above) */ } .header .weather { flex-grow: 1; } .header .weather > p { margin: 0; border-color: black; } #weatherwidget-io-0 { position: relative !important; } .weatherwidget-io { padding: 0 !important; height: auto !important; position: static !important; margin: 0 !important; font-size: 0; } #date, #time { margin: 1em .5em; } /*weather and datetime*/ #menu{ font-size: 2rem; background:var(--main-color); color:#fff; border-radius: 5rem; height:5rem; width:5rem; text-align: center; line-height: 5rem; position: fixed; top: 2rem; right:2rem; z-index: 1000; cursor: pointer; } #menu.fa-times{ transform:rotate(-180deg); } .navbar{ position: fixed; top:2.4rem; right:2.5rem; padding:1.1rem 2rem; padding-right: 4rem; z-index: 999; border:.2rem solid var(--main-color); border-radius: 1rem; background:var(--primary-bg-color); opacity: 0; transform-origin: top right; transform: scale(0); } .navbar.nav-toggle{ opacity: 1; transform: scale(1); } .navbar a{ display: block; font-size: 2rem; padding:1rem; padding-right: 7rem; color:var(--primary-text-color); } .navbar a:hover{ color:var(--main-color); transform: translateX(1rem); } .home{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .home .image{ flex:1 1 40rem; padding:1rem; text-align: center; } .home .image img{ height:50rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); border-top: 3rem solid var(--primary-bg-color); border-right: 3rem solid var(--primary-bg-color); border-bottom: 3rem solid var(--main-color); border-left: 3rem solid var(--main-color); border-radius: .5rem; } .home .content{ flex:1 1 40rem; padding:1rem; } .home .content .hello{ display: inline-block; padding:1rem 0; font-size: 2.6rem; color:var(--secondary-text-color); } .home .content h3{ color:var(--primary-text-color); font-size: 5rem; } .home .content h3 span{ color:var(--main-color); } .home .content p{ padding:1rem 0; color:var(--secondary-text-color); font-size: 2rem; } .about .row{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .about .row .box{ flex:1 1 40rem; background-color: var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:.5rem 1.5rem; margin:1.5rem; } .about .row .box .title{ color:var(--primary-text-color); font-size: 2.5rem; padding:1rem 0; } .about .row .box .progress{ padding:1rem 0; } .about .row .box .progress h3{ font-size: 1.7rem; color:var(--secondary-text-color); display: flex; justify-content: space-between; } .about .row .box .progress .bar{ height: 2.5rem; border-radius: .5rem; border:.2rem solid var(--main-color); padding:.5rem; margin:1rem 0; } .about .row .box .progress .bar span{ height: 100%; border-radius: .3rem; background-color: var(--main-color); display: block; } .about .row .box:nth-child(1) .progress:nth-child(2) .bar span{ width: 95%; } .about .row .box:nth-child(1) .progress:nth-child(3) .bar span{ width: 80%; } .about .row .box:nth-child(1) .progress:nth-child(4) .bar span{ width: 65%; } .about .row .box:nth-child(1) .progress:nth-child(5) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(2) .bar span{ width: 98%; } .about .row .box:nth-child(2) .progress:nth-child(3) .bar span{ width: 67%; } .about .row .box:nth-child(2) .progress:nth-child(4) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(5) .bar span{ width: 60%; } .about .row .box .exp-box{ padding:0 1.8rem; margin-top: 1rem; margin-bottom: 2rem; border-left: .2rem solid var(--main-color); position: relative; } .about .row .box .exp-box h3{ color:var(--main-color); font-size: 2rem; } .about .row .box .exp-box p{ color:var(--secondary-text-color); font-size: 1.5rem; padding:1rem 0; } .about .row .box .exp-box::before{ content:''; position: absolute; top:0; left: -1rem; border-radius: 50%; height: 2rem; width: 2rem; background: var(--main-color); } .about .download{ background:var(--primary-bg-color); border-radius: .5rem; text-align: center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:2rem; padding-bottom: 3rem; margin:1rem; } .services .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .services .box-container .box{ background:var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1rem; padding:1rem; width:35rem; text-align: center; position: relative; z-index: 0; } .services .box-container .box .number{ position: absolute; top:1.5rem; left: 2rem; font-size: 2.5rem; color:var(--primary-text-color); } .services .box-container .box img{ height:7rem; width:7rem; margin:1rem; } .services .box-container .box h3{ font-size: 2rem; color:var(--main-color); } .services .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); padding:1rem; } .services .box-container .box::before{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--main-color); z-index: -1; clip-path: circle(25% at 0 0); opacity: .1; transition: .3s; } .services .box-container .box:hover::before{ clip-path: circle(100%); } .portfolio .button-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding:1rem 0; } .portfolio .button-container .btn{ margin:1rem; cursor: pointer; } .portfolio .image-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 1rem 0; } .portfolio .image-container .box{ width:35rem; margin: 1rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); overflow: hidden; height: 25rem; position: relative; border:1.5rem solid var(--primary-bg-color); cursor: pointer; } .portfolio .image-container .box img{ height: 100%; width: 100%; object-fit: cover; } .portfolio .image-container .box .info{ position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--primary-bg-color); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; opacity: .9; transform: scale(0); } .portfolio .image-container .box:hover .info{ transform: scale(1); } .portfolio .image-container .box .info h3{ font-size: 2.5rem; color:var(--primary-text-color); } .blog .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .blog .box-container .box{ width:33rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1.5rem; background: var(--primary-bg-color); overflow: hidden; } .blog .box-container .box img{ width: 100%; height: 20rem; object-fit: cover; } .blog .box-container .box .content{ padding:1.5rem; } .blog .box-container .box .content .info{ border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); text-align: center; position: relative; font-size: 1.5rem; color:var(--primary-text-color); background:var(--secondary-bg-color); padding:1rem; margin-top: -4rem; margin-bottom: 1rem; } .blog .box-container .box .content .info i{ color:var(--main-color); padding:0 1rem; } .blog .box-container .box .content .title{ color:var(--primary-text-color); display: block; font-size: 2.5rem; padding:.5rem 0; } .blog .box-container .box .content .title:hover{ text-decoration: underline; color:var(--main-color); } .blog .box-container .box .content p{ color:var(--secondary-text-color); padding:.5rem 0; font-size: 1.5rem; } .contact .row{ display: flex; justify-content: center; flex-wrap: wrap; } .contact .row form{ flex:1 1 40rem; background: var(--primary-bg-color); padding: 2rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; } .contact .row .map{ flex:1 1 40rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; border:2rem solid var(--primary-bg-color); width:100%; } .contact .row form .inputBox{ display: flex; justify-content: space-between; flex-wrap: wrap; } .contact .row form input, .contact .row form textarea{ padding:1rem 0; margin:1rem 0; font-size: 1.7rem; border-bottom: .1rem solid var(--secondary-text-color); text-transform: none; background:none; color:var(--main-color); width: 100%; } .contact .row form input::placeholder, .contact .row form textarea::placeholder{ text-transform: capitalize; color:var(--secondary-text-color); } .contact .row form input:focus, .contact .row form textarea:focus{ border-color: var(--main-color); } .contact .row form .inputBox input{ width:49%; } .contact .row form textarea{ height: 15rem; resize: none; } .contact .row form .btn{ cursor: pointer; } .contact .box-container{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .contact .box-container .box{ flex:1 1 30rem; margin:1rem; padding:3rem 1rem; background:var(--primary-bg-color); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; text-align: center; } .contact .box-container .box i{ height: 6rem; width:6rem; line-height: 6rem; border-radius: 50%; font-size: 3rem; background:var(--secondary-bg-color); color:var(--main-color); } .contact .box-container .box h3{ color:var(--primary-text-color); padding:1rem 0; font-size: 2rem; } .contact .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); } /*Radio station*/ .flex { display:flex; background:#000; width:900px; height:108px; align-items:center; justify-content:flex-start; } .button-wrapper { background: #000; height:100%; width:20%; position:relative; } .button { position:absolute; top:35%; left:0; right:0; text-align:center; font-size:2rem !important; color:#4cc8f4 !important; } #pause { display:none; } .stream-wrapper { color:#fff !important; margin-left:5%; font-size:1rem !important; min-width:200px; } .social-icons { margin-left:15%; display:inline-table; height:40px; width:200px !important; } .icons { border:1px #4cc8f4 solid; border-radius:50%; color:#4cc8f4 !important; margin-top:1%; padding:8px 12px; font-size:1.2rem !important; } .icons:hover { color:#fff !important; border-color:#fff !important; } .social-icons a { margin-left:5%; } .dropbtn { background-color: #4cc8f4; color: white; padding: 10px; font-size: 16px; border: none; min-width: 180px; } .dropdown { position: relative; display: inline-block; background-color: #4cc8f4; color: white; padding-right:5px; min-width: 199px; text-align:center; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 199px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: #4cc8f4; padding: 10px 12px; text-decoration: none; display: block; width:180px; } .dropdown-content a:hover { background-color: #4cc8f4; color:#fff; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: ##4cc8f4; } #player { width: 50px; height: 50px; position: relative; margin-left:5%; top: 25px; } #player i { position: absolute; margin-top: -6px; color: #666; } #player i.fa-volume-up { color:#4cc8f4; } #volume { position: absolute; left: 24px; margin-left:12px; margin: 0 auto; height: 3px; width: 100px; background: #555; border-radius: 10px; } #volume .ui-slider-range-min { height: 3px; width: 300px; position: absolute; background: #4cc8f4; border: none; border-radius: 10px; outline: none; } #volume .ui-slider-handle { width: 10px; height: 10px; border-radius: 10px; background: #f1f1f1; position: absolute; margin-left: -6px; margin-top: -3px; cursor: pointer; outline: none; } #content { display:none; width:150px !important; color:#4cc8f4 !important; font-size:0.9rem; } #artist { width:100% !important; margin-top:10%; } #show { width:100% !important; margin-top:5%; } .now-playing-label { color:#fff; } /*Radio Staion ends*/ .footer{ background-color:orange; color: #bbb; height: auto; } .container{ padding: 2rem 1rem; } .footer ul{ font-size: normal; list-style: none; } .footer a{ color:red; text-decoration: none; } /*Margins and padding Classes*/ .my-1{margin-top: 1rem; margin-bottom: 1rem;} /*Flex Proprieties*/ .d-flex-r{ display: flex; flex-direction: row; flex-wrap: wrap; } .justify-content-center{ justify-content:center; } .justify-content-space-around{ justify-content:space-around; } .footer i{color: white;} .footer .copyright i {margin-left: 1rem;} .footer i.fab, .footer i.fas{font-size: 1.25rem;transition: 0.3s ease;} .footer i.fab:hover{color:white important;} .footer i.fas { border-radius: 50%; border:1px solid white; margin-top: 1rem; margin-bottom: 1rem; padding: 12px 15px; #theme-toggler{ position: fixed; top:8.5rem; right:2rem; z-index: 998; height: 5rem; width:5rem; line-height: 5rem; text-align: center; font-size: 2rem; background:var(--main-color); color:#fff; cursor: pointer; border-radius: 5rem; } #theme-toggler.fa-sun{ transform:rotate(-180deg); } .home .content { font-family: 'Raleway', sans-serif; padding: 3em 2em; font-size: 18px; background: #222; color: #aaa } .home .content h1{ font-weight: 200; margin: 0.4em 0; } .home .content h1 { font-size: 3.5em; } /* media queries */ @media (max-width:991px){ html{ font-size: 55%; } section{ padding:1rem; padding: 0 3%; } } @media (max-width:768px){ .home .image img{ height: auto; width: 100%; } } @media (max-width:400px){ html{ font-size: 50%; } .services .box-container .box{ width: 100%; } .portfolio .image-container .box{ width:100%; } .blog .box-container .box{ width:100%; } .contact .row form .inputBox input{ width:100%; } } sccript.js $(document).ready(function(){ $('#menu').click(function(){ $(this).toggleClass('fa-times'); $('.navbar').toggleClass('nav-toggle'); }); $(window).on('scroll load',function(){ $('#menu').removeClass('fa-times'); $('.navbar').removeClass('nav-toggle'); }); $('.portfolio .button-container .btn').click(function(){ let filter = $(this).attr('data-filter'); if(filter == 'all'){ $('.portfolio .image-container .box').show('400') }else{ $('.portfolio .image-container .box').not('.'+filter).hide('200'); $('.portfolio .image-container .box').filter('.'+filter).show('400'); } }); $('#theme-toggler').click(function(){ $(this).toggleClass('fa-sun'); $('body').toggleClass('dark-theme'); }); // smooth scrolling $('a[href*="#"]').on('click',function(e){ e.preventDefault(); $('html, body').animate({ scrollTop : $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); function setDate() { const now = new Date(); const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); const monthName = [ 'January','February','March','April', 'May','June','July','August','September', 'October','November','December' ]; if (hrs > 12) { hours.innerHTML = hrs - 12; } else { hours.innerHTML = hrs; } if (secs < 10) { seconds.innerHTML = '0' + secs; } else { seconds.innerHTML = secs; } if (mins < 10) { minutes.innerHTML = '0' + mins; } else { minutes.innerHTML = mins; } month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; } setInterval(setDate,1000); window.onload = setInterval(clock,1000); function clock() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; month=montharr[month]; var year = d.getFullYear(); var day = d.getDay(); var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"]; day=dayarr[day]; var hour =d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year; document.getElementById("time").innerHTML=hour+":"+min+":"+sec; } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; script.js $(document).ready(function(){ $('#menu').click(function(){ $(this).toggleClass('fa-times'); $('.navbar').toggleClass('nav-toggle'); }); $(window).on('scroll load',function(){ $('#menu').removeClass('fa-times'); $('.navbar').removeClass('nav-toggle'); }); $('.portfolio .button-container .btn').click(function(){ let filter = $(this).attr('data-filter'); if(filter == 'all'){ $('.portfolio .image-container .box').show('400') }else{ $('.portfolio .image-container .box').not('.'+filter).hide('200'); $('.portfolio .image-container .box').filter('.'+filter).show('400'); } }); $('#theme-toggler').click(function(){ $(this).toggleClass('fa-sun'); $('body').toggleClass('dark-theme'); }); // smooth scrolling $('a[href*="#"]').on('click',function(e){ e.preventDefault(); $('html, body').animate({ scrollTop : $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); function setDate() { const now = new Date(); const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); const monthName = [ 'January','February','March','April', 'May','June','July','August','September', 'October','November','December' ]; if (hrs > 12) { hours.innerHTML = hrs - 12; } else { hours.innerHTML = hrs; } if (secs < 10) { seconds.innerHTML = '0' + secs; } else { seconds.innerHTML = secs; } if (mins < 10) { minutes.innerHTML = '0' + mins; } else { minutes.innerHTML = mins; } month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; } setInterval(setDate,1000); window.onload = setInterval(clock,1000); function clock() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; month=montharr[month]; var year = d.getFullYear(); var day = d.getDay(); var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"]; day=dayarr[day]; var hour =d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year; document.getElementById("time").innerHTML=hour+":"+min+":"+sec; } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; Agradeço imenso a vossa ajuda, por favor. Aguardando uma resposta breve de vossa parte. Cumprimentos José Moreira Ps: https://codepen.io/Quencyjones79/pen/gOXQrbV (imagens para ajuda referidas em cima)- https://mab.to/64upEF7st todo o código-fonte.: https://mab.to/S7mtJ2kmh
-
Boas tardes estou a desenvolver um projeto final e aparece me o seguinte erro Ja tentei de tudo mas nao sei como resolver alguem me poderia ajudar? Aqui está o codigo: <?php $uname1 = $_POST['Nome_Utilizador']; $paswrd = $_POST['Password']; $email = $_POST['Email']; if (!empty($uname1) || !empty($email) || !empty($paswrd)) { $host = "localhost"; $dbusername = "root"; $dbpassword = ""; $dbname = "pap"; // Create connection $conn = new mysqli ($host, $dbusername, $dbpassword, $dbname); if (mysqli_connect_error()){ die('Connect Error ('. mysqli_connect_errno() .') ' . mysqli_connect_error()); } else{ $SELECT = "SELECT Nome_Utilizador From login Where Nome_Utilizador = ?"; $INSERT = "INSERT Into registoo (NmUtilizador , Password ,Email)values(0,?,?,?)"; //Prepare statement $stmt = $conn->prepare($SELECT); $stmt->bind_param("s", $email); $stmt->execute(); $stmt->bind_result($email); $stmt->store_result(); $rnum = $stmt->num_rows; //checking username if ($rnum==0) { $stmt->close(); $stmt = $conn->prepare($INSERT); $stmt->bind_param("sss", $uname1,$paswrd,$email); $stmt->execute(); echo "Registado com sucesso"; } else { echo "Alguem ja tem esse nome de utlizador , coloque outro"; } $stmt->close(); $conn->close(); } } else { echo "Todos os campos sao necessarios"; die(); } ?>
-
Boas eu tenho um trabalho que é uma biblioteca e esta tudo funcional o login e o register tao bem,mas quando quero clico na opçao livros não consigo da me erro 500,mas nao consigo ver no codigo onde possa estar o erro, supostamente o erro encontra se neste codigo so nao sei onde. <?php if (count(get_included_files()) == 1) {exit("Direct access not permitted.");} // Carregar e Instanciar Classe require_once 'livros.php'; $product = new Livro($pdo); $capa = '<img class="image" src="../assets/img/livro/'; $html = ''; //echo "LISTAR"; $html .= '<table id="livros" class="table table-striped">'; $html .= '<thead id="tabela_livros"><tr> <th>Titulo</th> <th>Autor</th> <th>Genero</th> <th>Editora</th> <th>Descrição</th> </thead><tbody>'; // Obter Produtos e número de registos $stmt = $product->read(); $num = $stmt->rowCount(); if ($num > 0) { // Obter conteúdos while ( $row = $stmt->fetch(PDO::FETCH_ASSOC)) { $html .= ' <tr> <td> '. $capa . $row['id'] . '.jpg' . '"'. '</td> <td> '. $row[ 'nome' ] . '</td> <td>' . $row[ 'autor' ] . '</td> <td>' . $row[ 'editora' ] . '</td> <td>' . $row[ 'genero' ] . '</td> <td>' . $row[ 'descricao' ] . '</td> </tr>'; } } else{ $html .= '<tr><td colspan="11">Sem registos</td></tr>'; } $html .= '<tbody></table>' echo $html; ?>
-
Olá a todos. Estou a fazer uma base de dados "ecommerce" contudo quando estava a fazer a ligação do ficheiro mysqli_connect.php com o ficheiro add_artist.php, estou a ter erros no segundo ficheiro. Em baixo envio o código fonte e algumas imagens para me ajudarem. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Add an Artist</title> <meta charset="UTF-8"> <meta name="description" content="Home page"> <meta name="keywords" content="ecommerce"> <meta name="author" content="José Moreira"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <?php # Script 19.1 - add_artist.php // This page allows the administrator to add an artist. if ($_SERVER['REQUEST_METHOD'] = = 'POST') { // Handle the form. // Validate the first and middle names (neither required): $fn = (!empty($_POST['first_name'])) ? trim($_POST['first_name']) : NULL; $mn = (!empty($_POST['middle_name'])) ? trim($_POST['middle_name']) : NULL; // Check for a last_name... if (!empty($_POST['last_name'])) { $ln = trim($_POST['last_name']); // Add the artist to the database: require ('../../mysqli_connect. php'); $q = 'INSERT INTO artists (first_ name, middle_name, last_name) VALUES (?, ?, ?)'; $stmt = mysqli_prepare($dbc, $q); mysqli_stmt_bind_param($stmt, 'sss', $fn, $mn, $ln); mysqli_stmt_execute($stmt); // Check the results.... if (mysqli_stmt_affected_ rows($stmt) = = 1) { echo '<p>The artist has been added.</p>'; $_POST = array( ); } else { // Error! $error = 'The new artist could not be added to the database!'; } // Close this prepared statement: mysqli_stmt_close($stmt); mysqli_close($dbc); // Close the database connection. } else { // No last name value. $error = 'Please enter the artist\'s name!'; } } // End of the submission IF. // Check for an error and print it: if (isset($error)) { echo '<h1>Error!</h1> <p style="font-weight: bold; color: #C00">' . $error . ' Please try again.</p>'; } // Display the form... ?> <h1>Add a Print</h1> <form action="add_artist.php" method="post"> <fieldset><legend>Fill out the form to add an artist:</legend> <p><b>First Name:</b> <input type="text" name="first_name" size="10" maxlength="20" value="<?php if (isset($_POST['first_name'])) echo $_POST['first_name']; ?>" /></p> <p><b>Middle Name:</b> <input type="text" name="middle_name" size="10" maxlength="20" value="<?php if (isset($_POST['middle_name'])) echo $_POST['middle_name']; ?>" /></p> <p><b>Last Name:</b> <input type="text" name="last_name" size="10" maxlength="40" value="<?php if (isset($_POST['last_name'])) echo $_POST['last_name']; ?>" /></p> </fieldset> <div align="center"><input type="submit" name="submit" value="Submit" /></div> </form> </body> </html> mysqli_connect.php <?php # Script 9.2 - mysqli_connect.php // This file contains the database access information. // This file also establishes a connection to MySQL, // selects the database, and sets the encoding. // Set the database access information as constants: DEFINE ('DB_USER', 'username'); DEFINE ('DB_PASSWORD', 'Quencyjones79'); DEFINE ('DB_HOST', 'localhost'); DEFINE ('DB_NAME', 'ecommerce'); // Make the connection: $dbc = @mysqli_connect (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) OR die ('Could not connect to MySQL: ' . mysqli_connect_error( ) ); // Set the encoding... mysqli_set_charset($dbc, 'utf8'); Agradeço imenso a sua ajuda.
-
Bom dia meus caros, alguém com algumas dicas sobre formas de envio de SMS via Browser? Tenho que usar uma API e enviar a partir dela? Alguma luz? obrigado,
-
Boa tarde a todos, Estou a desenvolver uma aplicação web e uma das funções era o envio de emails apos submeter um form. Funciona tudo muito bem em localhost mas ao passar para um servidor sempre que tento enviar o email é dado erro SMTP -> ERROR: Failed to connect to server: Connection timed out (110) The following From address failed: xxx@iscte-iul.pt : Called Mail() without being connected function smtpmailer($para, $de, $de_nome, $replyto , $cc ,$assunto, $corpo) { global $error; $mail = new PHPMailer(); $mail->CharSet = 'UTF-8'; $mail->IsSMTP(); // Ativar SMTP $mail->SMTPDebug = 1; // Debugar: 1 = erros e mensagens, 2 = mensagens apenas $mail->SMTPAuth = true; // Autenticação ativada $mail->SMTPSecure = 'tls'; //$mail->SMTPSecure = 'TLS'; $mail->Host = 'smtp.office365.com'; // SMTP utilizado $mail->Port = 587; // A porta 587 deverá estar aberta em seu servidor $mail->Username = GUSER; $mail->Password = GPWD; $mail->SetFrom($de, $de_nome); $mail->AddReplyTo($replyto, $de_nome); $mail->AddCC($cc, $de_nome); $mail->Subject = $assunto; $mail->Body = $corpo; $mail->AddAddress($para); if (!$mail->Send()) { $error = 'Mail error: ' . $mail->ErrorInfo; return false; } else { $error = 'Mensagem enviada!'; return true; } } O que poderá causar este erro. Poderá ser permissoes ? Obrigado a todos
-
Estou a refazer um site de um cliente e as imagens não aparecem O html: <section class="u-align-center u-clearfix u-image u-shading u-section-1" href="img/pedrafundo2.jpg" data-image-width="1280" data-image-height="853"> <div class="u-clearfix u-sheet u-sheet-1"> <h1 class="u-text u-text-default u-text-1"> Mesas por Medida<br>Casa & Hotelaria</h1> <p class="u-large-text u-text u-text-variant u-text-2"> Fabricamos mesas altas, baixas, compridas, largas, 100% Personalizadas ao seu gosto! Preparadas para um uso diário e intensivo!</p> <a target="_blank" href="https://www.youtube.com/channel/UCZbv8-ylGYp4PITuZ-d-kqQ/playlists" class="u-border-none u-btn u-button-style u-hover-palette-5-base u-palette-5-light-1 u-btn-1"> Veja os nossos testes de resistência</a> </div> </section> O css .u-section-1 { background-position: 50% 50%; background-image: url('img/pedrafundo2.jpg'); } as outras mods são só visuais para o texto e essas coisas na ferramenta de inspecionar do google na consola encontrei um aviso a dizer "ERR_FILE_NOT_FOUND"
-
Boas pessoal, Tenho o seguinte Butão que ao clicar nele ele envia o ficheiro selecionado para o cliente. <a href="sendEmail.php?id=<?php echo $fatura['id']; ?>&doc=faturas&OPTION=F" class="btn btn-sm btn-primary"> <i class="fa fa-at"></i> E-mail</a> O que eu queria fazer era, quando eu clicar para enviar o botão ficar verde e a mostrar a mensagem "enviado" para sempre. Eu ja consegui fazer isso mas quando atualizo a pagina ele volta ao normal. Alguém tem uma ideia de como posso fazer isso de uma forma simples? Obrigado
-
Estou com uma questão e já não me recordo do método, sei que existia uma forma atomizada de colocar o site responsivo alguém sabe qual é? HTML <!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="(min-width: 800px)" href="style\style.css"> <link rel="stylesheet" type="text/css" media="(max-width: 800px)" href="style\mobile.css"> </head> <body> <div class="img1"> <img src="logo.png"width="10%" height="15%"> </div> <header> <ul class="menul"> <li class="menuil"><a href="./contact.html">Contactos</a></li> <li class="menuil"><a href="./portfoliomain.html">Portfólio</a></li> <li class="menuil"><a href="./service.html">Serviços</a></li> <li class="menuil"><a href="./about.html">Sobre Nós</a></li> <li class="menuil"><a href="../index.html">Home</a></li> </ul> </header> <div class="descimg1"> <h6>Badger Tech</h6> </div> <div class="fc"> <div class="fci"> <div class="fcf"> <img src="img/about.jpg" class="imgbout1" alt="about"> </div> <div class="fcb"> <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></b> aqui.</p> </div> </div> </div> <div class="spcH"></div> <div class="fc2"> <div class="fci2"> <div class="fcf2"> <img src="img/quefazes.jpg" class="imgbout1" alt="quefazemos" > </div> <div class="fcb2"> <h1>bbbbbbbbbbbbbbbbbbbbbb</h1> <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p> </div> </div> </div> <div class="fc3"> <div class="fci3"> <div class="fcf3"> <img src="img/horas.jpg" class="imgbout1" alt="horas"> </div> <div class="fcb3"> <h1>cccccccccccccccccccccccccccc</h1> <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> </div> </div> </div> <br> <br> <br> <br> <br> <br> <footer> <h6 class="copyr"> © </h6> </footer> </body> </html> css /* about us*/ /*fc1*/ .fc { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:5%; margin-left:10%; } .fci { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc:hover .fci { transform: rotateY(-180deg); } .fcf, .fcb { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf { color: white; } .fcb { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*fc2*/ .fc2 { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:-44.222222%; margin-left:40%; } .fci2 { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc2:hover .fci2 { transform: rotateY(-180deg); } .fcf2, .fcb2 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf2 { color: white; } .fcb2 { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*fc3*/ .fc3 { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:-44.233333333%; margin-left:70%; } .fci3 { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc3:hover .fci3 { transform: rotateY(-180deg); } .fcf3, .fcb3 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf3 { color: white; } .fcb3 { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*a about*/ .aabout{ color: black; } .imgbout1{ width:300px; height:600px; } tem mais codigo mas decidi colocar só esta pagina Alguém me pode ajudar?
-
Boa noite, tenho um problema neste simples código de bootstrap, quando abro ele no google, não aparece nada. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Meu primeiro HTML com Bootstrap/title> <link rel="shortcut icon" href="img/Circle-icons-computer.svg.png" type="image/x-icon"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/exemplo.css"> <link rel="stylesheet" href="libs/fontawesome-free-5.13.0-web/css/all.css" </head> <body> <div class=" jumbotron jumbotron-fluid bg-header"> <h1 class="display-4 text-center text-white text-header">adrianocastro</h1> <p class="lead text-center text-white">Desenvolvimento & Design</p> <div> <nav class="navbar navbar-expand-lg navbar-dark bg-gradient mt-n5"> <a href="index.html" class="navbar-brand"> <img src="img/Circle-icons-computer.svg.png" alt="Nosso Logo" width="50" height="50"> </a> <button class="navbar-toggler" data-target="#menu" data-toggle="collapse" aria-controls="menu" aria-expanded="false" aria-label="Meu menu"> <span class="navbar-toggler-icon"></span> </button> <div id="menu" class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link text-white" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="sobre.html">Sobre</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-white" href="#" id="services" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Serviços </a> <div class="dropdown-menu" aria-labelledby="services"> <a class="dropdown-item" href="#">Desenvolvimento de Aplicações Web</a> <a class="dropdown-item" href="#">Identidade Visual</a> <a class="dropdown-item" href="#">Marketing Digital</a> </div> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Contato</a> </li> </ul> </div> </nav> <div class="container mt-3"> <div class="row"> <div class="col-12 col-si-6 col-md-6"> <img src="img/designer-gráfico 570645106.jpg" class="img-fluid rounded" alt="Designer Gráfico"> </div> <div class="col-12 col-sm-6 col-md-6"> <h1 class="text-danger text-justify">Lorem ipsum, dolor sit amet consec <p class="text-justify text-dark">Lorem ipsum dolor, sit amet consectet ducimus, aspernatur molestias neque ipsam mollitia quia libero distinct cumque. Reiciendis, ipsa repudiandae. Sapiente impedit, natus inventore suscipit cum eveniet ab, maiores vero itaque blandi deserunt vitae! Saepe quia </p> </div> </div> <div class="dropdown-dividerdiv> <div class="row mt-2"> <div class="col-12 col-sm-9 col-md-9"> <h2 class="text-justify text-danger">Substitulo</h2> <p class="text-justify text-dark">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dolor ex animi blanditiis, doloribus vel quae velit delectus suscipit reprehenderit possimus deserunt error alias similique cupiditate labore ipsum incidunt inventore?</p> </div> <div class="col-12 col-sm-3 col-md-3 d-none d-sm-block"> <img class="img-fluid" src="img/designer-gráfico_570645106.jpg" alt="Noticia 1"> </div> </div> <div class="dropdown-divider"></div> <div class="row mt-2"> <div class="col-12 col-sm-3 col-md-3 d-none d-sm-block"> <img class="img-fluid" src="img/designer-gráfico_570645106.jpg" alt="NO </div> <div class="col-12 col-sm-9 col-md-9"> <h2 class="text-justify text-danger">Substitulo</h2> <p class="text-justify text-dark">Lorem ipsum dolor sit amet consectetu blanditiis, doloribus vel quae velit delectus suscipit reprehenderit po cupiditate labore ipsum incidunt inventore?</p> </div> </div> </div> <div class="container-fluid bg-info mt-3"> <div class="row"> <div class="col-12"> <p class="text-center text-white mt-2">Todos os direitos reservados.</p> <p class="text-center text-white">Siga-nos em nossas redes sociais</p> <p class="text-center"> <i class="fas fa-user"></i> </p> </div> </div> <div class="row"> <div class="col-12"> <p class="text-right text-white"> Desenvolvido por: adrianoCastro </p> </div> </div> </div> <script src="js/jquery-3.4.1.js"></script> <script src="js/bootstrap.js"></script> <script src="libs/fontawesome-free-5.13.0-web/js/fontawesome.js"></script> </body> </html>
-
O meu objetivo era criar uma tabela com dados e depois filtrar os dados por um intervalo de datas. Código HTML: echo"<form action='table.php' method='post' >"; echo"<div class='card-body pt-0'>"; echo"<div class='card-title'>"; echo"<div class=' search d-flex align-items-center position-absolute my-1'> <span class='svg-icon svg-icon-1 position-absolute ms-6'> <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'> <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'> <rect x='0' y='0' width='24' height='24'></rect> <path d='M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z' fill='#000000' fill-rule='nonzero' opacity='0.3'></path> <path d='M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z' fill='#000000' fill-rule='nonzero'></path> </g> </svg> </span> <input type='text' name='valueToProcurar' class='form-control form-control-solid w-250px ps-15' placeholder='Search Customers'> <button type='submit' name='procura' value='Filter' class='btn btn-primary' data-kt-menu-dismiss='true' data-kt-customer-table-filter='filter'>Procurar nome</button> </div>"; echo"<div class='d-flex justify-content-end' data-kt-customer-table-toolbar='base'>"; echo"<button type='button' class='btn btn-light-primary me-3' data-kt-menu-trigger='click' data-kt-menu-placement='bottom-end' data-kt-menu-flip='top-end'>"; echo"<span class='svg-icon svg-icon-2'>"; echo"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'>"; echo"<g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>"; echo"<rect x='0' y='0' width='24' height='24' /> <path d='M5,4 L19,4 C19.2761424,4 19.5,4.22385763 19.5,4.5 C19.5,4.60818511 19.4649111,4.71345191 19.4,4.8 L14,12 L14,20.190983 C14,20.4671254 13.7761424,20.690983 13.5,20.690983 C13.4223775,20.690983 13.3458209,20.6729105 13.2763932,20.6381966 L10,19 L10,12 L4.6,4.8 C4.43431458,4.5790861 4.4790861,4.26568542 4.7,4.1 C4.78654809,4.03508894 4.89181489,4 5,4 Z' fill='#000000' />"; echo"</g>"; echo"</svg>"; echo"</span>"; echo"Filtro</button>"; echo"<div class='menu menu-sub menu-sub-dropdown w-300px w-md-325px' data-kt-menu='true'>"; echo"<div class='px-7 py-5'>"; echo"<div class='fs-4 text-dark fw-bolder'>Filter Options</div>"; echo"</div>"; echo"<div class='separator border-gray-200'></div>"; echo"<div class='px-7 py-5'>"; echo"<div>"; echo"<p> <b>Data</b> </p> <label for='from'>From</label> <input type='date' id='datepicker' name='fromDate' placeholder='Value To Search'> <br><br> <label for='to'>to</label> <input type='date' id='datepicker2' name='toDate' placeholder='Value To Search'> <br><br>"; echo"</div>"; echo"<div class='d-flex justify-content-end'>"; echo"<button type='reset' class='btn btn-white btn-active-light-primary me-2' data-kt-menu-dismiss='true' data-kt-customer-table-filter='reset'>Reset</button> <button type='submit' name='procura' value='Filter' class='btn btn-primary' data-kt-menu-dismiss='true' data-kt-customer-table-filter='filter'>Apply</button>"; echo"</div>"; echo"</div>"; echo"</div>"; echo"</div>"; echo"<div class='d-flex justify-content-end align-items-center d-none' data-kt-customer-table-toolbar='selected'>"; echo"<div class='fw-bolder me-5'>"; echo"<span class='me-2' data-kt-customer-table-select='selected_count'></span>Selected</div>"; echo"<button type='button' class='btn btn-danger' data-kt-customer-table-select='delete_selected'>Delete Selected</button>"; echo"</div>"; echo"</div>"; echo"<div class='table-responsive'>"; echo"<table class='table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer' id='kt_customers_table myTable' role='grid'>"; echo"<thead>"; echo"<tr class='text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0'><th class='w-10px pe-2'><div class='form-check form-check-sm form-check-custom form-check-solid me-3'><input class='form-check-input' type='checkbox' data-kt-check='true' data-kt-check-target='kt_customers_table .form-check-input' value='1' /></div></th><th class='min-w-125px'>id</th><th class='min-w-125px'>Nome</th><th class='min-w-125px'>Website</th><th class='min-w-125px'>Email</th><th class='min-w-125px'>Serviço</th><th class='min-w-125px'>Data</th><th class='min-w-125px'>Montante</th><th class='text-end min-w-70px'>Delete</th></tr>"; echo"</thead>"; while($row = mysqli_fetch_array($search_result)) { echo"<tbody class='fw-bold text-gray-600'> <tr class='container' id='gfg'> <td> <div class='form-check form-check-sm form-check-custom form-check-solid'><input class='form-check-input' type='checkbox' value='1' /></div></td> <td>{$row['id']}</td> <td> {$row['nome']} </td> <td> {$row['website']} </td> <td> {$row['email']} </td> <td> {$row['serv']} </td> <td> {$row['data']} </td> <td class='text-gray-800 text-hover-primary mb-1'> {$row['montante']} </td> <td class='text-end'> <div class='menu-item px-3'> <a href='dist/apps/costumers/delete.php?id=".$row['id']."' class='menu-link px-3' >Delete</a> </div> </td> </tr> </tbody>"; } echo"</table>"; echo"</div>"; echo"</form>"; echo"</div>"; echo"</div>"; echo"<div> <script src='dist/assets/plugins/global/plugins.bundle.js'></script> <script src='dist/assets/js/scripts.bundle.js'></script> <script src='dist/assets/plugins/custom/datatables/datatables.bundle.js'></script> <script src='dist/assets/js/custom/apps/customers/list/export.js'></script> <script src='dist/assets/js/custom/apps/customers/list/list.js'></script> <script src='dist/assets/js/custom/apps/customers/add.js'></script> <script src='dist/assets/js/custom/widgets.js'></script> <script src='dist/assets/js/custom/apps/chat/chat.js'></script> <script src='dist/assets/js/custom/modals/create-app.js'></script> <script src='dist/assets/js/custom/modals/upgrade-plan.js'></script> <script src='dist/assets/js/custom/intro.js'></script> </div>"; echo"</hmtl>"; Código PHP: <?php require'a/connect.php'; $trueuser="usermix"; $truepass="user0000"; $username = $_GET["username"]; $password = $_GET["password"]; if($username == $trueuser and $password == $truepass) { header("location: table.php"); } else { if($username == $trueuser and $password != $truepass) { echo'WRONG PASSWORD !!! Login Failed.'; } else { if($username != $trueuser and $password == $truepass) { echo'WRONG USERNAME !!! Login Failed.'; } else { if($username != $trueuser and $password != $truepass) { echo'WRONG PASSWORD AND USERNAME !!! Login Failed.'; } } } } ?> Eu já tenho o filtro por nome, agora queria inserir um filtro por intervalo de datas mas quando insiro as datas não acontece nada. Agradeço toda a ajuda possível.
-
Bom dia, Eu quero criar um programa para fazer login mas está a dar um erro estranho: Esta página não está a funcionar mixlifeserver.com não consegue processar este pedido de momento. HTTP ERROR 500 Código HTML: <html lang="pt"> <head> <meta charset="utf-8" /> <title>Login</title> <link rel="canonical" href="Https://preview.keenthemes.com/metronic8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="img/cliente1.png" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" /> <link href="dist/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" /> <link href="dist/assets/css/style.bundle.css" rel="stylesheet" type="text/css" /> </head> <body id="kt_body" class="bg-white"> <div class="d-flex flex-column flex-root"> <div class="d-flex flex-column flex-lg-row flex-column-fluid"> <div class="d-flex flex-column flex-lg-row-fluid py-10"> <div class="d-flex flex-center flex-column flex-column-fluid"> <div class="w-lg-500px p-10 p-lg-15 mx-auto"> <form method="post" class="form w-100" novalidate="novalidate" id="kt_sign_in_form" action="dist/apps/customers/validation.php"> <div class="text-center mb-10"> <h1 class="text-dark mb-3">Login</h1> <div class="fv-row mb-10"> <div class="d-flex flex-stack mb-2"></div> <label class="form-label fw-bolder text-dark fs-6 mb-0">Email</label> </div> <input class="form-control form-control-lg form-control-solid" type="email" name="username" autocomplete="off" value="" /> </div> <div class="fv-row mb-10"> <div class="d-flex flex-stack mb-2"> <label class="form-label fw-bolder text-dark fs-6 mb-0">Password</label> </div> <input class="form-control form-control-lg form-control-solid" type="password" name="password" autocomplete="off" /> </div> <div class="text-center"> <button type="submit" value="Login" id="" class="btn btn-lg btn-primary w-100 mb-5"> <span class="indicator-label">Continue</span> <span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span> </button> </div> </form> </div> </div> </div> </div> </div> <script src="dist/assets/plugins/global/plugins.bundle.js"></script> <script src="dist/assets/js/scripts.bundle.js"></script> <script src="dist/assets/js/custom/authentication/sign-in/general.js"></script> </body> </html> Código PHP: <?php require'a/connect.php'; $trueuser="*****"; $truepass="*****"; $username = 'username'; $password = 'password'; if($username == $trueuser and $password == $truepass) { header("location: welcome.php"); } else { if($username == $trueuser and $password != $truepass) { echo'WRONG PASSWORD !!! Login Failed.'; } else { if($username != $trueuser and $password == $truepass) { echo'WRONG USERNAME !!! Login Failed.'; } else { if($username != $trueuser and $password != $truepass) { echo'WRONG PASSWORD AND USERNAME !!! Login Failed.'; } } } } ?> Agradeço toda a ajuda possível :))
-
Bom dia a todos. Gostava que me pudessem ajudar pois quero zelar pela segurança de toda a informação que quero armazenar sobre clientes. Eu tenho um formulário com cerca de 20 campos que tenho que preencher com informação critica e queria ter a certeza de que a informação é enviada, armazenada e consultada com segurança, isto e, que ninguém consegue aceder a essa informação de forma ilicita. O formulário esta feito em html e é armazenada num servidor online agradecia que me dessem ideias e como fazer. Sinto-me um bocado desorientado e queria que me ajudassem explicando o que devo e como faze-lo. Já me falaram de usar json e que se instala-se um certificado ssh no servidor não me precisava de me preocupar com nada, mas antes de ter que aprender a usar json e instalar o certificado queria saber as vossas sugestões. Aguardo as vossas sugestões de forma a eu fazer algo em condições e ficar descansado no que diz respeito à segurança dos dados de outras pessoas com que vou ter de trabalhar. Cumprimentos a todos.
-
Boa tarde pessoal. Estou a começar um curso de HTML para iniciantes mas estou com um problema logo no inicio do curso e não consigo perceber o porquê do erro. Basicamente crio a estrutura da página no notepad++ e na hora de pré visualizar a página no browser, a página aparece-me tal e qual está no notepad++, ou seja, em vez de criar uma página apenas com o conteúdo que criei aparece-me uma página com todas as tags criadas. Isto é o que me aparece na pré visualização da página: <!DOCTYPE html> <html lang="pt-pt"> <head> <meta charset="UTF-8"/> <title>Curso de HTML5</title> </head> <body> <h1>Olá, Mundo!<h1/> </body> </html> Tentei abri noutros navegadores e o resultado é o mesmo. Reparei num pormenor que não sei se poderá ser o problema disto que é, na barra onde aparece o domínio do site aparece que o formato do documento está em txt. mas não sei como contornar isso. Gostava de saber se alguém tem algum conselho para me dar. Obrigado
.thumb.jpg.ad35f05a13063dbde47876e3328ea4fe.jpg)
