templates/fishersquest/index.html.twig line 1

  1. {# ./templates/default/index.html.twig #}
  3. {% extends 'base.html.twig' %}
  5. {% block title %} Fisher's Quest {% endblock %}
  8.  {% block body %}
  11.      <div id="root"></div>
  13.      <video id="bgVideo" autoplay loop muted>
  14.          <source src="{{ asset('build/videos/Sequence 01.mp4') }}" type="video/mp4">
  15.      </video>
  17.      <div class="grid-container fluid">
  18.          <div class="grid-x">
  19.              <div class="small-12 medium-6 medium-offset-3 cell">
  20.                  <img src="{{ asset('/build/images/web/fq-logo.png') }}" style="filter: drop-shadow(5px 5px 10px #000);" />
  21.              </div>
  22.              <div class="small-12 cell">
  23.                  <div style="text-align: center;">
  24.                     <a href="{{ url('fishers_quest_game', { subdomain: 'fishersquest', domain: app_domain }) }}" class="button family-orgovan" style="font-size: 3em; margin: 0px auto 50px auto; ">PLAY</a>
  25.                  </div>
  26.              </div>
  27.          </div>
  28.      </div>
  30.      <div class="grid-container fluid" style="background: #1b212d;">
  31.          <div class="grid-x grid-padding-x">
  32.              <div class="small-12 cell">
  33.                  <div class="grid-container" style="padding: 75px 0 50px 0;">
  34.                      <div class="grid-x grid-padding-x">
  35.                          <div class="small-12 medium-4 cell">
  36.                             <img src="{{ asset('/build/images/web/fq-logo.png') }}" />
  37.                          </div>
  38.                          <div class="small-12 medium-8 cell content-section">
  39.                              <div class="grid-x">
  40.                                  <div class="small-12 cell">
  41.                                      <h2 class="family-orgovan">Time for the greatest adventure yet!</h2>
  42.                                     <p>
  43.                                         Welcome to <strong>Fisher's Quest.</strong> Things might seem normal around here if you're an ordinary angler,
  44.                                         but if you have the fortitude to be an <strong><em>Extreme Angler</em></strong>, then you might just have
  45.                                         what it takes to reveal the <em>real</em> mysteries of the deep sea.
  46.                                     </p>
  47.                                      <p>Start by casting your rod and pulling in anything and everything you can snag. Convert your Equipment and Catches
  48.                                          into NFTs to boost your <em>luck</em> and you could reel in something <span style="color: #b471e7;"><strong>rare</strong></span>, <span style="color: #E8EC32;"><strong>epic</strong></span>, or, who knows, maybe even <span style="color: #f77bd6;"><strong><em>legendary</em></strong></span>.
  49.                                          But it won't be easy - you'll need to <span style="color: cadetblue;"><strong>catch</strong></span>, <span style="color: cadetblue;"><strong>salvage</strong></span>, and <span style="color: cadetblue;"><strong>craft</strong></span> your way to the real treasure.
  50.                                      </p>
  51.                                  </div>
  52. {#                                 <div class="small-12 medium-4 medium-offset-1 cell">#}
  53. {#                                     <div class="otter-bg" style="border-radius: 350px; height: 350px; width: 350px; border: 5px solid #fff;">#}
  54. {#                                         <img style="-webkit-transform: scaleX(-1); transform: scaleX(-1);" src="{{ asset('/build/images/web/OtterAnimsv2.gif') }}" />#}
  55. {#                                     </div>#}
  56. {#                                 </div>#}
  57.                              </div>
  58.                          </div>
  59.                          <div class="small-12 cell content-section">
  60.                              <div class="grid-x grid-padding-x">
  61.                                  <div class="small-12 medium-4 cell">
  62.                                      <div><img style="margin-bottom: 15px; border-radius: 10px;" src="{{ asset('/build/images/web/zones-2023.png') }}" /></div>
  63.                                      <h3><span style="color: cadetblue">Catch</span> the Mysteries of the Deep</h3>
  64.                                  </div>
  65.                                  <div class="small-12 medium-4 cell" style="text-align: center;">
  66.                                      <div><img style="margin-bottom: 15px; border-radius: 10px;" src="{{ asset('/build/images/web/salvage-2023.png') }}" /></div>
  67.                                      <h3><span style="color: cadetblue">Salvage</span> for rare and useful items</h3>
  68.                                  </div>
  69.                                  <div class="small-12 medium-4 cell">
  70.                                      <div><img style="margin-bottom: 15px; border-radius: 10px;" src="{{ asset('/build/images/web/craft-2023.png') }}" /></div>
  71.                                      <h3><span style="color: cadetblue">Craft</span> equipment and discover new recipes</h3>
  72.                                  </div>
  73.                              </div>
  74.                          </div>
  76.                      </div>
  77.                  </div>
  79.              </div>
  80.          </div>
  81.      </div>
  82.      <div class="grid-container fluid" style="background: #1b212d; padding: 50px 0;">
  83.          <div class="grid-x grid-padding-y">
  84.              <div class="small-12 cell">
  85.                  <div class="grid-container">
  86.                      <div class="grid-x grid-padding-y">
  87.                          <div class="small-12 cell" style="text-align: center; padding-bottom: 50px;">
  88.                              <span class="family-orgovan" style="font-size: 8em; display: block;">{{ totalCaught|number_format(0,'.',',') }}</span>
  89.                              <span class="family-orgovan" style="font-size: 1.5em; display: block; font-weight: bold;">Total Catches</span>
  90.                          </div>
  91.                          <div class="small-12 medium-6 cell" style="text-align: center;">
  92.                              <div class="grid-container" style="text-align: center;">
  93.                                  <div class="grid-x">
  94.                                      <div class="small-12 cell">
  95.                                          {% if prevCatchableRelease is not same as(null) %}
  96.                                          <img style="height: 250px; width: 250px;" src="{{ aws_s3_base_url }}{{ asset(prevCatchableRelease.imageUrl) }}" />
  97.                                          <div class="family-orgovan" style="font-size: 3em; font-weight: bold; min-height: 75px;">Newest Release</div>
  98.                                          {% else %}
  99.                                              <p class="family-orgovan" style="font-size: 8em; text-align: center; margin-top: 50px;">?</p>
  100.                                              <p style="font-size: 1.5em; padding: 0 50px;"><strong>No previous release found.</strong></p>
  101.                                          {% endif %}
  102.                                      </div>
  103.                                  </div>
  104.                              </div>
  105.                          </div>
  106.                          <div class="small-12 medium-6 cell">
  107.                              <div class="grid-container" style="text-align: center;">
  108.                                  <div class="grid-x">
  109.                                      <div class="small-12 cell">
  110.                                          {% if nextCatchableRelease is not same as(null) %}
  111.                                          <img class="silhouette" style="height: 250px; width: 250px;" src="{{ aws_s3_base_url }}{{ asset(nextCatchableRelease.imageUrl) }}" />
  112.                                          <h2 class="family-orgovan">Something New is Lurking...</h2>
  113.                                          <div id="demo" class="family-orgovan" style="font-size: 3em; font-weight: bold; min-height: 75px;"></div>
  114.                                          <div id="countdown-date" style="display: none;">{{ nextCatchableRelease.releaseAt|date('Uv') }}</div>
  115.                                          {% else %}
  116.                                              <p class="family-orgovan" style="font-size: 8em; text-align: center; margin-top: 50px;">?</p>
  117.                                              <p style="font-size: 1.5em; padding: 0 50px;"><strong>More mysteries of the deep will be revealed soon!</strong></p>
  118.                                          {% endif %}
  119.                                      </div>
  120.                                  </div>
  121.                              </div>
  122.                          </div>
  123.                      </div>
  124.                  </div>
  125.              </div>
  126.          </div>
  127.      </div>
  128. {#    <div class="grid-container fluid" style="background: #13161d; padding: 0 0 50px 0;" class="content-section">#}
  129. {#        <div class="grid-x">#}
  130. {#            <div class="small-12 cell content-section">#}
  131. {#                <div class="grid-container">#}
  132. {#                    <div class="grid-x">#}
  133. {#                        <div class="small-12 cell" style="text-align: center;">#}
  134. {#                            <span class="family-orgovan" style="font-size: 8em; display: block;">{{ totalCaught|number_format(0,'.',',') }}</span>#}
  135. {#                            <span class="family-orgovan" style="font-size: 1.5em; display: block; font-weight: bold;">Total Catches</span>#}
  136. {#                        </div>#}
  137. {#                    </div>#}
  138. {#                </div>#}
  139. {#            </div>#}
  140. {#        </div>#}
  141. {#    </div>#}
  142.      <div class="grid-container fluid" style="background: #293346; padding: 0 0 50px 0;">
  143.          <div class="grid-x">
  144.              <div class="small-12 cell content-section">
  145.                  <h2 class="family-orgovan" style="text-align: center;">Unlock Your Full Potential with <br><span style="color: gold; font-size: 2em;">Generative NFTs</span></h2>
  146.              </div>
  147.              <div class="small-12 medium-5 medium-offset-3 cell">
  148.                  <p style="padding-right: 50px; margin-top: 80px;">
  149.                      Convert your <strong>Equipment</strong> and <strong>Catches</strong> to <span data-tooltip tabindex="1" title="Unique tokens stored on the Theta blockchain.">NFTs</span> and receive
  150.                  </p>
  151.                  <ul>
  152.                      <li>a uniquely-generated image of the original item,</li>
  153.                      <li>special NFT-only stat bonuses, and</li>
  154.                      <li>a quest that when completed will boost your stats even more.</li>
  155.                  </ul>
  156.                  <p style="display:block; margin-left: 80px; margin-top: 50px;"><a href="/support#howtopurchasenft" class="button" style="color: #fff;"><strong>Learn how to start collecting NFTs</strong></a></p>
  157.              </div>
  158.              <div class="small-12 medium-4 cell">
  159.                  <div style="width: 150px; height: 150px; background: #333; border: 1px solid #666; transform: rotate(5deg); border-radius: 10px;"><img style="border-radius: 10px;" src="{{ asset('/build/images/web/nftexample-1.png') }}" /></div>
  160.                  <div style="width: 150px; height: 150px; background: #333; border: 1px solid #666; transform: rotate(-10deg); border-radius: 10px; margin: -120px 0 0 -150px;"><img style="border-radius: 10px;" src="{{ asset('/build/images/web/nftexample-2.png') }}" /></div>
  161.                  <div style="width: 150px; height: 150px; background: #333; border: 1px solid #666; transform: rotate(-10deg); border-radius: 10px; margin: -40px 0 0 50px;"><img style="border-radius: 10px;" src="{{ asset('/build/images/web/nftexample-3.png') }}" /></div>
  162.                  <div style="width: 150px; height: 150px; background: #333; border: 1px solid #666; transform: rotate(30deg); border-radius: 10px; margin: -140px 0 0 -100px;"><img style="border-radius: 10px;" src="{{ asset('/build/images/web/nftexample-4.png') }}" /></div>
  163.                  <div style="width: 150px; height: 150px; background: #333; border: 1px solid #666; transform: rotate(20deg); border-radius: 10px; margin: -30px 0 0 10px;"><img style="border-radius: 10px;" src="{{ asset('/build/images/web/nftexample-5.png') }}" /></div>
  164.                  <div style="width: 150px; height: 150px; background: #333; border: 1px solid #666; transform: rotate(-20deg); border-radius: 10px; margin: -150px 0 0 -150px;"><img style="border-radius: 10px;" src="{{ asset('/build/images/web/nftexample-6.png') }}" /></div>
  165.              </div>
  167.          </div>
  168.      </div>
  169.      <div class="grid-container fluid" style="background: #1b212d; padding: 0 0 50px 0;">
  170.          <div class="grid-x" style=" max-width: 1000px; margin: 0 auto;">
  171.              <div class="small-12 cell" style="margin-top: 50px;">
  172.                  <h2 class="family-orgovan" style="text-align: center;">Recently Created NFTs</h2>
  173.              </div>
  174.              {% for nftMetadata in recentNftMetadatas %}
  175.                  <div class="small-12 medium-3 cell">
  176.                      {% include 'explorer/includes/asset-card.html.twig' with {'nftMetadata': nftMetadata, 'app': app} %}
  177.                  </div>
  180. {#                 <div class="small-12 medium-1 cell" style="padding: 3px;">#}
  181. {#                 <span style="text-align: center; line-height: 1.3em; font-size: .8em; display: block;">#}
  182. {#                     {% if nftMetadata.wear == 1 %}#}
  183. {#                        <em>Tattered</em>#}
  184. {#                     {% elseif nftMetadata.wear == 2 %}#}
  185. {#                        <em>Dirty</em>#}
  186. {#                     {% elseif nftMetadata.wear == 3 %}#}
  187. {#                         <em>Ordinary</em>#}
  188. {#                     {% elseif nftMetadata.wear == 4 %}#}
  189. {#                         <em>Shiny</em>#}
  190. {#                     {% elseif nftMetadata.wear == 5 %}#}
  191. {#                         <em>Pristine</em>#}
  192. {#                     {% endif %}#}
  193. {#                 </span>#}
  195. {#                 <a href="{{ path('explorer_asset_detail', { id: nftMetadata.id }) }}">#}
  196. {#                     <div style="text-align: center;">{{ nftMetadata.name|length > 18 ? nftMetadata.name|slice(0,18) ~ '...' : nftMetadata.name }}</div>#}
  198. {#                     <div class="template-nft">#}
  199. {#                         <img src="{{ nftMetadata.imageUrl }}" />#}
  200. {#                         <div class="mint-num">#{{ nftMetadata.mint }}</div>#}
  201. {#                         <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">L</span>{{ nftMetadata.statStar }}</span>#}
  202. {#                         <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">D</span>{{ nftMetadata.statRectangle }}</span>#}
  203. {#                         <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">T</span>{{ nftMetadata.statCircle }}</span>#}
  204. {#                         <div style="display: block; font-size: .8em;"><em>Overall Grade:</em> <span style="font-weight: bold; font-size: 1.25em;">{{ nftMetadata.grade }}</span></div>#}
  205. {#                     </div>#}
  206. {#                 </a>#}
  208. {#                 <strong><span style="font-size: .8em; display: block; text-align: center;">{{ nftMetadata.name }}</span></strong>#}
  209. {#                 <img src="{{ nftMetadata.imageUrl }}" />#}
  210. {#                 <div class="grid-x" style="margin-top: 5px;">#}
  211. {#                     <div class="small-12 cell">#}
  212. {#                         <span style="display: block; margin: 0 1px 0 0; border-radius: 5px 5px 0 0; font-size: .7em; padding: 5px; text-align: center; color: #333; background: #f2f2f2;">{{ nftMetadata.weight }} Lbs.</span>#}
  213. {#                         <span style="display: block; margin: 0 1px 0 0; border-radius: 0 0 5px 5px; font-size: .7em; padding: 5px; text-align: center; background: green;">+ {{ nftMetadata.statStar }} Luck</span>#}
  214. {#                     </div>#}
  215. {#                 </div>#}
  216. {#                 {% if nftMetadata.username is defined and nftMetadata.username is not empty %}#}
  217. {#                     <p style="text-align: center; font-size: .7em;">{{ nftMetadata.username }}</p>#}
  218. {#                 {% else %}#}
  219. {#                     <p style="text-align: center; font-size: .7em;">{{ nftMetadata.wallet|slice(0,6) }}...{{ nftMetadata.wallet|slice(38,42) }}</p>#}
  220. {#                 {% endif %}#}
  221. {#             </div>#}
  222.              {% endfor %}
  224.          </div>
  225.      </div>
  227. {#     <div class="grid-container fluid" style="padding: 0 0 50px 0;">#}
  228. {#         <div class="grid-x grid-padding-y">#}
  229. {#             <div class="small-12 cell content-section">#}
  230. {#                 <h2 style="text-align: center;">Compete in the Community Leaderboard</h2>#}
  231. {#             </div>#}
  232. {#             <div class="small-12 medium-4 medium-offset-2 cell">#}
  233. {#                 <p style="padding-right: 50px;">When your catches are converted to NFTs they are weighed, graded, and assigned a score.#}
  234. {#                     Compete with other anglers and prove you have what it takes to top the leaderboards.</p>#}
  235. {#                 <p>Oh, we almost forgot to mention that your <strong>NFT catches are also pretty lucky</strong>. Equip them in your#}
  236. {#                 <em>charm</em> slot and boost your <em>luck</em> to the max.</p>#}
  237. {#                 <p style="display:block; text-align: center; margin-top: 50px;"><a href="/leaderboard/catchable/season-three" class="button" style="color: #fff; width: 200px;"><strong>See the Leaders</strong></a></p>#}
  238. {#             </div>#}
  239. {#             <div class="small-12 medium-4 end cell">#}
  240. {#                 <div class="repsonsive-embed"><img style="border-radius: 10px; border: 3px solid #293346;" src="{{ asset('/build/images/web/leaderboard-2023.png') }}" /></div>#}
  241. {#             </div>#}
  242. {#         </div>#}
  243. {#     </div>#}
  245.      <div class="grid-container fluid" style="background: #293346; padding: 0 0 50px 0;">
  246.        <div class="grid-x grid-padding-y">
  247.           <div class="small-12 cell">
  248.               <h2 class="family-orgovan" style="text-align: center;">Visit our Roadmap</h2>
  249.           </div>
  250.           <div class="small-12 cell">
  251.               <div class="grid-container" style="max-width: 1500px;">
  252.                   <div class="grid-x">
  253.                       <div class="small-12 cell">
  254.                           <p style ="text-align: center;">You can view the roadmap on trello embedded below or at <strong><a href="https://trello.com/b/aT6FERaq/fishers-quest-roadmap">this link!</a></strong></p>
  255.                       </div>
  256.                       <div class="small-12">
  257.                           <iframe id="fishersquest" mozallowfullscreen="false"
  258.                                   allow="autoplay"
  259.                                   src="https://trello.com/b/aT6FERaq.html"
  260.                                   style="display: block; border-width: 0px; height:80vh; width:100%; max-height: 1080px;"
  261.                                   name="Fisher's Quest Roadmap"
  262.                                   scrolling="no"
  263.                                   msallowfullscreen="false"
  264.                                   allowfullscreen="false"
  265.                                   webkitallowfullscreen="false"
  266.                                   allowtransparency="true"
  267.                                   width=100%
  268.                           >
  269.                           </iframe>
  270.                       </div>
  271.                   </div>
  272.               </div>
  273.           </div>
  274.        </div>
  275.      </div>
  277. {#     <div class="grid-container fluid" style="padding: 0 0 50px 0;">#}
  278. {#         <div class="grid-x grid-padding-y">#}
  279. {#             <div class="small-12 cell content-section">#}
  280. {#                 <h2 style="text-align: center;">Catch + NFT Statistics</h2>#}
  281. {#             </div>#}
  282. {#             <div class="small-12 medium-6 medium-offset-3 cell content-section">#}
  283. {#                 <table>#}
  284. {#                     <thead>#}
  285. {#                     <th>Tier</th>#}
  286. {#                     <th>Total Caught</th>#}
  287. {#                     <th>Total NFTs Created</th>#}
  288. {#                     </thead>#}
  289. {#                     <tbody>#}
  290. {#                     {% for catchableRecord in catchableRecords %}#}
  291. {#                         <tr>#}
  292. {#                             <td><span style="font-family: 'orgovan';">#}
  293. {#                                {% if catchableRecord.tier == 1 %}#}
  294. {#                                    <span style="color: #C3C3C3;">Fodder</span>#}
  295. {#                                {% elseif catchableRecord.tier == 2 %}#}
  296. {#                                    <span style="color: #64AD41;">Common</span>#}
  297. {#                                {% elseif catchableRecord.tier == 3 %}#}
  298. {#                                    <span style="color: #62BDE5;">Uncommon</span>#}
  299. {#                                {% elseif catchableRecord.tier == 4 %}#}
  300. {#                                    <span style="color: #982FE7;">Rare</span>#}
  301. {#                                {% elseif catchableRecord.tier == 5 %}#}
  302. {#                                    <span style="color: #E8EC32;">Epic</span>#}
  303. {#                                {% elseif catchableRecord.tier == 6 %}#}
  304. {#                                    <span style="color: #DB12A5;">Legendary</span>#}
  305. {#                                {% elseif catchableRecord.tier == 7 %}#}
  306. {#                                    <span style="color: #F56211;">Extreme</span>#}
  307. {#                                {% endif %}#}
  308. {#                                </span>#}
  309. {#                             </td>#}
  310. {#                             <td>{{ catchableRecord.caughtQty }}</td>#}
  311. {#                             <td>{{ catchableRecord.convertNftQty }}</td>#}
  312. {#                         </tr>#}
  313. {#                     {% endfor %}#}
  314. {#                     </tbody>#}
  315. {#                 </table>#}
  316. {#                 #}
  317. {#             </div>#}
  318. {#         </div>#}
  319. {#     </div>#}
  321. {#     <div class="grid-container">#}
  322. {#         <div class="grid-x grid-padding-y">#}
  323. {#             <div class="small-12 cell content-section">#}
  324. {#                 <h2 style="text-align: center;">Roadmap</h2>#}
  325. {#                 <div class="grid-x grid-padding-x">#}
  326. {#                     <div class="small-12 cell">#}
  327. {#                         <section id="timeline">#}
  328. {#                             <article>#}
  329. {#                                 <div class="inner">#}
  330. {#                                    <span class="date">#}
  331. {#                                        <span class="month">JAN</span>#}
  332. {#                                        <span class="year">2022</span>#}
  333. {#                                    </span>#}
  334. {#                                     <h2>Salvaging & Crafting</h2>#}
  335. {#                                     <p>There is now salvaging and crafting in the game, and more to come later on new salvage and items to craft in the future!</p>#}
  336. {#                                 </div>#}
  337. {#                             </article>#}
  338. {#                             <article>#}
  339. {#                                 <div class="inner">#}
  340. {#                                      <span class="date">#}
  341. {#                                        <span class="month">FEB</span>#}
  342. {#                                        <span class="year">2022</span>#}
  343. {#                                      </span>#}
  344. {#                                     <h2>New Catches and Fishing Seasons</h2>#}
  345. {#                                     <p>There will be new catches coming this month, along with the exciting new fishing seasons!</p>#}
  346. {#                                 </div>#}
  347. {#                             </article>#}
  348. {#                             <article>#}
  349. {#                                 <div class="inner">#}
  350. {#                                      <span class="date">#}
  351. {#                                        <span class="month">MAR</span>#}
  352. {#                                        <span class="year">2022</span>#}
  353. {#                                      </span>#}
  354. {#                                     <h2>AFK Fishing and Minigames</h2>#}
  355. {#                                     <p>Players will be able to setup a few rods to AFK fish, and have more minigames to play in!</p>#}
  356. {#                                 </div>#}
  357. {#                             </article>#}
  358. {#                             <article>#}
  359. {#                                 <div class="inner">#}
  360. {#                                      <span class="date">#}
  361. {#                                        <span class="month">Q2</span>#}
  362. {#                                        <span class="year">2022</span>#}
  363. {#                                      </span>#}
  364. {#                                     <h2>Here's what's coming later!</h2>#}
  365. {#                                     <p>Marketplace research+production, new animations+environment, new NPCs+quests, and random events!</p>#}
  366. {#                                 </div>#}
  367. {#                             </article>#}
  368. {#                         </section>#}
  369. {#                     </div>#}
  370. {#                 </div>#}
  371. {#             </div>#}
  372. {#         </div>#}
  373. {#     </div>#}
  375.  {% endblock %}