API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 12th, 2017
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 15.92 KB | None | 0 0
raw download clone embed print report
  1. </html>
  2. <head>
  3.  
  4.     <style>
  5.  
  6.  
  7.     html, body * { box-sizing: border-box; font-family: 'Open Sans', sans-serif; }
  8.  
  9. body {
  10.   background:
  11.     linear-gradient(
  12.     rgba(246,247,249,0.8),
  13.     rgba(246,247,249,0.8)),
  14.     url(https://dl.dropboxusercontent.com/u/22006283/preview/codepen/sky-clouds-cloudy-mountain.jpg) no-repeat center center fixed;
  15.   background-size: cover;
  16. }
  17.  
  18. .container {
  19.   width: 100%;
  20.   padding-top: 60px;
  21.   padding-bottom: 100px;
  22. }
  23.  
  24. .frame {
  25.   height: 575px;
  26.   width: 430px;
  27.   background:
  28.     linear-gradient(
  29.     rgba(35,43,85,0.75),
  30.     rgba(35,43,85,0.95)),
  31.     url(https://dl.dropboxusercontent.com/u/22006283/preview/codepen/clouds-cloudy-forest-mountain.jpg) no-repeat center center;
  32.   background-size: cover;
  33.   margin-left: auto;
  34.   margin-right: auto;
  35.   border-top: solid 1px rgba(255,255,255,.5);
  36.   border-radius: 5px;
  37.   box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
  38.   overflow: hidden;
  39.   transition: all .5s ease;
  40. }
  41.  
  42. .frame-long {
  43.   height: 615px;
  44. }
  45.  
  46. .frame-short {
  47.   height: 400px;
  48.   margin-top: 50px;
  49.   box-shadow: 0px 2px 7px rgba(0,0,0,0.1);
  50. }
  51.  
  52. .nav {
  53.   width: 100%;
  54.   height: 100px;
  55.   padding-top: 40px;
  56.   opacity: 1;
  57.   transition: all .5s ease;
  58. }
  59.  
  60. .nav-up {
  61.   transform: translateY(-100px);
  62.   opacity: 0;
  63. }
  64.  
  65. li {
  66.   padding-left: 10px;
  67.   font-size: 18px;
  68.   display: inline;
  69.   text-align: left;
  70.   text-transform: uppercase;
  71.   padding-right: 10px;
  72.   color: #ffffff;
  73. }
  74.  
  75. .signin-active a {
  76.   padding-bottom: 10px;
  77.   color: #ffffff;
  78.   text-decoration: none;
  79.   border-bottom: solid 2px #1059FF;
  80.   transition: all .25s ease;
  81.   cursor: pointer;
  82. }
  83.  
  84. .signin-inactive a {
  85.   padding-bottom: 0;
  86.   color: rgba(255,255,255,.3);
  87.   text-decoration: none;
  88.   border-bottom: none;
  89.   cursor: pointer;
  90. }
  91.  
  92. .signup-active a {
  93.   cursor: pointer;
  94.   color: #ffffff;
  95.   text-decoration: none;
  96.   border-bottom: solid 2px #1059FF;
  97.   padding-bottom: 10px;
  98. }
  99.  
  100. .signup-inactive a {
  101.   cursor: pointer;
  102.   color: rgba(255,255,255,.3);
  103.   text-decoration: none;
  104.   transition: all .25s ease;
  105. }
  106.  
  107. .form-signin {
  108.   width: 430px;
  109.   height: 375px;
  110.     font-size: 16px;
  111.     font-weight: 300;
  112.   padding-left: 37px;
  113.   padding-right: 37px;
  114.   padding-top: 55px;
  115.   transition: opacity .5s ease, transform .5s ease;
  116. }
  117.  
  118. .form-signin-left {
  119.   transform: translateX(-400px);
  120.   opacity: .0;
  121. }
  122.  
  123. .form-signup {
  124.   width: 430px;
  125.   height: 375px;
  126.     font-size: 16px;
  127.     font-weight: 300;
  128.   padding-left: 37px;
  129.   padding-right: 37px;
  130.   padding-top: 55px;
  131.   position: relative;
  132.   top: -375px;
  133.   left: 400px;
  134.   opacity: 0;
  135.   transition: all .5s ease;
  136. }
  137.  
  138. .form-signup-left {
  139.   transform: translateX(-399px);
  140.   opacity: 1;
  141. }
  142.  
  143. .form-signup-down {
  144.   top: 0px;
  145.   opacity: 0;
  146. }
  147.  
  148. .success {
  149.   width: 80%;
  150.   height: 150px;
  151.   text-align: center;
  152.   position: relative;
  153.   top: -890px;
  154.   left: 450px;
  155.   opacity: .0;
  156.   transition: all .8s .4s ease;
  157. }
  158.  
  159. .success-left {
  160.   transform: translateX(-406px);
  161.   opacity: 1;
  162. }
  163.  
  164. .successtext {
  165.   color: #ffffff;
  166.     font-size: 16px;
  167.     font-weight: 300;
  168.   margin-top: -35px;
  169.   padding-left: 37px;
  170.   padding-right: 37px;
  171. }
  172.  
  173. #check path {
  174.     stroke: #ffffff;
  175.     stroke-linecap:round;
  176.     stroke-linejoin:round;
  177.     stroke-width: .85px;
  178.     stroke-dasharray: 60px 300px;
  179.     stroke-dashoffset: -166px;
  180.     fill: rgba(255,255,255,.0);
  181.     transition: stroke-dashoffset 2s ease .5s, fill 1.5s ease 1.0s;
  182. }
  183.  
  184. #check.checked path {
  185.     stroke-dashoffset: 33px;
  186.     fill: rgba(255,255,255,.03);
  187. }
  188.  
  189. .form-signin input, .form-signup input {
  190.   color: #ffffff;
  191.   font-size: 13px;
  192. }
  193.  
  194. .form-styling {
  195.   width: 100%;
  196.   height: 35px;
  197.     padding-left: 15px;
  198.     border: none;
  199.     border-radius: 20px;
  200.   margin-bottom: 20px;
  201.   background: rgba(255,255,255,.2);
  202. }
  203.  
  204. label {
  205.   font-weight: 400;
  206.   text-transform: uppercase;
  207.   font-size: 13px;
  208.   padding-left: 15px;
  209.   padding-bottom: 10px;
  210.   color: rgba(255,255,255,.7);
  211.   display: block;
  212. }
  213.  
  214. :focus {outline: none;
  215. }
  216.  
  217. .form-signin input:focus, textarea:focus, .form-signup input:focus, textarea:focus {
  218.     background: rgba(255,255,255,.3);
  219.     border: none;
  220.     padding-right: 40px;
  221.     transition: background .5s ease;
  222.  }
  223.  
  224. [type="checkbox"]:not(:checked),
  225. [type="checkbox"]:checked {
  226.   position: absolute;
  227.   display: none;
  228. }
  229.  
  230. [type="checkbox"]:not(:checked) + label,
  231. [type="checkbox"]:checked + label {
  232.   position: relative;
  233.   padding-left: 85px;
  234.   padding-top: 2px;
  235.   cursor: pointer;
  236.   margin-top: 8px;
  237. }
  238.  
  239. [type="checkbox"]:not(:checked) + label:before,
  240. [type="checkbox"]:checked + label:before,
  241. [type="checkbox"]:not(:checked) + label:after,
  242. [type="checkbox"]:checked + label:after {
  243.   content: '';
  244.   position: absolute;
  245. }
  246.  
  247. [type="checkbox"]:not(:checked) + label:before,
  248. [type="checkbox"]:checked + label:before {
  249.   width: 65px;
  250.   height: 30px;
  251.   background: rgba(255,255,255,.2);
  252.   border-radius: 15px;
  253.   left: 0;
  254.   top: -3px;
  255.   transition: all .2s ease;
  256. }
  257.  
  258. [type="checkbox"]:not(:checked) + label:after,
  259. [type="checkbox"]:checked + label:after {
  260.   width: 10px;
  261.   height: 10px;
  262.   background: rgba(255,255,255,.7);
  263.   border-radius: 50%;
  264.   top: 7px;
  265.   left: 10px;
  266.   transition: all .2s ease;
  267. }
  268.  
  269. /* on checked */
  270. [type="checkbox"]:checked + label:before {
  271.   background: #0F4FE6;
  272. }
  273.  
  274. [type="checkbox"]:checked + label:after {
  275.   background: #ffffff;
  276.   top: 7px;
  277.   left: 45px;
  278. }
  279.  
  280. [type="checkbox"]:checked + label .ui,
  281. [type="checkbox"]:not(:checked) + label .ui:before,
  282. [type="checkbox"]:checked + label .ui:after {
  283.   position: absolute;
  284.   left: 6px;
  285.   width: 65px;
  286.   border-radius: 15px;
  287.   font-size: 14px;
  288.   font-weight: bold;
  289.   line-height: 22px;
  290.   transition: all .2s ease;
  291. }
  292.  
  293. [type="checkbox"]:not(:checked) + label .ui:before {
  294.   content: "no";
  295.   left: 32px;
  296.   color: rgba(255,255,255,.7);
  297. }
  298.  
  299. [type="checkbox"]:checked + label .ui:after {
  300.   content: "yes";
  301.   color: #ffffff;
  302. }
  303.  
  304. [type="checkbox"]:focus + label:before {
  305.   box-sizing: border-box;
  306.   margin-top: -1px;
  307. }
  308.  
  309. .btn-signup {
  310.   float: left;
  311.   font-weight: 700;
  312.   text-transform: uppercase;
  313.   font-size: 13px;
  314.   text-align: center;
  315.   color: #ffffff;
  316.   padding-top: 8px;
  317.   width: 100%;
  318.   height: 35px;
  319.     border: none;
  320.     border-radius: 20px;
  321.   margin-top: 23px;
  322.   background-color: #1059FF;
  323. }
  324.  
  325. .btn-signin {
  326.   float: left;
  327.   padding-top: 8px;
  328.   width: 100%;
  329.   height: 35px;
  330.     border: none;
  331.     border-radius: 20px;
  332.   margin-top: -8px;
  333. }
  334.  
  335. .btn-animate {
  336.   float: left;
  337.   font-weight: 700;
  338.   text-transform: uppercase;
  339.   font-size: 13px;
  340.   text-align: center;
  341.   color: rgba(255,255,255, 1);
  342.   padding-top: 8px;
  343.   width: 100%;
  344.   height: 35px;
  345.     border: none;
  346.     border-radius: 20px;
  347.   margin-top: 23px;
  348.   background-color: rgba(16,89,255, 1);
  349.   left: 0px;
  350.   top: 0px;
  351.   transition: all .5s ease, top .5s ease .5s, height .5s ease .5s, background-color .5s ease .75s;
  352. }
  353.  
  354. .btn-animate-grow {
  355.   width: 130%;
  356.   height: 625px;
  357.   position: relative;
  358.   left: -55px;
  359.   top: -420px;
  360.   color: rgba(255,255,255,0);
  361.   background-color: rgba(255,255,255,1);
  362. }
  363.  
  364. a.btn-signup:hover, a.btn-signin:hover {
  365.     cursor: pointer;
  366.     background-color: #0F4FE6;
  367.     transition: background-color .5s;
  368. }
  369.  
  370. .forgot {
  371.   height: 100px;
  372.   width: 80%;
  373.   margin-left: auto;
  374.   margin-right: auto;
  375.   text-align: center;
  376.   padding-top: 24px;
  377.   margin-top: -535px;
  378.   border-top: solid 1px rgba(255,255,255,.3);
  379.   transition: all 0.5s ease;
  380. }
  381.  
  382. .forgot-left {
  383.   transform: translateX(-400px);
  384.   opacity: 0;
  385. }
  386.  
  387. .forgot-fade {
  388.   opacity: 0;
  389. }
  390.  
  391. .forgot a {
  392.   color: rgba(255,255,255,.3);
  393.   font-weight: 400;
  394.   font-size: 13px;
  395.   text-decoration: none;
  396. }
  397.  
  398. .welcome {
  399.   width: 100%;
  400.   height: 50px;
  401.   position: relative;
  402.   color: rgba(35,43,85,0.75);
  403.   opacity: 0;
  404.   transition: transform 1.5s ease .25s, opacity .1s ease 1s;
  405. }
  406.  
  407. .welcome-left {
  408.   transform: translateY(-780px);
  409.   opacity: 1;
  410. }
  411.  
  412. .cover-photo {
  413.   height: 150px;
  414.   position: relative;
  415.   left: 0px;  top: -900px;
  416.   background:
  417.     linear-gradient(
  418.     rgba(35,43,85,0.75),
  419.     rgba(35,43,85,0.95)),
  420.     url(https://dl.dropboxusercontent.com/u/22006283/preview/codepen/landscape-nature-man-person.jpeg);
  421.   background-size: cover;
  422.   opacity: 0;
  423.   transition: all 1.5s ease 0.55s;
  424. }
  425.  
  426. .cover-photo-down {
  427.   top: -575px;
  428.   opacity: 1;
  429. }
  430.  
  431. .profile-photo {
  432.   height: 125px;
  433.   width: 125px;
  434.   position: relative;
  435.   border-radius: 70px;
  436.   left: 155px;
  437.   top: -1000px;
  438.   background: url(https://dl.dropboxusercontent.com/u/22006283/preview/codepen/nature-water-rocks-hiking.jpg);
  439.   background-size: 100% 135%;
  440.   background-position: 100% 100%;
  441.   opacity: 0;
  442.   transition: top 1.5s ease 0.35s, opacity .75s ease .5s;
  443.   border: solid 3px #ffffff;
  444. }
  445.  
  446. .profile-photo-down {
  447.   top: -636px;
  448.   opacity: 1;
  449. }
  450.  
  451. h1 {
  452.   color: #ffffff;
  453.   font-size: 35px;
  454.     font-weight: 300;
  455.   text-align: center;
  456. }
  457.  
  458. .btn-goback {
  459.   position: relative;
  460.   margin-right: auto;
  461.   top: -400px;
  462.   float: left;
  463.   padding: 8px;
  464.   width: 83%;
  465.   margin-left: 37px;
  466.   margin-right: 37px;
  467.   height: 35px;
  468.     border-radius: 20px;
  469.   font-weight: 700;
  470.   text-transform: uppercase;
  471.   font-size: 13px;
  472.   text-align: center;
  473.   color: #1059FF;
  474.   margin-top: -8px;
  475.   border: solid 1px #1059FF;
  476.   opacity: 0;
  477.   transition: top 1.5s ease 0.35s, opacity .75s ease .5s;
  478. }
  479.  
  480. .btn-goback-up {
  481.   top: -1080px;
  482.   opacity: 1;
  483. }
  484.  
  485. a.btn-goback:hover {
  486.     cursor: pointer;
  487.     background-color: #0F4FE6;
  488.     transition: all .5s;
  489.     color: #ffffff;
  490. }
  491.  
  492. /* refresh button styling */
  493.  
  494. #refresh {
  495.     position: fixed;
  496.     bottom: 20px;
  497.     right: 20px;
  498.     background-color: #ffffff;
  499.     width: 50px;
  500.     height: 50px;
  501.     border-radius: 25px;
  502.     box-shadow: 0px 2px 7px rgba(0,0,0,0.1);
  503.     padding: 13px 0 0 13px;
  504. }
  505.  
  506. .refreshicon {
  507.     fill: #d3d3d3;
  508.     transform: rotate(0deg);
  509.     transition: fill .25s ease, transform .25s ease;
  510. }
  511.  
  512. .refreshicon:hover {
  513.   cursor: pointer;
  514.   fill: #1059FF;
  515.   transform: rotate(180deg);
  516. }
  517. </style>
  518. </head>
  519. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  520.  
  521. <div class="container">
  522.   <div class="frame">
  523.     <div class="nav">
  524.       <ul class"links">
  525.         <li class="signin-active"><a class="btn">Pretrazi vest</a></li>
  526.         <li class="signup-inactive"><a class="btn"> </a></li>
  527.       </ul>
  528.     </div>
  529.     <div ng-app ng-init="checked = false">
  530.                         <form class="form-signin" action="" method="post" name="form">
  531.            <label for="kategorija">Kategorija</label>
  532.           <input class="form-styling" type="text" name="kategorija" placeholder=""/>
  533.           <label for="datum">Datum</label>
  534.           <!--<input type="date" name="datum" placeholder=""/> -->
  535.           <input class="form-styling" type="date" name="datum" placeholder=""/>
  536.           <label for="naslov">Naslov</label>
  537.           <input class="form-styling" type="text" name="naslov" placeholder=""/>
  538.           <label for="vest">Vest</label>
  539.           <input class="form-styling" type="text" name="vest" placeholder=""/>
  540.           <input class="btn-animate" type="submit" value="Submit">
  541.         <!--  <label for="checkbox" ><span class="ui"></span></label>
  542.           <div class="btn-animate">
  543.             <a class="btn-signin">Submit</a>
  544.           </div>
  545.       -->
  546.                         </form>
  547.        
  548.                         <form class="form-signup" action="" method="post" name="form">
  549.           <label for="fullname">Full name</label>
  550.           <input class="form-styling" type="text" name="kategorija" placeholder=""/>
  551.           <label for="email">Email</label>
  552.           <input class="form-styling" type="text" name="datum" placeholder=""/>
  553.           <label for="password">Password</label>
  554.           <input class="form-styling" type="text" name="naslov" placeholder=""/>
  555.           <input class="form-styling" type="text" name="vest" placeholder=""/>
  556.           <input type="date"/ name="datum" placeholder="">
  557.           <label for="confirmpassword">Confirm password</label>
  558.           <input class="form-styling" type="text" name="confirmpassword" placeholder=""/>
  559.           <a ng-click="checked = !checked" class="btn-signup">Sign Up</a>
  560.                         </form>
  561.      
  562.             <div  class="success">
  563.               <svg width="270" height="270" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  564.        viewBox="0 0 60 60" id="check" ng-class="checked ? 'checked' : ''">
  565.                  <path fill="#ffffff" d="M40.61,23.03L26.67,36.97L13.495,23.788c-1.146-1.147-1.359-2.936-0.504-4.314
  566.                   c3.894-6.28,11.169-10.243,19.283-9.348c9.258,1.021,16.694,8.542,17.622,17.81c1.232,12.295-8.683,22.607-20.849,22.042
  567.                   c-9.9-0.46-18.128-8.344-18.972-18.218c-0.292-3.416,0.276-6.673,1.51-9.578" />
  568.                 <div class="successtext">
  569.                    <p> Thanks for signing up! Check your email for confirmation.</p>
  570.                 </div>
  571.              </div>
  572.       </div>
  573.      
  574.       <div class="forgot">
  575.         <a href="#"></a>
  576.       </div>
  577.      
  578.       <div>
  579.         <div class="cover-photo"></div>
  580.         <div class="profile-photo"></div>
  581.         <h1 class="welcome">Welcome, Chris</h1>
  582.         <a class="btn-goback" value="Refresh" onClick="history.go()">Go back</a>
  583.       </div>
  584.   </div>
  585.    
  586.   <a id="refresh" value="Refresh" onClick="history.go()">
  587.     <svg class="refreshicon"   version="1.1" id="Capa_1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  588.          width="25px" height="25px" viewBox="0 0 322.447 322.447" style="enable-background:new 0 0 322.447 322.447;"
  589.          xml:space="preserve">
  590.          <path  d="M321.832,230.327c-2.133-6.565-9.184-10.154-15.75-8.025l-16.254,5.281C299.785,206.991,305,184.347,305,161.224
  591.                 c0-84.089-68.41-152.5-152.5-152.5C68.411,8.724,0,77.135,0,161.224s68.411,152.5,152.5,152.5c6.903,0,12.5-5.597,12.5-12.5
  592.                 c0-6.902-5.597-12.5-12.5-12.5c-70.304,0-127.5-57.195-127.5-127.5c0-70.304,57.196-127.5,127.5-127.5
  593.                 c70.305,0,127.5,57.196,127.5,127.5c0,19.372-4.371,38.337-12.723,55.568l-5.553-17.096c-2.133-6.564-9.186-10.156-15.75-8.025
  594.                 c-6.566,2.134-10.16,9.186-8.027,15.751l14.74,45.368c1.715,5.283,6.615,8.642,11.885,8.642c1.279,0,2.582-0.198,3.865-0.614
  595.                 l45.369-14.738C320.371,243.946,323.965,236.895,321.832,230.327z"/>
  596.     </svg>
  597.   </a>
  598. </div>
  599.  
  600. <?php
  601.  
  602. $servername = "localhost";
  603. $username = "root";
  604. $password = "";
  605.  
  606. if (isset($_POST['submit'])){
  607.  
  608. $kategorija = $_POST['kategorija'];
  609. $vest = $_POST['vest'];
  610. $datum = $_POST['datum'];
  611. $naslov = $_POST['naslov'];
  612. }
  613.  
  614. // Create connection
  615. $conn =new mysqli($servername, $username, $password);
  616.  
  617. // Check connection
  618. if ($conn->connect_error) {
  619.     die("Connection failed: " . $conn->connect_error);
  620. }
  621. //echo "Connected successfully";
  622. //$sql_db = "CREATE DATABASE Vesti_baza";
  623. /*if ($conn->query($sql_db) === TRUE) {
  624.     echo "Database created successfully";
  625. } else {
  626.     echo "Error creating database: " . $conn->error;
  627. }
  628.  
  629. $sql_table = "CREATE TABLE Vesti(
  630. id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  631. kategorija VARCHAR(30) NOT NULL,
  632. datum  DATE,
  633. naslov VARCHAR(30) NOT NULL,
  634. vest BLOB(50) NOT NULL
  635. )";
  636.  
  637. */
  638. mysqli_select_db($conn,'Vesti_baza') or die(mysql_error());
  639. //echo "SHOW TABLES LIKE 'Vesti'";
  640.  
  641. //echo $conn->query($sql_table);
  642. /*if ($conn->query($sql_table) === TRUE) {
  643.     echo "Table MyGuests created successfully";
  644. } else {
  645.     echo "Error creating table: " . $conn->error;
  646. }
  647. */
  648. //$sql_entry = "INSERT INTO Vesti (kategorija, datum, naslov, vest)
  649. //VALUES ('sport', '2008-7-04', 'Zvezda','Evrokup')";
  650. echo $datum;
  651. $sql_entry = "INSERT INTO Vesti (kategorija, datum, naslov, vest)
  652. VALUES ('".$_POST["kategorija"]."','".$_POST["datum"]."','".$_POST["naslov"]."','".$_POST["vest"]."')";
  653.  
  654. if ($conn->query($sql_entry) === TRUE) {
  655.     echo "New record created successfully";
  656. } else {
  657.     echo "Error: " . $sql_entry . "<br>" . $conn->error;
  658. }
  659.  
  660. $conn->close();
  661.  
  662.  
  663. ?>
  664. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!