![Поддержка разметки и стилей [Браузерная игра]](/assets/images/logos/logo-white.webp "Поддержка разметки и стилей [Браузерная игра]"){kind=logo}
- 12, May 2024
- #1
У меня появилась действительно хорошая идея для браузерной игры, но совершенно дрянные навыки стиля.
Мне просто интересно, может ли кто-нибудь помочь мне со стилем.
Любой щедрый и щедрый программист, работающий на общественных началах, стал бы сейчас спасителем. Я прикрепил файл изображения того, как выглядит экран. Вот текущий код. HTML
Мне просто интересно, может ли кто-нибудь помочь мне со стилем.
Любой щедрый и щедрый программист, работающий на общественных началах, стал бы сейчас спасителем. Я прикрепил файл изображения того, как выглядит экран. Вот текущий код. HTML
body{
background-color:lightgrey;
}
.panel-body span{
display:block;
}
.panel-heading-style{
height: 20px;padding:0; padding-left:16px;
}
/*World Window*/
#world-window{
height:100%;
}
.world-output{
margin-bottom:4px;
}
.output-window{
padding:14px;
}
.text-output{
border:2px solid lightgrey;
}
.text-input{
margin-bottom:8px;
}
.skill-output{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; /* future proofing */
-khtml-border-radius: 4px; /* for old Konqueror browsers */
}
.text-output{
padding:12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; /* future proofing */
-khtml-border-radius: 4px; /* for old Konqueror browsers */
}
/* Location Window */
#location-output{
max-height:160px;
overflow:scroll;
overflow-x:hidden;
overflow-y:hidden;
}
.skill-output{
border:2px solid lightgrey;
height:40px;
line-height:40px
}
/* Progress Resets*/
progress, /* All HTML5 progress enabled browsers */
progress[role] /* polyfill */
{
/* gets rid of default border in Firefox and Opera. */
border: none;
/* Needs to be in here for Safari polyfill so background images work as expected. */
background-size: auto;
}
/* Polyfill */
progress[role]:after {
background-image: none; /* removes default background from polyfill */
}
/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
display: none;
}
/* Health Bar */
#health-bar {
color:red;
width:100%;
}
#health-bar::-webkit-progress-bar {
color: #ffeeee;
}
#health-bar::-webkit-progress-value {
background: red;
}
#health-bar::-moz-progress-bar {
background:red;
}
/* Polyfill */
#health-bar[aria-valuenow]:before {
background: black;
}
/* Mana Bar */
#mana-bar {
width:100%;
}
#mana-bar::-webkit-progress-bar {
}
#mana-bar::-webkit-progress-value {
}
#mana-bar::-moz-progress-bar {
} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=край"> <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1"> <title>Freeform Game</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjMuNy9jc3MvYm9vdHN0cmFwLm1pbip1m']https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css[/URL]" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjMuNy9jc3MvYm9vdHN0cmFwLXRoZW1lLm1pbip1m']https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css[/URL]" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Font Awesome --> <script src="[URL='https://lumtu.com/yti/a4CC4anNodHRwczovL3VzZS5mb250YXdlc29tZS5jb20vYTQyNjNjZGMzNMGZ']https://use.fontawesome.com/a4263cdc34.js[/URL]"></script> <link href='[URL='https://lumtu.com/yti/bhNNhbnNodHRwOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzP2ZhbWlseT1PcGVuK1uVG']http://fonts.googleapis.com/css?family=Open+Sans[/URL]' rel='stylesheet' type='text/css'> <!-- style --> <link rel="stylesheet" href="css/style.css" /> <!-- Jquery --> <script src="[URL='https://lumtu.com/yti/a4ii4anNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjEyLjQvanF1ZXJ5Lm1pb1mL']https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js[/URL]"></script> <!-- Draggable Scroll JS --> <script src="lib/draggablescroll/draggablescroll.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Character</small></div> <div class="panel-body"> <span><small><b>Name:</b></small></span> <span><small><b>Gold:</b></small></span> <span><small><b>CP:</b></small></span> <span><small><b>Job:</b></small></span> <hr> <span>Health:</span> <progress id="health-bar" max="100" value="50"> <strong>Progress: 60% done.</strong> </progress> <span>Mana:</span> <progress id="mana-bar" max="100" value="100"> <strong>Progress: 60% done.</strong> </progress> </div> </div> <div id="location-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Location</small></div> <div class="panel-body"> <span>Current: Sentient River</span> <span style="margin-bottom:8px;">Weather: Fair</span> <form class="form" role="form" style="margin-bottom:8px;"> <input class="form-control" type="text" name="locationSearch" /> </form> <div id="location-output" class="dragscroll"> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> </div> </div> </div> <div id="skills-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Skills</small></div> <div class="panel-body"> <span>Last Result</span> <p><span style="color:blue;">barely passed swimming check.</span></p> <span>Skill List</span> </div> </div> <!-- Left Column End --> </div> <div class="col-md-6"> <!-- Center Column Start --> <div class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>World: Sentient River</small></div> <div id="location-description" style="padding:12px;padding-left:12px;"> <p>The Sentient River, was named after the ascended beings that were said to have created the flowing currents.
Lush green vegitation grows about the mossy stones along the banks.
Glessian Trees, and Sorian Cedars, are the most prominent trees in the area.
<a href="#">Read More</a></p> </div> <div id="output-window"> <!-- Game Output Start --> <div class="skill-output world-output"> <p><img src="images/eye.png" style="margin-bottom:2px;"/><span style="color:blue;">Dalia</span> barely passes a swimming skill check.</span></p> </div> <div class="text-output world output"> <p><span style="color:blue;">Dalia</span> Gripped by fear of the water, Dalia's beginning to feel like jumping in wasn't such a good idea afterall.
She can feel the undertow pulling her downward.
A mouth full of water, sends seering pain through her lungs.
Her stomach is in knots.
"Please God's, don't let me drown here." She says to herself, as she struggles for the surface.</span></p> </div> <!-- Game Output End --> </div> <div class="panel-body"> <textarea id="text-input" rows="8" class="form-control" maxlength="480"></textarea> <input type="submit" class="btn btn-default" value="Submit" style="float:right;" /> </div> </div> <!-- Center Column End --> </div> <div class="col-md-3"> <!-- Right Column Start --> <div id="characters-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Characters</small></div> <div class="panel-body"> <form class="form" role="form"> <input class="form-control" type="text" name="locationSearch" /> </form> <div id="location-output"></div> </div> </div> <div id="equipped-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Equipped</small></div> <div class="panel-body"> <span>Head:</span> <span>Body:</span> <span>Hands:</span> <span>Feet:</span> <span>Left Ring:</span> <span>Right Ring:</span><br> <span>Held Left:</span> <span>Held Right:</span> <div id="location-output"></div> </div> </div> <div id="inventory-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Inventory</small></div> <div class="panel-body"> <span>Max Carry: 120 Lbs</span> </div> </div> <div id="spells-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Spells</small></div> <div class="panel-body"> </div> </div> <!-- Right Column End --> </div> </div> </div> </body> 
![[Тажетдинов Тимур] Как получить туристическую визу в Америку](/assets/images/icons/forum5.png){kind=icon}
![[Андрей Кузнецов] Товарные рынки. Фундаментальный подход к торговле](/assets/images/icons/forum7.png){kind=icon}
