Я не уверен, что это правильное место, чтобы задать такой вопрос, если нет, отправьте меня в правильном направлении, пожалуйста!
Я занят проектом, но не знаю, как его построить. У меня есть базовый опыт работы с HTML, CSS, Javascript и PHP. Я хочу создать приложение, но сначала мне нужно протестировать его с моими пользователями. Поэтому я создаю первый прототип своей идеи, который я объясню далее.
JSFiddle
Я никогда не использовал JSFiddle, поэтому надеюсь, что это сработает.
https://jsfiddle.net/fpuL8mw3/1/
body {
background-image: url("https://i.postimg.cc/QFWTbdNS/background.png");
}
.image-row {
margin-top: 75% !important;
}
#avatar {
margin-left: 38%;
}
.icon-row {
position: absolute;
top: 200px;
}
img.icon-morphy {
position: absolute;
top: 35px;
width: 30px;
height: 30px;
left: 55px;
}
.donut {
margin-left: 20px;
width: 80px;
}
img.hoverImages {
float: left;
animation-name: float;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1s;
}
@keyframes float {
from {
margin-top: 0px;
}
to {
margin-top: 10px;
}
}
.slidecontainer {
width: 100%;
/* Width of the outside container */
}
/* The slider itself */
.slider {
-webkit-appearance: none;
/* Override default CSS styles */
appearance: none;
width: 100%;
/* Full-width */
height: 25px;
/* Specified height */
background: #d3d3d3;
/* Grey background */
outline: none;
/* Remove outline */
opacity: 0.7;
/* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s;
/* 0.2 seconds transition on hover */
transition: opacity .2s;
visibility: visible;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1;
/* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* Override default look */
appearance: none;
width: 25px;
/* Set a specific slider handle width */
height: 25px;
/* Slider handle height */
background: #4CAF50;
/* Green background */
cursor: pointer;
/* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px;
/* Set a specific slider handle width */
height: 25px;
/* Slider handle height */
background: #4CAF50;
/* Green background */
cursor: pointer;
/* Cursor on hover */
}
{{ .
<!DOCTYPE html>
<html>
<head>
<title>
Morphy
</title>
<link href="http://code.ionicframework.com/1.3.3/css/ionic.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="css/main.css" rel="stylesheet" type="text/css">
</link>
</link>
</meta>
</link>
</head>
<body>
<div class="modals">
<!-- The modal -->
<div aria-hidden="true" aria-labelledby="modalLabelSmall" class="modal fade" id="smallShoes" role="dialog" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="modalLabelSmall">
Beweging
</h4>
</div>
<div class="modal-body">
<input class="slider" id="myRange" max="100" min="1" type="range" value="50">
</input>
</div>
</div>
</div>
</div>
<div class="row icon-row">
<div class="col col-30">
<img class="icon-morphy" src="https://i.postimg.cc/kV3thPBC/beweging.png">
<svg class="donut" data-target="#smallShoes" data-toggle="modal" viewbox="0 0 42 42">
<circle class="donut-hole" cx="21" cy="21" fill="transparent" r="15.91549430918954">
</circle>
<circle class="donut-ring" cx="21" cy="21" fill="transparent" r="15.91549430918954" stroke="#d2d3d4" stroke-width="3">
</circle>
<circle class="donut-segment red-value" cx="21" cy="21" fill="transparent" r="15.91549430918954" stroke="red" stroke-dasharray="85 15" stroke-dashoffset="25" stroke-width="3">
</circle>
<circle class="donut-segment white-value" cx="21" cy="21" fill="transparent" r="15.91549430918954" stroke="white" stroke-dasharray="15 85" stroke-dashoffset="40" stroke-width="3">
</circle>
</svg>
</img>
</div>
<div class="col col-30">
</div>
<div class="col col-30">
</div>
</div>
<div class="row image-row">
<div class="col col-100">
<img class="hoverImages" id="avatar" src="https://i.postimg.cc/qzFKy3rz/avatar.png">
</img>
</div>
</div>
<div class="bar bar-header bar-light">
<h1 class="title">
bar-light
</h1>
</div>
</div>
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon ion-home">
</i> Home
</a>
<a class="tab-item">
<i class="icon ion-star">
</i> Favorites
</a>
<a class="tab-item" href="/dashboard.html">
<i class="icon ion-gear-a">
</i> Settings
</a>
</div>
</body>
<script>
$("#myRange").change(function() {
var bewegingValue = $("#myRange").val();
$(".red-value").attr("stroke-dashoffset", bewegingValue);
});
</script>
</html>
На моем компьютере мой проект работает так, как задумано, но на JSFiddle - нет. По какой-то причине он не использует API. Извините, если код не отформатирован правильно или аккуратно в этом отношении. Я все еще учусь и очень хочу учиться тоже. Извините, если что-то не так.
Идея
Идея проекта - приложение, которое измеряет количество упражнений, еды и сна пользователя с помощью Apple Watch. Stepcounter или GPS для упражнений, пользователь может ввести потребление пищи, и сон измеряется счетчиком сердцебиения. Аватар изменяется в зависимости от того, что приложение получает от пользователя. Например, если пользователь хорошо спит, аватар отражает это, имея больше открытых глаз. Если пользователь плохо спит, аватар также отражает это, имея более закрытые красные глаза. Над аватаркой находятся метры для упражнений, приема пищи и сна. Они отражают уровни пользователя, если круги заполнены, пользователь здоров, а если они пусты, пользователь нездоров.
Концепция
Для моей концепции я пробую следующее. Я хочу протестировать прототип с моими пользователями на своем мобильном телефоне. Приложение написано на HTML, CSS, Javascript, Bootstrap, Ionic и Jquery. Когда пользователь нажимает на круг упражнений, еды или сна, открывается оверлей, и пользователь может ввести количество времени, потраченное на упражнения, сон или количество потребляемых калорий. После подтверждения ввода аватар переходит на новую версию, и правильный счетчик обновляется для отображения ввода.
Визуальное объяснение
https://docdro.id/Zaq2SbN
Прототип Adobe XD
https://xd.adobe.com/view/1b38a873-57a3-4c1d-4ff8-875b026eaba4-6d09/
Помощь любого рода очень ценится!