app/template/user_data/ngchold.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  5. <link rel="stylesheet" href="/css/ngc_sm.css" media="screen and (max-width:640px)" />
  6. <link rel="stylesheet" href="/css/ngc_pc.css" media="screen and (min-width:641px)" />
  8. <div class="kasowarap">
  9.       <div class="kaso_h1title">
  10.       <p>NGC Appraisal</p>
  11.       <h1>NGC鑑定</h1>
  12.     </div>
  13.     
  14.       <div class="nav_menu"><div class="nav_menu_wrap">
  15.       <ul>
  16.         <li>
  17.           <a href="/user_data/ngc"><p>鑑定代行と流れ</p></a>
  18.         </li>
  19.         <li class="on">
  20.           <a href="/user_data/ngchold"><p>NGC<br class="sm">スラブケース</p></a>
  21.         </li>
  22.         <li>
  23.           <a href="/user_data/ngcgrading"><p>グレーディング</p></a>
  24.         </li>
  25.         <li>
  26.           <a href="/user_data/ngc70"><p>70グレード表</p></a>
  27.         </li>
  28.       </ul>
  29.     </div></div> <!-- nav_menu -->
  30.     
  31. <div class="main_banner">
  32.     <p>NGCスラブケース<br><span>NGC Holders</span></p>
  33.     <style>
  34.       .main_banner {
  35.         background: center center / auto 100% url(/img/ngc_case.jpg) no-repeat;
  36.       }
  37.     </style>
  38.   </div> <!-- main_banner -->
  40.   <div class="infor">
  41.     <div class="infor_wrap">
  42.       <ul class="th_1">
  43.         <li><img src="/img/ngc_case_info.webp" alt=""></li>
  44.         <li>
  45.           <h4>コイン鑑定と格付けの分野で世界最高峰の評価を得る認証機関</h4>
  46.           <p>
  47.             NGCは業界の標準を築く存在として、厳密な基準と公正な評価を提供し、これまでに累計5000万点以上のコインを鑑定してきました。歴史的価値から市場での取引適正まで、多角的な視点での鑑定は、収集家や投資家から絶大な信頼を得ています。<br>
  48.             NGCの鑑定済みコインは、世界中のオークション市場で公式な価値基準とされ、その透明性と専門性は揺るぎないものです。コインの真価を見極め、未来の資産価値を確かなものにするために、グローバルスタンダードであるNGCの鑑定サービスをご利用ください。
  49.           </p>
  50.         </li>
  51.       </ul>
  52.       <ul class="th_2">
  53.         <li><img src="/img/ngc_case_holder.webp" alt=""></li>
  54.         <li>
  55.           <h4>業界最先端の保護ケース「NGCスラブケース」</h4>
  56.           <p>
  57.             NGCは、世界トップクラスのコイン鑑定機関として、コイン、トークン、メダルの長期保存と安全な展示を実現しています。研究開発には100万ドル以上を投じ、世界的な評価を受けるその技術は、スミソニアン博物館をはじめとする著名な美術館・博物館でも採用されています。
  58.           </p>
  59.           <p>
  60.             NGCスラブケースは、高品質な不活性素材を使用し、保護性能と視認性に優れた設計が特徴です。複数のセキュリティ機能が組み込まれ、コレクターやディーラーにとって不可欠な存在です。
  61.           </p>
  62.           <p>
  63.             NGCスラブケースは、美しさと安全性の両立を目指すコレクターにとって、最適なソリューションを提供します。市場での価値保存と展示の新しい基準として、信頼と評価を得ています。
  64.           </p>
  65.         </li>
  66.       </ul>
  67.       <ul class="chart">
  68.         <li>
  69.           <h4>世界最大規模の鑑定実績</h4>
  70.           <p>
  71.             NGC has graded more than<br>
  72.             <b>60,000,000 coins</b><br>
  73.             from virtually every past and present country
  74.           </p>
  75.           <p>
  76.             世界中のコイン鑑定業界において圧倒的な存在感を誇り、これまでに6,000万点以上のコインを鑑定してきました。過去から現在に至るまで、ほぼすべての国のコインを対象とし、その鑑定範囲は業界最大級です。この膨大な実績は、NGCの専門性と信頼性の高さを物語っています。
  77.           </p>
  78.         </li>
  79.         <li>
  80.           <div id="results__view"></div>
  82.           <!-- Include D3.js -->
  83.           <script src="https://d3js.org/d3.v7.min.js"></script>
  84.           
  85.           <script>
  86.             "use strict";
  88.             console.log(document.getElementById("results__view"));
  90.             let width, height, radius, transformX, transformY;
  92.             if (window.innerWidth > 640) {
  93.                 width = 700;
  94.                 height = 300;
  95.                 transformX = width / 2;
  96.                 transformY = height / 2;
  97.             } else {
  98.                 width = window.innerWidth * 0.95;
  99.                 height = window.innerWidth * 1.2;
  100.                 transformX = 0;
  101.                 transformY = 0;
  102.             }
  103.             radius = Math.min(width, height) / 2;
  105.             let svg = d3
  106.                 .select("#results__view")
  107.                 .append("svg")
  108.                 .attr("width", width)
  109.                 .attr("height", height)
  110.                 .append("g")
  111.                 .attr("transform", `translate(${transformX}, ${transformY})`);
  113.             /* GROUP */
  114.             svg.append("g").attr("id", "slices");
  115.             svg.append("g").attr("id", "responses");
  116.             svg.append("g").attr("id", "lines");
  117.             svg.append("g").attr("id", "legend");
  119.             let arc = d3
  120.                 .arc()
  121.                 .innerRadius(radius * 0.38)
  122.                 .outerRadius(radius * 0.72);
  124.             let outerArc = d3
  125.                 .arc()
  126.                 .innerRadius(radius * 0.8)
  127.                 .outerRadius(radius * 0.8);
  129.             /* DATA */
  130.             let percent = [
  131.                 { rep: "南アメリカ", percent: 3.53 },
  132.                 { rep: "アジア", percent: 17.69 },
  133.                 { rep: "オーストラリア", percent: 2.63 },
  134.                 { rep: "アフリカ", percent: 3.91 },
  135.                 { rep: "ヨーロッパ", percent: 27.01 },
  136.                 { rep: "北アメリカ", percent: 45.23 }
  137.             ];
  139.             let pie = d3.pie().value(d => d.percent).sort(null)(percent);
  141.             let colors = ["#e14956", "#fe912a", "#ffcd64", "#63d8be", "#34b2e4", "#07517e"];
  142.             let color = d3
  143.                 .scaleOrdinal()
  144.                 .domain(percent.map(d => d.rep))
  145.                 .range(colors);
  147.             /* VIEW */
  148.             // Slices
  149.             let slices = svg
  150.                 .select("#slices")
  151.                 .selectAll(".slice")
  152.                 .data(pie)
  153.                 .enter()
  154.                 .append("path")
  155.                 .attr("fill", d => color(d.data.rep))
  156.                 .attr("stroke", "#ffffff")
  157.                 .attr("stroke-width", "2px")
  158.                 .attr("d", arc({ startAngle: 0, endAngle: 0 }));
  160.             function animateSlices() {
  161.                 return new Promise(resolve => {
  162.                     slices
  163.                         .transition()
  164.                         .duration(1000)
  165.                         .attrTween("d", function (d) {
  166.                             this._current = this._current || { startAngle: 0, endAngle: 0 };
  167.                             let interpolate = d3.interpolate(this._current, d);
  168.                             this._current = interpolate(1);
  169.                             return t => arc(interpolate(t));
  170.                         })
  171.                         .on("end", resolve);
  172.                 });
  173.             }
  175.             // Lines
  176.             let lines = svg
  177.                 .select("#lines")
  178.                 .selectAll("polyline")
  179.                 .data(pie)
  180.                 .enter()
  181.                 .append("polyline")
  182.                 .style("fill", "none")
  183.                 .style("stroke", "#a1a1a1")
  184.                 .style("stroke-width", "1px")
  185.                 .style("opacity", 0);
  187.             function animateLines() {
  188.                 return new Promise(resolve => {
  189.                     lines
  190.                         .transition()
  191.                         .duration(800)
  192.                         .style("opacity", 1)
  193.                         .attr("points", d => {
  194.                             let pos = outerArc.centroid(d);
  195.                             pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
  196.                             return [arc.centroid(d), outerArc.centroid(d), pos];
  197.                         })
  198.                         .on("end", resolve);
  199.                 });
  200.             }
  202.             // Responses
  203.               let resp = svg
  204.                 .select("#responses")
  205.                 .selectAll("text")
  206.                 .data(pie)
  207.                 .enter()
  208.                 .append("text")
  209.                 .attr("fill", "#1c1c1c")
  210.                 .attr("dy", ".35em")
  211.                 .style("font-size", ".9em")
  212.                 .style("opacity", 0)
  213.                 .attr("transform", `translate(0, 0)`);
  214.                 
  215.                 resp
  216.                   .append("tspan")
  217.                   .style("font-weight", "700")
  218.                   .text(d => d.data.rep);
  220.                 resp
  221.                   .append("tspan")
  222.                   .style("font-weight", "400")
  223.                   .text(d => ` - ${d.data.percent.toFixed(2)}%`)
  224.                   .attr("dx", "5");
  226.                 function animateReps() {
  227.                   return new Promise(resolve => {
  228.                     resp
  229.                       .transition()
  230.                       .duration(800)
  231.                       .style("opacity", 1)
  232.                       .attrTween("transform", function (d) {
  233.                         let currentPos = this._current || { startAngle: 0, endAngle: 0 };
  234.                         let interpolate = d3.interpolate(currentPos, d);
  235.                         this._current = interpolate(1);
  236.                         return function (t) {
  237.                           let d2 = interpolate(t);
  238.                           let pos = outerArc.centroid(d2);
  239.                           pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
  240.                           return `translate(${pos})`;
  241.                         };
  242.                       })
  243.                       .styleTween("text-anchor", function (d) {
  244.                         let currentPos = this._current || { startAngle: 0, endAngle: 0 };
  245.                         let interpolate = d3.interpolate(currentPos, d);
  246.                         this._current = interpolate(1);
  247.                         return function (t) {
  248.                           let d2 = interpolate(t);
  249.                           return midAngle(d2) < Math.PI ? "start" : "end";
  250.                         };
  251.                       })
  252.                       .on("end", resolve);
  253.                   });
  254.                 }
  257.             // Legend
  258.             let legendItems = svg
  259.                 .select("#legend")
  260.                 .selectAll(".legend-item")
  261.                 .data(percent)
  262.                 .enter()
  263.                 .append("g")
  264.                 .attr("class", "legend-item")
  265.                 .attr("transform", (d, i) => `translate(0, ${i * 24})`);
  267.             legendItems
  268.                 .append("rect")
  269.                 .attr("width", 18)
  270.                 .attr("height", 18)
  271.                 .style("fill", d => color(d.rep));
  273.             legendItems
  274.                 .append("text")
  275.                 .attr("x", 24)
  276.                 .attr("y", 13)
  277.                 .style("font-size", "12px")
  278.                 .text(d => `${d.rep} - ${d.percent.toFixed(2)}%`);
  280.             function animateLegend() {
  281.                 return new Promise(resolve => {
  282.                     svg
  283.                       .select("#legend")
  284.                       .transition()
  285.                       .duration(500)
  286.                       .style("opacity", 1)
  287.                       .on("end", resolve);
  288.                 });
  289.             }
  291.             // Intersection Observer
  292.             const observer = new IntersectionObserver((entries, observer) => {
  293.                 entries.forEach(entry => {
  294.                     if (entry.isIntersecting) {
  295.                         observer.unobserve(entry.target);
  296.                         animateSlices()
  297.                             .then(animateLines)
  298.                             .then(animateReps)
  299.                             .then(animateLegend);
  300.                     }
  301.                 });
  302.             }, { threshold: 0.5 });
  304.             observer.observe(document.querySelector("#results__view"));
  306.             function midAngle(d) {
  307.                 return d.startAngle + (d.endAngle - d.startAngle) / 2;
  308.             }
  310.           </script>
  312.         </li>
  313.       </ul>
  314.     </div>
  315.   </div>
  317.     
  318. </div><!--//kasowarap-->   
  320. {% endblock %}