PHP ボタンの枠が出ない
解決したいこと
PHPで"Create!"ボタンを作りましたが上手く枠が出来ません。
解決方法をご教示願います
index.php
<?php
require_once('installation.php');
$CheckSheet = new CheckSheet();
$CheckSheetData = $CheckSheet->getAll();
function h($s)
{
return htmlspecialchars($s, ENT_QUOTES, "UTF-8");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECSS3.0</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href="css/slick.css" rel="stylesheet" type="text/css">
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<style>
#container2 {
overflow: hidden;
}
canvas {
float: left;
}
</style>
</head>
<body>
<script src="script.js"></script>
<div class="header">
<div class="header-logo" font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
C<span style="font-size:0.3em;font-weight:normal;">heck</span>
S<span style="font-size:0.3em;font-weight:normal;">heet</span>
S<span style="font-size:0.3em;font-weight:normal;">ystem</span>
</div>
<div id="container">
<div class="circle icon">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</div>
</div>
<div id="containerLogo">
<a href="index.html"><img src="images/TCD_B.jpg"></a>
</div>
</div>
<nav id="nav">
<ul>
<li><a href="index.html">Menu</a></li>
</ul>
</nav>
<div id='container2'>
<canvas width='500' height='400'></canvas>
</div>
<form action="search.php" method="post">
<div class="SDkEP">
<div id="inputWrapper">
<div class="inputTextBox" >
<input id="input1" type="search" name="ED" autocomplete="off" aria-live="polite" placeholder="ED を入力">
</div>
<div class="inputTextBox">
<input id="input2" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">
</div>
</div>
</div>
<input type="submit" name="submit" value="Create!">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/tesseract.min.js'></script>
<script>
const canvas = document.querySelector('canvas');
const image = document.createElement('video');
const context = canvas.getContext('2d');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const rectangles = [{
left: 100,
top: 175,
width: 200,
height: 75,
},
{
left: 305,
top: 175,
width: 85,
height: 50,
},
];
let textBlocks = [];
image.videoWidth = canvas.width;
image.videoHeight = canvas.height;
navigator.mediaDevices.getUserMedia({
video: {
facingMode: {
ideal: 'environment'
},
}
})
.then(stream => {
image.srcObject = stream;
image.play();
videoDisplay();
setTimeout(analysis);
});
// 赤枠の発火条件_Textデータの個数が0以上
const videoDisplay = () => {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
context.strokeStyle = "rgb(255, 0, 0) ";
context.lineWidth = 3;
// Path描画（閉じたオブジェクト）_ED
context.beginPath(100, 175);
context.lineTo(300, 175);
context.lineTo(300, 250);
context.lineTo(100, 250);
context.lineTo(100, 175);
context.closePath();
context.stroke();
// Path描画（閉じたオブジェクト）_DS
context.beginPath(305, 175);
context.lineTo(390, 175);
context.lineTo(390, 225);
context.lineTo(305, 225);
context.lineTo(305, 175);
context.closePath();
context.stroke();
requestAnimationFrame(videoDisplay);
};
const analysis = () => {
const scheduler = Tesseract.createScheduler();
const worker = Tesseract.createWorker();
const worker2 = Tesseract.createWorker();
(async () => {
await worker.load();
await worker2.load();
await worker.loadLanguage('eng');
await worker2.loadLanguage('eng');
await worker.initialize('eng');
await worker2.initialize('eng');
scheduler.addWorker(worker);
scheduler.addWorker(worker2);
const results = await Promise.all(rectangles.map((rectangle) => (
scheduler.addJob('recognize', canvas.toDataURL(), {
rectangle
})
)));
await scheduler.terminate();
input1.value = results[0].data.text
input2.value = results[1].data.text
setTimeout(analysis, 1000);
})();
};
</script>
</html>
stylesheet.css
body {
font-family: "Avenir Next";
color: #202124;
}
/* header */
.header{
background-color:#26d0c9;
color:#fff;
padding: 20px 40px;
position: relative;
}
.header-logo{
/* float:left; */
font-size:46px;
/* padding:20px 40px; */
text-align: center;
font-weight:bold;
}
.copy-container span{
color:#ff4a4a;
}
#container {
background: tomato;
display: inline-block;
border-radius: 500px;
margin: 10px;
position: absolute;
top: 10px;
right: 0;
padding: 18px;
cursor: pointer;
}
#containerLogo {
display: inline-block;
border-radius: 500px;
margin: 10px;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
}
.circle {
position: relative;
width: 24px;
height: 24px;
}
.bar {
position: absolute;
height: 3px;
width: 100%;
background: white;
border-radius: 4px;
transition: ease 0.3s;
}
.top {
top: 18%;
}
.middle {
top: 48%;
}
.bottom {
top: 78%;
}
.close .top {
transform: rotate(45deg);
top: 48%;
}
.close .middle{
opacity: 0;
}
.close .bottom {
transform: rotate(-45deg);
top: 48%;
}
/* nav */
nav {
opacity: 0;
visibility: hidden;
transition: 0.3s;
height: 0;
/* float:left; */
}
nav.active{
opacity: 1;
visibility: visible;
float:right;
}
ul {
display: flex;
justify-content: center;
}
li{
list-style:none;
padding: 8px;
}
/* main */
.main{
padding:25px 40px;
}
/* contents */
.contents{
display: flex;
justify-content: center;
}
#container2{
display: flex;
justify-content: center;
}
.contents-item{
/* width: 125px; */
height: auto;
float:left;
margin: 50px 50px 0px 50px;
text-align: center;
}
.contents-item img{
width:100%;
}
.contents-item p{
font-size:46px;
margin: 0px;
}
/* SDkEP */
.SDkEP {
display: flex;
align-items: center;
flex-direction: column;
margin: 10px 0px 10px 0px;
}
.contents-item:nth-of-type(2) {
margin-left: 50px;
}
.contents-item_Camera p{
font-size:46px;
margin: 0px;
}
.contents-item_Create p{
font-size:46px;
margin: 0px;
}
.inputTextBox {
border: 1px solid #000;
border-radius: 50px;
padding: 8px 40px;
width: 300px;
}
.inputTextBox:nth-of-type(2) {
margin-top: 16px;
}
input {
background-color: var(--search-box-bg, white);
border: none;
border-radius: calc(0.5 * var(--ntp-realbox-height));
color: var(--search-box-text);
font-size: 16px;
height: 100%;
/* outline: none; */
padding-inline-end: 40px;
padding-inline-start: 52px;
position: relative;
width: 100%;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
/*背景*/
.btn-wrap {
margin: 20px;
}
a.btn-switch {
color: #333;
border: 1px solid #ddd;
border-radius: 100vh;
background: #fbfbfc;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#fbfbfc),
to(#dcddde)
);
background: -webkit-linear-gradient(top, #fbfbfc 0%, #dcddde 100%);
background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
-webkit-box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
}
a.btn-switch span {
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a.btn-switch:hover {
-webkit-box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
inset 0 3px 3px rgba(0, 0, 0, 0.18);
box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
inset 0 3px 3px rgba(0, 0, 0, 0.18);
}
a.btn-switch:hover span {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
0 likes
